Inici en HTML

En aquest article exposarem els fonaments bàsics de l'HTML, perquè pugueu començar. Definirem els elements, els atributs i tots els altres termes importants que podeu haver sentit, i quina funció compleixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres característiques bàsiques importants del llenguatge. Pel camí, jugarem una mica amb l'HTML perquè mantinguis l'interès!

Requisits previs: Coneixements bàsics d'informàtica, programari bàsic instal·lat i coneixements bàsics de treballar amb arxius.
Objectiu: Familiaritzar-se amb el llenguatge HTML i obtenir una mica de pràctica escrivint elements HTML.

Què és HTML?

HTML (HyperText Markup Language) no és un llenguatge de programació; és un llenguatge de marcat, que serveix per dir al teu navegador la manera d'estructurar les pàgines web que visites. Pot ser tan complicat o tan simple com el desenvolupador web desitgi que sigui. HTML consisteix en un seguit d'elements, que s'utilitzen per tancar, delimitar o marcar diferents parts del contingut per fer que aparegui o actuï d'una manera determinada . Les etiquetes que delimiten poden convertir un petit fragment de contingut en un enllaç que enllaci amb una altra pàgina en la web, per a posar paraules en cursiva, i així successivament. Per exemple, prenguem la següent línia de contingut:

My cat is very grumpy

Si volem que la línia es mantingui independent, podem especificar que és un paràgraf delimitant-la amb un element d'etiqueta de paràgraf (<p>):

<p>My cat is very grumpy</p>

Anatomia d'un element HTML

Explorem una mica el nostre element paràgraf fins una mica més enllà:

Les parts principals del nostre element són:

  1. L'etiqueta d'obertura: Consisteix en el nom de l'element (en aquest cas, p), delimitat amb claus angulars d'obertura i tancament. Això indica on comença l'element, o comença a tenir efecte; en aquest cas és al començament del paràgraf.
  2. L'etiqueta de tancament: És la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans del nom de l'element. Això indica on acaba l'element; en aquest cas és al final del paràgraf. El fet de no incloure una etiqueta de tancament és un error de principiant comú, i pot conduir a resultats estranys.
  3. El contingut: És el contingut de l'element, que en aquest cas és només text.
  4. L'element: L'etiqueta d'obertura, a més de l'etiqueta de tancament, a més del contingut, és igual a l'element.

Aprenentatge actiu: crea el teu primer element HTML

Edita la línia següent en l'àrea d'entrada delimitant-la amb les etiquetes <em> i </em> (posa <em> abans d'obrir l'element, i </em> després, per tancar l'element); això hauria de donar una línia en cursiva! Pots veure els canvis actualitzats en viu en l'àrea de sortida.

Si t’equivoques sempre pots tornar al codi anterior amb el botó de Reinicia. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la resposta.

Niar elements

També pots posar elements dins d'altres elements; això s’anomena imbricar. Si volem afirmar que el nostre gat està de molt mal humor, podem delimitar la paraula «molt» amb un element <strong>, que significa que la paraula es destaca amb força:

<p>My cat is <strong>very</strong> grumpy.</p>

No obstant això, us heu d’assegurar que els elements estan correctament imbricats: en l'exemple anterior en primer lloc hem obert l'element p i a continuació l'element strong; per tant, hem de tancar l'element strong en primer lloc i l’element p a continuació. Fer el següent és incorrecte:

<p>My cat is <strong>very grumpy.</p></strong>

Els elements s’han d’obrir obrir i tancar correctament de manera que estiguin clarament dins o fora l’un de l'altre. Si se superposen, com a dalt, llavors el teu navegador web tractarà de fer l’estimació que li sembli més correcta del que vols dir, i així es poden obtenir resultats inesperats. Així que val més que no ho facis!

Elements de bloc i elements de línia

Hi ha dues categories importants d'elements en HTML, que has de conèixer, els elements de bloc i els elements de línia.

  • Els elements de bloc formen un bloc visible en una pàgina; apareixen en una línia nova després de qualsevol contingut que en vagi davant, i qualsevol contingut que hi vagi després també apareixerà en una línia nova. Els elements de bloc tendeixen a ser elements estructurals de la pàgina, representen, per exemple, paràgrafs, llistes, menús de navegació, peus de pàgina, etc. Un element de bloc no es pot imbricar dins d'un element de línia, però pot estar imbricat dintre d'un altre element de bloc.
  • Els elements de línia estan continguts dins d’elements de nivell de bloc i només delimiten petites parts del contingut del document, no paràgrafs sencers ni agrupacions de contingut. Un element de línia no fa aparèixer una línia nova en el document: normalment apareix dins d'un paràgraf de text, per exemple, un element <a> (hipervincle), o elements d'èmfasi com <em> o <strong>.

Prenguem l'exemple següent:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

<em> és un element de línia; així, com es pot veure a continuació, els tres primers elements són a la mateixa línia l'un i l'altre, sense cap espai entre ells. <p> en l'altre fragment és un element de bloc, de manera que cada element apareix en una línia nova, amb un espai per sobre i per sota de cada un (L'espaiat es deu a l'aplicació d’estil CSS que el navegador aplica als paràgrafs per defecte).

Nota: HTML5 va redefinir les categories d'elements en HTML5: vegeu Categories d'elements de contingut. Si bé aquestes definicions són més precises i menys ambigües que les anteriors, són molt més complicades d'entendre que «de bloc» i «de línia», per la qual cosa ens quedarem amb elles al llarg d'aquest article.

Nota: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i elements de línia; vegeu els elements de nivell de bloc i els elements de línia.

Elements buits

No tots els elements segueixen el patró anterior d'etiqueta d'obertura, contingut i etiqueta de tancament. Alguns elements consisteixen en una sola etiqueta, que normalment s'utilitza per inserir/incrustar alguna cosa  en el document en el lloc on s'inclou. Per exemple, l'element <img> insereix una imatge en una pàgina en la posició en què està inclosa:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Aquesta sortida mostraria el següent a la vostra pàgina:

Nota: Els elements buits també se'ls anomena de vegades (void elements).

Atributs

Els elements també poden tenir atributs, que tenen presenten l’aspecte següent:

&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>

Els atributs contenen informació addicional sobre l'element que no vols que aparegui com a contingut. En aquest cas, l'atribut class permet donar a l'element un nom d'identificació que pot ser posteriorment utilitzat per l'element destí amb informació d'estil i altres coses.

Un atribut ha de tenir:

  1. Un espai entre ell i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)
  2. El nom de l'atribut, seguit d'un signe igual.
  3. Un valor d'atribut, amb signes d'obertura i de tancament de comets que el delimiten

Aprenentatge actiu: Afegir atributs a un element

Un altre exemple d'un element és <a>; ve d’anchor i delimita la part del text que és un enllaç. Pot prendre un seguit d'atributs, però dos són els següents:

  • href: Aquest atribut especifica, com a valor, l'adreça web que desitgeu que l'enllaç apunti; on el navegador es desplaçarà quan es fa clic a l'enllaç. Per exemple, href="https://www.mozilla.org/".
  • title: L'atribut title especifica informació addicional sobre el enllaç, com quina és la pàgina que estem vinculant. Per exemple, title="La pàgina web de Mozilla". Això apareixerà com un tooltip quan planegem per damunt.

Edita la línia següent en l'àrea Input per convertir-la en un enllaç al teu lloc web favorit. En primer lloc, afegeix l'element <a>, llavors l'atribut href, i seguidament l'atribut title. Observa els canvis actualitzats en directe a l'àrea Output. Hauries de veure un enllaç, que en passar-hi per sobre mostrarà el contingut de l'atribut title, i en clicar-hi, vas a l'adreça web de l'element href. Recorda que has d’incloure un espai entre el nom de l'element i cada atribut.

Si t’equivoques, sempre pots restablir el codi anterior amb el botó de reinici. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la solució.

Atributs booleans

De vegades veuràs atributs que estan escrits sense valors; això està perfectament permès. S’anomenen atributs booleans, i només poden tenir un valor, que és generalment el mateix que el nom de l'atribut. A tall d'exemple, preneu l'atribut disabled, el podeu assignar als elements d’entrada de dades d'un formulari, si voleu que estiguin desactivats (en gris) perquè l'usuari no hi pugui entrar cap dada.

<input type="text" disabled="disabled">

Com a forma abreujada, és perfectament admissible escriure-ho de la manera següent (també hem inclòs un element d’entrada de dades de formulari no desactivat com a referència, perquè tinguis una idea de què passa):

<input type="text" disabled>

<input type="text">

Tots dos donaran una sortida com la següent:

Ometre les cometes que delimiten els valors dels atributs

Quan navegues per la World Wide Web, et trobes amb tot tipus d'estils de marcat estranys, inclosos valors d'atributs sense cometes. Això és permissible en unes circumstàncies, però en d'altres trencarà el codi de marcatge. Per exemple, si reprenem el nostre exemple d'enllaç d'abans, podem escriure una versió bàsica amb només l'atribut href, així:

<a href=https://www.mozilla.org/>favourite website</a>

No obstant això, quan afegim a aquest estil l'atribut title, les coses no funcionen:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

En aquest punt, el navegador a interpretat malament el marcatge perquè pensa que l'atribut title té en realitat tres atributs: un atribut title amb el valor «The», i dos atributs booleans, Mozilla i homepage. Això, òbviament, no és el que es pretenia, i causarà errors o un comportament inesperat en el codi, com es veu en l'exemple a continuació. Intenta passar sobre l'enllaç per veure quin és el títol del text!

El nostre consell és incloure sempre cometes en l'atribut; evita aquest tipus de problemes, i el codi resulta més llegible.

Cometes simples o dobles?

En aquest article t’adonaràs que els atributs estan delimitats per cometes dobles. No obstant això, és possible que vegis cometes simples en els HTML d'algunes persones. Això és purament una qüestió d'estil, i ets lliure d'escollir . Les dues línies següents són equivalents:

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

Però t’has d’assegurar que no es barregen. El codi següent no et funcionarà!

<a href="http://www.example.com'>A link to my example.</a>

Si has utilitzat un tipus de cometes en el codi HTML, pots fer servir l’altre tipus de cometes per als teus valors d’atribut sense tenir problemes:

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Ara bé, si vols imbricar cometes dins de cometes, i són iguals, has d’utilitzar Entitats de referències: incloent caràcters especials en HTML. Per exemple, aquest marcatge trencarà el codi:

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

Així, necessites fer el següent:

<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>

Anatomia d'un document HTML

Fins aquí abasten els conceptes bàsics dels elements HTML de manera individual, però no són gaire útils per si mateixos. Ara veurem com els elements individuals es combinen per formar una pàgina HTML completa:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Aquí tenim:

  1. <!DOCTYPE html>: El tipus de document. Als inicis, quan HTML era jove (al voltant de 1991/1992), els doctype estaven destinats a actuar com enllaços cap a un conjunt de regles que la pàgina HTML havia de seguir per ser considerat un bon HTML, que podia significar la comprovació automàtica d'errors i altres coses útils. Solien ser alguna cosa com ara això:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Avui dia ningú realment es preocupa per això, i en realitat són un llegat històric que cal incloure perquè tot funcioni. <!DOCTYPE html> és la cadena més curta de caràcters que es considera com un tipus de document vàlid; això és tot el que realment et cal saber.
  2. <html></html>: L'element <html> delimita tot el contingut de la pàgina, i de vegades es coneix com l'element arrel.
  3. <head></head>: L'element <head> actua com un contenidor de totes les coses que vols incloure a la pàgina HTML, però que no és el contingut que vols mostrar als visitants de la teva pàgina. Això inclou coses com ara paraules clau i una descripció de la pàgina, que vols que aparegui en els resultats de cerca, estil CSS per al teu contingut, declaracions de conjunts de caràcters, i més. N’aprendràs més en el proper article de la sèrie.
  4. <meta charset="utf-8">: Aquest element especifica que el teu document utilitzarà el conjunt de caràcters UTF-8, que inclou la majoria dels caràcters de tots els idiomes humans escrits coneguts. Si ho poses, en essència pots gestionar qualsevol contingut textual possible. No hi ha cap raó per no establir aquest, i us pot ajudar a evitar alguns problemes més endavant.
  5. <title></title>: Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan carrega la pàgina, i s'utilitza per descriure la pàgina quan l’afegeixes als teus marcadors/favorits.
  6. <body></body>: Inclou tot el contingut que vols mostrar als usuaris d'Internet quan visiten la teva pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio o qualsevol altra cosa.

Aprenentatge actiu: Afegir característiques a un document HTML

Si vols escriure una mica d'HTML en el teu ordinador local per a experimentar, pots:

  1. Copiar l'exemple de la pàgina HTML que apareix a dalt.
  2. Crear un arxiu nou a l'editor de text.
  3. Enganxar el codi en l’arxiu nou de text.
  4. Desar el fitxer com index.html.

Nota: també pots trobar aquesta plantilla bàsica HTML en el repositori de l’àrea d’aprenentatge Github d’MDN.

Ara pots obrir aquest arxiu en un navegador web per veure quina aparença té el codi reproduït, i després editar el codi i actualitzar el navegador per veure quin n’és el resultat. Inicialment es veurà així:

A simple HTML page that says This is my pageAixí, doncs, en aquest exercici pots editar el codi localment en l'equip, com s’ha indicat abans, o pots editar-lo en la finestra de mostra editable a continuació (la finestra de mostra editable representa només el contingut de l'element <body>, en aquest cas). Intenta reproduir els passos següents:

  • Just a sota de l'etiqueta d'obertura <body>, afegeix un títol principal per al document. Haurà d’estar delimitat per una etiqueta <h1> d'obertura i una etiqueta </h1> de tancament.
  • Edita el contingut del paràgraf per a incloure-hi un text sobre alguna cosa que t’interessi.
  • Fes que qualsevol paraula important destaqui en negreta delimitant-la amb d'una etiqueta <strong> d'obertura i una etiqueta </strong> de tancament
  • Afegeix un enllaç al paràgraf, com s'ha explicat abans en aquest article.
  • Afegeix una imatge al document, sota el paràgraf, com s'ha explicat abans en aquest article. Guanyaràs més punts si aconsegueixes enllaçar-lo a una imatge diferent (ja sigui de manera local a l'ordinador, o d’un altre lloc web.)

Si t’equivoques, sempre pots restablir el codi anterior amb el botó Reinicia. Si realment et quedes encallat, fes clic al botó Mostra la solució per veure la solució.

Els espais en blanc en HTML

Et deus haver adonat que en els exemples anteriors hi ha una gran quantitat d'espais en blanc i salts de línia en el codi; això no és necessari en absolut; els dos fragments de codi següents són equivalents:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

No importa la quantitat d'espais en blanc que utilitzis (pots incloure caràcters d'espai, però també salts de línia), l'analitzador HTML ho redueix tot a un sol espai quan el codi es representa. Així que per què utilitzem tant els espais en blanc? La resposta és la llegibilitat; és molt més fàcil d'entendre què passa al teu codi si té un format endreçat, que no si està desordenat. En el nostre HTML, cada element imbricat té una sagnia de dos espais més respecte del que el conté. De tu depèn l'estil de format que utilitzis (el nombre d'espais per a cada nivell de sagnat, per exemple), però t’has de plantejar l'ús d'algun tipus de format.

Referències a entitats: inclusió de caràcters especials en HTML

En HTML, els caràcters <, >,",' i & són caràcters especials. Són parts de la sintaxi HTML en si; ara bé, com hem d’incloure un d'aquests caràcters en el text, per exemple, si realment volem emprar un ampersand o el signe menys que, i que els navegadors no l'interpretin com codi?

Hem d'utilitzar referències de caràcters, codis especials que representen caràcters i que es poden utilitzar en aquestes circumstàncies exactes. Tots els caràcters de referència s'inicia amb un signe (&) i acaba amb un punt i coma (;).

Caràcter literal Referència de caràcter equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

En el següent exemple, pots veure dos paràgrafs, que parlen sobre tecnologies web:

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

A la sortida en directa que veus a continuació pots observar que el primer paràgraf ha anat malament perquè el navegador pensa que la segona instància de <p> inicia un paràgraf nou! El segon paràgraf es veu bé perquè hem reemplaçat els parèntesis angulars amb referències de caràcters.

Nota: Un gràfic de totes les referències a entitats de caràcters HTML disponibles, es pot trobar en la Viquipèdia: Llista de XML i HTML de les referències a entitats de caràcters.

Comentaris HTML

En HTML, com passa amb la majoria dels llenguatges de programació, hi ha un mecanisme disponible per escriure comentaris en el codi. El navegador ignora els comentaris , i també són invisibles per a l'usuari; i el seu propòsit és permetre que puguis incloure comentaris en el codi per a aclarir-ne el funcionament, explicar què fan les diferents parts, etc. Això pot ser molt útil com a recordatori del treball que has fet si tornes a treballar en un codi amb què no has treballat durant 6 mesos; o si el lliures a una altra persona perquè hi treballi.

Per a convertir en un comentari una secció de contingut del teu arxiu HTML, l’has de delimitar amb els marcadors especials <!-- i -->; per exemple:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

Com pots veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.

Resum

Has arribat al final de l'article. Esperem que hauràs gaudit de la visita als conceptes bàsics d'HTML. En aquest punt, hauries de se r capaç d'entendre el llenguatge y com funciona en un nivell bàsic, i hauries de ser capaç d'escriure alguns elements i atributs. Aquest és un lloc perfecte per estar en aquest moment, perquè en els articles següents del mòdul ens introduirem amb més detall en algunes de les coses que ja has examinat, i introduirem algunes característiques noves del llenguatge. Para-hi atenció!

Nota: En aquest punt, a mesura que comences a aprendre més sobre HTML, és possible que també vulguis començar a explorar els fonaments dels fulls d’estil e cascada (cascading style sheets o CSS). CSS és el llenguatge que s’utilitza per a aplicar estil a les teves pàgines web (per exemple, pots canviar el tipus de lletra o els colors, o alterar el disseny de pàgina). HTML i CSS van alhora, com descobriràs de seguida.