Docenti.org - HTML - Il linguaggio degli ipertesti


		Struttura di una pagina HTML
		Visualizzione delle immagini
		Le URL
		TAG per la formattazione del testo
		I link
		Liste
		Tabelle
		Le frame
		Caratteri speciali
		Le mappe sensibili

Premessa

Un normale testo viene letto in maniera sequenziale. Nel momento in cui non conosciamo il significato di una parola siamo costretti a interrompere la normale lettura per fare una ricerca.

Un ipertesto invece può essere letto in modo non lineare: possiamo scegliere gli argomenti che più ci interessano e saltare quelli che già conosciamo. Inoltre, e soprattutto, alcune parole del testo possono essere collegate ad altre parti di esso. Cliccando su queste parole "attive", possiamo visualizzare le parti del testo collegate.

Se Don Abbondio avesse avuto a disposizione un ipertesto, non avrebbe mai pronunciato la famosa frase: "Carneade? chi era costui?". Infatti, con un semplice clic del mouse sulla parola "Carneade" gli sarebbero state mostrate tutte le informazioni relative al filosofo greco.

Questi collegamenti, chiamati "link", contraddistinguono un ipertesto.

Un ipermedia è un’estensione dell'ipertesto: a una parola potrebbe essere collegato qualcosa di diverso da un testo: un'immagine, un filmato, una musica. Ad esempio, cliccando sulle parole "Nabucco di Verdi", potremmo ascoltare un brano dell’opera.

Esistono molti programmi per costruire ipertesti. In ambito scolastico, per molto tempo, è stato abbastanza diffuso Toolbook che, al di fuori della scuola, era utilizzato per preparare presentazioni.

Oggi il tipo di ipertesto dominante è quello utilizzato per costruire le pagine web di Internet attraverso un linguaggio che si chiama HTML (HyperText Markup Language).

Ci sono diversi motivi per preferire l'HTML nel costruire ipertesti::

	è il più diffuso, proprio perché utilizzato su internet
	è uno standard le cui regole sono unificate e definite (anche se non tutti i browser le rispettano in pieno)
	è semplice da costruire e non obbliga a ricorrere a costosi programmi commerciali

Anche se esistono diversi programmi che aiutano a costruire questi ipertesti (in primo luogo Microsoft FrontPage o Macromedia Dreamweaver), noi vedremo la via più semplice, quella che permette di capire meglio la struttura dell'HTML.

Gli strumenti indispensabili per costruire e visualizzare una pagina HTML sono:

	un browser, cioè un programma che consente di visualizzare le pagine web di Internet, ad esempio Netscape o Internet Explorer.
	un programma di grafica, che consente di creare e modificare immagini, soprattutto del tipo GIF e JPG. Buoni programmi, facili da usare, sono Paint Shop Pro e Corel Draw.
	un editor di testi. Ve ne sono alcuni molto semplici, normalmente forniti insieme al sistema operativo, altri molto sofisticati. Nel DOS trovate EDIT, in Windows NOTEPAD. Si possono usare anche l'editor di Turbo Pascal o un Word Processor come Word, con l'accortezza di salvare il file in formato ASCII.

Se si dispone di un sistema operativo multitasking (che permette l'esecuzione contemporanea di più programmi), un buon metodo consiste nell'aprire contemporaneamente due finestre: una con l'editor in cui si compone l'ipertesto, l'altra con il browser in cui si visualizza l'ipertesto.

Struttura di una pagina HTML: nozioni essenziali

Ogni pagina di un ipertesto deve essere contenuta in un file diverso, che deve avere estensione HTM o HTML. Ad esempio, un nome valido di una pagina è:
pagina.htm La pagina iniziale dell'ipertesto (quella che deve essere visualizzata per prima) dovrebbe (non è obbligatorio, ma è consigliabile) avere uno dei seguenti nomi:

`index.htm`		`index.html`
`default.htm`		`default.html`
`home.htm`		`home.html`
`menu.htm`		`menu.html`
`main.htm`		`main.html`

perché, su Internet, viene visualizzata automaticamente, senza che si debba chiamarla per nome. Il nome preciso dipende dal server che contiene le pagine.

Una pagina HTML contiene, oltre al normale testo, una serie di comandi che consentono, ad esempio, di cambiare la dimensione, il colore o l'allineamento dei caratteri, oppure di inserire immagini, suoni o altri oggetti che vedremo in seguito. Questi comandi sono chiamati "tag".

Ogni tag è contenuta fra i simboli di minore (<) e maggiore (>), ad esempio:
<b> è il comando che serve per iniziare la visualizzazione di parole in grassetto (bold, in inglese).

Quando un comando dato in precedenza deve terminare il suo effetto, si usa lo stesso comando preceduto dalla barra (/). Ad esempio:
<b>parole in grassetto</b> la tag </b> termina la visualizzazione in grassetto; le parole successive verranno visualizzate normalmente.

Le tag possono essere scritte sia in lettere maiuscole, sia in lettere minuscole.

Una pagina HTML è sempre contenuta fra le tag:
<HTML></HTML> La parte essenziale della pagina HTML è contenuta fra le tag:
<BODY></BODY> Ad esempio, una semplicissima pagina HTML potrebbe essere la seguente:
<HTML> <BODY> Questo e` un semplice <b>ipertesto</b>. </BODY> </HTML> Possiamo creare con l'editor la pagina contenente le precedenti cinque righe e salvarle nel file PROVA.HTM.

Per visualizzare la pagina che abbiamo creato, apriamo Netscape e nel menu FILE selezioniamo APRI PAGINA. Quando ci viene richiesto il nome del file, scriviamo PROVA.HTM, facendo attenzione alla directory in cui si trova. Quello che vedremo sarà:
Questo e` un semplice ipertesto. Si noti che, al posto della vocale accentata, è stata indicata la lettera "e" seguita dall'accento. Le vocali accentate non dovrebbero mai essere usate su Internet, perché potrebbero non essere visualizzate correttamente da tutti gli utenti.

Se si vuole visualizzare la vocale accentata, si dovrebbe usare una notazione particolare. Ad esempio, la vocale "e" accentata deve essere indicata così:
è (compreso il ";" finale). Allora, il nostro esempio diverrà:
<HTML> <BODY> Questo è un semplice <b>ipertesto</b>. </BODY> </HTML> Visualizzando la pagina, avremo il seguente risultato:
Questo è un semplice ipertesto. Prima del body ci potrebbe essere un’intestazione (non obbligatoria) con il titolo o alcune informazioni supplementari (nome dell'autore, contenuto, tipo di documento ecc.). Questa intestazione viene compresa fra le tag:
<head>...</head> Ciò che è contenuto nell'intestazione non viene visualizzato, ma potrebbe servire al browser per vari motivi che qui tralasciamo.

Una tag molto utilizzata è quella relativa a un commento, cioè una linea che non viene visualizzata dal browser, ma serve solo a chi costruisce l'ipertesto per ricordarsi che cosa sta facendo:
 La tag inizia con un punto esclamativo seguito da due trattini e finisce con due trattini.

Da questi semplici esempi si comprende che la costruzione di un ipertesto HTML richiede solo la conoscenza di queste tag. Qui tratteremo solo delle tag principali, mentre per una conoscenza completa si rimanda a testi specifici.

Visualizzazione di immagini

Le immagini da usare negli ipertesti dovrebbero essere solo nei formati GIF o JPEG, perché sono gli unici che i browser possono visualizzare direttamente. Formati differenti potrebbero richiedere programmi aggiuntivi e le immagini verrebbero visualizzate in una finestra separata.

Le immagini JPEG hanno il vantaggio di visualizzare un numero molto elevato di colori (oltre 16 milioni) e quindi vanno usate, in particolare, quando si richiede una qualità fotografica.

Le immagini GIF, invece, consentono di visualizzare contemporaneamente al massimo 256 colori. In molti casi 256 colori sono sufficienti per ottenere una qualità accettabile dell'immagine.

Oltre alla qualità dell'immagine, dobbiamo considerare la dimensione del file che la contiene. Quanto più aumenta la dimensione del file, tanto più si allunga il tempo di trasmissione sulla linea telefonica. Di solito con le JPEG, se il numero di colori è elevato, si hanno file di dimensioni più contenute, ma non è raro che le GIF si rivelino più compatte.

In generale, nella scelta del formato, si dovrebbero tenere presenti le seguenti regole:

	se l'immagine contiene pochi colori (non più di 16), le GIF dovrebbero essere preferibili, non solo per dimensioni del file, ma anche per il fatto che le JPEG possono modificare i colori di alcuni punti.
	se abbiamo bisogno di un'immagine con un numero molto elevato di colori, dobbiamo necessariamente usare le JPEG.
	con un numero intermedio di colori, ovviamente minore di 256, basta verificare la dimensione del file e scegliere il formato cui è associato il file più compatto.

Dobbiamo tenere presente, inoltre, che alcune immagini GIF possono essere animate. Sono costituite da un insieme di immagini (fotogrammi) che, mostrate una dopo l'altra, producono l'effetto di movimento. Per costruire GIF animate è necessario un programma specifico, ma se ne trovano moltissime su Internet. Le GIF potrebbero anche essere "interlacciate": le righe di punti non sono visualizzate in modo sequenziale.

Per visualizzare un'immagine nell'ipertesto si usa la tag:
<IMG SRC="nome"> Ad esempio, scriviamo questo semplice ipertesto:
<HTML> <BODY> Questa è una foto:<BR> <IMG SRC="FOTO.JPG"> </BODY> </HTML>con cui viene mostrata l'immagine FOTO.JPG, contenuta nella directory corrente.

Si noti l'aggiunta della tag <BR> (Break) che ha l'effetto di spostare alla riga successiva tutto ciò che segue. Va inoltre notato che questa operazione non è automatica; infatti, il seguente esempio:
<HTML> <BODY> Prima riga Seconda riga </BODY> </HTML> verrà visualizzato come:
Prima riga Seconda riga Riportiamo nella tabella seguente alcune opzioni che possono essere usate nella visualizzazione delle immagini:

Tag	Significato
`<img src="url">`	Visualizzazione dell'immagine
`<img src="url" align=LEFT \| CENTER \| RIGHT valign=TOP \| MIDDLE \| BOTTOM`	Allineamento orizzontale e verticale dell'immagine.
`<img src="url" alt="testo">`	Testo alternativo, nel caso che l'immagine non venga visualizzata.
`<img src="url" width=x height=y>`	Dimensioni dell'immagine in pixel. Se non vengono indicate, le dimensioni dell'immagine saranno quelle originali. Se si indica solo una dimesione, l'altra cambierà irispettando la scala. Possiamo aggiungere il segno "%" ai numeri x e y se vogliamo modificare le dimensioni dell'immagine in percentuale dell'originale.
`<img src="url" border=x>`	Aggiunge un bordo all'immagine di x pixel. Si noti che, se non si aggiunge il comando border, verrà impostato il bordo di default (=1), che sarà visualizzato se all’immagine si associerà un link.

Nota: Nella tabella, il simbolo "|" che separa alcune parole (per esempio LEFT | CENTER) ha il significato di "oppure".

Le URL

URL è l'acronimo di Uniform Resource Locator e indica semplicemente l'indirizzo di una pagina web in Internet.

Un esempio di URL è:
HTTP://www.mclink.it che è l'indirizzo del sito chiamato MC-link. Questi indirizzi iniziano quasi sempre con le lettere "HTTP://" che indicano il protocollo (HyperText Transfer Protocol). Sigle diverse indicano protocolli diversi che si usano in applicazioni particolari e che per ora non prenderemo in considerazione.

Le tre "w" che seguono sono convenzionali e potrebbero non esserci. Sono le iniziali delle parole World Wide Web (la "ragnatela" mondiale).

Il punto serve solo da separatore fra le diverse parole.

Le ultime lettere (in questo caso "it") indicano che il sito si trova in Italia. Oltre alla nazionalità, le ultime lettere possono indicare il tipo di sito. Ad esempio, nella URL:
http://www.ibm.com che è l'indirizzo dell'IBM, le ultime tre lettere ("com") indicano che si tratta di un sito commerciale.

Oppure, nella URL:
http://www.stanford.edu che è l'indirizzo dell'università di Stanford in California, la sigla "edu" sta per "educational" e indica enti educativi.

Le URL possono essere un po' più complesse. Ad esempio:
http://www.mclink.it/personal indica la directory di nome personal che si trova nel computer di MC-link. Oppure:
http://www.mclink.it/personal/index.html indica il file index.html che si trova nella directory personal del sito MC-link.

In sintesi, possiamo accedere a qualsiasi directory e a qualsiasi file di un sito. L'indirizzo completo del file è analogo a quello che si usa in DOS per indicare il nome di un file. Queste le differenze principali:

	al posto della barra inversa (`\`), si usa la barra normale (`/`) come è uso in altri sistemi operativi (UNIX).
	l'identificativo del drive è sostituito dall'identificativo del sito.

Le URL possono sempre essere utilizzate al posto del nome di un file. Così, se sappiamo che sul sito MC-link vi è un'immagine chiamata LOGO.GIF, possiamo visualizzarla nel nostro ipertesto con il comando:
<img src="http://www.mclink/logo.gif"> Questo comando, ovviamente, funziona solo se è in atto un collegamento internet.

La URL del sito in cui si trova il nostro ipertesto (il nostro computer) è soltanto:
file:/// con la parola file, al posto di http e tre barre invece di due. Se vogliamo accedere a un file che si trova nel drive D: del nostro computer, possiamo usare la URL:
file:///D|/directory/file Si noti che i due punti che seguono la lettera del drive sono sostituiti dal carattere "|" (pipe).

TAG per la formattazione del testo

Riassumiamo le principali tag nella seguente tabella:

tag	Significato
`<b>...</b>`	Grassetto (bold)
`<i>...</i>`	Corsivo (italic)
`<u>...</u>`	Sottolineato (underline)
`<s>...</s>`	Cancellato (strikeout)
`<sup>...</sup>`	Esponente
`<sub>...</sub>`	Deponente
`<tt>...</tt>`	Caratteri a spaziatura fissa
`<center>...</center>`	Centrato
`<blink>...</blink>`	Lampeggiante
`<pre>...</pre>`	Preformattato (non necessita il <BR> alla fine della riga).
`<font name="nome_font"> ...</font>`	Definisce il font da utilizzare.
`<font size=x>...</font>`	Grandezza del font (da 1 a 7)
`<font size=+ \| -x> ... </font>`	Cambio della grandezza del font (con il + viene ingrandito, con il - viene rimpiccolito).
`<font color="xxxxxx"> ... </font>`	Colore del font, con xxxxxx il colore RGB in esadecimale.
`<big>...</big>`	Font più grande
`<small>...</small>`	Font più piccolo

Le tag <big> e <small> possono essere utilizzate più volte, per duplicare o moltiplicare l'effetto; per esempio:
<big><big>Parola molto grande</big></big> La tag <PRE> permette la visualizzazione del testo esattamente come è stato scritto; non solo risparmia un <BR> alla fine della riga, ma visualizza tutti gli spazi fra due parole; al di fuori della tag <PRE>, se vi sono più spazi fra parole ne viene visualizzato solo uno.

I link

I link sono collegamenti fra una parola e un testo. Le parole che sono collegate ad altre parti del testo sono visualizzate in colore diverso (di solito blu). Passando sopra una di esse, la freccia del mouse cambia forma, di solito si trasforma in una manina. Quando si clicca su una di queste parole, viene visualizzato il testo collegato.

I link sono di due tipi: esterni e interni. Un link interno (il meno usato) è un collegamento a una parte di testo che si trova all'interno della stessa pagina, ma in una posizione diversa da quella della parola visualizzata. Un link esterno è un collegamento a una pagina diversa.

I link esterni

Un link esterno viene creato con la tag <a> (àncora) nella seguente maniera:
<a href="nome della pagina">...</a> Tutte le parole che si trovano al posto dei puntini vengono visualizzate in colore diverso e su di esse si può cliccare per attivare il collegamento. Ad esempio:
La Divina Commedia è stata scritta da <a href="dante.htm>Dante Alighieri</a> nel tredicesimo secolo. Le parole "Dante Alighieri" costituiscono un collegamento al file dante.htm. Cliccando su una di esse verrà visualizzato questo file che, ovviamente, deve essere stato creato in precedenza.

All'interno delle due tag <a>...</a>, potrebbero non esserci parole (o solamente parole), ma un'immagine. Per esempio:
Clicca sull'immagine seguente: <br> <a href="dante.htm><img src="dante.gif"></a>
L'immagine dante.gif verrà visualizzata con una sottile cornice azzurra e, cliccando su sull'immagine, verrà visualizzata la pagina dante.htm.

Al posto del nome della pagina (dopo href) vi possono essere molte altre cose: il nome di un'immagine, il nome di un file sonoro o anche una URL. Ad esempio:
<a href="dante.jpg">Dante Alighieri</a> cliccando su "Dante Alighieri" verrà visualizzata l'immagine dante.jpg.
<a href="nabucco.mid">Giuseppe Verdi</a> cliccando su "Giuseppe Verdi" verrà eseguito il file musicale nabucco.mid. Si ricordi però che su Internet le musiche o i suoni, di solito, infastidiscono gli utenti e non dovrebbero essere utilizzati.
<a href="http://www.mclink.it">MC-link</a> cliccando sulla parola "MC-link", verrà effettuato il collegamento al sito.

I link interni

I link interni vengono creati ugualmente con la tag <a>, ma con una sintassi leggermente differente:
<a href="#etichetta">...</a> dove per "etichetta" si intende una qualsiasi sigla che deve essere preceduta dal segno di diesis. L'etichetta è il nome che si dà a una certa posizione del testo, che deve essere così definita:
<a name="etichetta"> Ad esempio:
A Silvia è una poesia di <a href="#leopardi">Giacomo Leopardi</a> ... ... ... <a name="leopardi">Nota</a> Giacomo Leopardi è un poeta nato a Recanati nel 1797 Cliccando sulle parole Giacomo Leopardi, il testo viene spostato all'interno della stessa finestra, fino a visualizzare la parte contrassegnata con l'etichetta.

Si possono anche combinare link esterni con quelli interni secondo una sintassi del tipo:
<a href="pagina.htm#etichetta"> ... </a> In questo modo, cliccando sulle parole al posto dei tre punti, viene visualizzato il file pagina.htm nella posizione contrassegnata dall'etichetta.

Un link particolare è:
<a href="mailto:nome_mail">...</a> Cliccando sul link, viene proposta la scrittura di un messaggio indirizzato alla casella postale nome_mail. Il nome di una mail è formato da un nome qualsiasi (uno diverso per ogni utente) seguito dal carattere "@" ("at" = "presso") e seguito ancora dal nome del sito. Ad esempio:
M.Mauri@mclink.it

Liste

Le liste possono essere di due tipi: ordinate e non ordinate. Nelle liste ordinate ogni elemento è preceduto da un numero; in quelle non ordinate è preceduto da un punto o da un trattino.

Liste non ordinate

Le liste non ordinate (unordered list) sono create dalla tag <ul>...</ul>. All'interno delle tag, ogni elemento viene identificato dalla tag <li> (list item). Per quest'ultima tag non è obbligatoria la tag di chiusura (</li>) perché l'elemento termina automaticamente quando inizia un nuovo elemento o quando termina la lista.

Ecco un esempio di lista non ordinata:

Le province del Lazio:<br> <ul> <li>Roma <li>Frosinone <li>Latina <li>Rieti <li>Viterbo </ul> che produrrà il seguente effetto:
Le province del Lazio: Roma Frosinone Latina Rieti Viterbo
Liste ordinate

Le liste ordinate (ordered list) vengono create con la tag <ol>...</ol>. Ogni elemento viene identificato sempre dalla tag <li>. Ecco un esempio di lista ordinata:

I fiumi più lunghi d'Italia:<br> <ol> <li>Po <li>Adige <li>Tevere </ol>
che produrrà il seguente effetto:
I fiumi più lunghi d'Italia: Po Adige Tevere
Tabelle

Una tabella è creata dalla tag <table>...</table>. All'interno di queste tag ci deve essere la definizione delle righe, con la tag <tr>, e delle colonne, con la tag <td>. Queste ultime tag non richiedono obbligatoriamente la tag di chiusura.

Facciamo un esempio di tabella di tre righe per due colonne:

<table>  <tr> <td>Regione <td>Capoluogo  <tr> <td>Lazio <td>Roma  <tr> <td>Lombardia <td>Milano </table> che produrrà il seguente effetto:

`Regione`	`Capoluogo`
`Lazio`	`Roma`
`Lombardia`	`Milano`

La tabella potrebbe essere dotata di bordo, con la tag:
<table border> ... </table> oppure
<table border=x> ... </table> dove x rappresenta lo spessore del bordo.

Ogni elemento della tabella può contenere non solo parole, ma anche un'immagine o un'altra tabella. Ad esempio:
<table> <tr> <td><img src="file.gif"> <td>A sinistra vi è un'immagine </table> Questa possibilità consente di usare le tabelle per creare documenti di stile giornalistico, con immagini inserite all'interno del testo.

Due celle contigue della tabella possono essere unite in una sola cella, con la tag:
<td colspan=x> dove x è il numero di celle da unire. In questo caso vengono unite due celle contigue orizzontalmente. Per unire due celle contigue verticalmente si usa la tag:
<td rowspan=x> Il contenuto di una cella può essere allineato con la tag:
<td align=left | center | right valign=top | middle | bottom> Questi comandi di allineamento possono essere inseriti nella tag <tr> per allineare, con un solo comando, tutti gli elementi della riga.

La tabella potrebbe avere anche una riga di intestazione (titolo), con la tag <th> (table header) che sostanzialmente equivale a <td>, ma con la differenza che l'intestazione viene visualizzata centrata e in grassetto.

La tabella può avere anche una riga di commento, mediante la tag:
<caption align=top | bottom> ... </caption> il comando caption non è obbligatorio, ma permette di porre la riga di commento nella parte superiore (top) o inferiore (bottom) della tabella.

Le tabelle possono avere una immagine di sfondo se si aggiunge, nella tag <table>, il comando background="nome_img". Ad esempio:
<table background="sfondo.gif">...</table> Con la versione 3.0 dell'HTML, possiamo assegnare uno sfondo diverso a ogni cella della tabella, aggiungendo lo stesso comando nella tag <td>.

Le frame

La finestra del browser può essere suddivisa in più parti per visualizzare una pagina differente in ciascuna di esse. La suddivisione è particolarmente utile quando, ad esempio, in una parte della finestra vogliamo rappresentare un indice (che rimane fisso) e nell'altra le pagine che si visualizzano di volta in volta cliccando sulla voce corrispondente dell'indice. Ognuna di queste suddivisioni viene chiamata frame ("cornice"). Non bisogna abusare delle frame, che appesantiscono molto la pagina e infastidiscono i lettori.

La creazione di una frame richiede una pagina apposita, che ne definisce le caratteristiche. La tag necessaria è:
<frameset cols="x,y"> ... </frameset> che suddivide la finestra in due colonne (viene disegnata una linea verticale). Oppure:
<frameset rows="x,y"> ... </frameset> con la quale la finestra viene suddivisa in due righe.

x e y rappresentano il numero dei punti che devono far parte di ognuna delle due frame. Alla lettera y può essere sostituito un asterisco, a indicare che la seconda frame viene dimensionata automaticamente fino a comprendere tutti i punti della finestra che le rimangono a disposizione.

I valori di x e y possono essere seguiti dal segno "%", a indicare che questi valori rappresentano non il numero di punti, ma la percentuale dell'intera finestra.

Dopo aver creato le frame, dobbiamo definire le pagine che in esse devono venire visualizzate, con la tag:
<frame src="nome_pagina" name="nome" target="destinazione"> nome_pagina è il nome della pagina da visualizzare nella frame, nome è un nome di riferimento attribuito alla frame. L'ultimo parametro (target) non è obbligatorio e lo vedremo meglio in seguito.

Ecco un esempio di una frame:
<html> <frameset cols="240,*"> <frame src="indice.htm" noresize marginwidth=0 marginheight=0 name="indice" target="images"> <frame src="image1.htm" noresize marginwidth=5 marginheight=0 name="images"> </frameset> </html> Prima osservazione importante: le tag relative alle frame devono trovarsi prima di un'eventuale tag <body>. L'eventuale <body>, che segue la definizione della frame, non viene preso in considerazione. Eppure non è raro trovare su Internet pagine che contengono sia la definizione delle frame, sia il successivo <body>; questo perché alcune vecchie versioni di browser non riconoscono le frame e quindi, ignorandole, visualizzeranno il resto della pagina.

La prima tag, <frameset>, suddivide lo schermo verticalmente in due colonne, la prima di 240 punti.

Le due tag <frame> definiscono le caratteristiche di ognuna delle due frame, la prima di nome indice e l'altra di nome images. Nella prima deve essere visualizzata la pagina indice.htm, nella seconda la pagina image1.htm.

Compaiono anche altri comandi che definiscono le caratteristiche delle frame; ad esempio noresize ne impedisce il ridimensionamento da parte del lettore.

Se all'interno della pagina visualizzata in una frame compare un link, cliccando su di esso la pagina collegata verrà visualizzata nella frame in cui è presente il link. Per cambiare questa impostazione, si aggiunge il comando target che definisce la frame in cui deve essere visualizzata la pagina collegata. In questo caso, cliccando sui link della prima frame, le pagine collegate verranno visualizzate nella frame images, cioè nella seconda.

Ciascuna frame può essere suddivisa in due ulteriori frame mediante gli stessi comandi. Così, se vogliamo dividere in due frame orizzontali la seconda frame dell'esempio precedente, dobbiamo fare queste modifiche:
<html> <frameset cols="240,*"> <frame src="indice.htm" noresize marginwidth=0 marginheight=0 name="indice" target="images"> <frameset rows="200,*" <frame src="titolo.htm" noresize name="titolo"> <frame src="image1.htm" noresize marginwidth=5 marginheight=0 name="images"> </frameset> </frameset> </html>
I link in una pagina con frame

In una pagina con frame, quando si clicca su un link, la pagina collegata viene visualizzata, normalmente, nella stessa frame in cui si trova il link. Se si vuole modificare questa impostazione (ad esempio se, cliccando su una voce di indice della frame di sinistra, si vuole visualizzare una pagina nell'altra frame), si può aggiungere il comando "target" alla tag relativa al link:
<a href="pagina.htm" target="nome"> ... </a> "nome" è il nome della frame in cui si deve visualizzare la pagina pagina.htm.

Se tutti i link di una frame hanno come destinazione un'altra frame, si può aggiungere, prima del body, un'intestazione (header) del tipo:
<head> <base target="nome"> </head> Se, cliccando sul link, si vogliono eliminare le frame e visualizzare la pagina nell'intera finestra del browser, si mette come destinazione _top:
<a href="pagina.htm" target="_top">...</a>
Altre TAG

La tabella seguente contiene altre tag utili:

TAG	Significato
`<body background="URL">`	URL definisce un'immagine da usare come sfondo della pagina.
`<body bgcolor="#rrggbb">`	definisce il colore RGB (in esadecimale) da usare come sfondo.
`<body text="#rrggbb">`	il colore RGB del testo
`<body link="#rrggbb">`	il colore RGB dei link
`<body vlink="#rrggbb">`	il colore RGB dei link visitati
`<body alink="#rrggbb">`	il colore RGB del link attivo
`<p>...</p>`	paragrafo: esegue un doppio ritorno a capo
`<p align = left \| center \| right \| justify> ... </p>`	allineamento di un paragrafo
`<hr>`	una riga orizzontale
`<hr align = left \| center \| right>`	una riga orizzontale allineata
`<hr size=x>`	riga orizzontale di spessore x pixel
`<hr width=x>`	riga orizzontale di lunghezza x pixel
`<hr width=x%>`	una riga di lunghezza pari a x% del totale.
`target="_blank"`	visualizza il link in una nuova finestra vuota
`target="_self"`	visualizza il link nella stessa finestra
`target="_parent"`	visualizza il link nella finestra "padre"
`target="_top"`	visualizza nell'intera finestra del browser (elimina le frame)

Nota: La giustificazione del testo, per quanto prevista sin dalla versione 3 dell'HTML, è stata implementata solo dalle più recenti versioni dei browser.

Caratteri speciali

La tabella che segue riporta alcuni caratteri speciali:

Simbolo	Carattere
`à À`	à À
`è È`	è È
`ì Ì`	ì Ì
`ò Ò`	ò Ò
`ù Ù`	ù Ù
`á Á`	á Á
`é É`	é É
`ó Ó`	ó Ó
`ú Ú`	ú Ú
`< >`	< >
`&`	&
`"`	"
`®`	™ (Trade Mark)
`©`	© (Copyright)
`&#x;`	con x compreso fra 0 e 255: visualizza il carattere ASCII come definito dal codice ISO 8859-1

Le mappe sensibili

Supponiamo di avere un'immagine suddivisa in parti di qualsiasi forma; se vogliamo, cliccando su ciascuna di queste parti, effettuare un link a una pagina diversa, possiamo usare le mappe.

Come mappa sensibile possiamo utilizzare ad esempio la mappa dell'Italia divisa in regioni; cliccando su ciascuna regione, si visualizzano informazioni sulla regione stessa. Oppure, nella pianta di una casa, cliccando su ogni singola stanza possiamo visualizzare i dettagli sulla stanza stessa.

La costruzione di una mappa sensibile può essere laboriosa e richiedere l'uso di programmi aggiuntivi.

Anzitutto dobbiamo visualizzare l'immagine e informare il browser che questa è suddivisa in parti sensibili; si usa la solita tag <IMG> con l'aggiunta del comando USEMAP:
<img src="nome_immagine" usemap="mappa"> "mappa" è l'indirizzo in cui viene definita la mappa. Si tratta di un indirizzo interno, per cui il nome della mappa è preceduto dal segno #. Ad esempio:
<img src="immagine.gif" usemap="#miamappa"> la mappa può essere definita in qualsiasi punto del file tramite le tag
<map name="miamappa">...</map> All'interno delle due tag ci sarà la definizione della mappa con più comandi del tipo:
<area shape="tipo di figura" coords="coordinate" href="link"> in cui:

link è il collegamento da attivare cliccando sulla parte dell'immagine che viene definita. Al posto di questo comando potrebbe esserci nohref; in tal modo, all'area definita non sarà associato alcun collegamento.

coordinate sono le coppie di coordinate (ascissa e ordinata, separate dalla virgola) che definiscono l'area; ogni coppia di coordinate è separata dalla virgola. Il numero di coordinate dipende dal tipo di figura.

tipo di figura è una stringa che indica la forma dell'area definita. Può essere rect, poly, circle oppure default. Quest'ultima si riferisce all'intera immagine.

aree rettangolari

un'area rettangolare è definita da due coppie di coordinate che rappresentano rispettivamente il vertice in alto a sinistra e quello in basso a destra. Ad esempio:
<area shape="rect" coords="137,2,197,42" href="link1.htm">
aree circolari

un'area circolare è definita dalle coordinate del centro e dal raggio del cerchio. Ad esempio:
<area shape="circle" coords="137,150,50" href="link2.htm">
aree poligonali

un'area poligonale è definita da un numero di coppie di coordinate pari al lati del poligono. Ad esempio:
<area shape="poly" coords="10, 153, 19, 237, 99, 229, 94, 169, 74, 168, 73, 146, 10, 153" href="link3.htm"> In questo caso il poligono è definito da 6 lati (7 coppie di coordinate, in cui l'ultima coppia è uguale alla prima). È evidente che nel caso di figure complesse il numero di lati che definiscono il poligono può diventare molto elevato e che la definizione della mappa tramite il semplice conteggio dei pixels può diventare estremamente laborioso.

Questo che segue è un esempio completo per una mappa poligonale:

E questo è il risultato (alcuni link potrebbero non esistere più):

Conclusioni

Questi appunti contengono le informazioni indispensabili per costruire un ipertesto.

È ovvio che non tutte le tag potranno essere ricordate a memoria se non vengono usate con una certa frequenza. La cosa importante è ricordare le possibilità di cui disponiamo nella costruzione dell'ipertesto; le tag corrispondenti potranno essere ricercate velocemente in un manuale o in una tabella come quelle che abbiamo riportato.

Qui non abbiamo esaminato alcune caratteristiche che possiamo chiamare "avanzate": i form, i fogli di stile, i layer, i javascript ecc.

Ricordiamo che l'HTML è in continua evoluzione: l'ultima versione è la 4.0. ed è facile prevedere che vengano presto introdotte nuove possibilità.

Inoltre, i browser prevedono spesso possibilità aggiuntive non comprese nello standard; è buona regola non utilizzarle, perché si impedirebbe di visualizzare correttamente una pagina a utenti che non usano quel browser.

Un'ultima considerazione: costruire una pagina HTML con il metodo illustrato può essere complicato e per questo molti fanno uso di programmi specifici (come Frontpage o Dreamweaver) che hanno però l'inconveniente di produrre un codice tutt'altro che ottimizzato. Spesso, inoltre, tali programmi non sfruttano appieno le potenzialità dell'HTML ed è quindi sempre consigliato rivedere l'ipertesto con un editor per correggerlo e modificarlo.

Nota bibliografica

Nel sito Internet della W3C, la società che provvede alle specifiche sull'HTML, si può trovare la documentazione completa sull'ultima versione dell'HTML (4.0). L'indirizzo completo al quale trovare queste specifiche è:

http://www.w3.org/TR/1998/ REC-html40-19980424