Conceptes bàsics d'HTML

Què és HTML?

Capçaleres i títols

Paràgrafs

Enllaços

Atributs importants de totes les etiquetes

Què és HTML?

HTML és el llenguatge de marques estàndar per la creació de pàgines web (HyperText Markup Language).

Les pàgines web d’HTML es formen agrupant diferents elements que s’anomenen etiquetes. Cada etiqueta és interpretada pels navegadors i es mostra d’una manera diferent. En les pàgines web no es mostren les etiquetes sinó el contingut d’elles.

Un exemple de codi HTML seria aquest:

<!DOCTYPE html>

<html>

<head>

<title>Títol de la pàgina</title>

</head>

<body>

<h1>Aquest és un títol</h1>

<p>Aquest és un paràgraf.</p>

<p>Aquest és un altre paràgraf.</p>

</body>

</html>

Per provar-ho crea un fitxer amb l’extensió html per exemple web.html. Obri el fitxer amb un editor de textos com Sublime Text. Dins d’aquest fitxer afegeix el contingut anterior.

Ara, anem a obrir el fitxer amb el navegador (botó dret al fitxer > obrir amb > navegador firefox o chrome). Veure’m que s’obri una pestanya amb el següent contingut:

Anem a revisar el codi HTML que s’ha escrit per veure com es representa en la web. La primera linia de totes és <!DOCTYPE html> que indica que el tipus de fitxer és HTML, ajuda al navegador a mostrar la web correctament. Per tant, tots els documents han de començar amb aquesta linia.

La següent etiqueta és <html> i acaba en </html> que és l’acabament. Fixa’t que el nom de l’etiqueta s’escriu entre els símbols < i > i que en el tancament s’afegeix la barra / per indicar-ho. Per tant, tot haurà d’estar dins d’aquest bloc html.

Després hi trobem dos parts dins del bloc html: body i head: fixa’t en l’obertura i el tancament de les etiquetes. En el head s’afegeix informació de la web i en el body el contingut de la pàgina web.

Els elements més importants que van dins de l’etiqueta <head> i el tancament </head> són:

title: indica el nom de la pàgina, fixa’t en la imatge anterior que posa en la pestanya i en el navegador “Títol de la pàgina”

<title>Títol de la pàgina</title>

meta: indica el tipus de contingut de la pàgina que inclou el tipus d’alfabet que s’utilitzarà, en aquest cas utf-8 és la codificació que inclou els accents del nostre alfabet

Després, dins de l’etiqueta <body> i el tancament </body> és on afegirem el contingut de la web.

En les següents seccions anem a veure elements bàsics de les webs.

Capçaleres i títols

Per afegir títols utilitzem les etiquetes de la h1 fins la h6. h1 és el títol més important de tots i l’h6 el menys. Prova a afegir els següents títols i visualitza en el navegador el resultat. Recorda que els hauràs d’afegir dins de l’etiqueta body i el tancament (esborra el que hi havia dins).

<h1>Títol 1</h1>

<h2>Títol 2</h2>

<h3>Títol 3</h3>

Com pots observar el títol amb h2 és més menut perquè és menys important i el mateix passa amb el títol amb h3.

Paràgrafs

Per afegir paràgrafs utilitzem l’etiqueta <p> i el seu tancament </p> i dins d’aquestes dos afegirem el contingut del paràgraf. Després de cada títol dels anteriors afegeix un paràgraf, per exemple:

<h1>Títol 1</h1>

<p>Paràgraf després del títol 1</p>

<h2>Títol 2</h2>

<p>Paràgraf després del títol 2</p>

<h3>Títol 3</h3>

<p>Paràgraf després del títol 3</p>

Enllaços

Els enllaços ens serveixen per anar a altres pàgines web ja creades o a altres fitxers html que tinga’m en el nostre ordinador. Per afegir-ne s’utilitza l’etiqueta <a> amb el seu tancament </a>. Entre aquests dos element s’afegeix el contingut de l’enllaç però per afegir la URL de la direcció on volem anar s’utilitza l’atribut href. Tots els atributs es posen dins de l’etiqueta. Anem a crear un enllaç després del primer paràgraf que vaja a una coneguda pàgina web de llenguatges de programació.

<a href="https://www.w3schools.com" target="_blank">W3 Schools</a>

Primer posem l'etiqueta:

<a></a>

Després entre les dos etiquetes posem el text que volem que es veja en pantalla:

<a>W3 Schools</a>

A continuació afegim l'atribut href dins de l'obertura de l'etiqueta <a> i afegim l'enllaç on volem accedir:

<a href="https://www.w3schools.com" target="_blank">W3 Schools</a>

Per últim si volem que l'enllaç no s'òbriga en la mateixa pestanya sinó que en una diferent afegim l'atribut target i el valor _blank:

<a href="https://www.w3schools.com" target="_blank">W3 Schools</a>

Si fem clic ens porta a l'enllaç en una nova pestanya

Imatges

Les imatges en HTML es defineixen amb l’etiqueta <img>. Aquesta etiqueta no té tancament, només obertura però té 4 atributs que es poden posar:

• src: on es troba la foto

• alt: el que es mostrarà si la foto no es pot carregar

• width: amplada

• height: altura

Si li afegim amplada només, el navegador recalcula l’altura perquè la imatge es veja bé. De la mateixa manera si s’indica només l’altura, el navegador calcularà l’amplada. En canvi, si afegim l’amplada i l’altura i aquestes no concorden amb la proporció de la imatge, aquesta es veurà distorsionada.

En l’atribut src hem de posar la ruta de la imatge a partir des d’on està ubicat el fitxer html. Per exemple, si tenim a una carpeta el fitxer html i la imatge està en eixa mateixa carpeta, aleshores en src posarem el nom del fitxer i l’extensió:

Afegim el codi al final de la resta d’elements dins de body.

Si en canvi, la imatge haguera estat dins d’una carpeta però on es troba el fitxer html, primer posariem el nom de la carpeta i després una barra /:

Si refresquem el navegador apareix la imatge però molt gran:

Per tant, és l’hora d’ajustar la grandaria amb width o height. Ara posem una altura de 100 píxels:

Botons

Els botons s’afegeixen amb l’etiqueta <button> i el tancament </button>. Afegim un botó després de la imatge:

Com pots veure, apareix el botó però per més que fem clic no fa res, ja ho vore’m més endavant com fer que el botó faça alguna cosa.

Llistes

Per afegir llistes a la pàgina web utilitzem dos etiquetes depenent si volem una llista ordenada o no ordenada. Per la llista ordenada utilitzem <ol> i </ol> (ordered list) i per a la llista no ordenada utilitzem <ul> i </ul> (unordered list).

Anem a afegir 2 llistes, una ordenada i una altra no ordenada:

<p>Guanyadors Moto GP</p>

<ol>

<li>Marc Marquez</li>

<li>Andrea Dovizioso</li>

<li>Maverick Viñales</li>

</ol>

<p>Llista de la compra</p>

<ul>

<li>Tomaques</li>

<li>Pernil</li>

</ul>

Comentaris

Els comentaris són molt utils per posar-nos anotacions en el codi i saber el que estem fent per si en el futur no ens enrecordem. Encara que no parega rellevant, quan portem molt de temps escrivint codi i tenim 300 linies en un fitxer html, hi ha aspectes que es poden oblidar de perquè es va fer així o simplement per donar-li llegibilitat al codi.

Per posar comentaris utilitzem els símbols  entre els comentaris. Per exemple:

DIV - Caixa

L’etiqueta <div> s’utilitza com a contenedor d’altres elements, és a dir, no és un element HTML com a tal que es mostre en pantalla, sinó que és una agrupació d’altres etiquetes. Però, encara que només siga per agrupar, també es poden posar estils que es propagaran a tots els elements que tinga a l’interior.

<div>

<h3>Guanyadors Moto GP</h3>

<ol>

<li>Marc Marquez</li>

<li>Andrea Dovizioso</li>

<li>Maverick Viñales</li>

</ol>

<h3>Llista de la compra</h3>

<ul>

<li>Tomaques</li>

<li>Pernil</li>

</ul>

</div>

Però ens facilita l’agrupació. Imagina que ara volem posar que tant els títols com les llistes anaren en un color verd. Doncs tenim un problema perquè hauriem d’afegir el color verd a tots els elements. Utilitzant el DIV li posem el color verd i aquesta propietat es propagarà a tots els elements que estan a l’interior:

Span

L’etiqueta Span s’utilitza normalment com a contenedora de part del text per donar-li un estil diferent. Per exemple dins d’un paràgraf hi ha una paraula que es vol posar en un altre color:

<p>Aquest és un paràgraf en el que la paraula important la volem resaltar amb color roig</p>

Si afegim l’etiqueta span abans i després de la paraula important li podrem posar un estil diferent.

<p>Aquest és un paràgraf en el que la paraula <span style="color:red">important</span> la volem resaltar amb color roig</p>

Taules

Per construir les taules hi ha 3 etiquetes importants que hem de conèixer: table, tr i td. Hi ha altres però per simplificar el funcionament de les taules utilitzarem només aquestes tres.

Anem a montar aquesta taula:

El primer pas és definir una taula:

<table>

</table>

Dins d’ella anem a crear les files utilitzant l’etiqueta tr, tantes com files hi haurà. En el cas anterior 5.

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Ara, crearem tantes etiquetes com td tinga cada fila. En aquest cas, 3. Ací es mostra només el contingut d’una fila:

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

A continuació només queda emplenar els td amb la informació que hi ha en cada cel·la per obtindre el resultat esperat.

Colspan i rowspan

A les columnes li podem afegir 2 atributs: colspan i rowspan. Colspan és per expandir el contingut d’una cel·la horitzontalment i rowspan per a fer-ho verticalment. Evidentment si expandim una cel·la amb un colspan de 2, ens sobrarà una cel·la. Anem a veure-ho amb un exemple:

Volem fer que la columna 1 de la fila 1 ocupe 2 cel·les per tant a la primera fila tenim el següent:

<tr>

<td>

CODI

</td>

<td>

Nom

</td>

<td>

Alumnes

</td>

</tr>

El que hem d’arreglar primer és el nombre de columnes que hi ha en la primera fila, ara passem de 3 a tindre’n només 2. Per tant, només hi haurà 2 TD. Després li hem de dir a la primera columna que s’expandisca 2 horitzontalment per tant, al TD li afegirem colspan="2".

<tr>

Assignatura

</td>

<td>

Alumnes

</td>

</tr>

D’aquesta manera obtindrem el resultat esperat.

Si per contra ara volguerem que les tres últimes assignatures tingueren el mateix nombre d’alumnes: 20, hauriem de fer el següent:

• A l’última columna de la antepenúltima fila li hauriem de dir que s’expandisca verticalment amb 3: rowspan="3"

• Esborrar l’última columna de la penúltima fila

• Esborrar l’última columna de l’última fila

El resultat seria aquest:

Línia horitzontal

Per posar una linia horitzontal s’utilitza l’etiqueta hr sense tancament ni res: <hr>

<h1>Títol 1</h1>

<hr>

<p>Aquest és un paràgraf sense format</p>

Text preformatejat

Si volem escriure un paràgraf amb espais i que interprete salts de linia sense haver de posar l’etiqueta <br>, utilitzarem l’etiqueta pre. Aquesta etiqueta s’interpreta com un paràgraf però llegint els salts de linia, tabuladors, espais, etc.

<h1>Títol 1</h1>

<hr>

<pre>

Aquest és un paràgraf preformatejat

Açò és una nova linea

Ací hi ha 4 espais de més

</pre>

Atributs importants de totes les etiquetes

Title

L’atribut title serveix per afegir informació adicional d’algún element, i es mostrarà quan passem el cursor damunt d’algún element. Recorda que com qualsevol altre atribut la sintaxis és atribut=”valor”.

Per exemple:

<p title="Aquest és un paràgraf d'exemple">Paràgraf després del títol 1</p>