Blog

Coneixements bàsics d’HTML per poder maquetar un text

Comparteix a

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.

Exemple de visualització codi HTML bàsic

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

Soc un enllaç al web d’arluk

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;amp;lt;br/>
Segon frase.&amp;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>

 

Altres entrades que et poden interessar

Instal·lar WordPress manualment pas a pas

Instal·lar WordPress manualment pas a pas

Es pot instal·lar WordPress de diferents maneres però en aquest article us explicarem com fer-ho manualment al vostre allotjament. Ens basarem en allotjaments que utilitzin els panells plesk o cpanel però us pot servir de guia si el vostre en fa servir un altre. Com...
Com crear i per a què serveix un Child Theme de WordPress?

Com crear i per a què serveix un Child Theme de WordPress?

Què podem fer si volem treballar amb una plantilla de wordpress però a la vegada li volem fer modificacions i aquestes requereixen que editem algún dels seus fitxers? La resposta és Child Theme. WordPress necessita una plantilla per a poder mostrar la plana. És el que...
Com treure profit del mode fosc dels dispositius al meu web?

Com treure profit del mode fosc dels dispositius al meu web?

Ara que podem configurar-nos els nostres dispositius en mode fosc podem adaptar el nostre web per a que també tregui profit d’aquesta característica de forma automàtica. El mode fosc o dark mode és el tipus de configuració dels nostres dispositius que fa que...