En HTML existeixen un mínim d'etiquetes que s'han de consignar dins l'estructura del codi. Si us fixau en els diferents exemples, la majoria d'etiquetes inclouen una etiqueta d'inici i una de tancament. Ambdues contenen la mateixa paraula clau entre els símbols < >; la diferència és que l'etiqueta de tancament incorpora la barra inclinada / davant la paraula clau.
Les etiquetes serveixen per indicar al navegador alguna característica que afecta tot el que delimiten. Vegem-ne alguns exemples:
- <html></html> (és codi en format HTML)
- <head></head> (forma part de la capçalera de la pàgina)
- <title></title> (forma part del títol que es mostrarà a la pestanya on estigui oberta la pàgina)
- <body></body> (forma part del cos de la pàgina, és a dir, són els continguts mostrats al navegador: text, taules, imatges...).
Dins les etiquetes <body></body> tenim multitud d'etiquetes que ens ajudaran a inserir text i taules, imatges i a donar-hi format. Facem una ullada a les més bàsiques (text):
- Quan hem de donar format a un títol, tenim diferents nivells.
- Un títol de nivell 1 (amb l'estil que conté la mida de font més gran) s'indica amb les etiquetes d'obertura i tancament <h1></h1>.
- Un títol de nivell 2 (amb un estil que conté una mida de font més petita que el nivell 1) s'indica amb les etiquetes d'obertura i tancament <h2></h2>.
- Un títol de nivell 3 (amb un estil que conté una mida de font més petita que el nivell 2) s'indica amb les etiquetes d'obertura i tancament <h3></h3>, i així successivament.
- Els paràgrafs «normals» de text s'inicien i es tanquen amb les etiquetes <p></p>. Entre un paràgraf i el següent sempre hi ha un espai major que entre les línies que el componen, per diferenciar el punt i apart (canvi de paràgraf).
- Si necessitau inserir una línia recta de separació dins els continguts, per diferenciar dos blocs, dues imatges amb fons blanc, etc., podeu inserir l'etiqueta <hr />. Fixau-vos que és òrfena, és a dir, només hi ha una etiqueta d'obertura, no necessita una etiqueta de tancament </...> com les altres que hem vist fins ara.
- Si necessitau inserir-hi un paràgraf en blanc, com a separació, teniu en compte que hi ha molts navegadors que interpreten les etiquetes <p></p> soles com a buides i no les mostren, és com si no existissin. Per evitar-ho, podeu fer servir el codi . Aquest codi genera un contingut, un espai en blanc, que el navegador sí que interpretarà, deixant l'espai d'un paràgraf en blanc.
- L'etiqueta <br> o <br /> serveix per inserir-hi un salt de línia. Això vol dir que l'etiqueta inserirà un salt a la línia següent, però dins el mateix paràgraf; per això, està inclosa dins les etiquetes <p></p>. Fixau-vos que, a l'igual que <hr />, és òrfena.
- Si volem inserir comentaris dins el codi HTML (moltes vegades faciliten la lectura del codi) i que no es mostrin en el navegador, hem de fer servir els signes <!-- per començar el comentari i els signes --> per tancar-lo.
IMPORTANT: aquesta estructura que hem explicat, és la que s'ha de seguir, per exemple, a l'hora de crear las pàgines estàtiques que farem servir a Moodle:
<html>
<head>
<title>Títol de la pàgina</title>
</head>
<body>
<p>Continguts de la pàgina</p>
<body>
</html>
Codi HTML |
<html>
<head>
<title>Guies d'aprenentatge de la plataforma EBAP en Línia</title>
</head>
<body>
<h1>Títol nivell 1</h1>
<h2>Títol nivell 2</h2>
<h3>Títol nivell 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, turpis non fringilla dictum, leo velit dignissim leo, at auctor elit ligula nec mauris. Nunc porttitor massa et mi sagittis ultrices. Quisque sed porta odio. Vestibulum id felis at massa pellentesque tempus. Nulla sollicitudin tincidunt molestie. Duis est augue, aliquet nec urna vitae, cursus posuere mi.</p>
<p> </p>
<hr />
<!-- En aquest apartat inclourem... -->
<p>Contingut de la pàgina...<br>
Bot de línia...</p>
<p>Contingut de la pàgina...</p>
</body>
</html>
Visualitzat en el navegador |
Títol nivell 1
Títol nivell 2
Títol nivell 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, turpis non fringilla dictum, leo velit dignissim leo, at auctor elit ligula nec mauris. Nunc porttitor massa et mi sagittis ultrices. Quisque sed porta odio. Vestibulum id felis at massa pellentesque tempus. Nulla sollicitudin tincidunt molestie. Duis est augue, aliquet nec urna vitae, cursus posuere mi.
Contingut de la pàgina...
Bot de línia...
Contingut de la pàgina...