El nostre primer document HTML

Les parts d’un document HTML

Un document HTML comença amb la etiqueta <html> i acaba amb l’etiqueta </html>. Tot allò que es col·loque fora d’aquestes etiquetes serà ignorat per el navegador.

Dins del document HTML es poden diferenciar les parts de la capçalera i el cos, delimitades per les etiquetes <head> </head> i <body> </body> respectivament.

La capçalera contindrà informació sobre el propi document HTML, com el seu autor, l’idioma i el títol de la pàgina. Aquesta informació serà utilitzada per el navegador, però no serà visible per a l’usuari. El cos del document és aquella part que serà mostrada en pantalla i també serà la part més llarga del document: la que contindrà el text, les taules i les imatges que visualitzarà l’usuari.

Un exemple de document HTML amb les seues parts bàsiques és el següent:

Nota

Atenció! A aquest document li falten parts importants. No és vàlid!

<html>
    <head>
        <title>El nostre primer document HTML</title>
    </head>
    <body>
        <p>Aquest és el meu primer document HTML.</p>
    </body>
</html>

Aquest document conté les parts d’un document HTML que hem mencionat, però no és encara un document HTML vàlid. Corregirem açò més endavant.

Pots provar aquest exemple escrivint aquestes línies amb un editor de text simple (com Gedit, Notepad o el que utilitzarem en aquest curs: Geany), desant-lo amb qualsevol nom i l’extensió .html i obrint-lo amb un navegador web com el Firefox.

No pots utilitzar un processador de textos com el Writer o el Word, ja que aquestos inclouen les seues pròpies etiquetes en el text, i obtindríem un document HTML incorrecte.

Hi ha algunes recomanacions sobre els noms de fitxers que cal que conegues:

  • Els navegadors reconeixen les minúscules i majúscules, així que «document.html» no és el mateix que «Document.html». Una bona norma es utilitzar únicament minúscules en els noms dels documents.

  • Als noms dels documents HTML no es poden utilitzar espais, però si nombres, guions (-) i subratllats (_). Tampoc és massa segur utilitzar lletres com la «ñ» o la «ç», que poden fallar amb algunes versions d’alguns navegadors.

  • Evita utilitzar caràcters com interrogants (¿?), barres (/ o ) i qualsevol simbol matemàtic. Molts d’ells tenen utilitats concretes i poden fer que la teua pàgina web no funcione correctament.

Un document HTML mínim i vàlid

Abans hem creat un primer document HTML mínim, però per a que siga considerat un document HTML vàlid caldrà afegir-li un parell d’etiquetes.

En primer lloc cal afegir una Declaració de Tipus de Document, és a dir, una etiqueta que indique quin llenguatge i quina versió d’aquest estem utilitzant. Açò suposa incloure la següent etiqueta abans de la etiqueta <html>:

<!DOCTYPE html>

Algunes etiquetes porten al seu interior alguns atributs amb un valor definit. Aquestos parells atribut-valor es separen per un signe igual (=) i el atribut va entre cometes. És recomanable indicar l’idioma principal del document amb l’atribut lang dins de l’etiqueta <html>.

<html lang="ca">

Afegirem una etiqueta <meta> amb l’atribut charset dins de la capçalera que indique quina codificació de caràcters estem utilitzant. Açò resoldrà el problema amb els accents. Algunes etiquetes tenen un sentit per elles mateixes, sense que delimiten cap bloc de text, i en aquestos casos es pot omitir l’etiqueta de tancament. Açò tornarà a ocórrer amb algunes altres etiquetes més endavant. L’etiqueta és la següent:

<meta charset="utf-8">

Finalment hi ha una etiqueta meta que serveix per relacionar el nostre document HTML amb un document CSS. Ja parlarem d’açò més endavant.

<link rel="stylesheet" type="text/css" href="estil.css">

El document HTML mínim que serà considerat correctament escrit és el següent:

<!DOCTYPE html>
<html lang="ca">

<head>
    <title>Títol del document</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estil.css">
</head>

<body>

</body>

</html>

Podem comprovar la validesa del nostre fitxer HTML a la web del W3C. L’adreça del validador és http://validator.w3.org. És recomanable que guardes aquest document amb el nom minim.html i l’utilitzes per iniciar qualsevol nou document.

Nota

Aquest exemple et serà molt útil. Còpia’l i desa’l en un document anomenat minim.html i utilitza’l com a punt de partida cada vegada que comences un nou document HTML.

Els espais i bots de línia són ignorats per els navegadors, i solament els incloem per facilitar la lectura del nostre codi. Per a un navegador no hi ha diferència entre el document anterior i el que hi ha a continuació.

<!DOCTYPE html><html><head><title>a</title><meta charset="utf-8"></head><body></body></html>

Naturalment, la primera versió és més fàcil de llegir per a un humà.