Laboratorio di Tecnologie Web
HTML: Introduzione
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
File HTML e tag
Un file HTML non è nient'altro che un puro file di testo al
cui interno sono presenti delle istruzioni speciali (chiamate
tag) che informano il browser su come il contenuto
dovrebbe essere visualizzato. Da questo punto di vista un
file HTML è molto diverso da un file binario, come
potrebbe essere ad esempio un documento Word. Se ad
esempio apriamo un file Word con un editor di testo come
Notepad, il risultato visualizzato è un insieme di caratteri
senza senso.
Illustrazione 1: Un file Word aperto con Notepad
Se invece apriamo un file HTML con un editor di testo
come Notepad, il risultato è leggibile anche ad un essere
umano.
Illustrazione 2: Un file HTML aperto con Notepad
Per poter vedere il codice HTML di una pagina web,
normalmente è sufficiente aprire la pagina con un browser,
cliccare con il tasto destro sulla pagina e selezionare sul
menu contestuale l'opzione appropriata per visualizzare il
codice sorgente (ad esempio, "Visualizza codice sorgente"
in Chrome). Provate a farlo con la homepage del sito
dell'università, www.uniud.it. Ciò che si nota subito (anche
grazie all'utilizzo del colore che viene fatto
automaticamente dal browser) è la presenza dei cosiddetti
tag html, gli elementi costituiti da parole chiave racchiuse
tra parentesi angolari. Senza tag, un browser non è in grado
di capire come interpretare una pagina html.
Proviamo ad esempio a creare un file di testo in cui
inseriamo un titolo e un paragrafo di testo. Nell'editor di
testo riusciamo a separare chiaramente i due elementi,
strutturando quindi il nostro contenuto, ma se salviamo il
file come html e lo visualizziamo in un browser, il risultato
che otteniamo è un unico blocco di testo, abbiamo perso la
struttura.
Illustrazione 3: Esempio di file di testo
Illustrazione 4: Lo stesso file aperto in un browser web
Proviamo adesso ad aggiungere dei tag html per ottenere la
stessa struttura del file di testo originale. Il codice è il
seguente (non preoccupatevi per il momento del significato
dei tag):
<p>TITOLO</p>
<p>Paragrafo di testo</p>
Salvate il file con estensione html e visualizzatelo con il
browser. Il risultato che dovreste ottenere è che avete
mantenuto la struttura del file originale. Notate che i tag
non vengono visualizzati.
Illustrazione 5: Pagina web con la struttura del file di testo originale
NOTA: Sebbene la pagina web venga visualizzata
correttamente, tenete presente che questo frammento di
codice html non è ben strutturato, mancando di alcuni
elementi fondamentali che vedremo in seguito.
Ritornando al frammento di codice visto sopra, notiamo la
presenza dei tag <p> e </p> che racchiudono le due righe di
contenuto che vogliamo mostrare. Il primo è un tag di
apertura ed attiva una certa funzionalità, il secondo tag di
chiusura, identificato dalla barra inclinata, e disattiva
l'effetto del tag di apertura. Strettamente parlando l'insieme
di tag di apertura, tag di chiusura e ciò che sta nel mezzo
viene identificato con il termine "elemento". In pratica ogni
elemento è una specie di contenitore. I caratteri interni alle
parentesi angolari determinano lo scopo del tag ed indicano
al browser cosa fare a ciò che c'è nel contenitore. In questo
caso, il carattere p indica che ciò che sta in mezzo ai due tag
di apertura e chiusura è un paragrafo di testo e deve essere
mostrato come tale.
Che cosa succede se togliamo i tag di chiusura dal codice
del nostro esempio? In questo caso nulla, il browser è
sufficientemente intelligente da capire quando termina
l'effetto di un certo tag (in questo caso, quando incontra il
tag di apertura successivo). In generale però è sempre bene
ricordarsi di inserire esplicitamente i tag di chiusura e non
fare affidamento esclusivamente sul browser, altrimenti
potrebbero generarsi situazioni in cui il contenuto viene
visualizzato scorrettamente.
Adesso che abbiamo appena menzionato la regola dei tag di
apertura e chiusura, introduciamo una classe di elementi
che non ne fa uso, i cosiddetti elementi vuoti ("empty
elements"). Tali elementi consistono in un tag unico che ha
tipicamente come scopo inserire qualcosa in una pagina
piuttosto che dare indicazioni su come gestire un particolare
contenuto. Un esempio è l'elemento <br> che aggiunge
un'interruzione di riga in una pagina. In XHTML era
obbligatorio inserire tale elemento con una barra inclinata
prima della parentesi angolare chiusa, cioè <br />. In
HTML5, tale obbligo è scomparso. Il frammento seguente
utilizza l'elemento <br>
<p>TITOLO</p>
<p>Testo normale con <br>interruzione di riga.</p>
E' possibile innestare un elemento html all'interno di un
altro elemento, come nel seguente frammento di codice
<p>TITOLO</p>
<p>Testo normale. <b>Testo evidenziato.</b> Testo normale.</p>
Il tag <b> indica al browser di mettere in evidenza il testo
fino al corrispondente tag di chiusura. Normalmente i
browser interpretano tale tag mettendo il testo in grassetto
(e fino ad HTML5 questo tag voleva in effetti dire bold).
Laddove ci siano tag innestati come in questo caso, è buona
norma chiudere i tag nell'ordine inverso rispetto a quello
con cui sono stati aperti, evitando ad esempio combinazioni
come <p><b></p></b>. Sebbene normalmente i browser
siano in grado di interpretare correttamente la vostra
intenzione, potrebbero generarsi problemi se non seguite
questa regola.
E' anche possibile innestare un elemento direttamente
all'interno di un altro elemento come nel seguente esempio:
<p>TITOLO</p>
<p>Testo normale. <i><b>Testo in grassetto e corsivo.</b></i>
Testo normale.</p>
Nell'esempio abbiamo racchiuso l'elemento <b> all'interno
dell'elemento <i> che visualizza il contenuto in corsivo (In
HTML5, questo elemento indica che il testo è in una voce
diversa rispetto al resto, ad esempio un termine tecnico o
latino). Il risultato è che il testo è sia grassetto che corsivo.
Un aspetto importante degli elementi è che essi possono
essere di tipo blocco, come <p>, o di tipo inline, come <b>.
I browser interpretano gli elementi di tipo blocco come se
fossero dei box rettangolari posizionati uno sopra l'altro
sulla pagina. Ogni elemento inizia su una nuova riga ed il
browser normalmente aggiunge dello spazio prima e dopo
l'elemento. Gli elementi inline vengono invece inseriti
all'interno del flusso del testo, non iniziano su una nuova
riga e non hanno spazio aggiuntivo intorno ad essi. La
distinzione tra i due tipi di elementi è importante perchè
porta a delle differenze di comportamento, ad esempio
nell'applicazione del CSS. Dovrebbe anche non essere
possibile inserire un elemento blocco all'interno di un
elemento inline ma a quanto pare i browser riescono
comunque ad interpretare il codice.
Un altro aspetto importante dei tag è che essi possono
contenere degli attributi che forniscono informazioni
addizionali relative al contenuto di un elemento. Gli
attributi vengono inseriti all'interno del tag di apertura di un
elemento e sono costituiti da due parti, un nome ed un
valore, separate da un segno di uguale. Un esempio è il
seguente:
<p>TITOLO</p>
<p lang="it">Testo in Italiano.</p>
Il nome dell'attributo indica il tipo di informazione extra
che stiamo fornendo ed è preferibile sia scritto in
minuscolo. Il valore dell'attributo è l'informazione o
parametro associato all'attributo ed è preferibile sia inserito
tra doppie virgolette. In questo esempio, l'attributo specifica
il linguaggio utilizzato nell'elemento. E' possibile inserire
più di un attibuto per elemento, separati da uno spazio.
Alcuni elementi richiedono obbligatoriamente l'inserimento
di attributi. La maggior parte degli attributi possono essere
utilizzati solo per alcuni elementi specifici e possono
assumere solo un certo insieme di valori (o un certo
formato).
NOTA: e se volessi visualizzare una parentesi angolare
(simbolo di maggiore o minore) nel testo? In tal caso, è
necessario utilizzare dei simboli speciali, in particolare &lt;
per il minore e &gt; per il maggiore.
Che cosa viene ignorato dai browser
I browser ignorano alcune delle informazioni che inserite
all'interno delle pagine html. In particolare, vengono
ignorate le interruzioni di riga create andando a capo, le
tabulazioni e gli spazi bianchi multipli (viene considerato
sempre un solo spazio bianco), markup non riconosciuto (il
risultato può essere variabile), commenti.
In html i commenti vengono inseriti utilizzando i tag
speciali <!-- e -->. Un commento può anche coprire più
righe di codice. Normalmente, un commento viene
utilizzato per documentare un pezzo di codice.
Struttura di un documento HTML
Tutti gli esempi che abbiamo visto finora erano solo
frammenti di codice html. Anche se il browser riusciva a
visualizzarli correttamente, non contengono gli elementi
che tradizionalmente costituiscono un documento html di
base.
Il primo elemento che un browser si aspetta di trovare in un
documento html è il cosiddetto doctype (document type
definition) ossia un codice che identifica il tipo di markup
(in pratica, le versione di HTML) che è stato utilizzato per
scrivere il documento. In presenza di doctype, il browser
entra in modo standard e cerca di visualizzare la pagina nel
modo più coerente e standardizzato possibile, mentre se il
doctype non è definito può succedere qualunque cosa.
Alcuni browser ad esempio entrano in una modalità
compatibilità che cerca di comportarsi come i browser di
anni fa, in modo da supportare vecchio codice che sfruttava
funzionalità ora non più presenti o modificate.
La maggior parte degli sviluppatori usa oggi il doctype
HTML5 che è definito nel modo seguente:
<!DOCTYPE html>
In confronto, il seguente è il doctype per XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Tenete presente che potete specificare il doctype HTML5
anche se non usate alcuna delle nuove funzionalità del
linguaggio. Per un browser, l'importante è che ci sia un
doctype non quale sia.
Successivamente al doctype, un documento html
tipicamente contiene tre elementi di tipo contenitore:
<html>, <head> e <body>. L'elemento <html> viene
utilizzato per specificare che tutto ciò che c'è al suo interno
è codice html e tipicamente racchiude tutto il codice, tranne
il doctype. L'elemento <head> viene utilizzato per
specificare alcune informazioni opzionali relative alla
pagina web, come titolo, parole chiave, fogli di stile, etc.
L'elemento <body> racchiude tutto il contenuto che deve
essere mostrato sulla finestra del browser.
C'è un solo modo per combinare questi elementi in una
pagina web:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
All'interno dell'elemento <head> viene tipicamente inserito
un elemento <title> che serve a specificare il titolo della
pagina. I browser visualizzano il titolo sulla barra del titolo
oppure sulle tab. Il titolo è ciò che viene utilizzato quando
viene salvato un bookmark di una pagina. Inoltre, il titolo è
ciò che viene mostrato, assieme ad un pezzo di contenuto,
quando la pagina web viene inserita all'interno dei risultati
di un motore di ricerca.
<!DOCTYPE html>
<html>
<head>
<title>
Titolo della pagina
</title>
</head>
<body>
Contenuto della pagina
</body>
</html>
Tenete presente che gli elementi sopra descritti sono
opzionali per HTML5 anche se è fortemente consigliato
inserirli in ciascuna pagina. Se prendiamo uno dei
frammenti di codice precedenti e lo ispezioniamo con il
browser (ogni browser ha un meccanismo per ispezionare la
struttura effettiva della pagina web), notiamo come siano
comunque presenti questi elementi.
