HTML in 10 Passi
Chiara Renso, Maria Simi

Liberamente adattato da Maria Simi sulla base di una guida di Paolo Pavan
(http://www.comune.collegno.to.it/paolo/guida.htm)
Per una migliore fruizione: http://www.di.unipi.it/~simi/Html.html

HTML in 10 Passi	1
Struttura generale di un documento	2
Formattazione del testo	2
Usare i divisori	4
Inserire i link	5
Inserire le ancore	5
Inserire le immagini	5
Realizzare una lista	6
Lo sfondo e i colori	8
Usare le tabelle	9
I caratteri speciali	11

Struttura generale di un documento 
I tag HTML sono direttive che i browser interpretano per determinare la struttura e l'apparenza dei documenti da visualizzare. 
Un tag racchiude la porzione di documento a cui si applica: si apre con <tag> e si chiude con </tag>. 
       <HTML>

       <HEAD>

       <TITLE>
       Il titolo del documento: comparira` nell'intestazione del browser
       </TITLE>
       </HEAD>
       <BODY>
Il corpo del documento: contiene tutto cio` che il browser visualizzera`
       </BODY>
       </HTML>

       Risultato:  una pagina con la seguente scritta

       Il corpo del documento: contiene tutto cio` che il browser visualizzera` 

    Formattazione del testo 

       <H1> Titolo di livello 1</H1>

               <H2> Titolo di livello 2</H2>

                       <H3> Titolo di livello 3</H3>

               <H2> Titolo di livello 2</H2>

I tag <Hn> servono a definire il livello dei titoli e di conseguenza stabilire la dimensione dei caratteri; i livelli vanno da <H1> ad <H6>. 

       Risultato: 

Titolo di livello 1

       Titolo di livello 2

          Titolo di livello 3

       Titolo di livello 2

       <P>Nuovo paragrafo</P>
I tag <P> e </P> includono un paragrafo. Il tag <P> può anche essere usato da solo come separatore di paragrafi. 

<B>Formatta il testo in grassetto </B> 
<STRONG>Formatta il testo in grassetto </STRONG>
Risultato: 
       Formatta il testo in grassetto 

       <I>Formatta il testo in corsivo</I> 
       <EM>Formatta il testo in corsivo</EM> 
Risultato: 
       Formatta il testo in corsivo 

       <CENTER>Centra nella pagina sia il testo che le immagini</CENTER>

       Risultato: 

Centra nella pagina sia il testo che le immagini

       <BLINK>Fa lampeggire il testo (da usare con parsimonia!)</BLINK>

       Risultato: 

       Fa lampeggire il testo (da usare con parsimonia!) 

       <FONT SIZE=5>Pone la dimensione dei caratteri a 5</FONT>

       La dimensione dei caratteri può essere da 1 a 7. 

       Risultato: 

       Pone la dimensione dei caratteri a 5 

       <FONT SIZE=+1>Aumenta di 1 la dimensione dei caratteri</FONT>

       <FONT SIZE=-1>Diminuisce di 1 la dimensione dei caratteri</FONT>

Risultato: 

       Aumenta di 1 la dimensione dei caratteri
       Diminuisce di 1 la dimensione dei caratteri 

       <BASEFONT SIZE=4>
La dimensione dei caratteri dei una pagina è normalmente 3. Con questo comando è possibile indicare un valore diverso (da 1 a 7) per le dimensioni dei caratteri di una pagina. 

Usare i Divisori 

<P>     
Per lasciare una riga bianca. 

<BR>     
Per interrompere una riga, e andare a capo. 

<HR>     
Inserisce una riga orizzontale 

Inserire i link 

       <A HREF="doc.html"> Hyperlink al documento di nome doc.html </A>     

       Risultato: 

       Hyperlink al documento di nome doc.html 

       Serve ad inserire un normale ipercollegamento; va indicato l'indirizzo del documento da collegare, a cui si arriverà cliccando sul testo contenuto tra i Tag 'A'. Se il documento non si trova nella stessa directory del  documento attuale, andrà specificato tutto il percorso o l'URL completo. Ad esempio: 
<A HREF="http://www.humnet.unipi.it/~simi/doc.html">Hyperlink al documento che si trova sul server www.humnet.unipi.it, all'indirizzo ~simi/doc.html </A> 

       <A HREF="#xxxx"></A>     

       <A HREF="URL#xxxx"></A>     

       Permette di collegarsi ad una parte dello stesso documento o di un altro documento utilizzando un'àncora predisposta di nome xxxx 

Inserire le ancore 

       <A NAME="xxxx"></A>     
       Predispone un'àncora di nome xxxx nel documento. 

Inserire le immagini 
       <IMG SRC="immagine.gif">     
       Permette di inserire un'immagine che si trova nel file "immagine.gif". 

       <IMG SRC="immagine.gif" ALIGN=TOP|BOTTOM|MIDDLE>     
       L'attributo ALIGN permette di regolare la posizione verticale dell'immagine e cioè di dire se essa è allineata in alto (TOP), in basso (BOTTOM) o centrata (MIDDLE)rispetto al testo che segue. 

       <IMG SRC="gioconda.gif" ALT="Immagine della Gioconda">     

       Permette di visualizzare del testo sostitutivo quando l'immagine non viene caricata nella pagina, in modo da avere anche in questo caso un'idea del contenuto. 
Realizzare una Lista 

       <UL TYPE=square>

               <LI>Primo elemento

               <LI>Secondo elemento

               <LI>Terzo elemento

       </UL>

   Gli elementi contenuti, preceduti sempre da <LI>, risultano organizzati in una lista non numerata. 
       Risultato: 

•	Primo elemento 

•	Secondo elemento 

•	Terzo elemento 

       <UL TYPE=DISC|CIRCLE|SQUARE>     

   Permette di controllare se usare un punto, un circoletto o un quadrato davanti ad ogni elemento della lista.
       <OL>

               <LI>Primo elemento

               <LI>Secondo elemento

               <LI>Terzo elemento

       </OL>
 
       Gli elementi contenuti, risultano organizzati in una lista numerata. 

       Risultato: 

1.	Primo elemento 
2.	Secondo elemento 
3.	Terzo elemento 

       <OL TYPE=A|a|I|i|1>      

       Permette di stabilire per tutti gli elementi della lista quale tipo di numerazione usare. 

       <LI TYPE=A|a|I|i|1>     

       Permette di stabilire per ogni singolo elemento quale tipo di numerazione utilizzare. 

       A lettere maiuscole 
       a lettere minuscole 
       I numeri romani 
       i un numero congruo di 'i' 
       1 lista numerata 

       <DL COMPACT>

               <DT>A   <DD> lettere maiuscole

               <DT>a   <DD> lettere minuscole

               <DT>I   <DD> numeri romani

               <DT>i   <DD> un numero congruo di 'i'

               <DT>1   <DD> lista numerata

       </DL>
  Permette di creare una lista di definizioni in cui <DT> rappresenta il termine e <DD> la definizione rientrata. Il risultato è illustrato sopra. 

Lo sfondo e i colori 

       <BODY BACKGROUND="immagine.gif">     
       Permette di inserire un'immagine(*.gif,*.jpg) da usare come sfondo della pagina. 

       <BODY BGCOLOR="#xxyyzz">     

       Permette di dare un colore di sfondo alla pagina utilizzando il codice RGB (una sequenza di 6 cifre esadecimali, da 0 a F) 
       Per comodità, sono stati definiti 12 colori di base, sufficienti a coprire la maggior parte delle esigenze: 
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

<BODY TEXT="#xxyyzz">     
       Permette di specificare il colore del testo. 

<BODY LINK="#xxyyzz">     
       Permette di specificare il colore dei collegamenti. 

<BODY VLINK="#xxyyzz">     
 Permette di specificare il colore dei collegamenti già seguiti. 

<BODY ALINK="#xxyyzz">     

Permette di specificare il colore dei collegamenti quando si cliccano. 

<FONT COLOR=red>Per cambiare il colore del testo.</FONT>
Serve per indicare il colore da dare ai caratteri contenuti all'interno del Tag FONT. 
Risultato: 

       Per cambiare il colore del testo. 

   Usare le Tabelle 

       <TABLE BORDER=1>

       <TR> <TD>Uno</TD> <TD>Due</TD> <TD>Tre</TD></TR>

       <TR> <TD>Quattro</TD> <TD>Cinque</TD> <TD>Sei</TD></TR>

       <TR> <TD>Sette</TD> <TD>Otto</TD> <TD>Nove</TD> </TR>

       </TABLE>
 
       Definisce una tabella con tre righe, di tre elementi ciascuna. 
       Risultato: 
Uno	Due	Tre	
Quattro	Cinque	Sei	
Sette	Otto	Nove	

Usando l'attributo BORDER=n e' possibile scegliere lo spessore del bordo da visualizzare (BORDER=0 nessun bordo). 
<TABLE CELLSPACING=xx>     
       Permette di regolare lo spazio tra le celle contigue. 
<TABLE CELLPADDING=xx>     
       Permette di regolare lo spazio occupato da ogni singola cella. 
 <TABLE WIDTH=xx>     
       Permette di stabilire la larghezza in pixel della tabella. 
<TABLE WIDTH=xx %>     
Permette di stabilire la larghezza in pixel che la tabella deve avere in percentuale rispetto alla pagina. 
       <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>     

       I diversi attributi permettono di allineare il contenuto della celle di una riga in orizzontale (ALIGN) ed in verticale (VALIGN). 

       <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>     

       I diversi attributi permettono di allineare il contenuto di una cella in orizzontale (ALIGN) ed in verticale (VALIGN). 

       <TD COLSPAN=x>     
Indica il numero x di colonne da occupare con la cella. 

       <TD ROWSPAN=x>     
Indica il numero di righe da occupare con la cella. 

       <TD WIDTH=xx>     
 Permette di stabilire la larghezza in pixel della cella. 

       <TD WIDTH= xx %>     
 Permette di stabilire la larghezza in percentuale rispetto alla riga della cella. 

       <CAPTION> Legenda </CAPTION>     
  Viene usato per indicare la legenda della tabella 

I caratteri speciali 
       Sono caratteri che devono essere scritti in modo particolare: si tratta in genere di lettere accentate o caratteri, come il < e il >, che hanno un significato particolare per i browser. Eccone alcuni: 

        <		&lt;
        >             &gt;
        &		&amp;
        à		&agrave;
        è		&egrave;
        é		&eacute;
        ì		&igrave;
        ö		&ouml;
        ß		&szlig;

Esercizio 1
Come esercizio proponiamo di realizzare un ipertesto che realizza un piccolo museo virtuale.
La pagina principale conterrà il nome del museo come intestazione e una lista delle opere contenute (almeno tre).
Per ognuna di queste, ci sarà un collegamento ad un’altra pagina, che conterrà il titolo, un breve testo descrittivo e l’immagine dell’opera stessa.
Per editare i file HTML potete usare NOTEPAD. Per la visualizzazione NETSCAPE o EXPLORER. Vi conviene tenerli aperti entrambi. Ogni volta che fate una modifica sul file HTML, salvatelo, andate nel browser, e date il comando di "aggiorna" per vedere le modifiche.      

Le immagini delle vostre opere d’arte potete rubarle da Internet. Quando ne trovate una che vi piace: bottone destro del mouse sull’immagine e poi scegliere dal menù "Salva immagine con nome" e salvare l’immagine nel vostro spazio personale con il nome che volete per poterla riutilizzare nell’ipertesto. Per il resto potete usare tutta la vostra fantasia.

Ecco uno schema di massima della prima pagina del vostro museo virtuale in HTML.

Secondo esercizio su HTML
In questo secondo esercizio renderemo più bello il nostro museo virtuale, cercando di andare verso un sito "di terza generazione", guidato dal design (e dalla meafora) piuttosto che da HTML. 
Vogliamo usare la metafora della piantina del museo, in cui si vedono le varie stanze che corrispondono alle varie sezioni del Museo. Cliccando sui nomi delle sezioni ci si sposta nella stanza corrispondente dove si trovano i quadri di quella sezione. La pagina allegata è un esempio dell'effetto che vogliamo ottenere. 
Le tecniche utilizzate per realizzare questa pagina sono: 
1.	Viene usato un colore di background per la pagina. 
2.	Viene usato un tipo di carattere particolare (Verdana) per i titoli e le scritte. 
3.	La piantina è realizzata come una tabella, in cui le dimensioni delle celle, sia verticali che orizzontali, sono fissate a mano. 
4.	Ogni cella ha un suo colore di background. 
5.	Ogni cella ha un nome che è un collegamento ad un'altra pagina per la stanza. 
Le stanze poi dovrebbero essere collegate tra di loro in modo da consentire uno spostamento tra stanze adiacenti, come in un museo vero. 
A titolo di esempio abbiamo realizzato la stanza degli impressionisti.