R0cc0 Posted May 8, 2013 Report Posted May 8, 2013 Header ( antet )Caracteristici si specificatii ( functii si date tehnice ) .Tagul " HEADER " este folosit pentru a reprezenta un grup introductiv sau de navigatie sau AISD , aceasta definitie este aparent vaga , dar cuprinde conceptele-cheie pentru a intelege pe deplin functia cu aceasta ( eticheta ) .1 : Elementul " HEADER " este un continator al altor elemente .2 : " HEADER " nu trebuie confundat cu ceea ce este ( antet / cap ) principal al unui document ( acesta fiind in ziua de astazi definit cu tagul " <h1> " .3 : Natura si scopul elementului <header> nu depinde de pozitia sa in documet , ci de " contenturile " sale ( AISD in navigare sau elemente introductive ) " .4 : Utilizarea sa nu este obligatorie , iar în unele cazuri , poate fi de prisos daca nu este utilizat intr-un mod adecvat .<header> <h1>Acesta este un titlu</h1> <h2>Acesta este un sub-titlu</h2> [...]</header>HEADER : exemple concrete <head> <meta charset="utf-8"> <title> We5! R0cc0 face tutorial HTML5 </title> <link rel="stylesheet" href="monitor.css" media="screen"> <link rel="stylesheet" href="printer.css" media="print"> <link rel="stylesheet" href="phone_landscape.css" media="screen and (max-device-width: 480px) and (orientation: landscape)"> <link rel="stylesheet" href="phone_portrait.css" media="screen and (max-device-width: 480px) and (orientation: portrait)"> <link rel="icon" href="standard.gif" sizes="16x16" type="image/gif"> <link rel="apple-touch-icon" href="iphone.png" sizes="57x57" type="image/png"> <link rel="icon" href="vector.svg" sizes="any" type="image/svg+xml"></head>De aici in colo putem sa ne ocupam de " <body> " ( corpul paginii ) , incepand exact cu tagul " HEADER , care cu elementul " <hgroup> " defineste titlul principal al documentului ( siteului ) si asa zisa ( tag-line ) .<header> <hgroup> <h1>We5! R0cc0 face tutorial HTML5</h1> <h2>Sa profitam si sa invatam HTML5!</h2> </hgroup></header>Dar HEADER nu trebuie neaparat sa contina doar titluri si sub-titluri " <hn>! > , daca titlul sau sub-titlu principale sunt exact elemente introductive ale continuturilor succesive , e natural un AISD de navigare o lista de link-uri care va forma bara de navigare principala a siteului . Asa ca putem incepe sa completam structura primului <header> .<header> <hgroup> <h1>We5! R0cc0 face tutorial HTML5</h1> <h2>Sa profitam si sa invatam HTML5!</h2> </hgroup> <nav> <h1>Navigation:</h1> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">Autorii</a></li> <li><a href="/refactoring">Proiectul " HTML5 "</a></li> <li><a href="/archives">Archive</a></li> </ul> </nav></header>In schema de mai jos am realizat grafic codul sematic reprezentat mai sus .Am introdus o sectie de navigare ( <nav> </nav> ) , introdusa de un element <h1> si structurata cu o lista neordonata .In realitate , meniul de navigare nu ar trebuii neaparat sa fie introdus in " <header> " , dar in exemplul de mai sus nu se putea altfel , insa exista mai multe tipuri de posibilitati in care meniul de navigare poate fii usor dezlegat de antetul documentului introductiv .<section> <h1>Ultimul post</h1> <article> [...] </article></section>NOTA : In primul rand , tagul " <h1> " care este titlul principal in sectie nu este inchis intr-un element " <header> " , atunci titlurile " <hn " in interiorul unui continut " <header> " nu este obligatoriu .In acest punct , trebuie sa definim doua elemente fundamentale pentru structura unui post de blog : titlul si data . Sunt cert AISD introductive , daca ne uitam la definitiile de la care am pornit . Este ok si cu mult sens sa le inchidem cu tagul " <header > " .<section> <h1>Ultimul post</h1> <article> <strong><header> <time datetime="2013-08-05" pubdate>Miercuri 08 Mai</time> <h2>Noi descoperiri pentru tagul video!</h2> </header></strong> <p> [...] </p> </footer> [...] </footer> </article></section>Acum asta poate fi reprezentata grafic astfel : Tabela browserelor suportate : Footer ( subsol / sub-pagina ) Elementul " <footer> " trebuie sa contina in general informatii despre : a ) Autorul site-ulul , tutorialului ( " R0cc0 " ) .b ) Legame intre documentele corelate .c ) Datele de copy-right @ R0cc0 .d ) S.A.M.D Referitor la aportul sau AISD pentru o pagina WEB , pare a fii totul clar , dar mai complex este utilizarea sa practica .1 : Nu este necesara folosirea sa la sfarsit de pagina .2 : Cand contine sectiuni intregi , este reprezentat : apendici , indici , note , acorduri de licenta S.A.M.D 3 : Nu inroduce o noua sectie , deci nu este rilevant pentru " OUTLINER " .4 : In internul unei pagini WEB pot di prezente diverse " <footer> " , chiar mai multe de unu pentru un element .<footer> <small>©2013 Autor continut . Design by R0cc0</small></footer>FOOTER : exemple concrete :<footer> <dl> <dt>Creat de</dt> <dd><address><a href="mailto:r.rocco@rocketmail.com">R0cc0@R0cc0</a></address></dd> <dt>Un ultim argument</dt> <dd><time datetime="2013-05-08" pubdate>Miercuri 08 Mai</time></dd> <dd> </dl><small>Tot continutul este ok </small></footer>In urmatoarea schema grafica am reprezentat tot ceea ce codul nostru AISD a realizat in acest tutorial .Asa cum integul document , fiecare articol va avea un" <footer> " , continand numele autorului , si alte eventuale informatii .<section> <h1>Ultimul post</h1> <article> <header> [...] </header> <p> [...] </p> <footer> <dl> <dt>autor:</dt> <dd><address><a href="mailto:r.rocco@rocketmail.com">R0cc0@R0cc0</a></address></dd> <dt>categoria: </dt> <dd><a href="categoria/multimedia">multimedia</a>,</dd> <dt>tags: </dt> <dd><a href="tags/video">video</a>,</dd> <dd><a href="tags/tutorial">tutorial</a>,</dd> <dt>permalink: </dt> <dd><a href="2013/08/05/noi-descoperiri">permalink</a>,</dd> <dt>rank:</dt> <dd><meter value="3.0" min="0.0" max="5.0" optimum="5.0">ranked 3/5</meter></dd> </dl> </footer> </article></section>NOTA : Ar trebuii sa luam in considerare chiar si introducerea informatiilor referitoare la autorul articolului in internul tagului " <dl> " ; pentru ca HTML5 ne specifica ca acest element vine numit " continator de " metadate " , deci semantic corect in internul " <footer> " .Decci si tutorialul nostru , poate fi reprezentat grafic , toate informatiile continute in " <footer> " , pentru o mai mare destindere , le vom numii " metadate " .Elementul " <footer> " , poate fii introdus chiar si la inceputul paginii , imediat dupa " <body> " , sau in deschiderea unui tag " <article> " , dar in aceste cazuri nu ar trebuii sa contina elemente introductive despre continutul introductiv . Uzata sa in aceasta pozitie fiind atribuita doar practic , exemplu , duplicarea de " <footer> " in subsolul paginii , cand continutul fiind acelasi dar lung .<body><footer> <a href="#indice">Innapoi la indice</a></footer><section> [Continut foarte lung...]<section><section> [Continut foarte lung...]<section><section> [Continut foarte lung...]<section><footer> <a href="#indice">Innapoi la indice</a></footer></body>Tabela browserelor suportate : Scuzati greselile gramaticale The end , va urma ... Quote
