Sei sulla pagina 1di 22

PUBBLICARE IL SITO

Passo uno
Disporre tutto il contenuto, compresi suoni, immagini e così via, nella stessa cartella. La pagina iniziale del
sito dovrà avere nome index.htm (oppure index.html). Il nome più adatto è consigliato dal fornitore di
servizi.
Se i file non si trovano nella stessa cartella si dovrà usare, per raggiungerli, il percorso necessario.

Passo due
Cercare uno spazio web (hosting). Di solito i fornitori di caselle di posta elettronica offrono anche servizi
gratuiti di hosting ed altri servizi correlati.
Conviene quindi innanzitutto rivolgersi al proprio fornitore. Ad esempio, se si possiede un account di posta
elettronica che termina con @tin,it si può andare su http://tin.virgilio.it/siti_domini/index.aspx cercare il link
Attiva il tuo spazio web gratis e seguire le istruzioni.
Passo tre
Una volta trovato lo spazio web di proprio gradimento, per mettere online il contenuto del proprio sito,
occorre usare un programma chiamato Client FTP, che permette di trasferire i file sul web.
Ai fini di un corretto funzionamento, il Client FTP dovrà essere configurato con i parametri suggeriti dal
vostro fornitore di servizi.

Breve glossario
Hosting: Sezione dell'hard disk di un server che ospita siti web, caselle di posta elettronica ed altri
programmi tipo antivirus, antispam ...
Servizio di hosting è dunque l'offerta di disponibilità, da parte del server, di uno spazio
Server: E' un programma che interpreta e risponde ai comandi lanciati dal programma client. Per esteso, si
dice server anche il computer che ospita il programma server.
web server: E' un programma che fornisce il contenuto di una pagina web agli utenti che ne fanno richiesta
utilizzando un programma client: il browser.
Client: Programma che interpreta e visualizza i dati inviati dal server. Nel caso di Internet il client è il
browser (come MSIE o FireFox)
Client/server: Relazione che intercorre tra due programmi. Il client è il programma che fa le richieste e il
server quello che le soddisfa.
FTP (File Transfer Protocol): Protocollo (insieme di regole) standard per la trasmissione di file tra due
sistemi in Internet.

COMINCIAMO
Per iniziare basta un editor di testo semplice, come Blocco note.
Scrivi poi i tag
<HTML><HEAD></HEAD><BODY></BODY></HTML>

e separali con "Invio".


Se non hai voglia di scrivere, puoi anche selezionare con il mouse la riga di codice ed usare il classico
metodo copia - incolla
Questo in realtà non è necessario per la correttezza formale del
testo, ma è preferibile per un motivo di chiarezza.
Scrivi ora, fra <BODY> e </BODY> una frase, come
Primo esempio di scrittura in HTML.
Infine, salva il file con il nome primo.htm sulla desktop.
Non ti resta che chiudere il Blocco Note e lanciare il
programma.
Non farà un grande effetto, ma è solo l'inizio!
INTESTAZIONI E PARAGRAFI
Ecco degli esempi di formattazione del testo:

Titolo1
Titolo2
Titolo3

Titolo4

Titolo5

Titolo6

Come ottenerle? E' semplice. Visualizza il tuo file "primo.htm"con Blocco note e aggiungi, prima del testo
Primo esempio di scrittura in HTML, <H1>, poi, alla fine del testo, il tag rispettivo di chiusura </H1>. Salva
le modifiche apportate.
Potrai vedere, se aggiorni il file, la tua frase scritta a caratteri molto grandi (Stile Titolo 1).
La frase con i caratteri più piccoli è quella scritta con l'uso degli elementi <H6></H6> (Stile Titolo 6).
Avrai notato, se hai fatto la prova, che i tags d'intestazione <h1>...<h6> forzano il testo ad andare a capo. Se
invece si usa il tasto Invio questo non ha alcun effetto sulla visualizzazione del testo. Per mandare il testo a
capo occorre usare dei tags speciali:
• il tag <br> forza il testo ad andare a capo
• Quanto viene scritto all'interno dei tags <p> e </p> viene racchiuso in un paragrafo. E' possibile
allineare il testo mediante i seguenti attributi:
 <p align=center> allinea al centro
 < p align=left> allinea a sinistra (ma questo è automatico se non altrimenti specificato)
 < p align=right>allinea a destra
 < p align=justify>giustifica il testo
• Quanto viene scritto all'interno dei tags <pre> e </pre> si presenta come paragrafo preformattato, che
cioè viene visualizzato così come è stato scritto. Si tratta comunque di tags abbastanza delicati da
usare, e che possono dare sorprese a seconda dello risoluzione dello schermo o della modalità si
visualizzazione preferita dall'utente.
• I tags <div> e </div> funzionano in modo molto simile ai tags <p>. Essi servono per allineare nello
stesso modo più paragrafi, senza ripetere per ognuno di essi l'allineamento. Sono particolarmente utili
con i fogli di stile (HTML dinamico: per ora meglio non affrontarlo). Usare i seguenti attributi:
 <div align=center> per allineare al centro
 < div align=left> per allineare a sinistra (ma questo è automatico se non altrimenti specificato)
 < div align=right> per allineare a destra
 < div align=justify> per giustificare
• Quanto viene scritto all'interno dei tags <blockquote> e </blockquote> viene visualizzato in modo
rientrato rispetto al resto del testo.
TITOLI
Guarda sulla parte alta della pagina, detta barra del titolo: quello che appare è stato scritto fra i tag
<title> </title>

Il titolo deve essere scritto nella testata della pagina, cioè fra i tag <head> </head>.
Apri quindi il tuo file, e aggiungi:
<title> Questo è il titolo </title>

Controlla il risultato.
COLORE
E' possibile colorare singole parole, paragrafi, un intero testo, o anche aggiungere un colore di sfondo,con
poche e semplici istruzioni.
In generale, bisogna inserire la parte che si intende colorare fra i tag
<font color="....."> </font>

Vediamo in dettaglio alcuni esempi.


Codice:
Ho colorato <font color="green"> queste parole </font>

Risultato:
Ho colorato queste parole

Si possono anche colorare singole lettere ottenendo un effetto a r c o b a l e n o


Codice:
<p><font color="red"> Questo è un paragrafo colorato </font></p>

Risultato:
Questo è un paragrafo colorato

Per colorare paragrafo-->Codice:


<body><font color="....."> (documento) </font></body>

Per lo sfondo-->Codice:
<body bgcolor=".....">

Al posto dei nomi dei colori puoi usare il codice esadecimale!


CARATTERI
Grassetto--> <b>...</b>
Corsivo--> <i>...</i>
Sottolineato--> <u>...</u>
Linea sopra--> <span style="text-decoration: overline">...</span>
Barrato <strike>...</strike> <strike>Barrato</strike> Barrato
Formato Apice <sup>...</sup> Formato<sup> Apice</sup> Formato Apice
Formato Pedice <sub>...</sub> Formato<sub> Pedice</sub> Formato Pedice
Intermittente: solo Firefox <span style="text-decoration: blink">...</span> <span style="text-decoration:
blink">Intermittente</span> Intermittente
maiuscoletto <span style="font-variant: small-caps">...</span> <span style="font-variant: small-
caps">maiuscoletto</span> MAIUSCOLETTO
tutto maiuscole <span style="text-transform: uppercase">...</span> <span style="text-transform:
uppercase">tutto maiuscole</span> tutto maiuscole
iniziali maiuscole <span style="text-transform: capitalize">...</span> <span style="text-transform:
capitalize">iniziali maiuscole</span> iniziali maiuscole
nascosto <span style="visibility: hidden">...</span> <span style="visibility: hidden">nascosto</span>
nascosto
Esempio <samp>...</samp> <samp>Esempio</samp> Esempio
Definizione <dfn>...</dfn> <dfn>Definizione</dfn> Definizione
Citazione <cite>...</cite> <cite>Citazione</cite> Citazione
Tastiera 1 <kbd>...</kbd> <kbd>Tastiera 1</kbd> Tastiera 1
Tastiera 2 <tt>...</tt> <tt>Tastiera 2</tt> Tastiera 2
Codice <code>...</code> <code>Codice</code>
Spaziatura espansa di 2pt <span style="letter-spacing: 2pt">...</span> <span style="letter-spacing:
2pt">Spaziatura espansa di 2pt</span>
Piccolo
<small> </small>
C<small>ia </small>o
Colore
<font color="...."></font>
C<font color="red">iao</font>
Tipo di font
<font face="....."> </font>
<font face="Tahoma"> Ciao</font>
Grandezza dei caratteri (da 1 a 10) <font size=...>/font> <font size=10>VAI</font>
Grandezza dei caratteri rispetto alla precedente <font size=-...>/font> <font size=5>Questo è <font size=-3>
VAI</font>
I vari attributi possono essere usati contemporaneamente.
Il testo di una pagina HTML può essere scritto utilizzando qualsiasi carattere visibile sulla tastiera. Alcuni
caratteri, tuttavia, come ad esempio < o & vengono utilizzati come elementi del codice del linguaggio: per
essi e per altri caratteri speciali vengono usati dei costrutti particolari...
Se si vuole andare a capo,senza che sia terminata una riga, non basta premere il tasto Invio, che ha effetto
nel Blocco Note ma non nella visualizzazione della pagina con un browser. Occorre perciò usare il tag <br>
- Break Line - che spezza la riga nel punto voluto senza inserire un nuovo paragrafo.
Come sappiamo, HTML usa alcuni caratteri per distinguere i comandi dal contenuto della pagina; anche gli
spazi vuoti non vengono riconosciuti, a parte il primo. Per visualizzare tali caratteri sono necessari costrutti
particolari. E' possibile:
1. Usare i nomi dei caratteri come qui sotto riportato: ad esempio scrivendo:
 &plusmn; si ottiene il carattere ±;
 3 &times; 4 si ottiene 3 × 4;
 A&nbsp;&nbsp;&nbsp;&nbsp;B si ottengono 4 spazi fra A e B: A B;
2. usare il codice numerico dei singoli caratteri.
Abbiamo preparato due pagine, da scegliere in base alle proprie preferenze:
 una tabella con tutti i caratteri: cliccando su un carattere si ottiene il suo codice;
 una tabella con tutti i caratteri già completa di codice.
Attenzione: è obbligatorio usare le lettere minuscole.
(spazio) = &nbsp; × = &times; À = &Agrave; Ç = &Ccedil;
¢ = &cent; ÷ = &divide; Á = &Aacute; È = &Egrave;
€ = &euro; ± = &plusmn; Â = &Acirc; É = &Eacute;
£ = &pound; < = &lt; Ã = &Atilde; Ê = &Ecirc;
¤ = &curren; > = &gt; Ä = &Auml; Ë = &Euml;
¥ = &yen; ø = &oslash; Å = &Aring; ç = &ccedil;
¦ = &brvbar; ¹ = &sup1; Æ = &AElig; è = &egrave;
§ = &sect; ² = &sup2; à = &agrave; é = &eacute;
¨ = &uml; ³ = &sup3; á = &aacute; ê = &ecirc;
© = &copy; ´ = &acute; â = &acirc; ë = &euml;
ª = &ordf; ß = &szlig; ã = &atilde;
« = &laquo; µ = &micro; ä = &auml;
» = &raquo; · = &middot; å= &aring;
¬ = &not; ¸ = &cedil; æ = &aelig;
® = &reg; º = &ordm;
¯ = &macr; ¼ = &frac14;
° = &deg; ½ = &frac12;
¿ = &iquest; ¾ = &frac34;
¶ = &para;
" = &quot;
& = &amp;
ˆ = &circ;
˜ = &tilde;
… = &hellip;
™ = &trade;

Ì = &Igrave; Ò = &Ograve; Ù = &Ugrave; Ð = &ETH;


Í = &Iacute; Ó = &Oacute; Ú = &Uacute; Ñ= &Ntilde;
Î = &Icirc; Ô = &Ocirc; Û= &Ucirc; Ý = &Yacute;
Ï = &Iuml; Õ = &Otilde; Ü = &Uuml; Þ = &THORN;
ì = &igrave; Ö = &Ouml; ù = &ugrave; ñ = &ntilde;
í = &iacute; ò = &ograve; ú = &uacute; ý = &yacute;
î = &icirc; ó = &oacute; û = &ucirc; þ = &thorn;
ï= &iuml; õ = &ocirc; ü = &uuml; ÿ = &yuml;
õ = &otilde;
ö = &ouml;
ð = &eth;

IMMAGINI
Un'immagine ravviva una pagina e la rende più interessante. Chiunque abbia provato a navigare in Internet,
avrà comunque notato che caricare le immagini costa tempo, e anzi a volte si sarà stancato di aspettare e avrà
cercato un altro sito. Per questo è utile usare le immagini con parsimonia, risparmiando, se possibile, sulla
dimensione, e facendo attenzione al formato.
I formati più diffusi sul Web sono il GIF e il JPG. Il formato JPG è più adatto per panorami o simili,poiché
salva le immagini con 16 milioni di colori; nello stesso tempo, essendo molto compresso, richiede più tempo
per essere visualizzato.
Il formato GIF, più snello - salva le immagini con 256 colori - è adatto per la maggioranza dei casi, e
permette sia le animazioni che il formato trasparente.
Per inserire un'immagine in un documento, occorre scrivere il codice
<img src="nomefile.estensione">

Posso inserire l'immagine di nome sole.gif, subito di seguito allo scritto, senza spazi, come in questo caso,
((immagine)), semplicemente digitando la seguente riga di
codice:<img src="sole.gif">

Questo metodo, che è molto semplice, non è però sempre il più indicato, perchè l'immagine occupa un suo
spazio e il testo le si dispone intorno senza incorniciarla perfettamente, a meno che l'immagine non sia
abbastanza piccola.
Un'immagine può anche essere aggiunta come sfondo a una pagina,
codice:<body background="sfondo.jpg">

qualora si voglia aggiungere per sfondo un file tipo immagine di nome sfondo.jpg
Se l'immagine è più piccola della pagina, come succede quasi sempre, essa viene disposta affiancata, e
quindi occorre evitare che si ottenga un effetto come quello a lato.
Aggiungendo l'opzione bgproperties="fixed" lo sfondo non scorre insieme alla pagina.
Se clicchi qui potrai scegliere fra alcuni sfondi da scaricare per fare le tue prove.
Un'immagine speciale è la linea orizzontale, che spezza le varie parti di una pagina. Si inserisce usando il tag
<hr>. Usando il
codice: <hr width=80 size=10 color="red">

si ottiene una linea rossa.


E' possibile gestire le immagini con precisione aggiungendo gli attributi opportuni al codice.
Se l'immagine non si trova nella stessa cartella della pagina, occorre inserire un collegamento relativo.
Supponiamo, ad esempio, di aver salvato l'immagine sole.gif nella cartella di nome images. La dovremo aprire
con il seguente
codice:<img src="images/sole.gif">

SFONDI
Se si vuole uno sfondo colorato, basta inserire nel tag <body> l'opzione bgcolor="#...
Esempio di codice: <body bgcolor=red>

In questo modo si ottiene uno sfondo di colore rosso.


Gli sfondi attualmente non vanno molto di moda, eppure conservano sempre un certo fascino. Perciò... clicca
sui numeri associati agli sfondi, aspetta qualche secondo e osservane l'anteprima!
TESTO SCORREVOLE o marquee
Per ottenere un testo scorrevole si racchiude il testo stesso fra i tags:
<marquee> </marquee>

Per ottenere il colore e la misura dello scritto, basta seguire le regole presentate nella sezione Caratteri
Ad esempio scrivendo il seguente codice:
<font color=red size= 5 face="Courier">
< marquee loop =-1> CIAO A TUTTI </marquee>< /font>

Il marquee non rende scorrevole solo le scritte, ma anche le immagini: unica limitazione sono le gif animate,
che spesso vengono rese con l'animazione "sballata".
Ad esempio, scrivendo il seguenete codice:
< marquee loop =-1> <img src="sign1.gif"> </marquee>

All'interno del tag <marquee> possono essere aggiunti i seguenti attributi:


loop=n
n indica il numero di iterazioni dello scorrimento. Ponendo loop=-1 lo scorrimento è continuo
behavior=
indica il funzionamento del marquee:
 scroll (impostazione predefinita). Il testo scorre senza fermarsi per poi riapparire fino a quando non
sono stati terminati i giri (loop) stabiliti. A questo punto scompare.
 slide Una volta terminati i giri (loop) stabiliti, il testo si ferma o a destra dello schermo, o a sinistra, a
seconda della direzione di scorrimento.
 alternateIl testo rimalza da una parte all'altra dello schermo.
direction=
indica il verso di scorrimento:
 left (impostazione predefinita): verso sinistra
 right: verso destra
 up: dal basso verso l'alto
 down: dall'alto verso il basso
scrolldelay=n
n indica il numero di millisecondi fra ciascuno dei successivi spostamenti del testo.
scrollamount=n
n indica di quanti pixel si deve spostare ogni volta il testo.
bgcolor=colore
il marquee scorre su uno sfondo del colore prescelto
title="messaggio"
Viene visualizzato un breve messaggio di teso se si passa con il mouse sopra l'area occupata dal marquee,:
funziona come l'attributo "alt" per le immagini"
align=
Il marquee si allinea rispetto al testo che lo circonda
 top in alto
 middle centrato
 bottom in basso
height=
indica l'altezza del marquee. Può essere espressa in pixel o in percentuale
width=
indica la larghezza del marquee. Può essere espressa in pixel o in percentuale
hspace=n
horizontal-space: distanza del marquee in orizzontale dal testo (come per le immagini)
vspace=n
vertical-space: distanza del marquee in verticale dal testo (come per le immagini)

Gli attributi del marquee sono proprio tanti: per memorizzarli meglio si può usare il tutorial in linea.
COLLEGAMENTI IPERTESTUALI
E' possibile collegare diversi documenti,o anche parti diverse dello stesso documento,con poche e semplici
istruzioni.
In generale, bisogna inserire fra i tag la parola da cui far partire il collegamento
<a href="nomedocumento.estensione">parola</a>

La parola di solito cambia colore e, cliccando su di essa con il mouse, si visualizza il documento che si
desidera.
Con un metodo simile si possono inserire anche suoni o filmati.
Vediamo in dettaglio alcuni esempi.
COLLEGARE A INIZIO PAGINA
Codice:Questa <a href="PROVA LINK.htm">parola</a> vi collegherà a un file

Risultato: Questa parola vi collegherà a un file

Codice:Questa <a href="PROVA LINK.htm"><img


src="http://www.webfract.it/GUIDA/PicMp.gif"></a>

immagine vi collegherà allo stesso file

Risultato: Questa immagine


vi collegherà allo stesso file

Codice:Clicca sull'immagine per ingrandirla


<a href="Ingra.htm"><img src="PicMp.gif"></a>

Risultato: Clicca sull'immagine per ingrandirla

COLLEGARE A UN PUNTO PRECISO DI UN DOCUMENTO

Per inserire un collegamento ipertestuale a un punto preciso di un documento,occorre


1. aprire il documento a cui ci si vuole collegare, scegliere il punto in cui la pagina deve essere aperta, e
inserire un segnalibro attraverso la seguente linea di codice: <a name="nome che vuoi dare al
segnalibro">parola a cui effettuare il link </a>
2. ritornare al documento da cui ci si vuole collegare e scrivere, al punto giusto la seguente linea di
codice: <a href="nomefile.htm#nome segnalibro> parola < /a >
SPEDIRE UN MESSAGGIO
Si tratta di inserire un tipo particolare di collegamento ipertestuale. Ad esempio il seguente codice:

<a href="mailto:webfract@tin.it"> Contattaci </a>


porta al risultato di vedere sulla pagina web una scritta come questa: Contattaci
Quando l'utente clicca sulla parola calda si apre un messaggio vuoto di posta elettronica come quello
mostrato nella figura a fianco con già impostato, nel campo destinatario, l'indirizzo e-mail specificato dopo
la parola chiave mailto.
Come per tutti i collegamenti, è possibile richiamare l'avvio della posta elettronica anche attraverso
un'immagine; ad esempio si può usare un'immagine come questa attraverso il codice:
<A HREF="mailto:webfract@tin.it"> <img
src="http://www.webfract.it/MATJAVA/mail.gif" width=14 height=11
alt="scrivi" border=0 ></a>
Inserire, dopo la parola chiave mailto il proprio indirizzo di posta elettronica, così come l'indirizzo completo
dell'immagine: se qualcuno la vuol salvare, basta cliccarvi sopra con il tasto destro del mouse e scegliere
l'opzione "Salva immagine con nome"
EFFETTO
CODICE
RISULTATO
Scrivere a più mittenti: basta separare gli indirizzi e-mail con virgola o punto e virgola <a
href="mailto:primo@.est.naz,secondo@est.naz">Scrivi a due</a> Scrivi a due
Inviare una copia per conoscenza (Carbon Copy): basta aggiungere ?cc= prima del secondo mittente <a
href="mailto:primo@.est.naz?cc=secondo@est.naz">Per conoscenza</a> Per
conoscenza Inviare una copia nascosta (Blind Copy): basta aggiungere ?bcc= prima del secondo mittente. In
italiano compare Ccn, copia a conoscenza nascosta <a href="mailto:primo@.est.naz?
bcc=secondo@est.naz">Copia nascosta</a> Copia nascosta Inviare una mail con un oggetto
(subject) predefinito: basta aggiungere ?subject= subito dopo l'indirizzo del mittente seguito dall'oggetto. Al
termine, chiudere le virgolette. <a href="mailto:destinatario@.est.naz?
subject=Osservazioni e commenti">Mail con oggetto </a> Mail con oggetto Inviare
una mail con una scritta predefinita nel corpo (body) del messaggio: basta aggiungere ?body= subito dopo
l'indirizzo del mittente seguito dal contenuto che si vuole inserire. <a
href="mailto:destinatario@est.naz?body= Ciao, ti scrivo da
http://www.webfract.it">Mail con body</a> Mail con body Inserire varie opzioni nello
stesso messaggio: dopo il destinatario principale inserire un punto interrogativo (?) e in seguito collegare le
altre parti con &.
E' naturalmente possibile tralasciare una o più opzioni.
Non si devono lasciare spazi fra le varie parti. <a href="mailto:destinatario@est.naz?
cc=nonSo@bo1.bo2&bcc= terzo@naz.est&subject= avviso&body= Ricordo le
prossime scadenze"> Mail completa </a>
Notare come si debba seguire l'ordine in cui compaiono le opzioni nella finestra dei nuovi messaggi della posta elettronica e cioè
1. cc
2. bcc
3. subject
4. body
Mail completa Inserire la possibilità di inviare l'indirizzo della pagina attualmente visitata ad un amico: in
questo caso bisognerà lasciare vuoto l'indirizzo del destinatario e scrivere l'URL completo della pagina da
visitare. Per il resto si procederà come già visto. <a href="mailto:?subject=
Segnalazione&body= Salve, penso che questo argomento possa interessarti.
L'URL è: http://www.webfract.it/GUIDA/mailTo.htm"> Segnala ad un amico
MAPPA DI UN IMMAGINE
Le pubblicazioni su Internet devono avere un buon impatto visivo. E' utile a tal fine predisporre delle
immagini interattive, che permettano cioè di avere risposte diverse a seconda della zona in cui si clicca.
Qui ho preparato un semplice esempio.
Abbiamo sei quadratini che corrispondono ad altrettanti angoli. La linea orizzontale rappresenta la superficie
di separazione di due mezzi, la linea verticale la normale alla superficie. Occorre rispondere alla seguente
domanda:
Qual è l'angolo di incidenza?

La risposta sarà data cliccando su uno dei sei quadratini. A seconda della risposta data, si riceverà un
messaggio diverso.
PROVA SUBITO!
Vediamo ora come si crea una mappa di un'immagine, cioè come si può stabilire una corrispondenza fra
alcune aree dell'immagine e i rispettivi collegamenti.
Innanzitutto, il codice relativo alla mappa va inserrito fra i tags
<map name="...."> </map>

Al posto dei puntini si deve inserire il nome della mappa: se ad esempio vogliamo dare alla mappa il
nome "miaMappa", scriveremo:
<map name="miaMappa">

Ora si tratta di stabilire quali aree dell'immagine vanno collegate. L'area da collegare può avere diverse
forme (shape):

<area shape="rect" coords="x1,y1,x2,y2" href="...">

Rettangolare Occorre dare le coordinate del vertice in alto a sinistra e di quello in basso a destra del
rettangolo.

<area shape="circle" coords="xc,yc,raggio" href= "...">

Circolare
Occorre dare le coordinate del centro e la lunghezza del raggio del cerchio.

Forma libera a contorno


<area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href= "...">
poligonale
Occorre dare le coordinate del primo vertice fino a quelle dell'ultimo vertice del
poligono.

Infine si inserisce l'immagine: è essenziale dichiararne le dimensioni ed esplicitare il fatto che si tratta di
un'immagine mappata. Segue il codice di esempio:
<img src="..." width="..." height="..." alt="..." usemap="#miaMappa" ismap>

Come si vede, ogni singola zona della mappa si comporta come un'immagine vera e propria e quindi,
possiamo, ad esempio, inserire l'attributo alt="..." per visualizzare una breve spiegazione se di passa con il
mouse sopra la zona stessa.
ATTENZIONE: la mappa si basa su coordinate assolute, quindi le dimensioni dichiarate nel tag devono
essere assolute e non percentuali, e devono coincidere con quelle reali dell'immagine. Se l'immagine è troppo
grande, dovrete rimpicciolirla con un apposito programma.
Come si vede, non è certo difficile costruire una mappa: l'unica difficoltà consiste nel trovare le coordinate
dei punti. Queste si possono trovare con l'aiuto di un programma per la gestione delle immagini.
L'alternativa è quella di scaricare un programma in Visual Basic che si trova nella sezione utilità di questo
sito e che permette di inserire il codice per le mappe in modo semplice e veloce.
INSERIRE SUONI O FILMATI
OPZIONI Se si vuole... Codice di esempio Risultato Suono di sottofondo continuo
< embed src="rock.mid"
loop=true autostart=true
width="0" height="0">

Non c'è in questo momento ma fidati! L'attributo loop=true indica che l'evento deve essere ripetuto all'infinito. Suono di sottofondo
continuo

(metodo più semplice che però funziona solo con Explorer)

<bgsound src="rock.mid"
loop=-1>

Non c'è in questo momento ma fidati! Anzi, perchè non provi a inserire un suono nel tuo documento? L'attributo
loop , in questo caso, indica quante volte l'evento deve essere ripetuto; se loop= -1 l'evento si ripete all'infinito. Suono da attivare a richiesta dell'utente

<embed src="rock.mid"
width="310" height="45">

(Gli attributi width e height definiscono l'ampiezza della barra dei comandi per il suono)

Inserimento di un filmato da attivare a richiesta dell'utente


<embed src="hakkinen.mpeg"
width="140" height="150">

L'attributo autostart=true consente l'attivazione automatica dell'evento all'apertura della pagina

LISTE E ELENCHI PUNTATI


Esistono quattro tipi di elenchi:
• Puntato, cioè non ordinato (unordered list)
Codice: Risultato:
<ul>

<li>Ciao • Ciao
• Ciao
<li>Ciao
<li>Ciao • Ciao
</ul>

• Ordinato, cioè con il primo, secondo...elemento (ordered list)


Risultato:
Codice:
<ol type="I" Start="3">
III.Terzo elemento
<li>Terzo elemento IV.Quarto elemento
V. Quinto elemento
<li>Quarto elemento

<li>Quinto elemento

</ol>
Includendo l'attributo TYPE="a" all'interno del tag <ol> si
ottiene una lista ordinata con a., b. ecc. Altre opzioni sono TYPE="i",
TYPE="I". N.B. Includendo l'opzione Start="3", l'elenco parte dal
terzo elemento.

• Lista in cui i punti elenco sono costituiti da piccole immagini


create ad hoc
Codice: Risultato:
<img src="punto.gif">
uno <br>
uno
<img src="punto.gif"> due
due <br> tre
<img src="punto.gif">
tre <br>

• Lista di definizioni (definition list), come si può trovare in un vocabolario.


Sappiamo che ogni definizione è costituita da due parti: il termine da definire (definition term) e una
frase che spiega il significato del termine stesso (definition description)
Codice: Risultato:
<dl>

<dt>Triangolo isoscele Triangolo isoscele


Triangolo con un asse di simmetria
<dd>Triangolo con un asse di simmetria Triangolo equilatero
Triangolo con tre assi di simmetria
<dt>Triangolo equilatero

<dd>Triangolo con tre assi di simmetria

</dl>

Gli elenchi puntati possono anche essere annidati gli uni dentro gli altri.
Per esempio, se volessi inserire un elenco ordinato nella seconda riga di un elenco non ordinato, dovrei usare
un codice di questo tipo:
Codice: Risultato:
<ul>
<li>prima riga dell'elenco "esterno"
<ol>
<li>prima riga dell'elenco "interno" • prima riga dell'elenco "esterno"
<li>seconda riga dell'elenco "interno" 1. prima riga dell'elenco "interno"
<li>terza riga dell'elenco "interno" 2. seconda riga dell'elenco "interno"
<li>quarta riga dell'elenco "interno"
3. terza riga dell'elenco "interno"
</ol>
<li>terza riga dell'elenco "esterno" 4. quarta riga dell'elenco "interno"
</ul> • terza riga dell'elenco "esterno"

In questo modo, tutta la parte compresa tra <ol> e </ol>, cioè l'elenco interno, viene a costituire la seconda
riga dell'elenco esterno. In altre parole, ogni elenco può essere considerato come un oggetto e quindi può
essere inserito dove si vuole. Chiaramente è possibile annidare quanti elenchi si vuole e fare sottoelenchi di
sottoelenchi e così via.
FRAMES(CORNICI)
I frames (cornici) sono pagine diverse, indipendenti le une dalle altre, che possono essere visualizzate nella
stessa finestra.
Indipendenti vuol dire, ad esempio, che mentre una parte di testo scorre, un'altra resta fissa sullo schermo;
vuol dire che si può visualizzare in una cornice una nota o un'immagine o altro mentre non si perde di vista il
documento principale.
Attualmente i frames sono molto usati per inserire banner pubblicitari o collegamenti a siti importanti.
Anche in questo ipertesto sono stati utilizzati i frames, allo scopo di tenere sempre l'indice della guida in
primo piano.
Ognuna delle cornici che compare sullo schermo ha un nome: nel nostro caso, la parte sinistra ha nome
indice, mentre quella destra ha nome corpo. Il nome è indispensabile perchè ad esso ci si deve riferire
quando si vuole aprire un qualsiasi file proprio in quella parte di schermo.
Se ad esempio usiamo la seguente riga di
codice: <a href="prova.htm" target="corpo">
Clicca qui</a>

otterremo il seguente risultato: viene inserito il file "prova.htm" nella cornice di nome "corpo" non appena si
clicca sulla parola calda Clicca qui
Se invece immettiamo un nome sbagliato nel target, oppure usiamo target=_blank, come ad esempio nella
seguente riga di
codice: <a href="provaf.htm" target="bo">
Clicca qui</a>

otterremo il seguente risultato: viene inserito il file "provaf.htm"in una pagina nuova: questa dovrà essere
chiusa per ritornare alla guida.
Per un esempio Clicca qui
HTML prevede quattro target riservati per effettuare i collegamenti senza scrivere direttamente il nome del
frame:

_blank (spazio vuoto)apre la pagina in una nuova finestra.

_self (se stesso)apre la pagina nella finestra corrente.

_parent (genitore) apre la pagina nel frame superiore a quello in cui si trova
il collegamento.

_top (parte superiore)cancella tutti i frames e apre la pagina a schermo intero.

ESEMPIO I
Vogliamo che la nostra pagina appaia divisa in due verticalmente, con a sinistra l'indice, che abbiamo
salvato con il nome"indice.htm", e a destra una pagina di testo, che abbiamo salvato con il nome
"Primo.htm". Alla zona indice vogliamo assegnare uno spazio del 20%, e alla destra lo spazio
rimanente (80%). Dovremo preparare un file apposito, che salveremo con il nome, ad esempio di
"inizio.htm".

Codice: Dichiarazioni obbligatorie


(da inserire dopo </head> e prima di <body> )
<frameset cols="20%,80%">
<frame src="indice.htm" name="sinistra"> Dare il nome alle due zone attraverso
<frame src="primo.htm" name="destra"> l'attributo name ="...".
</frameset>
<noframes>
<body>
</body>
</noframes> Inserire subito, attraverso l'attributo
</html> src="....." i nomi dei files che si vogliono
visualizzare nella pagina.

Salvare il file con il nome prescelto, ad


esempio inizio.htm.
Se non si vogliono complicazioni, è meglio che
tutti i files siano salvati nella stessa cartella.

IFRAMES
Questo elemento permette di inserire "al volo" un contenuto qualsiasi in una sottofinestra della finestra web
principale. I due documenti restano indipendenti, come nei frames, ed ognuno di essi è salvato in una pagina
con il suo nome ed i suoi attributi (colore di sfondo, tipo di caratteri, eccetera).
L'iframe può, ad esempio, essere utilizzato per visualizzare una tabella di dati scorrevole mentre il resto della
pagina resta fisso, oppure per immagini da far variare dinamicamente, per aggiornamenti di notizie o
quant'altro.
Purtroppo però questo tag non è supportato da Netscape, ci sono poi molti problemi nella stampa.
Un esempio di dichiarazione di un iframe, che tenga conto di tutti i , sarà quindi fatta secondo il seguente
codice
<iframe src="URL" attributi>
il tuo browser non supporta l'iframe:
per vedere il contenuto clicca <a href="URL">qui</a>
</iframe>

Questo metodo permette a tutti gli utenti di visualizzare il contenuto dell'iframe.

Elenco degli attributi


In accordo con le specifiche HTML 4.01 , in un elemento iframe possono essere usati i seguenti attributi:
nome valore significato
src= URL" indirizzo del contenuto iniziale dell'iframe
assegna un nome all'iframe , che deve essere utilizzato per
name= string"
target dei collegamenti ad esso.
larghezza dell'iframe
width= numero di pixels o percentuale
height= (e.g. "20%") altezza dell'iframe
align= "top" /"middle"/"bottom allineamento verticale dell'iframe
"left"/"right" allineamento orizzontale dell'iframe
NOTA: Per centrare l'iframe si può usare l'attributo <p align=center> prima di dichiararlo
iframe viene circondato da una cornice: valore
"1"
frameborder= predefinito
"0" elimina il bordo
ampiezza dei margini superiore ed inferiore intorno al
marginwidth=
contenuto dell'iframe
numero di pixels
ampiezza dei margini destro e sinistro intorno al contenuto
marginheight=
dell'iframe
NOTA: Per una strana ragione, se uno dei due valori viene dichiarato, l'altro viene posto= 0. Per questo motivo è bene dichiararli
entrambi.
Le barre di scorrimento sono visibili se e solo se è necessario
"auto"
(valore predefinito)
scrolling"yes" Le barre di scorrimento sono sempre visibili
Le barre di scorrimento non appaiono mai: questo può
"no"
rendere parte del contenuto inaccessibile
NOTA: Gli attributi della prima colonna possono essere usati contemporaneamente.

TABELLE
Preparare una tabella richiede un certo impegno, ma basta seguire poche e semplici regole. Supponiamo di
voler preparare una tabella come quella dell'esempio, di due righe per tre colonne. Seguiremo i seguenti
passi:

Dichiarare la tabella attraverso i tag

<table>
</table>
Inserire le righe che servono all'interno dei tag
<table> </table>.(Ci si può aiutare con Copia
Incolla).
Si ottiene:

<table>

<tr>
</tr>
<tr>
</tr>

</table>
Questa tabella ha due righe.
• Inserire, tra i tag <tr> </tr>, le colonne desiderate, così:

<table>

<tr>
Nella prima riga ci sono tre colonne.
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
Nella seconda riga ci sono tre colonne.
<td>
</td>
<td>
</td>
<td>
</td>
</tr>

</table>

A questo punto, una volta preparato lo schema, non resta che inserire, tra i tag <td> e </td>, i vari contenuti.
Le tabelle sono soprattutto utilizzate per disporre come meglio si crede parti di testo e immagini sulle pagine
web.
Per operare al meglio conviene tuttavia conoscere almeno alcuni attributi fondamentali.
DOWNLOAD
Uno degli aspetti più interessanti di Internet è la possibilità di copiare (in gergo: scaricare) files dalla rete
direttamente nel proprio computer. Il termine inglese che descrive questa operazione è "Download".
Inserire in una pagina Web oggetti da scaricare è molto semplice.
Il codice necessario è lo stesso che si usa per i collegamenti, ma, invece di collegare la parola ad un'altra
pagina, la si collega al file che si vuole far scaricare.
Ad esempio,con la seguente riga di
codice: <a href="ColorCode.zip">ColorCode</a>

se si clicca su "ColorCode" parte il download del file ColorCode.zip.


E' consigliabile pubblicare i file in formato zip, sia per risparmiare spazio e velocizzare i downloads, sia
perché alcuni browser e anche alcuni server, se impostati ad un elevato livello di sicurezza, rifiutano alcuni
altri formati.

Qui di seguito abbiamo inserito alcuni files da scaricare, con relativa descrizione.
Se, quando lanciate i programmi, dovesse comparirvi un messaggio come

File MSVBVM60.DLL non trovato

o simili, dovrete installare le librerie di Visual Basic 6.0, che trovate all'inizio della tabella.
Se invece ricevete un messaggio tipo

Component COMDLG32.OCX or one of its dependencies not correctly registered: a file is missing or invalid

scaricate il componente mancante cliccando qui e copiatelo nella directory c:\windows\system.


Niente paura! Sono componenti distribuiti da Microsoft appositamente per il corretto funzionamento dei programmi in Visual Basic.

Breve presentazione in PowerPoint con tutto quello che occorre sapere per creare un
Guida per creare ipertesti
semplice ipertesto con Word. Ideale per chi vuole creare velocemente un ipertesto senza
con Word
"sporcarsi le mani" con il codice HTML
Download
Dimensione: 837 kb
Si tratta di cinquantasei icone, tutte originali, che possono servire di prova per
La prima collezioneaggiungere
di un logo accanto al proprio sito. Molto caratteristiche le iniziali maiuscole.
icone in formato zip.
Non si possono visualizzare direttamente da WinZip, ma prima occorre estrarle nel
Download proprio disco rigido.
Dimensione: 13 kb
Questo programma installa le librerie di Visual Basic 6.0 nel vostro computer. Di solito
Librerie di Visual Basic
sono già fornite con Windows, quindi prendetele solo se i nostri programmi non
6.0 dovessero funzionare! Se il file vi sembra troppo grande da scaricare, potete comunque
Download trovarlo nelle riviste per computer (consigliamo Pc-Open).
Dimensione: 976 kb

ColorCode Questo programma è utile per scegliere i colori o dalla finestra di dialogo di Windows o
Download con l'aiuto di sliders e convertire il formato numerico in formato esadecimale.
Dimensione: 16.0 Kb

Vi piacciono le mappe ma costruirle richiede troppo tempo? Questo programma vi


ImageMap
permetterà di creare mappe di immagini in modo semplice e veloce. E' presente anche un
Download
help in linea, naturalmente in italiano.
Dimensione: 48.0 Kb

RGBconverter
Download

Questo programma è utile per scegliere i colori e convertire il formato numerico in


formato esadecimale e viceversa.
Dimensione: 40.0 Kb

Questo programma visualizza una tabella con i nomi dei principali colori predefiniti
Colori predefiniti
HTML, il relativo codice esadecimale e un esempio del colore stesso. Può essere utile
Download
durante la realizzazione di una pagina HTML.
Dimensione: 16 Kb
Rock.mid E' la musica di sottofondo della pagina iniziale di questo sito.
Download Dimensione: 13.3 Kb
Glossario E' l'indice analitico di tutti gli elementi e attributi usati in questa guida.
Download Dimensione: 2.0 Kb

FILTRI
proprietà
Argomento
Codice
Descrizione alpha
opacity
finishopacity
style
startx
starty
finishx
finishy

filter:alpha(opacity=..., finishopacity=..., style=..., startx=..., starty=..., finishx=... finishy=...);


Al posto dei puntini sostituire i numeri opportuni.
Permette di scegliere il grado di opacità di un elemento
N.B. Se non si dichiara la proprietà width dell'elemento la proprietà alpha non funziona.
blur
add
direction
strength

filter:blur(add=true, direction=90, strength= 6); L'elemento presenta una scia (come una macchia lasciata dalla carta
assorbente) chroma
color

filter:chroma(color=#000000);
Rende il colore specificato trasparente glow
color
strength

filter:glow(color=#ff0000, strength=5); Crea un alone intorno all'elemento fliph


nessuno

filter:fliph; Ribalta l'elemento orizzontalmente flipv


nessuno

filter:flipv; Ribalta l'elemento verticalmente gray


nessuno

filter:gray; Rende l'elemento in scala di grigio invert


nessuno

filter:invert; Inverte i colori e li rende brillanti xray


nessuno

filter:xray; Rende l'elemento come negativo del bianco e nero


N.B. Queste ultime cinque proprietà sono approfondite nel tutorial apposito.
mask
color

filter:mask(color=#ff0000); Rende il
testo con lo specificato colore di sfondo, e con il colore di primo piano
trasparente. Non funziona con le immagini. shadow
color
direction

filter:shadow(color=#ff0000, direction=90); Aggiunge l'ombreggiatura all'elemento nella direzione specificata


dropshadow
color
offx
offy
positive

filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true); Aggiunge un'ombra che scende dall'oggetto wave
add
freq
lightstrength
phase
strength

filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5) Aggiunge un disturbo ondulatorio alla scritta
RACCHIUDERE SCRITTO IN UNA CORNICE
E' semplice: basta impostare una tabella di una sola riga e di una sola colonna, con larghezza e altezza
appropriate. La larghezza del bordo come pure il suo colore saranno altrettanto scelte a piacere. In questa
guida, abbiamo diffusamente parlato delle tabelle, ma se non avete voglia di leggere tutto, copiate
semplicemente il seguente codice:
<TABLE borderColor=red cellSpacing=0 cellPadding=10 width="75%"
align= center border=5>

<tr><td>

Questo è lo scritto di esempio, che ho deciso di spaziare


tutto intorno di 10 pixel</td></tr><table>

per ottenere il seguente risultato:

Questo è lo scritto di esempio, che ho deciso di spaziare tutto intorno di 10 pixel

Nell'esempio lo scritto è:
• bordato di rosso - bordercolor=red
• senza spazi fra il bordo della colonna e il bordo della tabella - cellSpacing=0
• con uno spazio tra il testo e il bordo di 10 pixel - cellPadding=10
• centrato - align=center
• occupa una larghezza del 75% della pagina - width="75%"
• lo spessore del bordo è di 5 pixel - border=5

Volete un doppio bordo, magari usando colori diversi, come in questo


esempio? Questo è lo scritto di esempio,
che ho deciso di spaziare tutto
• regolate lo spazio fra i due bordi attraverso l'attributo
intorno di 10 pixel
cellSpacing
(in questo caso, cellspacing=16)
• all'interno del tag <td> dichiarate il colore del bordo interno
( nell'esempio, è stato scritto<td bordercolor=navy> )
Ovviamente lo scritto può essere allineato a destra e occupare uno spazio assoluto e non percentuale. Per
questi ed altri attributi delle tabelle clicca qui.
META TAGS
Forse ti sarà capitato di vedere un codice come questo posto ancora prima del tag <html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Questa riga, detta prologo, non ha nessun effetto sulla visualizzazione della pagina ma indica al browser che
il tipo di documento (DOC - TYPE) è conforme a determinate specifiche del linguaggio HTML.
Ormai inserire questo codice non serve più ma esso, come i meta tags, è un esempio di aggiunta alla pagina
per scopi che trascendono il semplice inserimento di elementi grafici.
Ma andiamo con ordine
Che cosa sono i META tags
Sono attributi che non compaiono direttamente in una pagina Web, pertanto si utilizzano, di solito, solo se si
vuole pubblicare il proprio lavoro su Internet.
Essi sono molto utili per uno sviluppatore, infatti si usano per inserire una descrizione della pagina, il nome
dell'autore, una lista di parole chiave che può essere letta da un motore di ricerca, il parametro di refresh
della pagina e molto altro ancora. Naturalmente, la semplice inclusione di META tags non garantisce
automaticamente l'inserimento del proprio sito in testa alla lista dei risultati di una ricerca,ad esempio motori
come Virgilio o Yahoo si servono ancora di "umani" per indicizzare le pagine e li ignorano, ma essi sono
comunque utili.
Dove inserire i META tags
Essi vanno inseriti fra i tags <HEAD> ed </HEAD>, prima del tag <BODY>.Molto spesso essi vengono
inseriti fra i tag <TITLE> e </TITLE>.
Se si usano i frames, è importante ricordarsi di inserirli in ogni pagina, se non si vuole perdere un buon
numero di potenziali visitatori.
Ci sono due tipi di META tags:
• I META NAME <meta name="....." content="...">

• I META HTTP-EQUIV <meta http-equiv ="....." content="...">

In pratica HTTP_EQUIV risulta essere un nome particolare.


Keywords (parole chiave)
sono quelle che di solito vengono digitate nei campi di input dei motori di ricerca. Le inseriremo per indicare
al motore di ricerca quello che può trovare nel nostro sito.
Esempio di codice:

<META NAME ="keywords" CONTENT="gatti,gatto,cani,cane,allevamento">


Qui sono state inserite solo poche parole chiave di esempio: "gatto, cane....". Notare la presenza della stessa
parola sia al singolare che al plurale. Conviene infatti essere estremamente dettagliati e scrivere tutto quello
che viene in mente come possibile chiave di ricerca. Notare inoltre che è stato inserito il minuscolo: se infatti
le parole per la ricerca sono state inserite in maiuscolo vengono trovate anche quelle scritte in minuscolo:
non vale invece il viceversa.

Descripton (descrizione)
Permettono di descrivere brevemente il nostro sito. E' questa la parte che viene visualizzata nelle liste dei
risultati delle ricerche,al posto delle prime righe della pagina, ed è quindi molto importante da preparare.
Esempio di codice:

<META NAME="description" CONTENT="Tutto sull'allevamento di cani


e gatti">

Aggiungeremo la stessa descrizione come commento per gli spider (particolari software che scandagliano la
Rete alla ricerca di informazioni) che non usano i META tags.
Esempio di codice:

<!--//Tutto sull'allevamento di cani e gatti//-->

Robots
Dà indicazione allo spider riguardo alla possibilità di indicizzare o meno il nostro sito e di seguire o meno i
collegamenti che noi vi abbiamo inserito.
Ad esmpio il seguente codice:

<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">

indica che lo spider può seguire i collegamenti dalla pagina in oggetto ad altre pagine ma che la pagina
stessa non sarà indicizzata dal motore di ricerca.
Dopo CONTENT possono inserite le seguenti opzioni:
• all indica che tutti i files possono essere indicizzati (se ROBOTS non è presente questa opzione è di
default)
• none: indica che nessun file va indicizzato e che non vanno attuati i collegamenti inseriti nella
pagina;
• index indica che la pagina può essere indicizzata
• noindex indica che la pagina non può essere indicizzata
• follow indica che lo spider può seguire i collegamenti dalla pagina in oggetto ad altre pagine
• nofollow indica che lo spider non può seguire i collegamenti dalla pagina in oggetto ad altre pagine
Quando serve usare il meta tag ROBOTS?
Quando abbiamo un sito che non vogliamo rendere pubblico,cioè accessibile a tutti attraverso
l'indicizzazione sui motori di ricerca.
Faccaimo l'esempio di una persona che ha pubblicato su Internet le foto dei propri figli per farle ammirare
dai nonni. Supponiamo che un bambino si chiami Alberto, e che la foto sia memorizzata con il nome
Alberto.jpg. Ora, se andiamo su un motore di ricerca come Google, cerchiamo la parola Alberto e scegliamo
l'opzione "Immagini", verranno visualizzare tutte le immagini che iniziano per Alberto (estensione a parte).
Se vogliamo salvaguardare la nostra privacy, e quella dei nostri figli, ecco allora che ci converrà inserire il
META TAG "ROBOTS"
Autor
Vuoi aggiungere il nome dell'autore? Usa questo codice:

<meta name="author" content="TuoNome">

Generator
Specifica l'editor utilizzato per scrivere il documento. Viene di solito aggiunto in automatico dagli applicativi
(come Front Page, Word o simili) per farsi pubblicità. Può quindi essere tranquillamente eliminato. Per far
vedere che abbiamo scritto tutto con Blocco note, possiamo aggiungere il seguente codice:

<META NAME=GENERATOR CONTENT="scritto con Blocco note">

Http è l'acronimo di HyperText Transfer Protocol: esso è il protocollo standard che viene utilizzato per la
trasmissione delle informazioni. Potremmo interpretarlo come un linguaggio con il quale comunicano due
computer. Questo significa che quando ci si collega ad una pagina, il server Web riceve la richiesta del
browser via http e genera a sua volta una risposta http. Il dato iniziale in questa risposta è chiamato "HTTP
header block.", cioè il blocco di intestazione dell'http. L'intestazione dà informazioni utili sulla
visualizzazione del documento. I meta tags http-equiv integrano queste informazioni. Ad esempio, il
seguente codice:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

dà informazioni sul tipo di caratteri che sono usati nel documento, e che corrispondono allo standard "iso-
8859-1".
Ecco di seguito alcuni attributi di http- equiv:
Refresh
Specifica il tempo in secondi dopo i quali il browser ricarica automaticamente il documento. Il seguente
codice:

<META HTTP-EQUIV="refresh" CONTENT =3>

indica che il documento sarà ricaricato ogni tre secondi.


Se si aggiunge l'URL completo di un altro documento, sarà esso ad essere ricaricato.
Ad esempio questo codice:

<META HTTP-EQUIV= "Refresh"CONTENT="0;URL =http://www....">

reindirizza immediatamente l'utente. Quest'ultimo metodo è molto usato qualora un sito abbia cambiato il
proprio URL.
Content-language (linguaggio usato nel contenuto della pagina)
Indica al motore di ricerca in quale lingua è scritto il sito. Il seguente codice:

<meta HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="Italian">

indica che il sito è scritto in italiano.


Page
Permette di ottenere effetti in entrata o in uscita da una pagina (effetti di transizione)
Per ottenere un effetto in entrata usa il seguente codice:

<meta http-equiv="Page-Enter"
content="revealTrans(Duration=x,Transition=y)">

Per ottenere un effetto in uscita usa il seguente codice:

<meta http-equiv="Page-Exit"
content="revealTrans(Duration=x,Transition=y)">

Imposta la durata (Duration) in secondi. Transition rappresenta il tipo di animazione e si indica con un
numero intero.
Le transizioni sono in tutto 25, e quindi i valori che possiamo dare ad y variano fra 0 e 24.
In effetti se si dà a y un valore superiore a 24, ad esempio 25, l'effetto di transizione c'è ugualmente, ma non
è sempre lo stesso.

Attenzione!Questo meta tag funziona solo sul browser Internet Explorer.


Nella sezione trucchi e malizie è possibile approfondire gli effetti di transizione con esempi di anteprima.