El contingut de la capçalera consisteix en tres parts:

• La imatge del logotip
• La navegació principal
• La nevagació secundària

La incorporació de la imatge del logotip a l'estructura HTML es tradueix amb l'etiqueta img, que correspon a un element buit ¹⁾, i, per tant s'han de tancar per mitjà de la inclusió al final d'una barra inclinada: <img />.

Els atributs que han d'acompanyar sempre a l'element img són: src, que indica on es troba l'arxiu de la imatge i alt, que ofereix un text alternatiu a la imatge i, per tant, proporciona una informació textual. Això és important per diversos motius, en el cas que, per diferents circumstàncies, la imatge no es carregui; o bé que es deshabiliti la càrrega d'imatges per mitjà del navegador, com en el cas dels navegadors només textuals i, especialment, els lectors de pantalla. Aquests dos atributs (src i alt) són per tant, imprescindibles.

Obriu l'arxiu index.html i incorporeu les següents línies entre les etiquetes

.

<div id="capcalera"> <!-- inici de capçalera -->
 
    <img src="imatges/logotip.png" alt="Logotip de la pàgina"/>
 
</div> <!-- final de capçalera -->

La navegació principal consta de quatre enllaços que apunten a diferents pàgines del lloc web:

• design apunta a la pàgina design.html
• inspiration apunta a la pàgina inspiration.html
• personal apunta a la pàgina personal.html
• tutorials apunta a la pàgina tutorials.html

L'element a (d'ancoratge) s'encarrega d'establir l'enllaç entre dos recursos web -la pàgina que enllaça i el recurs enllaçat-. Habitualment aquests enllaços relacionen pàgines web, però també poden enllaçar amb altres tipus de recursos com imatges, arxius, documents o programes.

L'etiqueta que defineix un enllaç és <a>, i la tanca </a>. Va sempre acompanyada d'un atribut molt especial i que ja us hem parlat abans: href (acrònim de Hipertext Reference, és a dir, referència de l'hipertext). El valor d'aquest atribut indica l'objectiu de l'enllaç, és a dir, el lloc on el navegador a d'anar quan l'usuari clica sobre l'enllaç.

Una primera traducció del disseny de la navegació principal a l'HTML seria:

<a href="design.html">Design</a>
<a href="inspiration.html">Inspiration</a>
<a href="personal.html">Personal</a>
<a href="tutorials.html">Tutorials</a>

Aquests enllaços anirien després de la imatge. Si deseu els canvis de l'arxiu index.html i refresqueu la finestra del navegador, trobareu un resultat ben semblant a la següent captura de pantalla:

És una forma vàlida, però no del tot correcta. Recordeu que parlem de llista d'enllaços i els navegadors ho han d'interpretar com tal. En definitiva, heu de ser semànticament correctes i estructurar la informació en funció d'allò què significa i mai com es visualitza.

L'HTML proporciona diferents tipus d'elements per incorporar llistes a l'estructura de la pàgina web.

Una llista d'ítems es pot representar en una pàgina web de tres maneres diferents segons el tipus d'informació que presentin. El llenguatge XHTML disposa de tres estructures que es corresponen a cadascuna d'elles:

• llista desordenada: quan l'ordre dels ítems de la llista no és rellevant.
• llista ordenada: quan l'ordre dels ítems de la llista és rellevant.
• llista de definicions.

En aquest cas escollireu la llista desordenada ja que l'ordre o seqüència dels elements que les forma no és important o bé no existeix un criteri que defineixi una seqüència concreta. L'etiqueta que especifica la W3C per a les llistes desordenades és <ul> (unordered list). L'etiqueta <li> (list item) marca els elements dins de l'estructura d'una llista, i és una etiqueta comú tant a les llistes desordenades com a les ordenades. Veieu primer l'exemple d'estructura d'una llista desordenada:

<ul>
  <li>Enllaç A</li>
  <li>Enllaç B</li>
  <li>Enllaç C</li>
  <li>Enllaç D</li>
</ul>

I ara apliqueu aquesta estructura a la llista d'enllaços del menú de navegació principal. Només heu de substituir el text Enllaç … per l'enllaç corresponent. El resultat seria el següent:

<ul>
  <li><a href="design.html">Design</a></li>
  <li><a href="inspiration.html">Inspiration</a></li>
  <li><a href="personal.html">Personal</a></li>
  <li><a href="tutorials.html">Tutorials</a></li>
</ul>

Incorporeu aquest fragment a l'arxiu index.html i refresqueu la finestra del navegador.

Ja teniu funcionant correctament la llista d'enllaços. No us preocupeu ara si l'estructura no té cap semblança amb el disseny realitzat al mòdul 3. Recordeu que heu de separar l'estructura del disseny i que, aquest últim, vindrà de la mà dels full d'estils o CSS.

L'estructura de la navegació secundària és idèntica a la de la navegació principal:

<ul>
  <li><a href="about.html">about</a></li>
  <li><a href="login.html">login</a></li>
</ul>

Afegiu darrera de la llista del menú principal la llista de la navegació secundària al fitxer index.html i refresqueu el navegador.

Comproveu que l'estructura de l'arxiu index.html és correcte:

  <div id="capcalera"> <!-- inici de capçalera -->
    <img src="imatges/logotip.png" alt="Logotip de la pàgina"/>
    <ul>
  	<li><a href="design.html">Design</a></li>
 	<li><a href="inspiration.html">Inspiration</a></li>
 	<li><a href="personal.html">Personal</a></li>
	<li><a href="tutorials.html">Tutorials</a></li>
    </ul>
    <ul>
  	<li><a href="about.html">about</a></li>
 	<li><a href="login.html">login</a></li>
    </ul>
  </div> <!-- final de capçalera -->