Introducció a l’HTML

L’HTML, o el què és el mateix, L’Hyper Text Markup Language és un llenguatge de marques d’hypertext pensat per crear documents digitals. És a dir, pàgines web que poden ser llegides a través d’un navegador web. S’editen i es codifiquen en text pla, per tant, els podem crear amb un simple Bloc de notes, o editors dedicats com Notepad++, Atom i Brackets, entre altres.

L’html s’escriu i es desenvolupa amb tags o etiquetes, d’obertura i tancament, etiquetes auto-tancades i atributs, valors i informació. A continuació podeu trobar l’exemple d’un document HTML 5 simple, amb les etiquetes i els atributs més habituals.

01. <!DOCTYPE html>
02. <html lang="ca">
03.   <head>
04.     <title>Nom de la pàgina</title>
05.     <meta charset="utf-8"/>
06.  </head>
07.  <body>
08.     <h1>Títol d'exemple</h1>
09.      <p>Paràgraf d'exemple.</p>
10.    </body>
11. </html>

El color negre s’identifiquen les etiquetes, el color taronja els atributs, que sempre van seguits del signe igual i les cometes d’obertura i tancament. Entre aquestes cometes trobem el valor de l’atribut en color verd.

A continuació podeu trobar una descripció línia a línia.

01. <!DOCTYPE html>Defineix el document com un document HTML versió 5.

02. <html lang="ca">És l’element arrel d’una pàgina HTML. S’obre al princip del document i es tanca al final del mateix. En aquest cas a la línia 11. Aquesta etiqueta incorpora un atribut que indica als rastrejadors l’idioma en que s’ha escrit el document.

03. <head>
Aquesta és una etiqueta contenidora metadades, vincles i codificacions del document html.

05. <meta charset="utf-8"/> Aquesta és una etiqueta auto-tancada que descriu una metadada relacionada amb el grup de caràcters en que s’escriu la pàgina web.

04. <title>Nom de la pàgina</title>Aplica un títol de la pàgina web.

07. <body>
És l’etiqueta que inclou el contingut visible de la pàgina web. Com que és una etiqueta contenidora cal tancar-la quan s’ha presentat el contingut, just abans de tancar l’etiqueta arrel, línia 10.

08. <h1>Títol d'exemple</h1> Defineix un títol de nivell 1. En html podem descriure fins a sis nivells diferents.

09. <p>Paràgraf d'exemple.</p>Defineix un paràgraf.

Article escrit per Núria O. i revisat per grigol@xtec.cat