HTML
è l'acronimo di "HyperText Markup Language" (Linguaggio di Codice Ipertestuale), il codice HTML che
si usa per creare pagine web. E' possibile scriverlo
manualmente o usare diversi programmi:
-quelli che offrono
un'interfaccia grafica denominata "what you see is what you get"
(quello che vedi è quello che ottieni), che ci evitano di
scrivere il codice HTML a mano, i principali sono Dreamweaver,
Microsoft Frontpage ed NVU;
-quelli che presuppongono una buona conoscenza dell'HTML ma offrono molti aiuti, ad esempio 1stPage;
-il Blocco note, in cui bisogna scrivere tutto il codice a mano.
Il
codice HTML consiste in tanti tag, identificabili da < e > con
dei caratteri all'interno, che servono a descrivere come si vuole che
il testo e la grafica nel documento vengano visualizzati; fra un tag e
l'altro va inserito il testo desiderato. I segni < e >
racchiudono i tag, che rappresentano un comando testuale che il browser
deve recepire e mostrarci graficamente: essi contengono le parole
chiave del codice HTML, ed eventuali attributi di formattazione. Il
file dovrà essere salvato con estensione .htm oppure .html.
Esistono centinaia di tag e di attributi. La maggior parte di essi deve
avere un'apertura e una chiusura (rappresentata dallo stesso tag con
l'aggiunta dello / subito dopo il <), altrimenti potrebbe non
funzionare.
ESEMPIO DI CREAZIONE DI UNA PAGINA WEB BASE
1)-Si crea un nuovo documento di testo e si scrive il seguente codice:
<HTML><DIV
ALIGN="CENTER"><P>Sito della nostra famiglia</P><P>Questa è una piccola prova per
costruire una pagina web.</P><P>Come vedete, non è
affatto difficile!<BR>CIAO</P></DIV></HTML>
a)-tag
<HTML>: si mette all'inizio del sito che si sta costruendo. Dopo
aver messo il tag <HTML>, e aver compilato tutto ciò che
deve contenere il sito, bisogna scrivere </HTML>.
b)-tag
<DIV ALIGN="CENTER">: serve a centrare il testo nella pagina.
Anche il tag <DIV> va chiuso con </DIV> dopo aver scritto
il testo da centrare.
c)-tag<P>: si mette quando si scrive
del testo. Anche il tag <P> dev'essere chiuso col tag </P>
alla fine del testo scritto.
Dopo aver chiuso un tag <P> se ne
può aprire un altro, e così via. Quando si apre un nuovo
tag <P>, le nuove frasi vengono scritte a capo con una riga
bianca di spazio. Se non si vuole andare a capo, non bisogna chiudere e
riaprire <P> dopo lo scritto, ma continuare a scrivere di
seguito. Se si scrive tutto il testo all'interno di un solo di un tag
<P>, il testo va a capo quando arriva al bordo destro della
finestra del browser. Per altri esempi, vedere il file "ESEMPI.html".
d)-Il
tag <BR>: se si vuole andare a capo, ma senza lasciare righe
vuote, bisogna inserire il tag <BR> e subito dopo iniziare a
scrivere la nuova frase.
Dopo aver salvato il documento di
testo, chiudere il file e rinominarlo con estensione html. Facendo
doppio click sul file, esso verrà aperto col browser. Per
modificarlo, bisogna aprirlo col Blocco note.
CREAZIONE DI UN SITO
Creare
un nuovo documento di testo all'interno della cartella "Da pubblicare
su internet", rinominarlo index.html: esso costituirà la pagina
iniziale del sito. Aprire il file con un browser e con il Blocco note,
oppure con un programma apposito per costruire siti.
1)-All'inizio o
in qualsiasi parte del codice HTML, si potrà inserire un tag
invisibile che serve a contenere delle note di qualsiasi genere, che
non verranno lette né dal browser, né dai motori di
ricerca e può servire come memorandum, ad esempio:
<!-- devo ricordarmi di creare la galleria fotografica del Lecce -->
Questo tag non va chiuso.
2)-Se il sito dev'essere pubblicato su internet, è bene, ma non obbligatorio, che il codice HTML inizi con il tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
affinché
il codice sottostante venga interpretato correttamente da tutti i
browser. Il tag indica che è stata usata la versione 4.01 di
HTML. Questo tag non va chiuso.
3)-Inserire il tag:
<HTML>
che
identifica l'inizio di una pagina web, esso è indispensabile.
Tutto il sito, tranne i tag ai punti 1) e 2), devono essere scritti
dopo di esso. Questo tag va chiuso alla fine di tutto il codice con
</HTML>
4)-Inserire il tag:
<HEAD>
che identifica
l'inizio della parte chiamata Testata (HEAD in inglese vuol dire
testata). Questo tag va chiuso con </HEAD> dopo aver inserito
all'interno della testata i tag elencati ai punti 5) e 6).
5)-Inserire il tag:
<TITLE>
che
racchiude il titolo della finestra del browser (TITLE in inglese vuol
dire titolo). Questo tag va chiuso con </TITLE> dopo aver scritto
il titolo della finestra.
6)-E' facoltativo inserire all'interno della testata i seguenti tag:
<META name="author" content="...">
Questo tag indica l'autore del sito.
<META name="keywords" content="...">
Questo
tag indica le parole chiave per far trovare il sito dai motori di
ricerca: ne vanno scritte almeno tre, separate una ad una da virgola e
spazio.
<META name="description" content="...">
Questo tag richiede una breve descrizione del contenuto della pagina.
I
tag META (in inglese meta vuol dire nascosto) sono invisibili
all'interno della pagina web, ma utili ai motori di ricerca oppure a
chi desidera ulteriori informazioni. Questi tag non vanno chiusi.
7)-Chiusa la testata, si crea il corpo della pagina inserendo il tag:
<BODY>
Il tag può avere i seguenti attributi:
a)-bgcolor="..."
serve a scegliere il colore di sfondo della pagina; se si omette, lo
sfondo resta bianco. Fra le virgolette bisogna scrivere il nome inglese
del colore, oppure il codice HTML del colore, avente come struttura #
seguito da 6 caratteri alfabetici o numerici.
b)-background="un'immagine
con eventuale percorso (vedi tag A)" serve ad inserire un'immagine come
sfondo della pagina; fare attenzione affinché non comprometta la
leggibilità del testo.
c)-text="un colore" indica il colore
con cui si vuole scrivere il testo non linkato. Nota bene: se si omette
il colore del testo, esso sarà nero.
d)-All'interno della
pagina, può esserci del testo linkato, attraverso i seguenti
attributi si possono colorare i link in 3 modi diversi:
link="un colore" (i link mai cliccati)
vlink="un colore" (i link cliccati)
alink="un colore" (i link durante il click)
Se
si omettono questi 3 attributi, il browser usa quelli predefiniti.
Questo tag (in inglese body vuol dire corpo) va chiuso con
</BODY> dopo aver scritto tutto quello che il corpo della pagina
deve contenere.
8)-Se si vuole allineare tutto il testo alla stessa
maniera, escluso il contenuto di eventuali tabelle, dopo l'apertura del
tag BODY, inserire il seguente tag:
<DIV align="...">
All'interno dell'attributo si scrive:
center (per allineare al centro)
left (per allineare a sinistra)
right (per allineare a destra)
justify (per allineare giustificato)
In tal modo si evita d'inserire l'attributo align nei tag P e H.
Il tag DIV, che ha sostituito il tag <CENTER>, va chiuso.
9)-Per scrivere del testo, occorre inserire il seguente tag:
<P>
Questo tag (originato dalla parola inglese paragraph che vuol dire paragrafo) può contenere l'attributo:
align="...", che serve ad allineare il testo:
-al centro scrivendo center;
-a sinistra scrivendo left;
-a destra scrivendo right;
-giustificato scrivendo justify.
E'
preferibile omettere l'attributo align e delegare l'allineamento del
testo al tag DIV. Il tag P va chiuso alla fine del testo scritto, se
subito dopo se ne riapre un altro verrà inserita una riga vuota.
10)-All'inizio
della pagina, di solito, va inserito un titolo, e a volte anche dei
sottotitoli: in questi casi si può usare al posto del tag P uno
dei seguenti tag:
<H1> <H2> <H3> <H4> <H5> <H6>
Essi
hanno la dimensione preimpostata, dalla massima alla minima, accettano
l'attributo align="...", vanno chiusi, e si chiamano così
perché H è l'iniziale della parola head, che in inglese
vuol dire testa o testata. I tag H funzionerebbero ovunque in
sostituzione dei tag P, ma il modo più corretto per indicare le
dimensioni dei caratteri è usare il tag FONT.
11)-Per andare a capo quando si sta scrivendo del testo, inserire il seguente tag:
<BR>
In
presenza di più di un tag BR (originato dalle iniziali delle
parole inglesi break e row che in italiano significano fila interrotta)
consecutivo, verranno inserite delle righe vuote. Il tag BR non va
chiuso.
12)-Per indicare il tipo di carattere da usare inserire il seguente tag:
<FONT face="..." size="..." color="...">
Il
tag FONT si chiama così perché in inglese vuol dire
carattere, va chiuso, va posizionato prima del testo. Il tag
<FONT> ha i seguenti attributi:
face="nome del carattere"
-Si
usa per indicare il nome del font scelto, in assenza di tale attributo,
il browser userà quello predefinito. Se durante la costruzione
del sito si decide di usare un font raro, è bene inserire
nell'attributo face più nomi di font separati da virgola e
spazio, ad esempio face="thorndale, courier, arial"
size="un numero da 1 in poi"
-Serve
a stabilire la dimensione del carattere, in assenza di tale attributo,
il browser userà quella predefinita. Si può anche
inserire un numero incrementatore o decrementatore della dimensione
predefinita del browser, cioè +1, +2, +3... -1, -2, -3...:
sconsigliato.
color="un colore"
Si usa per indicare uno specifico
colore, in assenza di tale attributo, il browser userà il nero.
E' preferibile però indicare il colore del testo nel tag BODY.
13)-Per rendere il testo in grassetto, inserire il seguente tag:
<STRONG>
Esso va chiuso. Il tag STRONG ha sostituito il tag <B>
14)-Per rendere il testo in corsivo, inserire il seguente tag:
<EM>
Esso va chiuso. Un'alternativa è il meno usato tag <CITE>
Il tag EM ha sostituito il tag <I>
15)-Per rendere il testo sottolineato, inserire il seguente tag:
<U>
Esso
va chiuso. Il tag U si chiama così perché l'iniziale si
riferisce alla parola inglese underscore che vuol dire trattino basso.
16)-Per rendere il testo barrato, inserire il seguente tag:
<S>
Esso
va chiuso. Il tag S si chiama così perché l'iniziale si
riferisce alla parola inglese strikethrough (straictraf) che vuol dire
depennato.
17)-Per far lampeggiare il testo, inserire il seguente tag:
<BLINK>
Esso va chiuso.
18)-Per evidenziare il testo con un colore specifico, inserire il seguente tag:
<SPAN style="background: colore">
Esso va chiuso.
19)-Per inserire del testo come apice o esponente, ad esempio 270³, inserire il seguente tag:
<SUP>
Il tag SUP, originato dalla parola inglese superior che vuol dire spostato in alto, va chiuso.
20)-Per inserire del testo come pedice o nota, ad esempio 252, inserire il seguente tag:
<SUB>
Il tag SUB, originato dal prefisso latino sub che vuol dire spostato in basso, va chiuso.
21)-Per inserire del testo in font fisso, inserire il seguente tag:
<TT>
Esso va chiuso.
22)-Per far cominciare la riga di testo 2 cm più a destra del normale, inserire il seguente tag:
<DD>
Esso va chiuso.
23)-Si
può inserire in una pagina un link, cioè un collegamento
ad un sito, ad un indirizzo e-mail con mittente precompilato, ad un
oggetto da scaricare o ad un'altra pagina web, con il seguente tag:
<A href="un qualsiasi link">
Il tag A può contenere i seguenti attributi:
target="_blank"
Serve a far aprire la pagina collegata in una nuova finestra del browser.
title="testo desiderato"
Serve a mostrare un pop-up con una didascalia quando il cursore passa sulla parte linkata.
Se si linka ad un indirizzo e-mail, nell'attributo href inserire mailto: prima dell'indirizzo.
Questo tag va chiuso.
I link nell'attributo href vanno scritti con il seguente criterio:
-Se
l'oggetto linkato si trova nella stessa cartella del file in cui si sta
compilando il tag A, all'interno dell'attributo href="..." si scrive
soltanto il nome dell'oggetto, ad esempio:
<A href="condominio.html">Condominio</A>
-Se
l'oggetto linkato si trova in una sottocartella rispetto al file in cui
si sta compilando il tag A, all'interno dell'attributo href="..." si
scrive il nome dell'oggetto preceduto dal percorso di cartelle e
sottocartelle per accedervi, ad esempio:
<A href="diritto/condominio.html">Condominio</A>
-Se
l'oggetto linkato si trova in una cartella ad un livello superiore
rispetto al file in cui si sta compilando il tag A, all'interno
dell'attributo href="..." si scrive il nome dell'oggetto preceduto da
uno o più simboli rappresentanti il livello superiore:
../
Ad esempio:
<A href="../condominio.html">Condominio</A>
A
volte occorre collegare dei file che non si trovano precisamente ad un
livello superiore, ma in un ramo parallelo. Quindi bisogna inserire
nell'attributo href, oltre al livello superiore anche il pezzo di
percorso necessario per raggiungere l'oggetto da linkare, ad esempio:
<A href="../diritto/condominio.html">Condominio</A>
24)-Per disegnare una linea orizzontale, inserire il seguente tag:
<HR>
Il tag HR ha i seguenti attributi:
color="colore scelto"
Si usa per rendere di un colore diverso dal nero la linea.
width="un numero o una percentuale"
Serve
a stabilire la lunghezza: se in esso si mette un numero, la lunghezza
è in pixel, se si mette una percentuale, la lunghezza è
in percentuale rispetto alla lunghezza della finestra.
size="numero di pixel"
Serve a definire lo spessore in pixel.
align="..."
Serve ad allinearla al centro, a destra o a sinistra.
noshade
E'
un tag obsoleto, è utilizzabile solo su vecchi browser, serviva
ad eliminare la tridimensionalità delle immagini. Questo tag non
va chiuso.
25)-Per includere un'immagine in una pagina web, inserire il seguente tag:
<IMG src="nome ed eventuale percorso dell'immagine">
Il
tag IMG si chiama così perchè IMG è
l'abbreviazione della parola inglese image che vuole dire immagine;
esso non va chiuso.
Per applicare un bordo all'immagine, si usa il seguente attributo:
border="un numero da 0 in su"
Il valore 0 equivale a nessun bordo. Se l'immagine è linkata, l'attributo border è obbligatorio.
A
volte può essere utile visualizzare un'immagine di una
dimensione diversa da quella originale, ma senza ridurre il file con
programmi come IrfanView, quindi la modifica delle dimensioni
sarà solo fittizia. Per far ciò, nel tag IMG inserire i
seguenti attributi:
width="numero di pixel o percentuale"
Esso indica la larghezza.
height="numero di pixel o percentuale"
Esso indica l'altezza.
Se si usa uno solo di questi attributi, l'altro varia mantenendo le proporzioni.
Per
creare una didascalia pop-up che compaia quando si passa il cursore
sull'immagine, nel tag IMG inserire il seguente attributo:
title="testo desiderato"
Alcuni
browser non visualizzano le immagini, per mostrare al loro posto una
didascalia informativa, inserire il seguente attributo:
alt="testo desiderato". Questo attributo è utile per i browser dei non vedenti.
26)-Per creare un elenco non ordinato, inserire i seguenti tag:
<UL>
che indica l'inizio dell'elenco.
<LI>
che deve precedere ogni voce dell'elenco.
</UL>
che indica la fine dell'elenco.
L'unico attributo del tag UL è il seguente:
type="disc"
Il simbolo di ogni voce dell'elenco sarà un punto pieno.
type="circle"
Il simbolo di ogni voce dell'elenco sarà un punto vuoto.
type="square"
Il
simbolo di ogni voce dell'elenco sarà un quadratino. Se si
omette questo attributo, il simbolo sarà un punto pieno. Per
creare un elenco ordinato, inserire i seguenti tag:
<OL>
che indica l'inizio dell'elenco.
<LI>
che deve precedere ogni voce dell'elenco.
</OL>
che indica la fine dell'elenco. Il tag OL ha i seguenti attributi:
type="1"
Per avere l'elenco ordinato con numeri arabi.
type="I"
Per avere l'elenco ordinato con numeri romani.
type="i"
Per avere l'elenco ordinato con numeri romani minuscoli.
type="A"
Per avere l'elenco ordinato alfabeticamente.
type="a"
Per avere l'elenco ordinato alfabeticamente con lettere minuscole.
start="..."
Questo attributo serve per cominciare l'elenco da un valore intermedio, numerico o alfabetico.
In presenza di tag UL o di tag OL il tag P non è necessario.
In
un elenco, l'allineamento centrato è antiestetico, quindi
è bene chiudere l'eventuale tag DIV prima del tag UL o OL e
riaprirlo dopo il tag UL o OL chiuso.
27)-Struttura fondamentale per
dare un ordine alla pagina è la tabella: essa consente di
disporre ogni elemento (immagini, testo, link, indici, ecc.) in celle
ordinate per righe e colonne. La tabella viene introdotta dal seguente
tag:
<TABLE>
Esso va chiuso.
Quando si crea una tabella, bisogna chiudere i tag P e FONT al di sopra del tag TABLE. Esistono tre attributi:
border="1"
Esso
serve a definire un bordo attorno ad ogni cella, e quindi anche
esternamente alla tabella. Se si desidera che il bordo sia invisibile,
inserire 0 come valore oppure omettere l'attributo. Il valore
dell'attributo è in pixel.
cellpadding="10"
Esso serve a distanziare il testo dal bordo delle celle. Il valore dell'attributo è in pixel.
cellspacing="10"
Esso
serve a regolare lo spessore del bordo delle celle. Il valore
dell'attributo è in pixel. Dopo aver scritto il tag TABLE,
bisogna inserire il seguente tag:
<TR>
che definisce dove comincia la riga della tabella. Dopo aver scritto il tag TR, bisogna inserire il seguente tag:
<TD>
che definisce ogni cella della tabella.
width="..."
Stabilisce
la larghezza delle celle: il valore può essere espresso in
pixel, ma è preferibile in percentuale, tenendo conto che la
somma delle percentuali delle celle della stessa riga deve dare 100.
rowspan="un numero da 2 in su"
Esso serve a fare in modo che la cella che contiene questo attributo occupi lo spazio di due o più celle in verticale.
colspan="un numero da 2 in su"
Esso serve a fare in modo che la cella che contiene questo attributo occupi lo spazio di due o più celle in orizzontale.
nowrap
Questo
attributo fa in modo che il testo interno ad una cella non vada mai a
capo. E' sconsigliato usarlo, perché se si mette molto testo
nella cella e non si va mai a capo, comparirà una barra di
scorrimento orizzontale lunghissima. I seguenti attributi possono
essere usati sia nel tag TR che nel TD:
valign="..."
Esso serve
ad allineare, in alto, al centro o in basso, inserendo come valore top,
middle o bottom, il contenuto della riga o della singola cella. Se si
omette questo attributo, l'allineamento verticale applicato sarà
quello centrale. All'interno di una tabella non ha efficacia la
formattazione (centratura, font, ecc.) stabilita al di fuori di essa,
quindi sarà necessario indicarla nei seguenti modi:
-Per
allineare a sinistra, al centro, a destra o giustificato, inserire
l'attributo align all'interno del tag TR, per tutta la riga, o del tag
TD, per ogni singola cella.
-Per specificare il font del testo,
inserire il tag FONT all'interno di ogni tag TD. Un esempio di tabella
con una riga e tre colonne:
<TABLE>
<TR>
<TD>
TESTO A PIACERE
</TD>
<TD>
TESTO A PIACERE
</TD>
<TD>
TESTO A PIACERE
</TD>
</TR>
</TABLE>
TAG POCO USATI
<STYLE>
Esso
serve quando si affianca alla pagina HTML un file con estensione .css,
che rappresenta un foglio di stile, in cui si riassumono le
formattazioni del sito, ad esempio colore, font, ecc. Nel caso in cui
si usi il tag STYLE, occorre usare anche il seguente tag:
<LINK>
E'
possibile inserire nella pagina pezzi di codice di programmazione, ad
esempio JavaScript oppure Visual Basic Script, in questo modo:
<SCRIPT language="JavaScript">
oppure
<SCRIPT language="VBScript">
I tag SCRIPT vanno chiusi.
<FRAME>
Un
metodo obsoleto di creare siti Web è usare i FRAME (sezioni): in
pratica si costruiscono 2 pagine separate, una piccola contenente
l'indice e una grande contenente il corpo della pagina. Questo metodo
non si usa più per problemi di compatibilità con alcuni
browser e per difficoltà d'indicizzazione da parte dei motori di
ricerca.
INDICAZIONI DA SEGUIRE NEL COSTRUIRE UN SITO
1)-Tutte
le pagine HTML sono da collegare almeno alla pagina iniziale, in modo
che si possa ritornare all'indice e da lì ricominciare a
navigare. Questo link può essere inserito in vari modi, ad
esempio aggiungendo la scritta «home page» o simile, oppure
linkando l'intestazione.
2)-Di solito è buona norma che tutte
le pagine, a parte quelle intrinsecamente particolari, abbiano la
stessa intestazione e, se occorre, un sottotitolo esplicativo.
3)-Gran
parte dei tag delle varie pagine del sito sono uguali o differiscono di
qualche dettaglio, perché è buona norma mantenere uno
stile e una formattazione coerenti. Perciò in linea di massima
usare font, colori e allineamenti analoghi in tutte le pagine.
4)-La
chiusura dei tag dev'essere sempre speculare alla loro apertura,
cioè se il tag <HTML> è il primo tag aperto, esso
dev'essere chiuso per ultimo, e così via.
5)-All'interno del
codice HTML, l'unico modo per scrivere 2 o più spazi consecutivi
è scrivere 2 o più volte la seguente stringa:
6)-Per miniaturizzare delle immagini, raccoglierle in una cartella e gestirle con un programma apposito, come IrfanView.
7)-Dopo aver creato una pagina HTML, accertarsi che i link funzionino.
8)-Nel creare una pagina HTML, si può usare uno dei seguenti metodi:
-Creare un nuovo documento di testo e scrivere il codice ex novo.
-Creare un nuovo documento di testo e incollarci dentro il codice copiato da un file modello o da un'altra pagina HTML.
-Copiare un file HTML che contenga del codice simile a quello che si deve ottenere.
Dopodiché modificare il codice secondo le proprie esigenze.
9)-Non
mettere spazi né lettere accentate nei nomi degli oggetti,
poiché i browser ed alcuni provider li considerano non standard.
Sostituire gli spazi con - oppure _ o nulla.
10)-E' consigliabile scrivere i nomi degli oggetti in minuscolo.
11)-E'
consigliabile usare caratteri che non si confondano con i segni
identificativi del codice HTML, ad esempio < > /. Quando non si
può fare a meno di usarli, bisogna anteporvi uno / , oppure
scegliere un carattere equivalente dalla mappa caratteri.
12)-Cercare
di mantenere uno stile di formattazione uniforme, ad esempio riguardo a
colori, font, allineamenti e contenuto grammaticale.
13)-E' consigliabile zippare i file linkati nelle pagine del sito, sia per ridurne il peso che per facilitarne il download.
14)-E' consigliabile che l'intestazione del sito sia uguale o simile al titolo della finestra dell'home page.
15)-E' bene distanziare l'intestazione dal corpo del sito, con una o due righe vuote, oppure con una linea orizzontale.
16)-E' preferibile non dare ai file lo stesso nome delle cartelle che li contengono per evitare URL cacofonici.
17)-Nelle
pagine relative ad ogni sottosezione, è consigliabile usare lo
stesso titolo della finestra della pagina indice di quella sezione,
magari seguito da spazio trattino spazio e titolo specifico della
pagina. Scegliere titoli brevi.
18)-La maggior parte dei provider
richiede che la pagina iniziale del sito si chiami index ed abbia come
estensione htm, html, php o asp. E' bene che essa non contenga frasi
lunghe, troppe immagini, ma un chiaro indice, su una, due o tre
colonne, che rimandi alle varie sezioni. Occorre individuare gli
argomenti da trattare, creare la struttura dell'indice con una tabella,
e quindi creare una cartella per ogni sezione: le cartelle conterranno
le pagine HTML e gli oggetti relativi alle sezioni.
GALLERIE DI IMMAGINI
Quando si costruisce una galleria di immagini, si possono usare diversi metodi.
1)-Immagini una sotto l'altra: sconsigliato, perché la pagina HTML ottenuta risulterebbe troppo lunga e pesante.
2)-Immagini
non scorrevoli: è il più facile da realizzare. Stabilire
il numero delle immagini da inserire nella galleria, miniaturizzare
tutte le immagini, decidere il numero di righe in cui suddividerle,
tenendo conto che in una riga, con una visualizzazione 800x600, entrano
al massimo 5 miniature da 150 pixel di larghezza. Dopo aver inserito i
tag IMG relativi alle miniature della prima riga, andare a capo con dei
BR e inserire le altre righe. Per separare le immagini una dall'altra,
inserire fra i tag IMG degli spazi. Ogni tag IMG contiene l'immagine
miniaturizzata e va linkato all'immagine originale come segue:
<A href="immagini/pallone.jpg"><IMG src="immagini/pallone_t.jpg" border="0"></A>
3)-Immagini
scorrevoli: è il più difficile da realizzare. Consiste
nel miniaturizzare le immagini e metterle tutte nella stessa pagina,
collegando le miniature alle immagini originali. Se le immagini sono
troppe, è consigliabile suddividerle in più pagine.
Queste gallerie sono realizzabili anche con l'ausilio di programmi
appositi, come IrfanView. Per creare poi la galleria scorrevole,
bisogna creare una pagina indice, ad esempio galleria.html dentro cui
inserire le miniature che vanno linkate non alla rispettiva immagine
originale, ma ad una pagina HTML che ha il nome dell'immagine e
contiene l'immagine alla dimensione originale, ad esempio:
<A href="immagini/pallone.html"><IMG src="immagini/pallone_t.jpg" border="0"></A>
Ognuna delle pagine col nome dell'immagine conterrà:
-I tag comuni alle altre pagine, da DOCTYPE a BODY.
-Il tag IMG relativo all'immagine originale.
-Il link alla pagina indice della galleria scorrevole.
-Il link alla pagina successiva col nome di un'altra immagine.
-Il link alla pagina precedente col nome di un'altra immagine.
Nota
bene: la pagina della prima immagine non conterrà il link alla
pagina precedente e la pagina dell'ultima immagine non conterrà
il link alla pagina successiva. Questo tipo di galleria è utile
quando si vuole creare un album da scorrere consecutivamente senza
tornare ogni volta alla pagina indice.