HTML in 10 passi

HTML in 10 passi (ovvero il Bignami dell'HTML)

1) Struttura generale di un documento	6) Inserire le immagini
2) Formattazione del testo	7) Realizzare una Lista
3) Usare i Divisori	8) Lo sfondo e i colori
4) Inserire i link	9) Usare le Tabelle
5) Inserire le ancore	10) I caratteri speciali

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

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:

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:

<	<
>	>
&	&
à	à
è	è
é	é
ì	ì
ö	ö
ß	ß

Titolo di livello 1

Titolo di livello 2

Titolo di livello 3

Titolo di livello 2