[successivo] [precedente] [inizio] [fine] [indice generale] [violazione GPL] [translators] [docinfo] [indice analitico] [volume] [parte]
Il corpo di un documento HTML è contenuto normalmente nell'elemento BODY a meno che si utilizzino le cornici (frame), nel qual caso si tratta dell'elemento FRAMESET.
A sua volta, il contenuto dell'elemento BODY è abbastanza «libero», nel senso che si possono inserire blocchi di testo di vario tipo, senza una struttura preordinata.
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.
<DIV ID="capitolo-1" CLASS="capitolo"> <!-- contenuto del capitolo --> ... ... </DIV>
Questo esempio mostra una situazione in cui l'elemento DAT viene utilizzato per delimitare una parte del corpo del documento, a cui viene attribuita la classe capitolo e la stringa di identificazione capitolo-1.
Il sig. <SPAN CLASS="nome">Tizio Tizi</SPAN> è andato...
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.
... <H1>Titolo principale</H1> ... <H2>Titolo di livello inferiore</H2> ... <H1>Altro titolo principale</H1> ...
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:
<DIV CLASS="capitolo" ID="capitolo-1"> <H1>Trattato di bla bla bla</H1> <P>Questo trattato tratta di aria fritta...</P> <DIV CLASS="sezione" ID="sezione-1-1"> <H1>Dettagli</H1> <P>Questa è una sezione inutile di un trattato inutile...</P> </DIV> </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.
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:
<P>Bla bla bla <EM> evviva </EM> bla bla.</P>
Al suo posto bisogna invece limitarsi a scrivere:
<P>Bla bla bla <EM>evviva</EM> bla bla.</P>
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.
... <H1>Titolo principale</H1> Primo paragrafo che descrive qualcosa che non serve precisare oltre. <p>Paragrafo successivo. <H1>Altro argomento</H1> ...
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:
<P>Paragrafo che descrive qualcosa:<BR> questa riga fa parte dello stesso paragrafo che inizia con la riga precedente.</P>
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.
... il <EM>codice di interruzione di riga</EM> è ciò che separa le righe ...
La tabella 261.1 elenca gli elementi più comuni di questo tipo.
Tabella 261.1. Elementi da usare all'interno delle frasi.
| Elemento | Significato |
| EM | Testo enfatizzato, di solito in corsivo. |
| STRONG | Testo evidenziato, di solito in neretto. |
| CITE | Citazione, nel senso di chi o cosa viene citato. |
| Q | Testo citato. |
| DFN | Definizione. |
| CODE | Codice usato in elaborazione, di solito reso in carattere dattilografico. |
| SAMP | Testo risultato di un'elaborazione. |
| KBD | Testo da inserire attraverso la tastiera. |
| VAR | Variabile o argomento di un programma. |
| ABBR | Abbreviazione. |
| ACRONYM | Acronimo. |
| SUB | Testo a pedice. |
| SUP | 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:
<ACRONYM TITLE="World Wide Web">WWW</ACRONYM>
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.
<BLOCKQUOTE CITE="http://www.brot.dg/testi/prova.html" LANG="it"> <P>Bla bla bla... bla bla bla bla... bla bla bla.</P> </BLOCKQUOTE>
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).
<P><CITE>Tizio Tizi</CITE> ha detto: <Q CITE="http://www.brot.dg/testi/prova.html" LANG="it"> Bla bla bla... bla bla bla bla... bla bla bla.</Q></P>
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.
<P>Il comando <CODE>ls -l /</CODE> genera un risultato simile a quello seguente:</P> <PRE> drwxr-xr-x 2 root root 2048 gen 6 18:38 bin drwxr-xr-x 3 root root 1024 dic 31 08:08 boot drwxr-xr-x 4 root root 18432 gen 24 14:23 dev drwxr-xr-x 68 root root 4096 gen 24 14:09 etc drwxr-sr-x 14 root root 1024 gen 3 19:32 home drwxr-xr-x 5 root root 4096 gen 6 16:32 lib drwxr-xr-x 19 root root 1024 ago 15 16:02 mnt drwxr-xr-x 5 root root 1024 nov 9 14:59 opt dr-xr-xr-x 88 root root 0 gen 24 14:07 proc drwxr-xr-x 18 root root 1024 dic 16 17:37 root drwxr-xr-x 3 root root 2048 gen 6 16:12 sbin drwxrwxrwt 6 root root 8192 gen 24 18:56 tmp drwxr-xr-x 16 root root 1024 gen 5 15:23 usr drwxr-xr-x 15 root root 1024 set 29 15:02 var </PRE>
|
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).
<UL>
<LI>prima voce di un elenco puntato;</LI>
<LI>seconda voce di un elenco puntato;</LI>
<LI>terza voce.</LI>
</UL>
<OL>
<LI>prima voce di un elenco numerato;</LI>
<LI>seconda voce di un elenco numerato;</LI>
<LI>terza voce.</LI>
</OL>
<DL>
<DT>Resistenza</DT>
<DT>Resistore</DT>
<DD>Componente resistivo utilizzato in elettronica</DD>
<DT>Condensatore</DT>
<DD>Componente capacitivo...</DD>
</OL>
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 normale, come si vede negli esempi, oppure dei blocchi di testo. Questo, tra le altre cose, consente di realizzare degli elenchi più complessi.
<OL>
<LI><P>prima voce di un elenco numerato;</P></LI>
<LI><P>seconda voce di un elenco numerato;</P></LI>
<LI>
<P>terza voce che si articola ulteriormente:</P>
<UL>
<LI>bla bla bla</LI>
<LI>bla bla bla</LI>
<LI>bla bla bla</LI>
</UL>
</LI>
</OL>
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 261.1).
|
Figura 261.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 non hanno bisogno di essere delimitate espressamente tra i marcatori che rappresentano l'elemento corrispondente. La tabella 261.2 riepiloga gli elementi utili nella realizzazione delle tabelle HTML.
Tabella 261.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:
<TABLE> <TR><TD>uno</TD><TD>due</TD></TR> <TR><TD>tre</TD><TD>quattro</TD></TR> <TR><TD>cinque</TD><TD>sei</TD></TR> </TABLE>
Il risultato è uno specchietto simile a quello che si vede di seguito:
--------------------------------- uno due tre quattro cinque sei ---------------------------------
Per aggiungere una riga di intestazione è necessario indicare in modo esplicito l'elemento TBODY, che prima è stato sottinteso:
<TABLE>
<THEAD>
<TR><TD>Primo</TD><TD>Secondo</TD></TR>
</THEAD>
<TBODY>
<TR><TD>uno</TD><TD>due</TD></TR>
<TR><TD>tre</TD><TD>quattro</TD></TR>
<TR><TD>cinque</TD><TD>sei</TD></TR>
</TBODY>
</TABLE>
--------------------------------- Primo Secondo --------------------------------- uno due tre quattro cinque sei ---------------------------------
L'esempio seguente aggiunge anche una didascalia molto breve:
<TABLE>
<CAPTION>
Tabella banale
</CAPTION>
<THEAD>
<TR><TD>Primo</TD><TD>Secondo</TD></TR>
</THEAD>
<TBODY>
<TR><TD>uno</TD><TD>due</TD></TR>
<TR><TD>tre</TD><TD>quattro</TD></TR>
<TR><TD>cinque</TD><TD>sei</TD></TR>
</TBODY>
</TABLE>
Tabella banale --------------------------------- Primo Secondo --------------------------------- uno due tre quattro cinque sei ---------------------------------
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, è fondamentale l'attributo BORDER dell'elemento TABLE, con il quale si definisce la grandezza del contorno della tabella:
<TABLE BORDER="1">
...
...
</TABLE>
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:
<A HREF="http://www.brot.dg/prove/prova.html">Pagina di prova</A>
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.
<A HREF="varie/nota.html">Annotazioni varie</A>
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 259).
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.
<A NAME="introduzione"></A>
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.
<A HREF="#introduzione">Introduzione</A>
Si utilizza l'opzione 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.
<A HREF="http://www.brot.dg/varie/linux.html#introduzione">Introduzione a GNU/Linux</A>
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:
<A NAME="uno" HREF="#due">vai al punto due</A>
<A NAME="due" HREF="#uno">vai al punto uno</A>
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 261.3 elenca alcuni degli attributi di questo elemento.
Tabella 261.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 è quello che 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.
<OBJECT DATA="esempio.jpg" TYPE="image/jpg">Immagine di esempio</OBJECT>
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:
<OBJECT DATA="esempio.png" TYPE="image/png">
<OBJECT DATA="esempio.jpg" TYPE="image/jpg">
Immagine di esempio
</OBJECT>
</OBJECT>
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:
<IMG SRC="http://www.brot.dg/varie/immagini/logo.jpg" ALT="Logo">
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:
<OBJECT DATA="http://www.brot.dg/varie/immagini/logo.jpg" TYPE="image/jpg">
Logo
</OBJECT>
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).
<IMG SRC="immagini/logo.jpg" ALT="Logo"> <P>...testo che segue l'immagine...
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.
<A HREF="varie/nota.html"><IMG SRC="img/nota.jpg" ALT="Annotazioni varie"></A>
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:
<A HREF="varie/nota.html">
<IMG SRC="immagini/nota.jpg" ALT="Annotazioni varie">
</A>
W3C
W3C, Technical Reports and Publications
W3C, HTML 4.01 Specification
daniele @ swlibero.org1) 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 GPL] [translators] [docinfo] [indice analitico]