Un file HTML non e' altro che un file di testo, sostanzialmente identico ai file di tipo TXT che si possono scrivere con un comune editor di testo, come il blocco note di Windows. Per funzionare come pagina web, questo file di testo deve essere rinominato con il suffisso .HTML o .HTM e deve contenere, oltre al testo vero e proprio, anche le istruzioni che consentono al browser di riconoscerlo e gestirlo correttamente.

Queste istruzioni sono chiamate Tag (marcatori). Un TAG e' un comando racchiuso tra i segni < (minore) e > (maggiore), chiamati anche parentesi angolari.
Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo.

Ogni tag HTML puo' essere accomapagnato da uno o piu' attributi che ne definiscono determinate proprieta' (per rendere il tag piu' rispondente alle varie esigenze).
E' fondamentale ricordare come prima regola che gli attributi di un tag, se utilizzati, devono essere scritti uno dopo l'altro (sostanzialmente non importa l'ordine) distaccati gli uni dagli altri da uno spazio.

Le virgolette che racchiudono il valore di un attributo a volte sono obbligatorie ed a volte no. In ogni caso sono sempre accettabili anche quando non sono necessarie.

Esempio: < tag attributo="valore" attributo="valore" attributo="valore" >...< /tag >

---

Tag di base

< html >...< /html >

Definisce un documento Html. Va posto < html > all'inizio del documento e < /html > alla fine del documento; essi indicano al browser che tutto cio' che e' compreso nel mezzo e' una pagina web.

< head >...< /head >

Racchiudono l'intestazione del documento dove si possono inserire informazioni (i cosiddetti metatag) che non vengono visualizzate nella pagina, ma che ne descrivono caratteristiche come titolo, autore e parole-chiave. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo.

< title >...< /title >

Definisce il titolo che appare alla cima della finestra di browser.

< body >...< /body >

Racchiudono il corpo del documento dove si inserisce il contenuto da visualizzare nella pagina (testo, collegamenti, immagini e cosi' via).

< !- .................... ->

Questo tag consente di commentare alcune parti del codice della pagina e puo' essere inserito in qualsiasi punto. I puntini devono essere sostituiti con il testo del commento.

Esempio di impostazione di pagina HTML

< HTML >

< HEAD >
< TITLE > ... < /TITLE >
< META >
< /HEAD >

< BODY >
...
< /BODY >

< /HTML >

---

Corpo di un documento Html

< body >...< /body >

Il corpo del documento Html.

Gli attributi piu' utilizzati con questo tag sono:

bgcolor="#??????" Per inserire un colore di sfondo alla pagina.

background="nomefile.xxx" Per inserire un'immagine come sfondo.

text="#??????" Per attribuire un colore particolare al testo del documento.

link="#??????" Per attribuire uno specifico colore ai collegamenti ipertestuali (link).

body alink="#??????" Per attribuire uno specifico colore ai collegamenti ipertestuali attivi.

body vlink="#??????" Per attribuire uno specifico colore ai collegamenti ipertestuali gia' visitati.

NOTA:
per i colori va' usato o il numero esadecimale preceduto dalla griglietta [(#) per esempio #9ACD32] corrispondente al colore scelto o, per i colori base, il nome [senza la griglietta (#) per esempio blue].

---

Formattazione

Quando si scrive il codice HTML, per mandare a capo il testo che segue non basta premere il tasto Invio. Anche se nel codice una frase sembra andare a capo, cio' non accade una volta che la pagina viene visualizzata nel browser. Per mandare a capo il testo di una pagina web si usano i tag < BR >, < P > o < DIV >.

< p >...< /p >

Crea un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e puo' essere formattato in maniera diversa rispetto al testo precedente.

Gli attributi piu' utilizzati con questo tag sono:

align="???" Permette di allineare un paragrafo a destra (right), sinistra (left), a centro (center) e giustificato (justify).
L'allineamento a sinistra e' quello predefinito, quindi specificare l'attributo ALIGN="left" e' superfluo.

< br >

Equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Va inserito nel punto in cui si vuole che la frase vada a capo.

< div >...< /div >

Serve a creare un blocco di testo che va a capo e puo' assumere caratteristiche di formattazione diverse dal testo precedente senza tuttavia creare spazio vuoto tra il nuovo testo e quello precedente. In questo modo si contrassegna e si puo' formattare in modo omogeneo una sezione di testo, costituita da uno o piu' paragrafi.

Gli attributi piu' utilizzati con questo tag sono:

align="???" Permette di allineare per identificare e formattare in modo omogeneo interi blocchi di testo anziche' i singoli paragrafi.

< blockquote >...< /blockquote >

Crea un salto di paragrafo e indenta il testo facendolo rientrare di circa 1 cm dal margine sinistro e destro.

Si possono sommare (nidificare) piu' tag < blockquote > consecutivi per avere rientri maggiori di 1 cm.

< pre >...< /pre >

Testo preformattato. Questo tag crea un salto di paragrafo e fa in modo che il testo venga visualizzato dal browser nel modo in cui e' stato digitato nel codice HTML usando un carattere a spaziatura fissa.

Esempio di testo con il tag < pre >...< /pre >

---

Testo

I tag per la formattazione del testo si suddividono in stili fisici e stili logici.


Gli stili fisici sono tag definiscono in modo univoco gli attributi grafici dei caratteri.

< h1 >...< /h1 > fino a < h6 >...< /h6 >

Titoli.
H1 e' il piu' grande, H6 e' il piu' piccolo.

Gli attributi piu' utilizzati con questo tag sono:

align="???" Permette di allineare il titolo alla destra (right), alla sinistra (left), al centro (center) o giustificato (justify) rispetto alla pagina.

< b >...< /b >

Testo in grassetto.

< i >...< /i >

Testo in corsivo.

< strike >... < /strike >

testo barrato o depennato;



Gli stili logici sono tag che determinano l'aspetto del testo in base al presunto scopo della formattazione. I tag logici rappresentano una soluzione elegante dal punto di vista formale, ma il loro risultato in fase di visualizzazione puo' variare secondo il browser dell'utente.

< cite >...< /cite >

Citazione, il testo viene visualizzato in corsivo.

< em >...< /em >

Enfatizzare una parola (corsivo).

< strong >...< /strong >

Enfatizzare una parola (grassetto).

< sub >...< /sub >

Testo _pedice.

< sup >...< /sup >

Testo ^apice.

< address >...< /address>

Indirizzo per contatti. Crea una

interruzione di riga

prima e dopo ed il testo viene visualizzato in corsivo;

< dfn >...< /dfn >

Definizione, il testo viene visualizzato in corsivo.

< kbd >...< /kbd >

Digitazione da tastiera, il testo viene visualizzato in carattere a spaziatura fissa.

< samp >...< /samp >

Testo esemplificativo, il testo viene visualizzato in carattere a spaziatura fissa.

< var >...< /var >

Variabile, il testo viene visualizzato in corsivo.

---

Linee

Per dividere il testo in sezioni puo' essere utilizzato il tag < hr > che genera una riga orizzontale larga quanto la pagina.
Questo comando non ha il tag di chiusura.

Gli attributi piu' utilizzati con questo tag sono:

size="valore" Specifica lo spessore della riga in pixel (spessore di default = 2);
width="valore" Specifica la larghezza della riga in pixel o in percentuale rispetto alla larghezza dello schermo;
align="???" Consente di allineare la riga a destra (right), sinistra (left), a centro (center); se non specificato la riga viene centrata;
noshade Traccia la riga in nero senza ombreggiatura.

Esempio:

< HR size="16" width="50%" >
< HR width="20" align="left" noshade >

---

Caratteri

< font >...< /font >

Permette di assegnare degli attributi particolari ai caratteri (font) della pagina.

Gli attributi piu' utilizzati con questo tag sono:

size="value" Permette di determinare la grandezza dei caratteri con valori da 1 (piu' piccolo) a 7 (piu' grande). E' possibile utilizzarlo anche in senso relativo, ossia inteso come di 1 o 2 o 3 piu' piccolo o piu' grande degli altri caratteri (il valore andra' da -3 (molto piccolo) a +3 (molto grande)).

face="nome carattere" Permette di scegliere un tipo particolare di carattere per la pagina. Se questi pero' non e' installato anche sul computer del visitatore della pagina web, il contenuto della pagina verra' visualizzato con il carattere di default del browser del visitatore.

color="#??????" Permette di determinare il colore dei caratteri.

Il tag < font > e' disapprovato nell'attuale specifica Html; e' preferibile usare i fogli di stile CSS per impostare i caratteri.

NOTA:
per i colori va' usato o il numero esadecimale preceduto dalla griglietta [(#) per esempio #9ACD32] corrispondente al colore scelto o, per i colori base, il nome [senza la griglietta (#) per esempio blue].

---

Elenchi

< dl >...< /dl >

Elenco definizioni.

< dt >

Precede ogni termine di definizione.

< dd >

Precede ogni definizione.

< ol >...< /ol >

Elenco ordinato (Ordered List). Le voci di questo elenco hanno un preciso ordine di successione ed ogni voce viene evidenziata da un numero oppure, opzionalmente, da una lettera.

Gli attributi piu' utilizzati con questo tag sono:

type="tipo di numerazione" Aggiungendo l'attributo TYPE="tipo di numerazione" si ha la possibilita' di scegliere un simbolo personalizzato davanti ad ogni singola voce dell'elenco.
I valori previsti sono:

1 (numeri arabi)
I (numeri romani maiuscoli)
i (numeri romani minuscoli)
A (lettere maiuscole)
a (lettere minuscole).

start="numero" Aggiungendo l'attributo START="numero" si puo' far iniziare il conteggio da un qualsiasi valore.

< ul >...< /ul >

Elenco puntato (Unordered List - elenco non ordinato).

Gli attributi piu' utilizzati con questo tag sono:

type="tipo di simbolo" Aggiungendo l'attributo TYPE="tipo di simbolo" si ha la possibilita' di scegliere un simbolo personalizzato davanti ad ogni singola voce dell'elenco.
I valori previsti sono:

disc (punto pieno)
circle (punto vuoto)
square (quadrato nero).

< li >...< /li >

Contiene ogni voce dell'elenco. Si usa tra i tag < ol >...< /ol > o i tag < ul >...< /ul > a seconda del tipo di elenco che si desidera.

Esempio di nidificazione di un elenco

Esempio per la creazione di un elenco ordinato di tre voci e di un elenco non ordinato di quattro voci.

< OL >
< LI > voce a < /LI >
< LI > voce b < /LI >
< LI > voce c < /LI >
< /OL >


< UL >
< LI > voce a < /LI >
< LI > voce b < /LI >
< LI > voce c < /LI >
< LI > voce d < /LI >
< /UL >

---

Collegamenti

< a href="url" >...< /a >

Questo tag consente di poter inserire dei link nel testo della pagina html (i cosiddetti collegamenti ipertestuali).

Gli attributi piu' utilizzati con questo tag sono:

target="???" Permette di determinare dove aprire il link, se nella stessa pagina oppure in una nuova.
Target puo' essere "_blank" (per aprire il link in una pagina nuova) o "_self" (per aprire il link nella stessa pagina).

title="nome-di-fantasia" Permette di attribuire al link un testo che sara' visibile quando il puntatore del mouse andra' sul link.

Usi particolari del tag.

< a href="#name" >...< /a > Collegamento ad un'ancora nella pagina stessa. Da inserire nel link.

< a href="URL#name" >...< /a > Collegamento ad un'ancora in un'altra pagina.

< a name="name" >...< /a > Attribuzione di un nome all'ancora. Da inserire nel punto del documento di destinazione dove punta il link.

< a href="mailto:e-mail" >...< /a > Collegamento ad una e-mail.

---

Immagini

< img src="percorso-nome dell'immagine-estensione" >

Consente di inserire un'immagine in una pagina HTML; questo tag non ha bisogno di chiusura.

Gli attributi piu' utilizzati con questo tag sono:

align="valore" L'attributo ALIGN definisce l'allineamento dell'immagine rispetto al testo circostante.
I valori ammessi sono:

Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito);
Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l'immagine;
Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro;
Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro.

Esempio: < img src="percorso e nome dell'immagine ed estensione" align="middle" >

vspace="valore"
hspace="valore"
Gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel) permettono di allontanare l'immagine dal testo aumentandone lo spazio vuoto che circonda l'immagine.
Esempio: < img src="percorso e nome dell'immagine ed estensione" vspace="3" hspace="8" >

border="valore" L'attributo BORDER permette di aggiungere un bordo intorno all'immagine di dimensioni a scelta espresse in pixel.
Per fare in modo che il bordo dell'immagine resti invisibile impostare il valore a 0 (zero) (BORDER="0")
Esempio: < img src="percorso e nome dell'immagine ed estensione" border="5" >

alt="breve descrizione testuale" ALT (testo alternativo) e' un attributo fondamentale. Grazie a tale attributo si puo' definire una didascalia associata all'immagine che appare durante il caricamento della pagina o quando si passa con il mouse sopra l'immagine.
Esempio: < img src="percorso e nome dell'immagine ed estensione" alt="Immagine di Jim Morrison" >

---

Tabelle

Quelli che seguono sono i tag che permettono di creare una tabella; si iniziera' con la definizione della tabella tramite il tag < TABLE > con il rispettivo < /TABLE >. Nell'area compresa tra < TABLE > e < /TABLE > ogni riga si definisce con la coppia di tag < TR >....< /TR > (Table row). All'interno di ogni riga si creano le celle desiderate; ogni cella si definisce con la coppia di tag < TD >....< /TD > (Table data). Vedere in proposito l'esempio a fine paragrafo.

< table >...< /table >

Permette di creare la struttura di una tabella.

Gli attributi piu' utilizzati con questo tag sono:

border="pixel" Permette di determinare la grandezza del bordo della tabella. Lo spessore deve essere espresso da un numero intero di pixel.
Se non si imposta alcun valore il bordo delle celle resta invisibile.

cellspacing="numero-di-pixel" Permette di creare dello spazio tra le celle di una tabella. Con questo attributo si definisce la spaziatura tra una cella e quelle adiacenti.
In mancanza di indicazioni il valore predefinito e' 2 pixel.

cellpadding="pixel" Permette di creare dello spazio tra il bordo e il contenuto delle celle di una tabella. Con questo attributo si definisce la spaziatura interna della cella, ovvero la quantita' di spazio vuoto tra il margine della cella ed i suoi contenuti.
In mancanza di indicazioni il valore predefinito e' 1 pixel.

height="???" Permette di stabilire l'altezza di una tabella. Deve essere un valore numerico e puo' rappresentare o i pixel o la percentuale.
Esempio: height="100" oppure height="40%"

width="???" Permette di stabilire la larghezza di una tabella. Deve essere un valore numerico e puo' essere espresso in pixel con valore assoluto, o in percentuale rispetto alla larghezza della pagina.
Se non si specifica la larghezza, la tabella si estende orizzontalmente in modo da occupare l'intera pagina.
Esempio: width="400" oppure width="60%"

align="???" Permette di poter definire l'allineamento della tabella rispetto alla pagina.
Il valore di ALIGN puo' essere left, center o right.
Ha senso specificare l'allineamento solo nel caso in cui si e' definita una tabella con una larghezza inferiore a quella della pagina.

bgcolor="#colore" Permette di definire un colore di sfondo della tabella omogeneo.
background="image" Permette di collocare sullo sfondo della tabella un'immagine.
Questi due attributi possono essere inseriti all'interno del tag di apertura < TABLE > per assegnare la caratteristica all'intera tabella, o all'interno del tag di apertura < TD > per assegnare la caratteristica ad una singola cella.
Se non viene impostato nessun valore lo sfondo della tabella rimane neutro.

< td >...< /td >

Celle di una tabella (TD = Table Data).

Gli attributi piu' utilizzati con questo tag sono:

colspan="numero-di-colonne" Permette di estendere una cella attraverso il numero di colonne specificato. In pratica consente di creare un numero non costante di celle per ogni colonna. Utilizzando questo attributo sara' possibile, per esempio, unire la cella1 e la cella2 o la cella3 e la cella4 dell'esempio in fondo al paragrafo.

rowspan="numero-di-righe" Permette di estendere una cella attraverso il numero di righe specificato della stessa colonna. In pratica consente di creare un numero non costante di celle per ogni riga.
Utilizzando questo attributo sara' possibile, per esempio, unire la cella1 e la cella3 o la cella 2 e la cella 4 dell'esempio in fondo al paragrafo.

nowrap Generalmente il testo contenuto in una cella scorre a capo automaticamente (wrap) secondo le dimensioni della cella stessa. Questo attributo permette di poter forzare il testo di una cella affinche' non vada mai a capo aggiungendo.
Si utilizza cosi', senza nessun parametro da aggiungere.
Bisogna pero' prestare attenzione al fatto che usando NOWRAP le celle adiacenti variano automaticamente, in base all'allargamento della cella con l'attributo.

align="???" Permette di poter allineare il contenuto di una cella a destra (right), sinistra (left), al centro (center) o giustificato (justify).
Left e' il valore predefinito.

valign="???" Permette di poter determinare l'allineamento verticale di una cella; i valori che puo' assumere questo attributo sono:

top: allineamento al margine superiore della cella;
middle (predefinito): allineamento al centro dell'altezza della cella;
bottom: allineamento al margine inferiore della cella;
baseline: il contenuto della cella si allinea alla base della prima riga di testo delle celle adiacenti.

bgcolor="#colore" Permette di definire un colore di sfondo omogeneo per ogni singola cella.
background="image" Permette di collocare sullo sfondo di ogni singola cella un'immagine.
Se non viene impostato nessun valore lo sfondo della tabella rimane neutro.

height="???" Permette di stabilire l'altezza di una cella. Deve essere un valore numerico e puo' rappresentare o i pixel o la percentuale rispetto all'altezza della tabella.
Tutte le celle di una stessa riga devono avere la stessa altezza. Se vengono indicati valori differenti il browser si basa automaticamente su quello piu' elevato. Per non incorrere in errori di visualizzazione, quando si fissano valori specifici di altezza e larghezza delle celle, bisogna essere sicuri che il contenuto di ogni cella non ecceda lo spazio disponibile.

Esempio: height="100" oppure height="40%"

width="???" Permette di stabilire la larghezza di una cella. Deve essere un valore numerico e puo' essere espresso in pixel con valore assoluto, o in percentuale rispetto alla larghezza della tabella.
Se non si specifica la larghezza, la tabella si estende orizzontalmente in modo da occupare l'intera pagina.
Tutte le celle di una stessa colonna devono avere la stessa larghezza. Se vengono indicati valori differenti il browser si basa automaticamente su quello piu' elevato. Per non incorrere in errori di visualizzazione, quando si fissano valori specifici di altezza e larghezza delle celle, bisogna essere sicuri che il contenuto di ogni cella non ecceda lo spazio disponibile.

Esempio: width="400" oppure width="60%"

< th >...< /th >

Tabella d'intestazione con il testo in grassetto, allineato al centro.

< tr >...< /tr >

Colonne di una tabella (TR = Table Row).

Gli attributi piu' utilizzati con questo tag sono:

align="???" Permette di poter allineare il contenuto di una cella a destra (right), sinistra (left), al centro (center) o giustificato (justify).
Left e' il valore predefinito.

valign="???" Permette di poter determinare l'allineamento verticale di una cella; i valori che puo' assumere questo attributo sono:

top: allineamento al margine superiore della cella;
middle (predefinito): allineamento al centro dell'altezza della cella;
bottom: allineamento al margine inferiore della cella;
baseline: il contenuto della cella si allinea alla base della prima riga di testo delle celle adiacenti.

Esempio di nidificazione di una tabella

Esempio di creazione di una tabella di due colonne e quattro celle (due per ogni colonna).

< TABLE >
< TR >
< TD >cella 1< /TD >
< TD >cella 2< /TD >
< /TR >
< TR >
< TD >cella 3< /TD >
< TD >cella 4< /TD >
< /TR >




NOTA:
per i colori va' usato o il numero esadecimale preceduto dalla griglietta [(#) per esempio #9ACD32] corrispondente al colore scelto o, per i colori base, il nome [senza la griglietta (#) per esempio blue].