HTML in 10 passi
Home Su HTML in 10 passi Esercitazione 1 Esercitazione 2 Manuale esteso HTML lucidi-lezione

 

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

  1. 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`

  2. 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.

  3. Usare i Divisori 
    <P>

    Per lasciare una riga bianca. 

    <BR>

    Per interrompere una riga, e andare a capo. 

    <HR>

    Inserisce una riga orizzontale

  4. 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

  5. Inserire le ancore 
    <A NAME="xxxx"></A>

    Predispone un'àncora di nome xxxx nel documento.

  6. 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.

  7. 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.

  8. 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.

  9. 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

  10. 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;