Capitolo successivo Capitolo precedente Indice

71. Introduzione a HTML

HTML sta per HyperText Markup Language e in pratica è un formato SGML per i documenti utilizzati nel web 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:

Lo standard HTML è tale per cui tutti (o quasi) i programmi utilizzabili per la lettura di tali documenti sono in grado di ``cavarsela'' in qualche modo. 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.

71.1 Struttura

Normalmente, i programmi che si utilizzano per visualizzare documenti HTML sono molto tolleranti sul formato che questi possono avere, ma in generale, converrebbe attenersi ad un formato preciso, come descritto di seguito.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//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 con l'uso del marcatore HTML, si trova la testata, HEAD nella quale si inserisce almeno il titolo della pagina.

Un documento HTML è normalmente suddiviso in diverse pagine collegate attraverso dei riferimenti. Ogni pagina ha la stessa struttura: dichiarazione del DTD, inizio di HTML, testata, corpo, conclusione.

71.2 Testata e informazioni supplementari

Come già accennato, la testa 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 accumula 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 dai titoli che appaiono effettivamente nel testo contenuto.

Oltre al titolo conviene normalmente aggiungere altre indicazioni che possono essere utili per i motori di ricerca. Per questo si utilizzano degli speciali marcatori META che non hanno alcun significato per i programmi di visualizzazione delle pagine. L'esempio seguente mostra una testata 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="Pinco Pallino - ppallino@topolino.zigozago.dg">
        <META NAME="classification" CONTENT="Esempio HTML">
</HEAD>

71.3 Corpo del documento

Il corpo di un documento HTML è delimitato dal marcatore BODY e il suo contenuto può essere scomposto in titoli di diverso livello, ma si tratta comunque di una possibilità. In pratica, il corpo può essere composto come si vuole.

Titoli

I marcatori utilizzabili per i titoli vanno da H1 a H6, dove il primo rappresenta il livello più alto (il titolo ha una dimensione più grande), mentre l'ultimo, il più basso.

...
<H1>Titolo principale</H1>
...
<H2>Titolo di livello inferiore</H2>
...
<H1>Altro titolo principale</H1>
...

Paragrafi e interruzioni

In HTML, l'interruzione di un paragrafo deve essere segnalata esplicitamente. Teoricamente, si dovrebbe utilizzare il marcatore P per iniziare e concludere 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.

Ad essere precisi, 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 tabulazioni, oltre ai caratteri di conclusione della riga), per cui la separazione dei paragrafi attraverso l'inserzione di righe non serve a nulla.

La conclusione e l'inizio di un nuovo paragrafo, implica 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, conviene utilizzare il marcatore 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). Data la loro funzione, solitamente non si utilizza il marcatore di conclusione.

Elenchi

In generale, esistono due tipi di elenchi: puntati e numerati. L'elenco puntato viene definito utilizzando il marcatore UL (Unordered List), mentre quello numerato si ottiene con il marcatore OL (Ordered List). Gli elementi che compongono l'elenco, sono delimitati da marcatori 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.

Tabelle

Quando si inizia ad utilizzare le tabelle e si scoprono gli effetti che si riescono ad 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 attraverso l'uso del marcatore table che ne delimita l'inizio e la fine. Al suo interno appaiono delle righe, delimitate attraverso 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>

71.4 Set di caratteri

Quando si pubblica qualcosa nella rete, è molto probabile che questo sia rivolto a un pubblico possibilmente molto ampio. Il set 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 in linea di massima corrispondono a quelle usate da tutti i sistemi SGML. La tabella (seguente) mostra un elenco di lettere particolari e accentate.


&aacute; á &Aacute; Á &acirc; â &Acirc; Â &agrave; à
&Agrave; À &aring; å &Aring; Å &atilde; ã &Atilde; Ã
&auml; ä &Auml; Ä &aelig; æ &AElig; Æ &ccedil; ç
&Ccedil; Ç &eacute; é &Eacute; É &ecirc; ê &Ecirc; Ê
&egrave; è &Egrave; È &euml; ë &Euml; Ë &iacute; í
&Iacute; Í &icirc; î &Icirc; Î &igrave; ì &Igrave; Ì
&iuml; ï &Iuml; Ï &ntilde; ñ &Ntilde; Ñ &oacute; ó
&Oacute; Ó &ocirc; ô &Ocirc; Ô &ograve; ò &Ograve; Ò
&oslash; ø &Oslash; Ø &otilde; õ &Otilde; Õ &ouml; ö
&Ouml; Ö &szlig; ß &uacute; ú &Uacute; Ú &ucirc; û
&Ucirc; Û &ugrave; ù &Ugrave; Ù &uuml; ü &Uuml; Ü
&yacute; ý &Yacute; Ý &yuml; ÿ
Alcuni codici macro fissati con lo standard ISO 8879:1986, appartenenti al set di caratteri ISO latin-1.

71.5 Collegamenti ipertestuali

La sigla HTML fa esplicitamente riferimento 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 un una pagina intera o a un punto particolare di una pagina. Il riferimento può essere assoluto, cioè provvisto dell'indicazione dell'host e del percorso necessario a raggiungere la pagina, oppure relativo all'host attuale.

Per i riferimenti si utilizza il marcatore A.

Riferimenti a una pagina intera

Un riferimento a una pagina intera, con l'indicazione del percorso assoluto per raggiungerla, viene fatto come nell'esempio seguente.

<A HREF="http://www.zigozago.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.zigozago.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 dell'host in cui si trovano, e nemmeno il percorso completo delle directory da attraversare per raggiungerlo.

<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 dello stesso o di un altro host.

Riferimenti a una posizione di una pagina

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 una semplice etichetta.

<A NAME="introduzione"></A>

Si usa quindi lo stesso marcatore che serve per creare un puntatore, ma con l'opzione NAME. L'argomento dell'opzione 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 una etichetta di un certo file, si utilizza la notazione solita, aggiungendo l'indicazione dell'etichetta.

<A HREF="http://www.zigozago.dg/varie/linux.html#introduzione">Introduzione a Linux</A>

 

1997.10.26 - Scritto da Daniele Giacomini   daniele@calion.com   (vedi copyright: Appunti Linux).


Capitolo successivo Capitolo precedente Indice