HTML semàntic II – Desenvolupament web amb HTML i CSS

DIA 2 (17.04.2023)

Avui hem fet juntes l’exercici que vaig proposar per la sessió que no vaig poder fer: passar un disseny a HTML

Quan rebem un disseny que ha de passar a HTML, el primer pas és convertir aquest disseny (formes, colors, …) en un text. Aquest text ha de tenir sentit per ell mateix i ha de contenir les etiquetes que expliquin el sentit de tots els elements.

Hem anat baixant per el disseny i hem anat posant les etiquetes que hem considerat necessàries:

imatge amb atribut alt (logo)
llistat d’enllaços (menú, altres opcions)
etiqueta h1 (títol principal)
etiquetes h2 i h3 (altres títols)
paràgrafs, alguns amb strongs
imatge
enllaços a vídeos o iframes de reproductors de vídeo

Hem vist que quan maquetem prenem decisions basant-nos en el nostre propi criteri. Per exemple podem tractar una sèrie de punts com un conjunt de títols i paràgrafs, o com a llistat.

També podem considerar si les imatges són informatives o no. Si no ho són, podem no posar-les com imatge o posar-les sense l’atribut alt.

RECORDEM: És important que l’HTML sigui totalment semàntic, on cada element està etiquetat a partir de la seva funció al text. Hem d’oblidar qualsevol referència visual.

A vegades el disseny ens enganya, perquè trobem coses com:

títols de diferent nivell a la mateixa mida
títols d’un nivell inferior més grans que títols d’un nivell superior
ordre dels elements canviat (video + títol + descripció)

Hem de poder detectar aquestes coses i mantenir-nos fermes en la creació d’un HTML purament semàntic. Això pot fer que a vegades posem continguts que no estan realment al disseny (per exemple dos punts entre una paraula i la seva descripció, text on hi ha icones,…).

Seguint amb la nostra història de l’HTML, expliquem que mentre les científiques de la nostra fictícia universitat estan etiquetant el text, hem dedicat una part de l’equip a desenvolupar un programa que permeti llegir aquest text: el navegador.

RECORDA: Són navegadors Firefox, Safari, Chrome, Opera o Edge. Google no és un navegador, és una empresa que té una web on podem fer cerques (també té altres serveis com correu web, programari d’ofimàtica online, allotjament d’arxius,…). La pàgina web de google (google.es) la podem veure en qualsevol navegador, podem fer cerques a google des de diferents navegadors, no només a Google Chrome.

Quan es va crear el primer navegador es van prendre una sèrie de decisions que han durat fins avui:

els navegadors llegiran text etiquetat i l’interpretaran visualment
l’HTML només contindrà text i aquest estarà etiquetat semànticament

El fet de deixar la visualització en mans del navegador, permet que qui produeix el contingut només es centri en la informació que ha de transmetre. Aquesta separació de forma i fons permet:

Reduir el pes dels documents HTML (només hi ha text i amb un conjunt limitat d’etiquetes – principi de simplicitat)
Poder fer HTML amb qualsevol dispositiu, ja que la màquina més simple és capaç de generar i llegir text (principi d’universalitat)
Poder fer i llegir HTML amb qualsevol sistema operatiu (no caldrà crear versions diferents segons la plataforma) (principi d’universalitat)
Permetre que una màquina llegeixi el text i valori la importància que una paraula té en el text, segons si la troba en un h1, un h2, un paràgraf, una llista, en l’alt d’una imatge o altres llocs (hem parlat d’això i el ranking de Google)

Al principi, van sortir algunes empreses que van entrar en una lluita per fer el navegador millor, el que permetés fer pàgines web més vistoses. Això va fer que cada navegador proposés fer servir un conjunt d’etiquetes pròpies.. i es va posar en perill el principi d’universalitat. Per això es va decidir crear el W3C, un consorci mundial que vetlla per mantenir un llistat de les etiquetes que els navegadors han de poder llegir. De tant en tant, es revisa aquesta llista i es proposa una nova versió de l’HTML: HTML 1, HTML 2,… fins arribar a l’actual HTML 5.

Cada versió d’HTML evoluciona el codi, però sempre mantenint una màxima: els navegadors més antics han de poder llegir l’HTML més nou (principi de degradabilitat) Les etiquetes noves no han de generar un error en els navegadors que no les entenen.

A l’última revisió de l’HTML es van afegir una sèrie d’etiquetes per fer agrupacions de contingut. Aquestes etiquetes són també semàntiques:

header
footer
section
article
main
aside
nav
…

A classe, hem completat el nostre HTML amb aquestes etiquetes.

L’arxiu que obrirà el navegador té l’extensió .html (.htm també serveix). Aquest arxiu de text tindrà una estructura molt simple:

<!DOCTYPE>

<html>

</html>

És important:

posar noms descriptius als fitxers
no fer servir ni espais en blanc ni caràcters que no siguin a l’alfabet anglès (si volem fer espais, farem servir guions)

un exemple de nom d’arxiu seria: plantilla-arxiu-web.html

Pot ser que l’editor de codi us suggereixi escriure la primera línia de la següent manera:

<!doctype html>

També pot ser que, al fer un arxiu HTML, ja us creï l’estructura bàsica.

A dins de l’etiqueta <head> posarem ordres per al navegador, informació que volem que el navegador tingui en compte a l’hora de visualitzar el nostre document.

A dins de l’etiqueta <body> posarem el contingut que volem que es pugui veure / escoltar.

Hem copiat i enganxat el text de l’exercici del primer dia (sobre les pioneres informàtiques) a dins del body. Ens hem assegurat de guardar els canvis i hem obert l’arxiu html en un navegdor.

Què passa quan mirem un arxiu html en un navegador?

Quan obrir un document html a un navegador podem visualitzar-lo.

El navegador llegeix les etiquetes i les representa visualment:

Els h1 són més grans que els h2; els h2 són més grans que els h3;…
Els enllaços els mostra de color blau i subratllats
Els ítems de les llistes tipus ul, comencen amb un puntet negre i estan tabulades cap a dins
La zona del body té el fons blanc
La zona del body té un espai interior, el contingut no va a sang
El text és de color negre i fa servir una tipografia amb serifa que hi hagi instal·lada a l’ordinador.

Hem pres nosaltres aquetes decisions? No, ho ha fet el navegador. Nosaltres hem posat la informació, el navegador la representació.

Els documents HTML són responsive per naturalesa, és a dir: s’adapten a la mida de la pantalla sense que es perdi informació. Els paràgrafs es divideixen en diferents línies de forma automàtica, ocupant tota la pantalla d’esquerra a dret

En alguns navegadors veureu caràcters extranys on s’han de veure accents i altres caràcters no anglesos. No us ha de preocupar, veurem aviat què podem afegir dins de la zona etiquetada como a head per a que es visualitzin correctament.