L’HTML és la base de quasi tot el que hi ha a Internet. És un llenguatge bastant simple que s’utilitza per definir l’estructura d’un web i el seu contingut.
Què és HTML?
Les seves inicials volen dir Hypertext Markup Language, és a dir, no és un llenguatge de programació pròpiament sinó que és un llenguatge de marcatge.
És un llenguatge format per elements, per exemple un paràgraf, una imatge, una llista, una columna, un menú… Utilitzant etiquetes concretes es va definint l’estructura del contingut de la plana i d’aquesta manera el navegador sap com l’ha de mostrar.
Un exemple de codi HTML és el següent:
<html> <head> <title>Títol de la plana.</title> </head> <body> <h1>Títol de la plana que es mostra per pantalla</h1> <p>Una frase</p> <p>Una altra frase</p> <p>Una tercera frase</p> <h2>Un subtítol</h2> <p><img src="https://www.arluksoft.com/wp-content/uploads/2020/11/oferta_desenvolupmanet_botiga_online_personalitzada.jpg"></p> <p><a href="https://www.arluksoft.com/blog">Un enllaç al nostre blog</a></p> </body> </html>
Aquest codi es visualitza de la següent manera al navegador.
Si pares atenció al codi anterior veuràs que, encara que mai hagis vist un codi HTML, pots entendre una mica què hi diu.
Com funciona l’HTML?
Com hauràs vist el en tros de codi anterior les etiquetes s¡obren i es tanquen.
S’obren utilitzant <nom etiqueta> i es tanquen amb </nom etiqueta>. Com pots veure el tancament és igual a l’obertura però afegint / abans del nom de l’etiqueta .
A continuació t’explicarem algunes de les etiquetes més bàsiques i que segurament facis servir.
Negreta
El text que es posi dins l’etiqueta <strong> es mostrarà en negreta dins la plana.
A la frase hi ha un <strong>text en negreta</strong>
Cursiva
El text que es posi dins l’etiqueta <em> es mostrarà en cursiva dins la plana.
A la frase hi ha un <em>text en cursiva</em>
Subratllat
El text que es posi dins l’etiqueta <u> es mostrarà en subratlla dins la plana.
A la frase hi ha un <u>text subratllat</u>
Imatge
El codi html per mostrar una imatge és una mica més complex. En comptes de tenir etiqueta d’obertura i tancament es posa tot dins la mateixa etiqueta acabant-la amb />.
<img src="https://www.arluksoft.com/wp-content/uploads/2020/11/oferta_desenvolupmanet_botiga_online_personalitzada.jpg" />
L’etiqueta d’imatge és <img /> i dins s’indica la localització de la imatge dins de l’atribut src.
Els valors dels atributs es posen entre “, per tant escriurem src=”valor-atribut”.
Hi ha un atribut important de posar dins una imatge, és l’atribut alt. Aquest atribut l’utilitza Google per al posicionament però el més important, és un atribut necessari per a l’accessibilitat de la plana, el fan servir els lectors de pantalla per indicar el significat que té la imatge que no es pot veure.
Enllaç
L’etiqueta necessària per a crear un enllaç és <a> . Aquesta etiqueta necessita altres atributs com en el cas de la imatge.
<a href="https://www.arluksoft.com">Soc un enllaç al web d'arluk</a>
Aquest codi mostraria
Atributs utilitzats per a un enllaç:
href: URL destí de l’enllaç, el lloc on aniràs en fer click sobre el text.
target: indica al navegador on ha d’orbir l’enllaç, per exemple target=”_blank” l’obrirà en una nova pestanya
nofollow: aquest atribut indica als cercadors que no han de seguir l’enllaç per a indexar-lo
title: Utilitzat per indicar un títol a l’enllaç que es veurà quan posem el ratolí sobre l’enllaç. Se sol utilitzar per millorar el posicionament del web.
Títols
Els títols els utilitzem al web per estructurar el contingut i millorar el posicionament.
L’etiqueta del títol és <h1>, <h2>, <h3> …. on cada numero indica un nivell, per tant l’1 és el títol principal de la plana i només n’hi hauria d’¡haver un per plana, el 2 seria el subtítol, i així continuaria per als altres.
<h1>Soc un títol</h1> <h2>Soc un subtítol</h2>
Llistes
Les llistes son útils per fer enumeracions de coses. Poden ser de diferents tipus
<ul>: llista no numerada
<ol>: llista numerada
<ul> <li>elemen1 de la llista</li> <li>element 2 de la llista</li> </ul>
<ol> <li>elemen1 de la llista</li> <li>element 2 de la llista</li> </ol>
Paràgrafs
El text que es posi dins l’etiqueta <p> es mostrarà com un paràgraf.
<p>Primera frase.</p> <p>Segona frase.</p> <p>Tercera frase.</p>
Aquest codi es visualitza:
Primera frase.
Segona frase.
Tercera frase.
Salt de línia
Per posar salts de linia entre frases cal fer servir l’etiqueta <br/>. Com en el cas de les imatges, aquesta s’obre i es tanca en una única etiqueta.
Primera frase.&amp;lt;br/> Segon frase.&amp;lt;br/> tercera Frase.
Aquest codi es visualitza:
Primera frase.
Segona frase.
Tercera frase.
Com es pot veure la diferència entre un salt de línia i una paràgraf és la separació entre frases.
Nidificació d’etiquetes
Les etqiuetes HTML es poden nidificar. Per exemple, es pot utilitzar una imatge com a ellaç en comptes de text
<a href="https://www.arluksoft.com" target="_blank"><img src="https://www.arluksoft.com/wp-content/uploads/2020/11/oferta_desenvolupmanet_botiga_online_personalitzada.jpg"/></a>
També es podria fer que un títol fos a la vegada un enllaç.
<h2>Un títol amb un <a href="https://www.arluksoft.com">enllaç</a></h2>
