Corso di HTML

Corso di HTML
di Vittorio Romano
Copyright 1996-98 © Vittorio Romano

1.1 Struttura di un file HTML

Un documento HTML non è altro che un file di tipo ASCII composto da semplice testo e da marcatori (detti anche "tag"), che sono delle parole chiave scritte tra i simboli "<" e ">", che forniscono al browser le informazioni relative alla formattazione e ai collegamenti ipertestuali. I tag possono assumere la seguente forma:

<nome_tag> <nome_tag> testo </nome_tag> <nome_tag nome_attributo=argomento> testo </nome_tag>

Esistono infatti tag semplici (il primo), tag con chiusura (nel secondo esempio il testo è compreso tra due marcatori che ne delimitano l'azione) e tag che supportano attributi (come il terzo). Quando introdurremo i tag che prevedono attributi indicheremo anche i valori che possono assumere. Tranne dove diversamente specificato, gli attributi sono da considerarsi opzionali. L'HTML non è un linguaggio case sensitive, per cui (all'interno dei marcatori) non distingue i caratteri maiuscoli da quelli minuscoli (scrivere <HTML>sarà come scrivere <html>). Un documento HTML è dotato di una struttura ben precisa che viene mostrata qui sotto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN"> <HTML> <HEAD> <TITLE> Titolo </TITLE> </HEAD> <BODY> Corpo </BODY> </HTML>

Come si può subito notare, il testo che forma il documento è compreso tra i marcatori <HTML> e </HTML> che mostrano rispettivamente l'inizio e la fine dello stesso ed è preceduto da un tag che indica il tipo di documento (nel caso particolare è HTML 3.2 Draft). I tag <HEAD> e <BODY> con le rispettive chiusure delimitano invece l'intestazione e il corpo del documento. Nella prima inseriamo il tag <TITLE>, che contiene il titolo che verrà mostrato nella barra del titolo della finestra del browser, e altri elementi opzionali che vedremo in seguito, mentre nel secondo digitiamo il testo che sarà mostrato nella finestra.
Naturalmente è possibile aggiungere dei commenti, i quali possono essere collocati in ogni punto del documento e hanno questa forma:

Ogni cosa sia scritta tra i simboli  non verrà visualizzato dal browser.
Il tag <BODY> può avere i seguenti attributi:

BACKGROUND=Url BGCOLOR=Colore TEXT=Colore LINK=Colore VLINK=Colore ALINK=Colore

che identificano rispettivamente l'URL dell'immagine che vogliamo visualizzare sullo sfondo (BACKGROUND) e i colori dello sfondo (BGCOLOR), del testo (TEXT), dei link non visitati (LINK), di quelli visitati (VLINK) e di quelli attivi (ALINK). Poichè normalmente non vengono modificati di colori dei link, gli utenti sono abituati a riconoscere i collegamenti dal colore blu sottolineato; ciò impone una certa cautela nella modifica dei colori, al fine di non disorientare il lettore.
Una caratteristica interessante è che il browser non considera quanti siano gli spazi, i caratteri di tabulazione o di ritorno carrello che separano le parole del testo, ponendo solo uno spazio tra queste e andando a capo solo quando (nella finestra di chi legge) si giunga al margine destro. Ciò permette di utilizzare un'indentazione (dei rientri) che ci consenta di rendere più leggibile il file HTML a vantaggio di chi lo compila e lo corregge.
Cliccando qui sotto troverete alcuni esempi con il risultato al fianco.

1.2 Colori

Abbiamo appena visto che alcuni attributi servono per definire il colore. L'HTML ci consente di indicare uno dei 16 colori predefiniti attraverso un nome:

Colore Nome Valore (Hex) Colore Nome Valore (Hex)

Black #000000
Green #008000

Silver #C0C0C0
Lime #00FF00

Gray #808080
Olive #808000

White #FFFFFF
Yellow #FFFF00

Maroon #800000
Navy #000080

Red #FF0000
Blue #0000FF

Purple #800080
Teal #008080

Fuchsia #FF00FF
Aqua #00FFFF

Nome	Valore (Hex)	Nome	Valore (Hex)
Black	#000000	Green	#008000
Silver	#C0C0C0	Lime	#00FF00
Gray	#808080	Olive	#808000
White	#FFFFFF	Yellow	#FFFF00
Maroon	#800000	Navy	#000080
Red	#FF0000	Blue	#0000FF
Purple	#800080	Teal	#008080
Fuchsia	#FF00FF	Aqua	#00FFFF

A fianco del nome di ogni colore trovate il valore esadecimale che lo identifica, attraverso una notazione che indica le componenti RGB (Red, Green e Blue), che ha la forma:

#RRGGBB

dove RR, GG e BB sono numeri esadecimali di due cifre. E' possibile in questo modo scegliere la tonalità tra 16.777.216 tinte disponibili (16² · 16² · 16²).

1.3 Font

Per ciò che riguarda i font abbiamo a nostra disposizione alcuni tag che ci consentono di scegliere la dimensione ed il colore del carattere:

<BASEFONT SIZE=Valore> <FONT SIZE=Valore COLOR=Colore> Testo </FONT> <H4> Testo </H4>

I tag <BASEFONT> indica quale debba essere il corpo del font nel documento (accetta valori da 1 a 7 dove il valore di default è 3) e tale impostazione viene mantenuta finchè non si inserisce un altro <BASEFONT>o un tag <FONT> il quale modifica il corpo e il colore del carattere di tutto il testo che è inserito al suo interno (accetta gli stessi valori del primo e anche valori relativi a quello corrente: es +3).
I marcatori di Heading (da <H1> fino a <H6> si usano per i titoli e accettano come attributo ALIGN=Valore un valore che ne indica l'allineamento orizzontale (LEFT, CENTER o RIGHT). Causando la fine della linea alla chiusura del tag, non è adatto a tutte le circostanze.

1.4 Stili

Oltre alla dimensione e al colore possiamo scegliere anche lo stile del testo. Esistono due tipi di stili: gli stili logici e quelli fisici. I primi consentono di disinteressarsi del tipo di carattere da utilizzare e di concentrarsi esclusivamente sul contenuto, usando gli stili per conferire al testo maggior risalto, enfasi, ecc. lasciando al browser il compito di scegliere il carattere più adatto. Essi sono (a sinistra il codice HTML e a destra il risultato):

<CITE> Testo </CITE> Testo

<CODE> Testo </CODE> Testo

<KBD> Testo </KBD> Testo

<SAMP> Testo </SAMP> Testo

<VAR> Testo </VAR> Testo

<DFN> Testo </DFN> Testo

<EM> Testo </EM> Testo

<STRONG> Testo </STRONG> Testo

che indicano che il testo compreso è una citazione, del codice (per i programmatori), inserito da tastiera, un esempio, una variabile, una definizione, o che deve essere enfatizzato o posto in rilievo.
Gli stili fisici sono invece quelli che definiscono le caratteristiche del carattere come grassetto, corsivo ecc., che sono:

<B> Testo </B> Testo

<I> Testo </I> Testo

<TT> Testo </TT> Testo

<U> Testo </U> Testo

<STRIKE> Testo </STRIKE> ~~Testo~~

<BIG> Testo </BIG> Testo

<SMALL> Testo </SMALL> Testo

Testo <SUP> Apice </SUP> Testo^Apice

Testo <SUB> Pedice </SUB> Testo_Pedice

che corrispondono ai classici grassetto, corsivo, non spaziato (stile macchina da scrivere), sottolineato, sbarrato, big, small, apice e pedice rispettivamente.
Un altro tag utile è

<ADDRESS> Testo </ADDRESS>

in cui inseriremo per esempio l'indirizzo di chi ha scritto la pagina.

1.5 Formattazione

Abbiamo già detto che i browser visualizzano il testo contenuto nel documento adattandolo alla dimensione della finestra a disposizione non considerando gli spazi, i caratteri di tabulazione e le volte che andiamo a capo. Per formattare il documento secondo i nostri gusti dovremo quindi utilizzare appositi tag:

<BLOCKQUOTE> Testo </BLOCKQUOTE> <DIV ALIGN=Valore> Testo </DIV> <CENTER> Testo </CENTER> <BR> <PRE> Testo </PRE> <P> Testo </P> <HR>

Il primo aumenta il rientro del testo (<BLOCKQUOTE>), il secondo (<DIV>) lo allinea a sinistra (LEFT), al centro (CENTER) o a destra (RIGHT), il terzo lo allinea al centro (<CENTER>), il quarto rappresenta il ritorno carrello (<BR>), il quinto considera il testo già formattato (<PRE>), il sesto pone uno spazio tra un paragrafo e l'altro (<P>), mentre l'ultimo inserisce una riga orizzontale (<HR>). Di questi soltanto <BR>, <HR>, <P> e <PRE> accettano degli attributi opzionali, che sono, per il primo

CLEAR=Valore

che accetta come valori LEFT, RIGHT e ALL che indicano che la riga di testo successiva deve cominciare al di sotto dell'immagine presente sul lato sinistro, destro o ad entrambe. Il tag <HR> ha invece:

SIZE=Valore WIDTH=Valore ALIGN=Valore NOSHADE

che indicano rispettivamente lo spessore, la lunghezza (in punti (Es. 100) o in percentuale rispetto alla larghezza della pagina (Es. 75%)), l'allineamento (LEFT, RIGHT e CENTER) e l'eliminazione dell'ombreggiatura della riga. Il tag <P> usa ALIGN e il tag <PRE> usa WIDTH, con la sintassi appena descritta, per segnalare l'allineamento del paragrafo e il numero massimo di caratteri presenti per riga rispettivamente.
Due marcatori che non sono contenuti nell'HTML 3.2, ma comunemente supportati dai browser, sono:

<NOBR> Testo <WBR> Testo </NOBR>

che impediscono che il testo venga interrotto per andare a capo riga, se non in punti diversi da quelli in cui abbiamo eventualmente inserito i <WBR>.

1.6 Caratteri speciali

L'HTML utilizza il set di caratteri ISO 8859-Latin-1 che comprende molti caratteri che non sono direttamente digitabili dalla tastiera (come molte vocali accentate), ma che possono essere ugalmente inseriti nei documenti HTML grazie ad un riferimento mnemonico (es. per il carattere "à", il cui riferimento mnemonico è "agrave", si usa "à") o un riferimento numerico (es. per il carattere "à", il cui riferimento numerico è 224, si usa "&amp#224"). Per una lista completa dei caratteri...

2.0 URL

In un documento HTML è possibile inserire inserire dei riferimenti, detti ancore, ad altri documenti, ad immagini o a qualunque tipo di file o risorsa che può risiedere fisicamente sullo stesso computer o su un qualunque altro computer della rete. E' quindi necessario poter identificare univocamente un file in un qualsiasi punto della rete attraverso un indirizzo che viene chiamato URL (acronimo di Uniform Resource Locator). Esso ha la seguente sintassi:

RISORSA://HOST.DOMINIO[:PORTA]/PATH/NOME_FILE

La RISORSA indica al browser il modo (protocollo) con cui accedere al file che può essere uno dei seguenti:

file

che indica un file sul sistema locale

http

per i file presenti su World Wide Web server (HTML)

ftp

per i file di un FTP server

gopher

per i file di un Gopher server

WAIS

per i file di un WAIS server

telnet

per le connessioni Telnet

news

per i newsgroup Usenet

mailto

per la posta elettronica

Segue il nome del computer su cui risiede il file, il numero di porta (opzionale), il percorso nell'albero delle directory del file system della macchina, nonchè il nome del file. Per quanto riguarda il percorso e il nome del file occorre sottolineare che i sistemi UNIX, diversamente dal DOS e da Windows, distinguono i caratteri maiuscoli da quelli minuscoli (INDEX.HTML è diverso da index.html). Per un gruppo di discussione indicheremo il suo nome, nel caso della posta elettronica indicheremo l'indirizzo.
Nel caso in cui volessimo riferire un file presente sullo stesso computer è consigliabile usare i cosiddetti URL relativi in cui indichiamo solo il percorso nell'albero delle directory (assoluto o relativo alla directory in cui si trova il file che stiamo editando) ed il nome del file.

PATH_REL/NOME_FILE

Questo approccio consente una più comoda e flessibile manutenzione dei documenti, in quanto possiamo spostare le directory che contengono i file senza che gli URL perdano consistenza.

Esempio:

http://home.netscape.com gopher://131.114.1.10 news://it.diritto mailto://jack@home.com ../icone/img.gif

2.1 Ancore

Dopo aver visto come identificare gli altri documenti sulla rete possiamo vedere in quale modo inserire un collegamento ipertestuale. Il marcatore che utilizzeremo è:

<A HREF="Url"> Testo </A>

Il risultato sarà quello di evidenziare il testo contenuto nel marcatore (solitamente viene colorato di blu e sottolineato, ma è possibile modificare queste impostazioni con gli attributi del tag <BODY>) e di fare in modo che con un click del mouse si salti al documento o alla risorsa indicati dall'URL che viene inserito con l'attributo HREF. Inoltre con la sintassi:

<A NAME="Etichetta"> Testo </A>

si avrà la possibilità di indicare un punto preciso all'interno del documento, che potremo riferire attraverso i tag:

<A HREF="#Etichetta"> Testo </A> <A HREF="Url#Etichetta"> Testo </A>

che puntano l'etichetta sopra definita nel documento correntemente visualizzato (il primo) o in quello indicato dall'URL (il secondo).
Oltre a questi attributi il tag ne accetta altri meno utilizzati:

TITLE=Testo REL=Relazione REV=Relazione

che indicano nell'ordine un titolo per il sito puntato, la relazione tra il documento corrente e quello puntato, e la relazione inversa.

Esempio:

<A HREF="autore.html" REL=Author REV=Made>

2.2 Immagini

Per conferire un migliore aspetto al nostro documento abbiamo la possibilità di introdurre immagini che siano in formato XBM, GIF o JPEG con il seguente tag:

<IMG>

che accetta i seguenti attributi:

SRC="Url" LOWSRC="Url" ALT="Stringa" ALIGN=Valore VSPACE=Valore HSPACE=Valore HEIGHT=Valore WIDTH=Valore BORDER=Valore ISMAP USEMAP=#Nome

Il loro compito è rispettivamente quello di indicare l'Url del file in cui è contenuta l'immagine (SRC), l'URL del file di un eventuale altra immagine a bassa risoluzione da visualizzare in attesa di scaricare la prima (attenzione: LOWSRC non è HTML 3.2, anche se è generalmente supportato), un testo (ALT) da visualizzare in alternativa (molti navigatori disattivano la visualizzazione delle immagini al fine di velocizzare il caricamento del documento), come allineare il testo all'immagine (i valori di ALIGN sono TOP, MIDDLE e BOTTOM, che inseriscono l'immagine in mezzo alla riga di testo, allineandola in alto, al centro o in basso, e LEFT e RIGHT che pongono l'immagine su un lato e la circondano con il testo), lo spazio libero verticalmente (VSPACE) e orizzontalmente (HSPACE) intorno all'immagine (in punti), la sua altezza (HEIGHT) e larghezza (WIDTH) in punti o in percentuale rispetto alle dimensioni dello schermo (specificando solo uno dei due attributi, l'immagine viene scalata mantenendone le proporzioni), lo spessore del bordo (BORDER) e se l'immagine è una mappa sever-side (ISMAP) o client-side (USEMAP). Occorre sottolineare che le immagini tendono a rallentare la visualizzazione della pagina, in quanto costituiscono una notevole quantità di dati da trasmettere, che cresce col crescere della risoluzione e del numero di colori utilizzati.

2.3 Liste

Uno strumento fondamentale per la presentazione ordinata di dati sono le liste, che si distinguono in due diversi tipi: ordinate e non ordinate. Le prime si implementano così (a sinistra il codice e a destra il risultato):

<OL> <LI> Primo <LI> Secondo </OL>

Primo

Secondo

Il tag <OL> (Ordered List) definisce la lista e contiene tutte le voci della stessa (List Item). I suoi attributi sono due:

TYPE=Tipo START=Valore

che definiscono il tipo di numerazione ("1" per i numeri, "A" per le lettere maiuscole, "a" per le lettere minuscole, "I" per i numeri romani maiuscoli e "i" per quelli minuscoli) ed il numero iniziale.
Il tag <LI> ha invece altri due attributi:

TYPE=Tipo VALUE=Valore

che servono per modificare il tipo di numerazione ed il numero corrente in un punto qualsiasi della lista.
Esistono invece più tipi di liste non ordinate:

<UL> <LI> Primo <LI> Secondo </UL>

Primo

Secondo

L'attributo dei tag <UL> e <LI>è:

TYPE=Tipo

che indica il tipo di simbolo da porre davanti agli elementi della lista (DISC, CIRCLE o SQUARE).
Gli altri tipi di liste non ordinate sono le definition list

<DL> <DT> Termine <DD> Definizione termine </DL>

Termine

Definizione termine

le directory

<DIR> <LI> Primo <LI> Secondo </DIR>
Primo

Secondo

ed i menu

<MENU> <LI> Primo <LI> Secondo </MENU>
Primo

Secondo

Le liste possono essere anche annidate una dentro l'altra (anche diversi tipi di lista!), conferendo una struttura gerarchica alla lista che spesso risulta molto utile. Tutti i vari tipi di liste possono avere nel tag iniziale l'attributo COMPACT che indica al browser di rappresentarla in forma compatta.

2.4 Tabelle

Le tabelle sono molto utili nella creazione di documenti in HTML, consentedoci di allineare dati, testo ed anche immagini a nostro piacimento. Vediamone subito un esempio:

<TABLE BORDER> <CAPTION> Tabella </CAPTION> <TR> <TH> Colonna 1 </TH> <TH> Colonna 2 </TH> </TR> <TR> <TD> Cella 1 </TD> <TD> Cella 2 </TD> </TR> <TR> <TD> Cella 3 </TD> <TD> Cella 4 </TD> </TR> </TABLE>

Tabella
Colonna 1 Colonna 2

Cella 1 Cella 2

Cella 3 Cella 4

Tabella
Colonna 1	Colonna 2
Cella 1	Cella 2
Cella 3	Cella 4

Notiamo subito che l'intera tabella è racchiusa all'interno dei tag <TABLE>, All'interno troviamo il marcatore <CAPTION> (opzionale), che indica la descrizione della tabella, e una serie di <TR> (ciascuno dei quali delimita una riga) che contiene una serie di <TH> (che rappresentano le celle che fungono da titolo di riga o di colonna e sono anch'essi facoltativi) o di <TD> (le normali celle dati). Il numero di celle deve essere lo stesso per ogni riga.
Gli attributi del tag <TABLE> sono:

BORDER=Valore CELLSPACING=Valore CELLPADDING=Valore WIDTH=Valore ALIGN=Valore

che forniscono rispettivamente lo spessore del bordo, lo spazio tra le celle, lo spazio tra la cella e il suo contenuto, la larghezza dell'intera tabella (esprimibile in punti o in percentuale rispetto alla larghezza della pagina) e l'allineamento della tabella (LEFT, CENTER o RIGHT).
Il tag <CAPTION> ha invece il solo argomento:

ALIGN=Valore

che indica di inserire la descrizione sopra (TOP) o sotto (BOTTOM) la tabella.
Gli argomenti del tag <TR> sono:

ALIGN=Valore VALIGN=Valore

che indicano il tipo di allineamento orizzontale (LEFT, CENTER,RIGHT) e verticale (TOP, MIDDLE, BOTTOM, BASELINE) all'interno della riga.
I parametri dei tag <TD> e <TH> sono invece:

ROWSPAN=Valore COLSPAN=Valore ALIGN=Valore VALIGN=Valore WIDTH=Valore HEIGHT=Valore NOWRAP

dove i primi due indicano il numero di righe e di colonne che la cella deve occupare, mentre gli altri hanno la stessa funzione degli omonimi attributi sopra descritti per i tag <TABLE> e <TR>, e HEIGHT indica l'altezza della cella.
L'uso di <COLSPAN> e <ROWSPAN> necessita un poco di attenzione: se una cella occupa più colonne e/o righe occorre diminuire, nelle righe e colonne interessate, il numero di tag <TD> e <TH> di conseguenza. Molti browser offrono la possibilità di indicare il coloredello sfondo di una cella, di una riga o di tutta la tabella inserendo l'attributo BGCOLOR=Colore nei tag <TD>, <TH>, <TR> o <TABLE>.

3.0 Frame

Una serie di marcatori non compresi nell'HTML 3.2, ma implememtati in tutti i browser realizzati di recente sono quelli per i frame. Essi consentono di dividere la finestra di visualizzazione in più parti per consentire la visione contemporanea di più documenti. All'interno del marcatore <BODY>, il corpo del documento deve essere:

<FRAMESET COLS="35%,*"> <FRAME NAME="Uno" SRC="FileUno.html" NORESIZE SCROLLING="no"> <FRAME NAME="Due" SRC="FileDue.html"> </FRAMESET> <NOFRAMES> Messaggio per chi non li vede </NOFRAMES>

Il tag esterno <FRAMESET> specifica con l'attributo COLS in quante colonne vada divisa la finestra (per dividerla in righe basta sostituire ROWS) indicando la larghezza della colonna (o della riga) in punti o in percentuale rispetto alla larghezza della finestra di visualizzazione. Il simbolo * indica che la colonna (o la riga) corrispondente occupa tutto il resto dello spazio a disposizione. Al suo interno troveremo i tag <FRAME> con l'indicazione del nome del frame e dell'Url del file da visualizzare al suo interno. Al posto di uno o più tag <FRAME> è possibile sostituire un eventuale altro <FRAMESET> annidato, che ci consente per esempio di dividere la colonna appena creata in più righe. Gli attributi sono:

NAME=Nome SRC=Url MARGINWIDTH=Valore MARGINHEIGHT=Valore SCROLLING=Valore NORESIZE

che indicano il nome del frame, il documento da caricarvi, la dimensione dei margini dai bordi (larghezza e altezza) in punti, la presenza della barra di scorrimento (si indica YES per visualizzarla sempre, NO per nasconderla sempre e AUTO per inserirla all'occorrenza) e l'impossibilità di ridimensionare i bordi del frame.
Il tag <NOFRAME> serve invece per coloro che abbiano un browser vecchio che non supporta i frame, consentendo loro di visualizzare un messaggio sullo schermo.
La forza dei frame stà nel fatto che, inserendo nelle ancore dei documenti visualizzati l'attributo

TARGET=Nome

si riesce a forzare il caricamento di un documento in uno qualsiasi dei frame definiti. E' anche possibile utilizzare (all'interno del tag <HEAD>) il tag:

<BASE TARGET=Nome>

per indicare che tutti i link del documento saranno indirizzati allo stesso frame. Si possono specificare come nomi di frame i seguenti:

_blank _self _parent _top

che indicano rispettivamente una nuova sessione del browser, il frame stesso da cui parte la richiesta, il <FRAMESET> di origine e l'intera finestra del browser.

3.1 Form

L'HTML consente di creare dei moduli (form) che l'utente può riempire ed eventualmente inviare a chi lo ha creato o ad un programma che li elabora. Un modulo è contenuto all'interno del tag

<FORM> </FORM>

che può avere i seguenti attributi:

ACTION=Url METHOD=Metodo ENCTYPE=Codifica

che indicano rispettivamente a chi inviare i dati (può essere una risorsa del tipo http o mailto), il metodo (se ACTION è un http, allora GET, il valore di default, concatena i valori all'Url indicato in ACTION, e POST li invia sotto forma di pacchetti e si usa quando i dati sono molti) e il formato in cui vengono codificati i dati.
Al suo interno possiamo inserire il tag

<INPUT>

che possiede una lista ben nutrita di attributi:

NAME=Nome TYPE=Tipo VALUE=Testo CHECKED SIZE=Valore MAXLENGTH=Valore SRC=Url ALIGN=Valore

Il primo identifica il nome dell'attributo, mentre il secondo, che definisce il tipo di campo da visualizzare che viene caratterizzato dagli altri attributi, può avere uno dei seguenti valori:

TEXT

il valore di default che consente di inserire una riga di testo, di cui possiamo indicare la massima lunghezza con l'attributo MAXLENGTH e che possiamo inizializzare con VALUE, in un riquadro di cui possiamo stabilire la dimensione con SIZE

PASSWORD

simile al precedente, ma non può essere inizializzato e i caratteri digitati sono visualizzati come *

CHECKBOX

consente di scegliere più valori per lo stesso campo inserendo più campi CHECKBOX con uguale NAME, ma con VALUE differente: tutti quelli settati dall'utente verranno considerati coppie nome/valore. E' possibile settare ogni valore come selezionato con CHECKED

RADIO

come il precedente, ma consente di scegliere solo un valore per lo stesso campo, generando una sola coppia nome/valore per ogni nome

SUBMIT

crea un bottone che l'utente preme per inviare i dati. Si può indicare un'etichetta con VALUE

IMAGE

consente di inserire un'immagine da utilizzare come bottone per l'invio dei dati

RESET

come SUBMIT, ma il bottone serve per riportare il modulo ai valori settati al caricamento

HIDDEN

permette di inviare dati senza visualizzarli

FILE

serve per allegare ai dati un file. Viene visualizzato come un campo TEXT (di cui si possono settare le caratteristiche allo stesso modo), in cui inserire il nome del file, e un bottone che consente di ricercarlo

Altro marcatore inseribile in un modulo è

<SELECT></SELECT>

al cui interno si inseriscono uno o più tag

<OPTION>

In questo modo riusciamo a creare un menu all'interno del quale scegliere uno o più valori tra quelli predefiniti (inseriti mediante il tag <OPTION>). Gli attributi di <SELECT> sono:

NAME=Nome SIZE=Valore MULTIPLE

che indicano rispettivamente il nome del campo, il numero di opzioni visibili contemporaneamente e la possibilità di selezionare più valori. Nel tag <OPTION> possiamo specificare:

SELECTED VALUE=Valore

che servono per selezionare l'opzione al caricamento (SELECTED) e indicare il valore (VALUE).
L'ultimo tipo di campo inseribile in un modulo è

<TEXTAREA></TEXTAREA>

che consente di inserire più righe di testo all'interno di un riquadro di cui si può stabilire il nome e le dimensioni (in caratteri) con gli attributi:

NAME=Nome ROWS=Valore COLS=Valore

3.2 Intestazione

In questa sezione del documento (come già detto compresa nel tag <HEAD>), oltre al marcatore <TITLE> che è obbligatorio, possiamo inserire i seguenti tag:

<BASE HREF=Url> <ISINDEX PROMPT=Testo> <META NAME=Testo CONTENT=AltroTesto> <LINK HREF=Url REL=Relazione REV=Relazione TITLE=Titolo> <SCRIPT> <STYLE>

Il tag <BASE> indica l'indirizzo (Url assoluto) del documento base, rispetto a quale calcolare gli Url relativi contenuti nel documento mentre iI secondo indica che l'utente può inserire alcune parole che verranno concatenate all'Url inserito in <BASE> per effettuare una query (con l'attributo PROMPT si può mostrare una stringa di prompt). Il marcatore <META> serve invece per descrivere alcune proprietà (<NAME>) e il loro valore (<CONTENT>).

Esempio:

<META NAME="Author" CONTENT="Vittorio Romano">

Il marcatore <LINK> definisce le relazioni diretta (REL) e inversa (REV) con altri documenti o risorse (indicati da HREF) a cui si può anche fornire un titolo.
Tipici valori da attribuire alle relazioni sono:

Contents Index Glossary Copyright Next Previous Help Bookmark

Esempio:

<LINK REL="Previous" HREF="doc.html">

I tag <SCRIPT> e <STYLE> sono invece riservati per le implementazioni dei linguaggi script (es. JavaScript) e per i fogli di stile che sono previste nelle prossime versioni dell'HTML, ma che spesso sono già inculse nei browser in commercio.

3.3 Mappe

Le immagini che inseriamo nei nostri documenti possono essere delle mappe che, a secondo del punto in cui clicchiamo con il mouse, saltano a una certa pagina. Esse si dividono in due tipi, server-side e client-side, caratterizzate dal fatto che nella prima le coordinate del punto cliccato vengono mandate al server che le elabora (rallentando l'operazione), mentre la seconda viene elaborata dal browser stesso. Per la prima basta inserire l'attributo ISMAP nel tag dell'immagine, per l'altra si deve aggiungere

USEMAP=#Nome

al tag dell'immagine e definire le aree sensibili della mappa attraverso due altri marcatori:

<MAP NAME=Nome> <AREA> </MAP>

La mappa definita da <MAP> può contenere più aree, definite da altrettanti <AREA>, di cui si possono specificare la forma, le coordinate (in punti o in percentuale rispetto alla figura), un testo da visualizzare nella barra di stato, l'url puntato e se la zona non deve contenere link, rispettivamente con i seguenti attributi:

SHAPE=Forma COORDS=Coordinate ALT=Testo HREF=Url NOHREF

dove la forma può essere RECT (default), CIRCLE o POLY, mentre le coordinate si indicano con la sintassi "x₁, y₁, x₂, y₂" (dove x₁ e y₁ sono le coordinate del vertice in alto a sinistra, mentre x₂ e y₂ quelle del vertice in basso a destra) nel primo caso, "x_c, y_c, r" (dove x_c e y_c sono le coordinate del centro e r il raggio) nel secondo e "x₁, y₁, x₂, y₂, x₃, y₃, ..." (dove x_i e y_i sono le coordinate dell'i-esimo vertice) nell'ultimo.

3.4 Applet

L'HTML 3.2 consente di inserire nei documenti le applet Java, piccoli programmi scritti in Java (un linguaggio creato da Sun Microsystems), che hanno il particolare pregio di essere, una volta compilati, in una forma (bytecode) indipendente dalla piattaforma hardware e interpretabile direttamente dal browser. Il tag che consente l'inserimento di una applet è:

<APPLET> </APPLET>

che accetta numerosi attributi quali:

CODEBASE=Url CODE=File ALT=Testo NAME=Nome WIDTH=Valore HEIGHT=Valore ALIGN=Valore VSPACE=Valore HSPACE=Valore

che specificano l'Url della directory in cui si trova l'applet Java (CODEBASE), l'Url relativo del file che contiene il programma compilato (CODE), un testo alternativo per i browser che non supportano tale linguaggio (ALT), la larghezza (WIDTH) e la larghezza (HEIGHT) dell'area in cui visualizzare l'applicazione, l'allineamento (ALIGN), e lo spazio verticale (VSPACE) e orizzontale (HSPACE) dell'applet (i valori attribuibili a questi parametri sono identici a quelli per gli omonimi attributi delle Immagini).
In aggiunta esiste un marcatore che, inserito all'interno del precedente, consente di passare dei parametri all'applet, nella forma

<PARAM NAME=Nome VALUE=Valore>

`<CITE> Testo </CITE>`	Testo
`<CODE> Testo </CODE>`	`Testo`
`<KBD> Testo </KBD>`	`Testo`
`<SAMP> Testo </SAMP>`	`Testo`
`<VAR> Testo </VAR>`	`Testo`
`<DFN> Testo </DFN>`	Testo
`<EM> Testo </EM>`	Testo
`<STRONG> Testo </STRONG>`	Testo

`<B> Testo </B>`	Testo
`<I> Testo </I>`	Testo
`<TT> Testo </TT>`	`Testo`
`<U> Testo </U>`	Testo
`<STRIKE> Testo </STRIKE>`	~~Testo~~
`<BIG> Testo </BIG>`	Testo
`<SMALL> Testo </SMALL>`	Testo
`Testo <SUP> Apice </SUP>`	Testo^Apice
`Testo <SUB> Pedice </SUB>`	Testo_Pedice