| Struttura di un documento HTML | Indice | Tag di formattazione |
All'interno del tag 'body' è possibile inserire dei tag (chiamati tag logici) allo scopo di individuare blocchi di testo che rappresentano dei concetti o parti distinte. L'effetto primario di questi tag è quindi individuare le parti logiche del testo. Sarà il browser a decidere come questi blocchi logici debbano essere visualizzati (quale tipo di formattazione utilizzare). Con le ultime revisioni del linguaggio HTML a quasi tutti i tag logici è stato introdotto l'attributo 'style' che permette comunque di poter dare anche indicazioni di come formattare graficamente i questi tag.
In questo capitolo vengono illustrati i principali tag logici. Si rimanda il lettore alla specifica tecnica del linguaggio HTML 4.01 per la lista completa e per maggiori dettagli. La specifica del linguaggio HTML 4.01 è disponibile all'indirizzo http://www.w3.org/TR/html4
| Descrizione | permette di inserire dei commenti che nessun browser visualizzerà come contenuto del documento. I commenti servono per descrivere il codice di un documento HTML. |
| Tipo | tag vuoto. |
| Attributi | nessuno |
| Nota | usate un commento all'inizio del documento per indicare la versione e la data del vostro documento! |
Quando create una pagina Web è molto importante inserire dei commenti che spiegano perché avete utilizzato determinate istruzioni HTML. Questi commenti non vengono rappresentati dal browser, ma possono essere letti soltanto se viene esplicitamente richiesto al browser di visualizzare il codice sorgente.
I commenti si dovrebbero utilizzare per mettere delle note su come si sono scelti alcuni attributi o sul perché di certe scelte stilistiche. In questo modo, rileggendo i sorgenti di un documento HTML dopo un certo tempo, sarà più semplice ricordare/comprendere il perché di certe scelte o di come è stata pensata una certa struttura di documento.
| Descrizione | identifica uno dei sei livelli di titoli. |
| Tipo | tag contenitore. |
| Attributi | align, class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style e title. |
Un documento che contiene molte pagine di testo senza titoli potrebbe risultare difficile da leggere. Le pagine Web dovrebbero essere interrotte da opportuni titoli che ripartiscono il flusso dei testi in sezioni più facili da gestire. Il linguaggio HTML prevede sei livelli di titoli: da <h1>...</h1> a <h6>...</h6>. Il modo in cui questi titoli sono rappresentati dipende dal browser utilizzato per leggere il documento. Alcuni browser visualizzano i titoli con dimensioni e font (tipi di caratteri) differenti; altri visualizzano i titoli in grassetto, sottolineandoli o cambiandone i colori. Inoltre, gli utenti potrebbero impostare il modo in cui il browser dovrà rappresentare i titoli.
un titolo di primo livello (<h1>) è spesso utilizzato all'inizio del documento. Gli altri titoli sono utilizzati per suddividere i testi in paragrafi.
I titoli possono essere allineati a sinistra (left), a destra (right) o al centro (center) utilizzando l'attributo 'align'. gli attributi class e style sono descritti in seguito. I tag dei titoli possono contenere molti altri tag. Per esempio, un titolo può contenere i tag delle immagini (<img>), di nuova riga (<br>), dei righe orizzontali (<hr>), dei cambiamenti di stile (come <strong>), ecc.
A volte potrebbe essere interessante aggiungere delle piccole immagini ai titoli, come le icone o i logo di società. Un documento suddiviso in titoli aiuta i lettori a identificare i punti salienti. Ricordatevi che la ragione principale per cui si pubblica una pagina sul World Wide Web è fornire informazioni nel modo più rapido ed efficace possibile. Per questo è importante rendere meno complessa la navigazione e, quindi, aiutare gli utenti a trovare ciò che vogliono.
| Descrizione | identifica un paragrafo (logico). |
| Tipo | tag contenitore. |
| Attributi | align, class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style e title. |
Quando si scrive un documento tradizionale su un foglio di carta, di solito i testi vengono distribuiti in varie sezioni o paragrafi. Per farlo, questi blocchi di testo vengono separati da una riga bianca (stile americano) o da un ritorno a capo e una riga identata di pochi caratteri (stile italiano).
Dato che per convenzione i browser comprimono tutti gli spazi bianchi (carattere di spaziatura, di tabulazione e di riga vuota), è necessario utilizzare dei tag appositi per indicare al browser la necessità di una riga vuota. Il tag contenitore dei paragrafi: <p> oltre ad individuare logicamente un paragrafo, indica al browser la necessità di rendere visibile questo blocco logico. Solitamente i browser rendono questa suddivisione inserendo dello spazio bianco verticale prima e dopo il paragrafo.
Si ricorda di chiudere sempre tutti i tag contenitori dei paragrafi, anche se in alcuni casi il browser è in grado di stabilire automaticamente dove termina un paragrafo.
Il tag <p> riconosce l'attributo 'align' come il tag dei titoli L'allineamento a sinistra è l'impostazione di default, nel senso che i testi di un paragrafo vengono allineati automaticamente a sinistra, se l'autore non specifica un altro allineamento.
Un tag di paragrafo può contenere altri tag. Per esempio, può contenere i tag dei link (<a>), delle immagini (<img>), di nuova riga (<br>) e dei cambiamenti di stile (come <cite> e <strong>).
Quando un paragrafo contiene degli elementi che devono essere elencati, una possibilità per forzare la creazione di un elenco è data dall'utilizzo del tag 'br' che interrompe una linea (il tag 'br' è spiegato in dettaglio più avanti). Data l'importanza delle liste, sono stati definiti anche dei tag appropriati che permettono di impostare le liste in modo semplice e strutturato, in modo tale che, ancora una volta, l'autore di un documento possa concentrarsi sulla strutturazione logica anziché sulla sua formattazione.
Di seguito si illustrano i tag relativi ai due tipi di lista più utilizzati: liste ordinate e liste non ordinate. Si rimanda alla documentazione tecnica per gli altri tipi meno comuni.
| Descrizione | identifica un elenco numerato di elementi |
| Tipo | tag contenitore. |
| Attributi | class, compact, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, start, style, title, type e value. |
| Nota | gli attributi start, type e value sono deprecati |
Il sistema più semplice per creare una lista ordinata è utilizzare il tag <ol> e poi specificare gli elementi della lista, ciascuno dei quali è introdotto dal tag contenitore <li> (List Item o elemento della lista).
Un esempio tipico di lista ordinata è dato dal seguente codice:
<ol> <li>Primo elemento della lista</li> <li>Secondo elemento della lista</li> </ol>
la cui resa è la seguente:
Le liste ordinate richiedono due tag HTML: il contenitore <ol> che delimita la lista e il contenitore <li> che introduce ogni elemento della lista. Molti browser numerano automaticamente gli elementi della lista; per default, i numeri sono quelli arabi e la numerazione inizia da 1.
Se si deve inserire un nuovo elemento a metà lista, a differenza di una lista generata manualmente in cui è richiesto di aggiustare la numerazione degli elementi, le liste generate con il tag 'ol' vengono rinumerate automaticamente.
L'attributo 'start' consente di indicare l'inizio della numerazione quando questo è diverso da uno. Esempio:
<ol start="10"> <li>Primo elemento della lista</li> <li>Secondo elemento della lista</li> </ol>
la cui resa è la seguente:
È un attributo molto comodo, ma dato che è deprecato dalla specifica HTML 4.0 è opportuno utilizzare le proprietà dell'attributo 'style'
Oltre a impostare il numero iniziale di una lista, è anche possibile definire il tipo di numerazione degli elementi delle liste; questo compito è svolto dall'attributo 'type' del tag 'ol'.
In tabella sono riportati i tipi di numeri e lettere che possono essere utilizzati.
| type | style | Effetto | Esempi |
|---|---|---|---|
| A | upper-alpha | Lettere maiuscole | A. B. C. D. |
| a | lower-alpha | Lettere minuscole | a. b. c. d. |
| I | upper-roman | Numeri romani maiuscoli | I. II. III. IV. |
| i | lower-roman | Numeri romani minuscoli | i. ii. iii. iv. |
| 1 | decimal | Numeri arabi (default) | 1. 2. 3. |
Un esempio di uso dell'attributo 'type' è il seguente:
<ol type="I" start="10"> <li>Primo elemento della lista</li> <li>Secondo elemento della lista</li> </ol>
la cui resa è la seguente:
Questo attributo è particolarmente utile per inserire delle liste all'interno di altre liste. Tuttavia, come 'start', anche 'type' è deprecated nello standard HTML 4.0. Al suo posto, la specifica consiglia di utilizzare le proprietà dell'attributo 'style'.
L'attributo 'style' è utilizzato per 'raffinare' il layout delle pagine Web e per controllare sia l'inizio che lo stile della numerazione. Ad esempio
<ol style="list-style-type: upper-roman"> <li>Primo elemento della lista</li> <li>Secondo elemento della lista</li> </ol>
la cui resa è la seguente:
Come detto in precedenza, la specifica del linguaggio HTML è in continua evoluzione. L'introduzione dei fogli stile (CSS Cascading Style Sheets) e dell'attributo 'style' ha cambiato il modo in cui si possono formattare le liste, anche se si deve sempre porre l'attenzione che soltanto le ultime versioni di Internet Explorer e Netscape Navigator riconoscono alcune delle nuove opzioni dell'attributo 'style' raccomandate dal W3C.
| Descrizione | identifica un elemento di una lista qualsiasi |
| Tipo | tag contenitore. |
| Attributi | class, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title, type e value. |
| Nota | gli attributi type e value sono deprecati |
Il tag <li> delimita gli elementi di una lista. L'effetto del tag <li> dipende dal tipo di lista di cui questo tag definisce gli elementi. Per esempio, in una lista ordinata, il tag <li> specifica un elemento che è preceduto da un numero o da una lettera. in una lista non ordinata, <li> specifica un elemento che è preceduto da uno dei simboli disponibili (punto, cerchio, quadrato e così via).
Il tag contenitore <li> può contenere qualsiasi cosa: paragrafi di testo, delle immagini e perfino altre liste mentre non è consigliabile inserire titoli`.
| Descrizione | identifica un elenco di elementi generico |
| Tipo | tag contenitore. |
| Attributi | class, compact, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, start, style, title, type. |
| Nota | gli attributi compact e type sono deprecati. |
Con il tag 'ul' (Unordered List) si costruisce una lista i cui elementi non sono numerati. Solitamente gli elementi sono preceduti da un punto anziché da numeri o lettere.
Un esempio tipico di lista non ordinata è dato dal seguente codice:
<ul> <li>Primo elemento della lista</li> <li>Secondo elemento della lista</li> </ul>
la cui resa è la seguente:
Considerato che il tag 'li' può contenere blocchi di testo e tag html, è possibile inserire anche la definizione di un'altra lista. In questo modo si ottiene la possibilità di creare liste annidate, che risultato essere talvolta molto utili per rappresentare logicamente le relazioni tra elementi di un testo. I browser sono tenuti a dare un'evidenza grafica di questo dipendenza delle liste annidate.
Un esempio di liste annidate è il seguente:
<ul>
<li>Primo elemento della lista esterna </li>
<li>Secondo elemento della lista esterna </li>
<li>Terzo elemento con lista
<ol>
<li>Primo elemento della lista interna</li>
<li>Secondo elemento della lista interna</li>
</ol>
</li>
</ul>
la cui resa è la seguente:
Come è facilmente intuibile, è possibile annidare anche a livelli maggiori e combinare i due tipi di lista indifferentemente. L'importante è garantire la chiusura dei tag, in modo tale che non ci siano errori di 'chiusura' delle liste.
| Struttura di un documento HTML | Indice | Tag di formattazione |