Hola, HTML!

La teva primera etiqueta

Una pàgina web és un fitxer de text escrit en HTML. Comencem pel més petit. En aquest simulador hi ha el codi i, al costat o a sota, el resultat. Canvia el text i mira què passa.

Acabes d'escriure un element. Té tres parts:

• <h1> és l'etiqueta d'obertura: diu on comença l'element i de quin tipus és.
• Hola, món! és el contingut: el que es veu a la pàgina.
• </h1> és l'etiqueta de tancament: és com la d'obertura, però amb una barra /. Diu on acaba l'element.

h1 vol dir heading 1, «títol de nivell 1»: el títol principal de la pàgina. Per això el navegador el mostra gros i en negreta.

Títols i paràgrafs

El text normal va dins de paràgrafs, amb l'element <p>. Cada paràgraf comença en una línia nova, i el navegador hi deixa una mica d'espai al voltant.

Afegeix-hi un tercer paràgraf: escriu <p>, el text i </p>. Fixa't que l'editor no tanca les etiquetes per tu: és un hàbit que has d'aprendre ara. Si te n'oblides, el panell ⚠ Problemes, a sota del resultat, t'avisarà.

Una pàgina sencera

Fins ara has escrit només el contingut i HTMLCat afegia la resta per tu. Una pàgina de debò sempre té aquesta estructura:

• <!DOCTYPE html> avisa el navegador que és una pàgina d'HTML actual. Va sempre a la primera línia i no es tanca: no és un element.
• <html lang="ca"> … </html>: tota la pàgina va a dins. lang="ca" diu que la pàgina està escrita en català.
• <head> … </head>: la capçalera, amb informació sobre la pàgina que no es veu dins de la pàgina.
• <meta charset="UTF-8">: perquè les lletres com à, ç o l·l es vegin bé.
• <title> … </title>: el títol que surt a la pestanya del navegador. Per això no el veus al resultat.
• <body> … </body>: el cos, tot el que es veu a la pàgina.

lang="ca" i charset="UTF-8" són atributs: informació extra que va dins de l'etiqueta d'obertura, amb la forma nom="valor".

<meta> és un element buit: no té contingut i, per tant, tampoc no té etiqueta de tancament. </meta> no existeix.

Elements dins d'elements

A la pàgina d'abans, <title> és dins de <head>, que és dins de <html>. Quan un element és dins d'un altre, diem que està niat. Les etiquetes es tanquen en l'ordre invers al que s'obren: l'últim element que obres és el primer que tanques.

<html lang="ca">
  <body>
    <p>Hola</p>
  </body>
</html>

Mira també els espais de l'esquerra: cada element que és dins d'un altre va 2 espais més a la dreta. Aquesta indentació no canvia el resultat, però fa que es vegi d'un cop d'ull què hi ha dins de què. A l'editor, la tecla Tab escriu 2 espais i Retorn ja indenta la línia nova.

Aquesta pàgina es veu exactament igual que l'anterior, però és molt més difícil de llegir. Mira què en diu el panell ⚠ Problemes:

Errors típics

El navegador mai no et diu que t'has equivocat: arregla el codi com pot i continua. Per això el resultat sovint es veu gairebé bé. Aquests exemples tenen errors: mira el resultat i després llegeix el panell ⚠ Problemes.

T'oblides de tancar el títol

Com que el <h1> no està tancat, el navegador posa el paràgraf a dins del títol: tot surt gros i en negreta.

Tanques amb una etiqueta que no toca

Aquí el resultat es veu bé: el navegador ha endevinat que </h2> volia tancar el <h1>. Però el codi està malament, i no sempre tindràs tanta sort.

Un títol dins d'un paràgraf

Un paràgraf només pot contenir text (i, com veuràs més endavant, elements de text com la negreta). En trobar el <h1>, el navegador tanca el paràgraf: el títol i el text queden fora, i el </p> del final crea un paràgraf nou i buit.

Exercici: la teva pàgina

Fes una pàgina sencera que et presenti. Ha de tenir:

• dins del <head>, <meta charset="UTF-8"> i el títol de la pestanya Qui soc;
• dins del <body>, un títol <h1> amb el teu nom i almenys dos paràgrafs que parlin de tu: què t'agrada, què vols aprendre…;
• cap error al panell ⚠ Problemes, i la indentació ben feta.

Quan acabis, prem ✓ Comprova.

Troba l'error

Aquesta pàgina té tres problemes. El resultat es veu gairebé bé, però el panell ⚠ Problemes et diu on són. Arregla'ls tots (sense canviar els textos) i prem ✓ Comprova.

Resum