Tutorial HTML5 ( 2 )

R0cc0 · 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 ...

Sign In

Tutorial HTML5 ( 2 )

Recommended Posts

R0cc0

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Pages