[successivo] [precedente] [inizio] [fine] [indice generale] [violazione licenza] [translators] [docinfo] [indice analitico] [volume] [parte]
Il corpo di un documento HTML è contenuto nell'elemento BODY, che può contenere blocchi di testo, intercalati da elementi Hn (da H1 a H6), che rappresentano il titolo di una sezione di livello n. In particolare, lo standard ISO 15445 impone che il livelli delle sezioni siano coerenti.
Per ovviare alla mancanza di una struttura prestabilita, è possibile raggruppare dei blocchi di testo o del testo normale attraverso gli elementi DIV e SPAN rispettivamente.
Gli obiettivi che ci si possono prefiggere in questo modo possono essere molti. In generale si sfrutta la possibilità di attribuire a questi elementi degli attributi per qualche scopo.
|
Questo esempio mostra una situazione in cui l'elemento DIV viene utilizzato per delimitare una parte del corpo del documento, a cui viene attribuita la classe capitolo e la stringa di identificazione capitolo-1.
|
In questo nuovo esempio, si usa l'elemento SPAN per delimitare il testo che indica il nome di una certa persona. In questo modo viene anche attribuita l'appartenenza alla classe nome, cosa che può tornare utile per rendere i nomi in modo diverso attraverso un foglio di stile.
Ciò che nel testo rappresenta un titolo di una sezione, si indica utilizzando gli elementi che vanno da H1 a H6. Intuitivamente, il primo rappresenta un titolo di importanza maggiore, mentre l'ultimo è quello di importanza minore.
L'utilizzo corretto dei titoli attraverso questi elementi è molto importante perché può permettere a un sistema di visualizzazione o composizione di conoscerne la gerarchia e generare così un indice generale (se richiesto). In taluni casi si può arrivare anche a ottenere una numerazione di questi titoli in modo automatico.
|
Gli elementi che rappresentano dei titoli sono fatti per contenere testo normale ed elementi che non rappresentano blocchi separati.
L'esempio seguente mostra un pezzo di documento strutturato in capitoli e sezioni, delimitati formalmente attraverso l'elemento DIV:
|
Lo scopo di ciò può essere quello di attribuire stili particolari alle varie parti gerarchie del documento. Inoltre, l'utilizzo dell'attributo ID nell'elemento DIV che introduce ogni blocco gerarchico può rappresentare un modo coerente per farvi riferimento.
|
È bene osservare che lo standard ISO 15445 esclude che l'elemento DIV possa contenere elementi Hn. |
Il testo normale è ciò che è contenuto in un «blocco» di testo. Il caso più comune di blocco di testo è rappresentato dall'elemento P, utilizzato per dividerlo idealmente in paragrafi.
All'interno di un blocco, salvo casi particolari, il testo viene reso in modo da adattarsi alle dimensioni imposte dal sistema di visualizzazione o di composizione. In pratica, viene suddiviso in modo conveniente, ignorando le interruzioni di riga e le righe vuote aggiunte.
È opportuno fare attenzione all'uso degli spazi all'interno degli elementi che contengono testo normale: si dovrebbe evitare di iniziare o concludere un elemento con uno spazio. In pratica, si deve evitare di scrivere qualcosa come:
|
Al suo posto bisogna invece limitarsi a scrivere:
|
Si è già accennato al fatto che le righe vuote vengono ignorate in HTML. In effetti, l'interruzione di un paragrafo deve essere segnalata sempre esplicitamente, almeno attraverso l'indicazione dell'inizio di questo. Si osservi l'esempio seguente; anche se appare ovvio che il testo successivo alla dichiarazione del titolo è un paragrafo, questo modo non è ammissibile.
|
Se si vuole ottenere l'interruzione della riga, in modo che il testo riprenda all'inizio, ma senza interrompere il paragrafo, potrebbe convenire l'utilizzo dell'elemento BR, come nell'esempio seguente:
|
Per separare il testo esiste anche la possibilità di utilizzare delle righe di separazione orizzontale: HR (Horizontal rule). Si tratta di elementi vuoti, per cui non si usa il marcatore di conclusione.
Nell'ambito del testo normale, si possono racchiudere alcune parti, per qualche motivo, all'interno di elementi specifici. Le situazioni tipiche riguardano l'evidenziamento, come nel caso degli elementi EM e STRONG.
|
La tabella 302.1 elenca gli elementi più comuni di questo tipo.
Tabella 302.1. Elementi da usare all'interno delle frasi.
| Elemento | Significato |
|
| Testo enfatizzato, di solito in corsivo. |
|
| Testo evidenziato, di solito in neretto. |
|
| Citazione, nel senso di chi o cosa viene citato. |
|
| Testo citato. |
|
| Definizione. |
|
| Codice usato in elaborazione, di solito reso in carattere dattilografico. |
|
| Testo risultato di un'elaborazione. |
|
| Testo da inserire attraverso la tastiera. |
|
| Variabile o argomento di un programma. |
|
| Abbreviazione. |
|
| Acronimo. |
|
| Testo a pedice. |
|
| Testo ad apice. |
Vale la pena di vedere come si può abbinare l'attributo TITLE agli elementi ABBR e ACRONYM. In generale, questi due si possono intendere quasi come la stessa cosa: spesso l'acronimo è un'abbreviazione. A parte il problema di scegliere questo o quell'elemento, l'attributo TITLE diventa utile per specificare il modo in cui si traduce l'acronimo o l'abbreviazione:
|
A volte, un'abbreviazione o un acronimo diventano parole con un'identità propria; come tale acquisisce anche una pronuncia, che probabilmente si vuole preservare, specialmente quando il documento HTML viene letto attraverso un sistema vocale. Anche a questo scopo può essere usato l'attributo TITLE.
Il testo che si riferisce a una citazione si può delimitare attraverso due elementi: BLOCKQUOTE quando si tratta di blocchi di testo e Q quando si tratta di qualcosa che viene inserito nel flusso del testo normale.
|
Dall'esempio si può osservare l'utilizzo dell'attributo CITE con il quale si può indicare l'URI da dove ottenere il testo originale o il testo completo; inoltre è stato inserito anche l'attributo LANG allo scopo di specificare il linguaggio del testo citato (presumibilmente diverso da quello generale).
|
Questo esempio ulteriore fa uso dell'elemento Q, ma in aggiunta si vede anche l'elemento CITE con il quale viene indicato l'autore del testo citato.
In un documento HTML, l'unico modo per preservare gli spazi orizzontali e le interruzioni di riga, è l'uso dell'elemento PRE. In generale, il risultato che si ottiene viene rappresentato utilizzando un carattere dattilografico.
|
|
Per essere sicuri del risultato finale, è bene evitare l'uso di caratteri di tabulazione, preferendo piuttosto gli spazi normali. |
In generale, esistono tre tipi di elenchi: puntati, numerati e descrittivi. L'elenco puntato viene definito utilizzando l'elemento UL (Unordered list), quello numerato si ottiene con l'elemento OL (Ordered list), quello descrittivo si ottiene con l'elemento DL (Definition list). Le voci degli elenchi puntati e numerati sono costituite da elementi LI (List item), mentre nel caso dell'elenco descrittivo il contenuto si articola in elementi DT (Definition term) e DD (Definition description).
|
|
|
Gli esempi mostrano un uso molto semplice di questi elenchi. Si può osservare in particolare che nel caso dell'elenco descrittivo, gli elementi che delimitano il termine da descrivere possono essere più di uno simultaneamente.
Gli elementi LI e DT sono speciali, dal momento che possono contenere testo lineare normale, come si vede negli esempi, oppure dei blocchi di testo. Questo, tra le altre cose, consente di realizzare degli elenchi più complessi.
|
Quando si iniziano a utilizzare le tabelle e si scoprono gli effetti che si riescono a ottenere, non se ne vorrebbe più fare a meno. In realtà, sarebbe bene utilizzare le tabelle il meno possibile, perché alcuni programmi per la visualizzazione di documenti HTML non sono in grado di gestirle in maniera ottimale. Qui viene data solo una spiegazione superficiale, che comunque dovrebbe essere sufficiente per l'uso normale.
La tabella è definita dall'elemento TABLE; al suo interno può essere inclusa una didascalia rappresentata dall'elemento CAPTION, quindi il contenuto della tabella viene distinto in intestazione, piede e corpo, all'interno dei quali si inseriscono le righe della tabella stessa (figura 302.1).
|
Figura 302.1. Esempio di una tabella.
|
L'intestazione e il piede non sono obbligatori; in ogni caso, se si utilizzano vanno inseriti ordinatamente prima del corpo. Se non si indica l'intestazione o il piede, le righe che costituiscono il corpo hanno comunque bisogno di essere delimitate espressamente tra i marcatori che rappresentano l'elemento corrispondente.
|
Lo standard ISO 15445 obbliga all'utilizzo dell'attributo SUMMARY nell'elemento TABLE. Questo attributo dovrebbe permettere di riassumere il contenuto della tabella per quelle situazioni in cui potrebbe essere impossibile consultarla correttamente. |
La tabella 302.2 riepiloga gli elementi utili nella realizzazione delle tabelle HTML.
Tabella 302.2. Elementi da usare per la realizzazione delle tabelle HTML.
| Elemento | Significato |
| TABLE | Delimita la tabella. |
| CAPTION | Didascalia. |
| THEAD | Righe di intestazione. |
| TFOOT | Righe del piede. |
| TBODY | Righe del corpo. |
| TR | Riga normale. |
| TH | Elemento evidenziato di una riga. |
| TD | Elemento di una riga. |
L'esempio seguente rappresenta una tabella molto banale, senza intestazione e senza piede:
|
Il risultato è uno specchietto simile a quello che si vede di seguito:
|
Ecco lo stesso esempio con l'aggiunta di una riga di intestazione:
|
|
L'esempio seguente aggiunge anche una didascalia molto breve:
|
|
Le tabelle HTML possono essere molto più complesse di quanto è stato mostrato qui. Vale la pena di sottolineare il fatto che gli elementi TD, ovvero le celle all'interno delle righe, possono contenere sia testo normale, sia blocchi di testo. Inoltre, lo standard ISO 15445 non consente più l'utilizzo di attributi per la descrizione dei bordi da far risaltare, perché per questo si possono applicare degli stili.
La sigla HTML fa riferimento esplicitamente a un sistema ipertestuale. Ci deve quindi essere un modo per creare questi collegamenti.
Un riferimento può essere fatto a una pagina intera o a un punto particolare di una pagina. Il riferimento può essere assoluto, cioè provvisto dell'indicazione del nodo e del percorso necessario a raggiungere la pagina, oppure può essere relativo al nodo attuale.
Per i riferimenti si utilizza l'elemento A ed eventualmente l'attributo ID di molti altri elementi.
Un riferimento a una pagina intera, con l'indicazione del percorso assoluto per raggiungerla, viene fatto come nell'esempio seguente:
|
Nell'esempio, la frase «Pagina di prova» serve come punto di riferimento del puntatore a http://www.brot.dg/prove/prova.html.
Quando di realizza un documento HTML composto da più pagine collegate tra loro, è preferibile utilizzare riferimenti relativi, in modo da non dover indicare il nome del nodo in cui si trovano e nemmeno il percorso assoluto delle directory da attraversare per raggiungerle.
|
Nell'esempio, si vede un riferimento al file nota.html contenuto nella «directory» varie/ discendente dalla directory corrente. La directory corrente, in questi casi, è quella in cui si trova la pagina contenente il puntatore.(1)
Il vantaggio di utilizzare riferimenti relativi, sta nella facilità con cui il documento può essere spostato o copiato in altri punti nel file system dello stesso o di un altro elaboratore (si veda anche quanto già scritto nel capitolo 300).
All'interno di una pagina è possibile collocare delle etichette che poi possono servire per fare dei riferimenti, sia a partire dalla stessa pagina che da altre. L'esempio seguente mostra un esempio di un'etichetta molto semplice.
|
Si usa quindi lo stesso elemento che serve per creare un puntatore, ma con l'attributo NAME. L'argomento dell'attributo NAME (in questo caso è la parola introduzione), identifica quel punto.
Per fare riferimento a un'etichetta nella stessa pagina si può usare la forma dell'esempio seguente, con il quale si vuole puntare all'etichetta appena creata.
|
Si utilizza l'attributo HREF come al solito, ma il suo argomento è il nome dell'etichetta preceduta dal simbolo #. Evidentemente, ciò è necessario per evitare di fare riferimento a un file con lo stesso nome.
Se si vuole fare riferimento a un'etichetta di un certo file, si utilizza la notazione solita, aggiungendo l'indicazione dell'etichetta.
|
Si può osservare che l'elemento A serve sia per indicare un'etichetta, attraverso l'attributo NAME, sia per definire un riferimento, attraverso l'attributo HREF (senza contare la possibilità di usare anche l'attributo ID). Questo fatto consente di realizzare dei riferimenti simmetrici, dove un riferimento è anche etichetta della terminazione opposta:
|
|
L'esempio dovrebbe essere abbastanza chiaro: il primo puntatore punta al secondo, che a sua volta punta al primo.
L'attributo ID è una generalizzazione attraverso la quale si attribuisce un'identità a un elemento. Può essere usato come destinazione per un riferimento fatto attraverso l'elemento A con l'attributo HREF, ma il suo scopo è più ampio.
In generale, quando si realizzano dei riferimenti ipertestuali dovrebbe essere più conveniente l'indicazione di etichette attraverso l'attributo NAME, dal momento che ci possono essere ancora dei navigatori o altri sistemi di lettura di file HTML che non sono in grado di riconoscere l'attributo ID.
Un documento HTML può contenere riferimenti a «oggetti» esterni. Nei casi più comuni si tratta di immagini o di applet, ma il concetto riguarda qualunque altra cosa che possa essere incorporata nel documento. Come si può supporre, l'elemento attraverso cui si includono gli oggetti è OBJECT. La tabella 302.3 elenca alcuni degli attributi di questo elemento.
Tabella 302.3. Alcuni attributi dell'elemento OBJECT.
| Attributo | Significato |
| DATA | Riferimento al file dell'oggetto. |
| TYPE | Tipo di oggetto. |
| STANDBY | Messaggio di attesa durante il caricamento dell'oggetto. |
Come si può intuire, il minimo per importare un oggetto richiede almeno l'uso dell'attributo DATA; inoltre, in generale è opportuno aggiungere anche l'attributo TYPE per precisare subito il tipo di oggetto.
L'elemento OBJECT non può essere vuoto; ciò che racchiude è quanto deve essere mostrato nel caso non sia possibile raggiungere l'oggetto indicato, oppure non sia possibile gestire l'oggetto stesso. Di solito si tratta di testo normale, ma potrebbe trattarsi di altri oggetti alternativi.
|
L'esempio mostra l'inclusione di un'immagine, esempio.jpg, che nel caso non possa essere raggiunta o visualizzata, viene rimpiazzata con la frase: «Immagine di esempio». L'esempio seguente, al contrario, tenta di visualizzare un'altra immagine in un formato alternativo; se poi anche quella non è accessibile o visualizzabile, si passa al testo di prima:
|
Il tipo di immagine che può essere visualizzata dipende solo dalle limitazioni del programma di navigazione o di composizione. Generalmente si possono utilizzare solo i formati GIF, JPG e PNG (in pratica le estensioni .gif, .jpg e .png).(2)
I riferimenti a file di immagine si fanno attraverso l'elemento OBJECT oppure IMG. In generale, per ottenere un documento HTML adatto alla maggior parte di programmi per la navigazione, conviene ancora utilizzare il vecchio elemento IMG, come nell'esempio seguente:
|
L'elemento IMG è vuoto, pertanto non si usa il marcatore di conclusione. Come si vede dall'esempio, si utilizza l'attributo SRC per definire la collocazione del file contenente l'immagine, l'attributo ALT per indicare una descrizione alternativa nel caso in cui l'immagine non possa essere visualizzata. La stessa cosa avrebbe potuto essere espressa con l'elemento OBJECT nel modo seguente:
|
Generalmente, per evitare problemi di compatibilità con i vari programmi di navigazione, è meglio evitare di fare scorrere il testo a fianco delle immagini, per cui è bene staccare il testo normale racchiudendolo esplicitamente all'interno di un elemento P (paragrafo).
|
L'immagine può essere utilizzata anche come pulsante per un riferimento ipertestuale, quando è contenuta all'interno di questo ultimo. In tali casi è particolarmente importante ricordare di inserire l'attributo ALT, che diventa un'alternativa indispensabile nel caso in cui l'immagine non possa essere visualizzata.
|
Naturalmente, se fosse necessario ricordarlo, non è obbligatorio che tutto si trovi sulla stessa riga, quindi l'esempio precedente può anche essere assemblato come indicato qui sotto:
|
ISO/IEC 15445:2000
W3C
W3C, Technical Reports and Publications
W3C, HTML 4.01 Specification
Appunti di informatica libera 2004.10.10 --- Copyright © 2000-2004 Daniele Giacomini -- <daniele (ad) swlibero·org>, <daniele·giacomini (ad) poste·it>
1) Qui viene usato il termine «directory», ma in pratica potrebbe anche non essere esattamente una directory vera e propria.
2) Il formato PNG è accettato solo da alcuni programmi di navigazione, di conseguenza non è sempre consigliabile il suo utilizzo; inoltre, il formato GIF è brevettato e il suo utilizzo non è libero.
Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome html_corpo.html
[successivo] [precedente] [inizio] [fine] [indice generale] [violazione licenza] [translators] [docinfo] [indice analitico]