CAPÍTOL 2
HTML: estructura i text
etiquetes, plantilla, títols, llistes, enllaços i semàntica
PREGUNTA PER A LA CLASSE
«Escrius tres frases al Bloc de notes i les obres amb el navegador.»
Per què surten totes iguals i seguides?
El HTML diu què és cada cosa
<h1>Diari de Manacor</h1> <h2>L’Ajuntament aprova el pressupost</h2> <p>El ple va durar tres hores.</p>
Què és, no com es veu. L’aspecte és del CSS, al capítol 4.
Etiqueta, contingut i element
Els atributs: informació extra
<img src="img/logo.png" alt="Capçalera del diari">
Es llegeix nom = valor.
Quatre etiquetes que no es tanquen
No tenen res a dins, i per això no porten etiqueta de tancament.
</img> no existeix. Que el navegador s’ho empassi no vol dir que estigui bé.
El que s’obre a dins, es tanca a dins
BÉ
Niat<p>Va durar <strong>tres hores</strong>. </p>
MAL
Creuat<p>Va durar <strong>tres hores.</p> </strong>
Llegeix els tancaments d’esquerra a dreta: han de sortir en l’ordre invers dels d’obertura.
Obres p, strong → tanques strong, p.
PREGUNTA PER A LA CLASSE
«He escrit <h2>Esports<h2> i el títol es veu.»
Està ben escrit? Què hi falla?
La plantilla bàsica
Dues línies que hi van sempre
<meta charset="utf-8"> <title>Esports · Diari de Manacor</title>
El title va a la pestanya. El h1, dins la pàgina. No són el mateix.
Una pàgina sencera: contacte.html
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Contacte · Diari de Manacor</title>
</head>
<body>
<h1>Contacte</h1>
<p>Escriu-nos a redaccio@example.com</p>
</body>
</html>Les tres preguntes: DOCTYPE? tot el que es veu dins body? tot tancat?
Els títols són un índex, no sis mides
REGLA 1
Un h1És de què va la pàgina. Només un per pàgina.
REGLA 2
Sense saltsDesprés d’un h1 ve un h2, no un h3.
Paràgrafs: el que escrius no és el que surt
<p>El ple <em>no</em> va aprovar el <strong>pressupost</strong>.</p>
strong = important. em = èmfasi.
PREGUNTA PER A LA CLASSE
«Vull que aquest text surti gros, així que li poso un <h1>.»
Per què és mala idea?
Dues llistes, segons si l’ordre vol dir res
L’ORDRE NO HI VOL DIR RES
ul<ul> <li>Portada</li> <li>Esports</li> </ul>
L’ORDRE IMPORTA
ol<ol> <li>Manacor</li> <li>Felanitx</li> </ol>
Cada element va dins un <li>, sigui de la classe que sigui.
Els números de l’ol els posa el navegador. No els escriguis tu.
L’enllaç: on va i què es veu
<a href="contacte.html">Escriu-nos</a>
Les mateixes rutes relatives del capítol 1.
La imatge i el seu alt
<img src="img/partit.jpg" alt="El davanter xuta a porteria">
src
Quin fitxerAmb ruta relativa, com els enllaços.
alt
Què s’hi veuSurt si no carrega i és el que llegeix el lector de pantalla.
Digues què s’hi veu, no què és: alt="Foto" no serveix de res. Si és pura decoració, alt="".
L’alt no és opcional. I les imatges del Diari, te les portes tu.
Set elements per a set zones
Quatre regles d’accessibilitat (WCAG 2.1)
També fa que Google entengui la pàgina. La feina és la mateixa.