HTML 

El llenguatge HTML ens permet estructurar una pàgina web. És un estàndard que ens permet definir l’estructura i el contingut de la nostra pàgina.  Fem servir etiquetes per a assignar com s’ha de comportar un navegador web en llegir el codi.

El navegador demana una petició a un servidor i s’encarrega de mostrar el codi HTML en un format determinat que prèviament hem definit.

En la seva forma més simple, el següent és un exemple de document HTML:

L'etiqueta <img> s'utilitza per inserir imatges a la pàgina web. L'origen de la imatge s'indica amb l'atribut src. Atenció! aquesta etiqueta no cal tancar-la, es tanca sola automàticament. Exemple:

<img src="img_girl.jpg" alt="Girl in a jacket">

Sempre s'hauria d'afegir també un atribut alt, que proporciona un text alternatiu a la imatge, per si l'usuari per algun motiu no la pot veure (a causa de connexió lenta, un error en l'atribut src, o si l'usuari utilitza un lector de pantalla). Hauria de descriure la imatge en poques paraules.

Una etiqueta <a> s'utilitza per definir un enllaç, que s'utilitza per enllaçar pàgines web. Dins de l'etiqueta <a> hi ha l'atribut href, que dona a l'URL la destinació de l'enllaç. El text o imatges tancats per les etiquetes <a> i </a> seran visibles a la pàgina web i clicables. Exemple:

<a href="https://www.raspberrypi.org">Visit our website</a>

Per definir el tipus d'enllaç usem l'atribut target, que, bàsicament, especifica on obrir el document enllaçat.

Els dos més importants són:

• _self - obre el document enllaçat en el mateix marc on s'ha fet clic (és el default).

• _blank - obre el document enllaçat en una finestra o pestanya nova. Aquest s'utilitzaria per fer un enllaç absolut.

Exemple de com picar-lo:

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

Els caràcters <, >, i & s'anomenen caràcters reservats perquè no podem inserir-los en un document HTML sense codificar-los. Això és perquè signifiquen alguna cosa en la sintaxi HTML: < comença una etiqueta nova, > acaba una etiqueta i, com estem a punt d'aprendre, & activa una entitat HTML.

En la meva opinió, crec que no cal divulgar massa en ells (perquè buscant a google et surten tots ràpidament), però que sí que ens hauríem de saber el més bàsic, el non-breaking space, que es representa amb el codi &nbsp;, i amb el qual podem posar un espai que no es convertira en una nova línia. A part, per molts espais normals que posis, el document només t'en reconeixerà un, per tant, si vols afegir més espais, has d'usar aquest caràcter.

De totes maneres, aquí hi ha un enllaç que porta als principals caràcters reservats que hi ha.

També hauríem de saber que per a deixar un comentari en HTML, hem d'usar una etiqueta <! -- abans i una etiqueta --> després del codi/text que volem amagar. Aquestes etiquetes diuen als navegadors que ignorin qualsevol cosa entre elles.

Com s'ha esmentat abans, les llistes en HTML poden ser ordenades (ol) o no ordenades (ul).

Després d'haver marcat la llista, per introduir punts hem d'usar la etiqueta li, i, si volem canviar el "marcador" que l'introdueix, usem la propietat list-style-type.

De list-style-type n'hi ha de diferents per cada tipusllista:

• A llistes no ordenades (ul):

  • disc (el default, un cercle pintat)

  • circle (un cercle amb l'interior buit)

  • square (un quadrat, com el que estic utilitzant aquí)

  • none (on no hi ha cap marcador, només el sagnat)

• A les llistes ordenades (ol):

  • type"1"

  • type"A"

  • type"a"

  • type"I"

  • type"i"

Com he dit abans,

<em> significa “èmfasi” i serveix per marcar el text d’alguna manera (l’estàndard és en cursiva).

<strong> serveix, igual que l’<em>, per marcar/canviar l’aspecte del text (la diferència és que amb aquest l’aspecte estàndard és en negreta/bold).

Però ara afegim dos més elements molt semblants:

l'<ins>, que serveix per subratllar text.

i el <del>, conegut com a linethrough (o strikethrough) en anglès, que s’utilitza per ratllar text “suprimit”, de manera que queda així. 

Tots quatre es piquen de la mateixa manera, aquí un exemple:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

I és molt rellevant destacar que tots poden ser modificats mitjançant CSS, on es pot canviar la seva utilitat (fent servir la propietat “text-decoration”) o assignar-los més valors (com fer que amb cada <del>, a part de ratllar, també surti el text subratllat en vermell).

Estableix una relació entre el document i un recurs extern, i s'utilitza generalment per enllaçar amb fulls d'estil CSS o per afegir un favicon a la web.

Es considera un element buit (ja que només conté atributs, com el “rel”, “href”, “type”...), pot ser utilitzat més d’una vegada, i sempre s’ha d’incloure en el <head> del document.