Definició de l'estructura

Veieu el següent esquema del disseny final que vàreu realitzar al Mòdul 3:

Fixeu-vos que hem diferenciat cada secció important de la pàgina com a regió única, és a dir, en quatre regions:

  1. La capçalera
  2. La columna central
  3. La columna lateral
  4. El peu de la pàgina.

No és pas díficil identificar una primera estructura de la pàgina en els següents termes:

  • Pàgina
    • Capçalera
      • Logotip
      • Navegació prinicipal
      • Navegació secundària
    • Columna central
      • Articles
    • Columna lateral
      • Latest tweets
      • Tags
    • Peu

Sense oblidar aquesta estructura, passeu a la segona part d'aquesta pràctica.

L'esquelet de la pàgina

Obriu el vostre editor favorit1) i creeu un fitxer nou. Immediatament, deseu aquest fitxer en blanc com a index.html.

Per què index.html?
Quan feu una petició des del navegador a qualsevol domini i no especifiqueu la pàgina, el servidor web us adreçarà automàticament a la pàgina index. Verifiqueu el següent exemple: http://www.xtec.cat i http://www.xtec.cat/index.htm apunten a la mateixa pàgina.

L'extensió de qualsevol document web és html i no pas htm. htm no significa res i el seu ús es remunta al vell sistema operatiu DOS: el sistema de fitxers era tan limitat que no entenia cap fitxer amb una extensió de més de tres lletres.

Declaració del tipus de document

A la primera línia d'un document XHTML ha d'aparèixer sempre la declaració del tipus de document, dins de l'etiqueta <!DOCTYPE>. Cada pàgina HTML necessita aquesta declaració del tipus de document per ajudar als vaŀlidadors a contrastar el llenguatge de marques que esteu utilitzant. Sense aquesta declaració un document XHTML no és vàlid.

És molt important que valideu els vostres documents HTML abans d'aplicar qualsevol full d'estil o comportament amb Javascript. Un document no vàlid pot ser el causant principal que els fulls d'estil no funcionin correctament o que el codi Javascript no realitzi la tasca esperada.

Escriviu la següent declaració del tipus de document (doctype) al principi de l'arxiu index.html. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Element arrel i idioma

Una pàgina web és, en realitat, una estructura jeràrquica d'elements semblant a un document XML. L'element html és l'element arrel d'aquesta estructura. La resta d'elements del document es troben dins de l'element html. Per tant, immediatament després de la declaració del tipus de document s'obre l'element arrel amb la etiqueta <html> i es tanca amb </html>. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
</html>

Atributs

Cada etiqueta, com ja heu vist a la pràctica anterior, pot contenir diferents atributs a dins de la declaració aquests atributs us permeten descriure amb més detall l'etiqueta. Veieu seguidament un exemple de l'ús dels atributs dins d'una etiqueta: 

<alumne nom="Lola" cognom="Mento">
 
</alumne>

En aquest exemple l'etiqueta correspon a <alumne> i els atributs a nom i cognom. Tornant a l'HTML, l'etiqueta <html> conté dos atributs necessaris:

  • l'especificació d'un espai de noms (atribut xmlns) que informa al navegador del que significa cada etiqueta i atribut del llenguatge XHTML.
  • l'especificació de l'idioma del document (atribut lang). No especificar l'idioma del contingut del document va en detriment de l'accessibilitat i d'una correcta interpretació dels continguts.

Imagineu que redacteu un document en català, però no heu especificat l'idioma. Un cercador podria confondre la paraula anglesa home amb la paraula home en català, que s'escriuen igual, però tenen significats completament diferents. Aquesta confusió semàntica es pot evitar fàcilment declarant l'idioma principal del document.

D'altra banda, els lectors de pantalles, que fan servir les persones amb discapacitats visuals, pronunciaran el contingut del document segons la declaració de l'idioma principal. Si aquest idioma no està declarat es poden produir situacions no desitjades quan el lector de pantalles pronunciï les paraules en anglès d'un text que està redactat en català.

Finalment, editeu de nou l'arxiu per incorporar aquests dos atributs a l'etiqueta <html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ca">
 
</html>

La capçalera i el cos del document

Hi han dos elements, la capçalera2) i el cos que sempre trobareu a dins de l'element html.

La capçalera

La capçalera s'obre amb l'etiqueta <head> i es tanca amb </head>. Aquesta etiqueta va a continuació de l'etiqueta <html>. Entre aquestes dues etiquetes se situa tota una sèrie d'informació relativa al document: tipus de contingut, títol, metadades, enllaços, referències,…

Dos elements han d'aparèixer obligatòriament a la capçalera:

  • el títol del document, que s'obre amb l'etiqueta <title> i es tanca amb </title>. El títol que li poseu al document és el que apareixerà a la part superior de la finestra de navegador. També apareix a la pestanya del navegador on es troba obert el document (en el cas dels navegadors que suporten pestanyes), i és el valor que identifica la web al llistat quan es desa com a marcador (bookmark).
  • la declaració del tipus de contingut i el joc de caràcters que especificareu als atributs http-equiv i content de l'etiqueta <meta>

Obriu l'editor i afegiu les següents línies al document: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ca">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Títol de la pàgina</title>
  </head>
</html>

El cos del document

El cos inclou el contingut visible del document XHTML al navegador. S'inicia amb l'etiqueta <body> i es tanca amb l'etiqueta </body>.

Qualsevol element, caràcter, … del contingut que no es trobi entre les dues etiquetes <body>…</body>, invalidarà el document.

Afegiu aquest element i obtindreu l'esquelet mínim d'un document XHTML vàlid. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  lang="ca">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Títol de la pàgina</title>
  </head>
  <body>
 
  </body>
</html>

L'element contenidor

Una de les pràctiques més habituals en el disseny web és ubicar el contingut de la pàgina a dins d'un element contenidor que actua com a embolcall. Aquest element serà -com veureu al mòdul 4- qui establirà l'amplada fixa de la pàgina de 960px.

Escriviu sota l'etiqueta <body> el següent: 

<div class="container">
 
</div>

Què significa l'etiqueta div i els atributs id i class?
La etiqueta div té una funció purament estructural: agrupar parts de la pàgina per facilitar la seva identificació i posterior associació a una regla d'estil.

L'atribut class assigna un valor lliure a l'element que el conté. Aquest valor el podeu assignar a diferents elements del document sense problemes de validació. L'atribut id, a diferència de class, té un valor únic. Repetir el mateix valor de l'atribut id en diferents elements del document invalidarà el document.

Les quatre regions

Feu ús dels elements div per establir la separació de les quatre regions de la pàgina dins de l'element

''. Obriu l'arxiu index.html i editeu-lo per obtenir quelcom semblant: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  lang="ca">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<title>D227</title>
</head>
 
<body>
<div class="container"> <!-- inici del contingut -->
  <div id="capcalera"> <!-- inici de capçalera -->
 
  </div> <!-- final de capçalera -->
 
  <div id="central"> <!-- inici de la columna central -->
 
  </div> <!-- final de la columna central -->
 
  <div id="lateral"> <!-- inici de la columna lateral -->
 
  </div> <!-- final de la columna lateral -->
 
  <div id="peu"> <!-- inici del peu -->
 
  </div> <!-- final del peu -->
</div> <!-- final del contingut -->
</body>
</html>

En les següents pràctiques veureu com treballar l'estructura de cadascuna de les diferents regions de la pàgina.

1) recupereu la pràctica 5 del mòdul 1. Us recomanem l'ús de Notepad++
2) No confondre amb la capçalera del contingut visible de la web al navegador.