MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

HTML (Hypertext Markup Language) és el codi que s'utilitza per estructurar i visualitzar una pàgina web i el seu contingut. Per exemple, el contingut podria està estructurat dins d'un conjunt de paràgrafs, una llista de vinyetes o l'ús d'imatges i taules de dades. Com el títol indica, aquest article us donarà un coneixement bàsic d'HTML i quina és la seva funció.

Llavors, què és HTML, en realitat?

HTML no és un llenguatge de programació; és un llenguatge de marcat, i s'utilitza per dir-li al navegador com mostrar les pàgines web que visiteu. Pot ser tan complicat o tan simple com el dissenyador de pàgines web desitji que sigui. HTML consisteix en una sèrie de elements, que s'utilitza per tancar o embolicar, diferents parts del contingut per fer que apareguin o actuïn d'una manera determinada. L'envoltant tags pot fer una paraula o imatge un hipervincle a un altre lloc, pot posar en cursiva les paraules, i pot fer que el tipus de lletra sigui més gran o més petit, i així successivament. Per exemple, prenguem la següent línia de contingut:

My cat is very grumpy

Si volguéssim que la línia es mantingués independent, podríem especificar que és un paràgraf, tancant-ho, en un element d'etiqueta de paràgraf (<p>:

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

Anatomia d'un element HTML

Anem a explorar aquest element paràgraf una mica més lluny.

Les parts principals del nostre element són:

  1. L'etiqueta d'obertura: Aquest consisteix en el nom de l'element (en aquest cas, p), embolicat en claus angulars d'obertura i tancament. Això indica on comença l'element, o on comença a tenir efecte - en aquest cas  és en el començament del paràgraf.
  2. L'etiqueta de tancament: Aquesta é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 en el final del paràgraf. No incloure una etiqueta de tancament és un dels errors comuns per a principiants i pot conduir a resultats estranys.
  3. El contingut: Aquest és el contingut de l'element, que en aquest cas és només text.
  4. L'element: L'etiqueta d'obertura, més de l'etiqueta de tancament, més el contingut, és igual a l'element.

Els elements també poden tenir atributs, es veuen així:

Els atributs contenen informació addicional sobre l'element que no voleu que aparegui en el contingut real. Aquí, class és el nom de l'atribut, i editor-note és el valor de l'atribut. L'atribut class li permet donar a l'element un identificador que pot ser utilitzat posteriorment per l'element de destí amb informació d'estil i altres coses.

Un atribut sempre ha de tenir:

  1. Un espai entre el mateix 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. Obertura i tancament de cometes al voltant del valor de l'atribut.       

Niar elements

Podeu posar, també, elements dins d'altres elements - això es diu niar. Si volguéssim afirmar que el nostre gat està de molt (VERY) mal humor, podríem embolicar la paraula "molt" ("very") en un element  <strong>, el que significa que la paraula està fortament emfatitzada:

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

No obstant això, necessiteu assegurar-vos que els seus elements estan correctament niats: en l'exemple anterior vam obrir l'element <p> en primer lloc, a continuació, l'element <strong>, per tant, primer hem de tancar l'element <strong>, després el <p >. El següent és incorrecte:

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

Els elements han de ser oberts i tancats correctament perquè estiguin clarament dins o fora uns dels altres. Si es superposen com els de dalt, llavors el navegador web tractarà de fer una millor estimació del que estava tractant de dir, i així es poden obtenir resultats inesperats. Així que no ho feu!

Elements buits

Alguns elements no tenen contingut, es diuen elements buits. Prengueu l'element <img> que ja tenim en el nostre HTML:

<img src="images/firefox-icon.png" alt="My test image">

Aquest conté dos atributs, però no hi ha cap etiqueta de tancament </img>, i cap contingut intern. Això es deu al fet que un element image no embolica el contingut per tenir un efecte sobre ell. La seva finalitat és la d'inserir una imatge a la pàgina HTML, en el lloc que apareix.

Anatomia d'un document HTML

Envolta els conceptes bàsics dels elements HTML individuals, els quals són poc útils per si mateixos. Ara veurem com els elements individuals es combinen per formar tota una pàgina HTML. Revisarem el codi que posarem en el nostre exemple index.html (que per primera vegada ens trobem amb el article Tractar amb arxius):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Aquí tenim:

  • <!DOCTYPE html> — el doctype. En la nit dels temps, quan HTML era jove  (al voltant de 1991/2), els doctypes havien d'actuar com a enllaços a un conjunt de regles que la pàgina HTML havia de seguir per ser considerada un bon HTML, la qual cosa podria significar la verificació automàtica d'errors i altres coses útils. No obstant això, en aquests dies ningú realment es preocupa per ells, i realment només son un artefacte històric que ha de ser inclòs perquè tot funcioni bé. Per ara, això és tot el que necessiteu saber.
  • <html></html> — l'element <html>. Aquest element envolta tot el contingut de la pàgina sencera, algunes vegades es coneix com l'element arrel.
  • <head></head> — l'element <head>. Aquest element actua com a contenidor de totes les coses que voleu incloure a la pàgina HTML que no és el contingut que es mostre als espectadors de la vostre pàgina. Això inclou coses com keywords i una descripció de la pàgina que voleu que aparegui en els resultats de cerca, CSS per l'estil del vostre contingut, declaracions de conjunt de caràcters, i més.
  • <body></body> — l'element <body>. Això inclou tot el contingut que voleu mostrar als usuaris d'Internet quan visiten la vostre pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio, o qualsevol altra cosa.
  • <meta charset="utf-8"> — aquest element defineix el conjunt de caràcters que el document ha d'utilitzar per utf-8, inclou la majoria dels caràcters de tots els idiomes de la humanitat coneguts. En essència, ara podeu gestionar qualsevol contingut textual, possible, que vulgueu posar. No hi ha cap raó per no establir aquest, i pot ajudar a evitar alguns problemes més endavant.
  • <title></title> — Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan es carrega la pàgina, i s'utilitza per descriure la pàgina quan aquest és un marcador/favorit.

Imatges

Anem a centrar de nou la nostra atenció en l'element image:

<img src="images/firefox-icon.png" alt="My test image">

Com hem dit abans, incrusta una imatge a la nostra pàgina en la posició que apareix. Això ho fa a través de l'atribut src (source), que conté la ruta d'accés al nostre arxiu d'imatge.

També hem inclòs un atribut alt (alternatiu). En aquest atribut, s'especifica un text descriptiu per als usuaris que no puguin veure la imatge, possiblement pel fet que:

  1. Tenen trastorns visuals. Els usuaris amb impediments visuals significatius sovint utilitzen eines anomenades lectors de pantalla (Screen Readers) per llegir el text alternatiu.
  2. Alguna cosa ha anat malament provocant que la imatge no es vegi. Per exemple, tractar deliberadament de canviar la ruta d'accés dins del seu atribut src perquè sigui incorrecta. Si guardeu i torneu a carregar la pàgina, hauríeu de veure alguna cosa com això en lloc de la imatge:

Les paraules clau sobre el text alternatiu són "text descriptiu". El text alternatiu escrit ha de proporcionar al lector informació suficient per tenir una bona idea del que la imatge transmet. En aquest exemple, el nostre text actual "La meva imatge de prova" no és bo en absolut. Una alternativa molt millor per al nostre logotip de Firefox seria "El logo de Firefox: una guineu en flames que envolta la Terra."

Tracteu d'arribar amb un text alternatiu millor per a la vostre imatge ara.

Nota: Per saber més sobre l'accessibilitat en MDN's Accessibility landing page.

Marcat de text

En aquesta secció es descriuen alguns dels elements HTML bàsics que utilitzareu per marcar el text.

Encapçalaments

Els elements d'encapçalat permeten especificar que certes parts del seu contingut són encapçalats o subtítols del seu contingut. De la mateixa manera que un llibre té un títol principal, títols de capítols i subtítols, un document HTML també pot. HTML conté sis nivells d'encapçalament, <h1><h6> encara que normalment només s'utilitza 3-4 en la majoria de les vegades:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Ara tracteu d'afegir un títol adequat a la vostre pàgina HTML just per sobre de l'element <img>.

Paràgrafs

Com es va explicar anteriorment, els elements <p> són per contenir paràgrafs de text; Els utilitzareu freqüentment quan marqueu un contingut de text normal:

<p>This is a single paragraph</p>

Afegir el text de mostra (ha de tenir el que hauria de semblar al vostre lloc web?) en un o uns pocs paràgrafs, col·locats directament sota de l'element <img>.

Llistes

Una gran quantitat de contingut de la web son llistes HTML i té elements especials per a aquestes. El marcat de les llistes es compon sempre d'almenys dos elements. Els tipus de llistes més comuns son ordenades i desordenades:

  1. Llistes desordenades són llistes en què l'ordre dels elements no importa, com una llista de la compra. Aquestes estan embolicades en un element <ul>.
  2. Llistes ordenades són llistes en què l'ordre dels elements és important, com una recepta. Aquestes estan embolicades en un element <ol>.

Cada element dins de les llistes es col·loca dins d'un element <li> (llista d'elements).

Per exemple, si volguéssim convertir la part del fragment del següent paràgraf en una llista:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

Podríem modificar el marcat a això:

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Intenteu afegir una llista ordenada o desordenada a la vostre pàgina d'exemple.

Enllaços

Els enllaços són molt importants, perquè són els que converteixen a la Web en UN LLOC WEB. Per afegir un vincle, necessiteu utilitzar un element simple - <a> - sent l'abreviatura de "ancora". Per posar el text en el seu apartat en un enllaç, seguiu aquests passos:

  1. Trieu un text. Triem el text "Manifest de Mozilla".
  2. Emboliqueu el text en un element <a>, així:
    <a>Mozilla Manifesto</a>
  3. Doneu a l'element <a> un atribut href, així:
    <a href="">Mozilla Manifesto</a>
  4. Ompliu el valor d'aquest atribut amb l'adreça web que desitjeu enllaçar el vincle:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

És possible obtenir resultats inesperats si s'omet la part https:// o http://, anomenat el protocol, al principi de l'adreça web. Després de fer un enllaç, feu-hi clic per assegurar-vos que us està enviant on volíeu.

href podria aparèixer com una elecció bastant fosca per a un nom d'atribut al principi. Si teniu problemes per recordar-la, recordeu que representa una hypertext reference.

Afegiu un enllaç a la vostre pàgina d'ara, si no ho heu fet encara.

Conclusió

Si heu seguit totes les instruccions d'aquest article, heu d'acabar amb una pàgina que s'assembla a la de sota (també es pot veure aquí):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Si us quedeu encallats, sempre podeu comparar el vostre treball amb el nostre codi d'exemple acabat en Github.

Aquí, en realitat, només hem tractat una part superficial d'HTML. Per obtenir més informació, visiteu el nostre HTML Learning topic.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,