Come Funziona l'(X)HTML

Dopo il precedente articolo in cui abbiamo visto perchè è nato l'(X)HTML e come esso si è evoluto nel tempo vediamo in questo post come esso funzioni in concreto.

Prima di continuare, però, vediamo un po' di codice (X)HTML così almeno non parliamo in astratto e potete "toccare con mano" l'argomento.

Cliccate in un punto vuoto di questa pagina con i tasto destro del vostro mouse (non su una immagine o su del testo altrimenti cambia il menù). Vi apparirà un menù con varie voci. Io ho Firefox e la voce si chiama "Mostra sorgente pagina" ma potrebbe chiamarsi anche "visualizza HTML" o "mostra HTML", dipende dal browser che state utilizzando. Ad ogni modo cliccate sulla voce individuata ed ecco che sia apre il blocco note con dentro una marea di caratteri strani: quello è puro codice (X)HTML. Potrebbe esserci altro codice incluso come codice JavaScript o codice CSS ma la maggior parte è codice (X)HTML.

Come funziona l'(X)HTML?

Abbiamo visto il codice ma... come funziona?

E' molto semplice. Partite dal presupposto che il codice (X)HTML è un linguaggio semantico di marcatura.

E' "di marcatura" perchè utilizza tag tramite i quali si marca il testo, appunto. E' semantico perchè con la marcatura il testo viene descritto semanticamente. Con un esempio i due concetti saranno più chiari.

Se voglio creare un titolo, per esempio, utilizzerò il tag "h1" in questo modo:

<h1>Questo è un titolo</h1> (nota che in questo esempio il testo non viene mostrato come titolo, cioè non è più grande come lo è il testo del titolo di questo post, perchè i tag non vengono interpetati come codice essendo stati inseriti direttamente nel testo).

C'è un tag h1 di apertura ed un tag h1 di chiusura.

Quello che ho fatto è marcare il testo ((X)HTML è un linguaggio di markup) con un tag che indica al browser che esso è un titolo (marcatura semantica).

Il fatto che il titolo appaia più grande rispetto al resto del testo (come il titolo di questo post per esempio) è solo un effetto visuale che serve a noi umani. Per il browser che il testo sia verde e grande o rosso e piccolissimo non cambia il fatto che quello sia un titolo di livello 1. Esistono anche altri livelli di titolo, generalmente fino al 6, così come esistono altri tag, ed ognuno indica al browser il significato semantico del testo che marca. Esistono tag per creare elenchi, tag per creare grassetti, per dare definizioni e molti altri. In questo modo il browser ed i motori di ricerca sono in grado di comprendere che ruolo svolgono le varie parole nella pagina.

Ogni tag, quindi, ha il compito di descrivere semanticamente una porzione di testo per indicare al browser la funzione che esso svolge nella pagina.

La resa grafica, invece, è stata lasciata ai CSS. Nel post precedente ne ho fatto un accenno. Approfondiamo qui il concetto.

I CSS sono delle regole che hanno il solo scopo di indicare al browser come mostrare un particolare tag. Se voglio che i titoli appaiano grandi e verdi attraverso i CSS indicherò al browser le regole per fargli mostrare i titoli grandi e verdi. Nel codice HTML, invece, non si fa alcun cenno a queste regole. I vantaggi sono molti:

• Il codice complessivo è più leggero
• Fare modifiche è più semplice. Se voglio cambiare il colore dei titoli andrò a modificare una siogola regola nel file CSS e non 100 regole in 100 pagine html.
• Si realizza la separazione del contenuto dalla sua presentazione. In questo modo la stessa pagina può essere mostrata, per esempio, sia sui cellulari che sui monitor dei PC, semplicemente utilizzando due fogli di stile (CSS) diversi e non due versioni diverse della stessa pagina (su un sito di 100 pagine, altrimenti, dovrei averne 200: 100 nella versione per PC e 100 nella versione per cellulari)

Tutte queste nozioni sono necessarie per capire quali sono le regole da ripettare nello scrivere i tag e i fogli di stile e capire quali sono queste regole vi aiuterà a sapere se il codice del vostro sito è scritto rispettandole o meno. Nel prossimo post parleremo proprio di questo e chiuderemo la serie dedicata al codice (X)HTML.

TrackBack URI per questo post

Commenti (0)

RSS feed dei commenti

Nome

Email

Sito web

Titolo

Commento

più piccolo | più grande

Iscriviti via e-mail (Solo utenti registrati)

Ho letto ed accettato i Termini d'uso

Aggiungi Commento Anteprima