HTML sta per HyperText Markup Language e in pratica è un formato SGML per i documenti della rete che fa uso di un DTD particolare: HTML appunto. La formattazione di un documento HTML non può mai essere valutata perfettamente in anticipo, perché dipende da diversi fattori:
il programma utilizzato per visualizzare il documento;
la risoluzione utilizzata;
i tipi di carattere a disposizione;
la profondità di colori disponibili.
Lo standard HTML è tale per cui tutti (o quasi) i programmi utilizzabili per la lettura di tali documenti sono in grado di cavarsela. Ma questo risultato minimo è ben lontano dall'esigenza di costruire qualcosa che tutti possano vedere più o meno nello stesso modo.
Quando si costruisce un documento HTML, occorre pensare all'utenza a cui è destinato, in modo da decidere quali caratteristiche possano essere utilizzate e quali invece sia meglio scartare per evitare inutili problemi di lettura.
Normalmente, i programmi che si utilizzano per visualizzare documenti HTML sono molto tolleranti sul formato che questi possono avere, ma in generale, converrebbe attenersi a un formato preciso, come descritto di seguito.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD> <BODY> ... Corpo del documento ... </BODY> </HTML> |
All'inizio dovrebbe trovarsi la dichiarazione del tipo di documento, cioè HTML, quindi, dopo la dichiarazione esplicita dell'inizio di questa attraverso l'elemento HTML, si trova l'intestazione, HEAD, nella quale si inserisce almeno il titolo della pagina.
*1*
Come già accennato, l'intestazione serve almeno per inserire il titolo della pagina. Di solito, il titolo non appare nel testo del documento, ma viene evidenziato altrove e lo si usa come riferimento quando si memorizza l'indirizzo della pagina nel segnalibro del programma utilizzato per la sua visualizzazione. Il titolo della pagina serve anche ai motori di ricerca per mostrare un elenco delle pagine corrispondenti a un certo modello.
In pratica, il titolo deve esprimere in breve il senso della pagina, e può essere qualcosa di diverso rispetto ai titoli che appaiono effettivamente nel testo contenuto.
Normalmente, oltre al titolo conviene aggiungere altre indicazioni che possono essere utili per i motori di ricerca. Per questo si utilizzano degli elementi speciali, META, che non hanno alcun significato per i programmi di visualizzazione delle pagine (i navigatori). L'esempio seguente mostra un'intestazione sufficientemente completa.
<HEAD>
<TITLE>Titolo della pagina</TITLE>
<META NAME="description" CONTENT="Esempio di una pagina HTML.">
<META NAME="keywords" CONTENT="HTML, SGML, Editoria elettronica">
<META NAME="author" CONTENT="P. Pallino ppallino@dinkel.brot.dg">
<META NAME="classification" CONTENT="Esempio HTML">
</HEAD>
|
Il corpo di un documento HTML è delimitato dall'elemento BODY e il suo contenuto può essere scomposto in titoli di livello diverso, ma si tratta comunque di una possibilità. In pratica, il corpo può essere composto come si vuole.
Gli elementi utilizzabili per i titoli vanno da H1 a H6, dove il primo rappresenta il livello più alto (in pratica il titolo ha una dimensione più grande), mentre l'ultimo rappresenta il più basso.
... <H1>Titolo principale</H1> ... <H2>Titolo di livello inferiore</H2> ... <H1>Altro titolo principale</H1> ... |
In HTML, l'interruzione di un paragrafo deve essere segnalata esplicitamente. Teoricamente, si dovrebbe segnalare sia l'inizio che la fine di un paragrafo. In pratica, si può utilizzare quasi sempre solo il marcatore di inizio (senza la conclusione) nei punti in cui la separazione non è ovvia. L'esempio seguente dovrebbe chiarire il problema.
... <H1>Titolo principale</H1> Primo paragrafo che descrive qualcosa che non serve precisare oltre. <p>Paragrafo successivo. <H1>Altro argomento</H1> ... |
Nell'esempio appena visto, il paragrafo che segue il titolo è stato dichiarato implicitamente, perché dopo il titolo si sottintende questo. Il paragrafo successivo, viene invece evidenziato in modo preciso, anche se non viene indicato il marcatore di conclusione.
Volendo essere precisi (e sarebbe meglio esserlo) il testo avrebbe dovuto essere scritto nel modo seguente:
... <H1>Titolo principale</H1> <P>Primo paragrafo che descrive qualcosa che non serve precisare oltre.</P> <P>Paragrafo successivo.</P> <H1>Altro argomento</H1> ... |
HTML ignora le righe bianche (possono contenere spazi e caratteri di tabulazione, oltre ai caratteri di conclusione della riga), per cui la separazione dei paragrafi attraverso l'inserzione di righe non serve a nulla.
A seconda del programma di navigazione utilizzato, la conclusione e l'inizio di un nuovo paragrafo può implicare l'inserzione di un piccolo spazio di separazione nel risultato finale visualizzato della pagina HTML. Se quello che si vuole è solo l'interruzione per poter ricominciare in una nuova riga, 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> |
|
Tuttavia, proprio a causa delle possibili differenze di realizzazione tra i programmi di navigazione che non garantiscono una rappresentazione finale uniforme, l'uso di questo tipo di interruzione è sconsigliabile. |
Per separare il testo esiste anche la possibilità di utilizzare delle righe di separazione orizzontale: HR (Horizontal Rule). Data la loro funzione, solitamente non si utilizza il marcatore di conclusione.
In generale, esistono due tipi di elenchi: puntati e numerati. L'elenco puntato viene definito utilizzando l'elemento UL (Unordered List), mentre quello numerato si ottiene con l'elemento OL (Ordered List). Le voci dell'elenco, sono costituite da elementi LI (List Item).
<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> |
Naturalmente, gli elenchi possono essere più complessi, e dopo una voce può iniziare un nuovo elenco di livello inferiore.
Quando si inizia a utilizzare le tabelle e si scoprono gli effetti che si riescono a ottenere, non si vorrebbe più farne a meno. In realtà, le tabelle dovrebbero essere utilizzate il meno possibile, perché alcuni programmi per la visualizzazione di documenti HTML non sono in grado di gestirle.
La tabella è definita dall'elemento TABLE; al suo interno appaiono delle righe, delimitate attraverso elementi TR (Table Row) che a loro volta si scompongono in celle, TD (Table Data). Non è obbligatorio che ogni riga abbia lo stesso numero di celle, ma in generale conviene che sia così.
L'esempio seguente mostra una tabella di tre righe per due colonne.
<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> |
Quando si pubblica qualcosa nella rete, è molto probabile che sia rivolto a un pubblico molto ampio. A questo proposito, l'insieme di caratteri potrebbe rappresentare un problema: ISO 8859-1 (Latin-1) potrebbe non andare bene in Russia, e forse nemmeno negli USA.
Questo significa che, per quanto possibile, è opportuno utilizzare la codifica ASCII a 7 bit.
I caratteri accentati e i simboli speciali possono essere ottenuti utilizzando una serie di macro, che corrispondono a quelle usate da tutti i sistemi SGML. Nel capitolo 116 è già apparsa una tabella riferita alle entità standard di uso comune nell'SGML. Si tratta precisamente della tabella 116.1.
La sigla HTML fa riferimento esplicitamente al fatto che si tratta di 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.
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 completo 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.
Il vantaggio di utilizzare riferimenti relativi, sta nella facilità con cui il documento può essere spostato o copiato in altri punti nel filesystem dello stesso o di un altro elaboratore.
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> |
Come si vede, 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 Linux</A> |
Un documento HTML può contenere riferimenti a file di immagine esterni in modo che nel risultato finale appaia in quel punto l'immagine corrispondente. Generalmente si possono utilizzare solo i formati GIF, JPG e PNG (in pratica le estensioni .gif, .jpg e .png).
*2*
In un certo senso, il funzionamento di questi riferimenti a immagini è lo stesso di quelli ad altri documenti, solo che il risultato è l'inserzione automatica nel documento finale. Infatti, i file di immagine possono trovarsi in un elaboratore qualunque che sia accessibile attraverso la rete. Perciò, come nel caso dei riferimenti ai documenti, anche quelli alle immagini possono essere assoluti o relativi, se viene indicato il nome del nodo oppure no.
I riferimenti a file di immagine si fanno attraverso l'elemento IMG, come nell'esempio seguente:
<IMG SRC="http://www.brot.dg/varie/immagini/logo.jpg" ALT="Logo"> |
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.
Le immagini vengono trattate più o meno come il testo normale, per cui sono soggette all'allineamento e alla centratura. Generalmente, per evitare problemi di compatibilità con i vari programmi di navigazione, è meglio evitare di fare scorrere il testo a fianco delle immagini, e quindi è 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 quest'ultimo. In questo caso di utilizzo, è 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> |
È il caso di ricordare che 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> |
HTML è un tipo di documento SGML. Le regole che specificano il modo in cui può essere scritto un documento HTML sono indicate nel suo DTD, e prendere un po' di confidenza con questo può servire per fugare qualunque dubbio sull'uso dei vari elementi.
Prima, naturalmente, occorre conoscere le basi dell'SGML (capitolo 116), e l'uso degli strumenti fondamentali di convalida (il pacchetto SP, descritto nel capitolo 117).
Per poter verificare la correttezza formale di un documento HTML, oltre agli strumenti di convalida, cioè il pacchetto SP, occorre procurarsi il DTD e le sue estensioni riferite alle entità generali, quelle che permettono di utilizzare le macro per le lettere accentate e i simboli speciali.
Il DTD HTML 3.2 e le entità ISO Latin-1 si trovano generalmente anche nel pacchetto SP; in ogni caso, le entità generali servono solo per verificare che nel documento HTML siano state utilizzate delle macro valide.
Il formato HTML 3.2 è il più comune, e per essere sicuri che il proprio documento sia il più standard possibile conviene accettare le sue limitazioni. Al suo interno potrebbe essere necessario verificare, ed eventualmente modificare, qualcosa.
<!--
W3C Document Type Definition for the HyperText Markup Language
version 3.2 as ratified by a vote of W3C member companies.
For more information on W3C look at URL http://www.w3.org/
Date: Tuesday January 14th 1997
Author: Dave Raggett <dsr@w3.org>
HTML 3.2 aims to capture recommended practice as of early '96
and as such to be used as a replacement for HTML 2.0 (RFC 1866).
Widely deployed rendering attributes are included where they
have been shown to be interoperable. SCRIPT and STYLE are
included to smooth the introduction of client-side scripts
and style sheets. Browsers must avoid showing the contents
of these element Otherwise support for them is not required.
ID, CLASS and STYLE attributes are not included in this version
of HTML.
-->
<!ENTITY % HTML.Version
"-//W3C//DTD HTML 3.2 Final//EN"
-- Typical usage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
...
</html>
--
>
<!--================== Deprecated Features Switch =========================-->
<!ENTITY % HTML.Deprecated "IGNORE">
|
Nella prima parte, dopo il commento introduttivo e le istruzioni su come abbinare il DTD al documento HTML, appare la dichiarazione di un'entità parametrica, denominata HTML.Deprecated, a cui si può assegnare la stringa INCLUDE, oppure IGNORE. Attraverso questa entità, viene controllata la definizione di alcuni elementi il cui utilizzo è considerato sconsigliabile. Se gli si abbina la stringa IGNORE, questi elementi non vengono dichiarati nel DTD, e la loro presenza nel documento viene considerata un errore.
Più avanti nel DTD appare l'inclusione delle entità generali standard; generalmente si tratta di ISO Latin-1, come appare nel pezzo seguente:
<!--================ Character mnemonic entities ==========================-->
<!ENTITY % ISOlat1 PUBLIC
"ISO 8879-1986//ENTITIES Added Latin 1//EN//HTML">
%ISOlat1;
|
È importante osservare che esistono varie versioni della codifica ISO latin-1 nell'ambito delle entità standard (con più o meno simboli a disposizione). La scelta di un DTD riferito a una versione particolare di HTML, implica anche il gruppo di entità generali a cui si può fare riferimento.
La presenza di questa richiesta nel DTD implica che ci deve essere una dichiarazione adeguata nel catalogo SGML, riferita possibilmente all'identificatore pubblico
ISO 8879-1986//ENTITIES Added Latin 1//EN//HTML |
in modo che il sistema sappia dove prendere queste entità.
Perché l'analizzatore SGML sia in grado di trovare le entità generali esterne indicate nel DTD, occorre predisporre un catalogo molto semplice, come quello seguente:
PUBLIC "ISO 8879-1986//ENTITIES Added Latin 1//EN//HTML" "ISOlat1" PUBLIC "-//W3C//DTD HTML 3.2 Final//EN" "html-3.2.dtd" |
In tal caso, le entità generali richieste dal DTD dell'HTML 3.2 sono contenute nel file ISOlat1, mentre il DTD è contenuto nel file html-3.2.dtd.
Per verificare la validità formale di un documento HTML, si può quindi utilizzare il programma nsgmls (del pacchetto SP) nel modo seguente. Si suppone in particolare che il catalogo sia contenuto nel file catalogo, e che il file da verificare sia mio_file.html, entrambi collocati nella directory corrente.
$ cat mio_file.html | nsgmls -s -c catalogo
È il caso di ricordare che alcune distribuzione GNU/Linux, in particolare Debian, predispongono un pacchetto apposito contenente i DTD più comuni riferiti all'HTML, assieme alle relative entità standard. Naturalmente, il tutto è organizzato in un unico catalogo che va eventualmente ad aggiornare il catalogo di sistema (dovrebbe trattarsi del file /etc/sgml.catalog, oppure del file /usr/lib/sgml/catalog). Il nome di questo pacchetto potrebbe essere sgml-data*.
I programmi utilizzati per visualizzare i documenti HTML hanno una loro visione del significato dei vari elementi e delle macro (le entità generali) contenute. La verifica di validità secondo il DTD è un filtro iniziale molto importante per garantire che il documento possa essere «visto» correttamente attraverso qualunque programma. Tuttavia, alcune particolarità dell'SGML potrebbero essere sconosciute a tali programmi.
Di sicuro, le sezioni marcate non possono essere utilizzate; inoltre, il trucco del marcatore conclusivo generico, il simbolo </>, non viene riconosciuto nella maggior parte dei casi.
Evidentemente, dopo la verifica formale con gli strumenti SGML, conviene dare un'occhiata al proprio documento, così come viene interpretato da uno di questi programmi di navigazione.
---------------------------
Appunti Linux 1999.09.21 --- Copyright © 1997-1999 Daniele Giacomini -- daniele @ pluto.linux.it
1.) Un documento HTML è suddiviso normalmente in diverse pagine collegate attraverso dei riferimenti. Ogni pagina ha la stessa struttura: dichiarazione del DTD, inizio di HTML, intestazione, corpo, conclusione.
2.) Il formato PNG è accettato solo da alcuni programmi di navigazione, di conseguenza non è sempre consigliabile il suo utilizzo.