GUIDA HTML On-line
a cura di Giampiero Chessa
INDICE
INTRODUZIONE ALL'HTML
STRUTTURA DI UN DOCUMENTO HTML
MODIFICA DELLO SFONDO E DEI COLORI DEL TESTO
ATTIVARE COLLEGAMENTI
MODIFICA DEGLI ATTRIBUTI DEL TESTO
INSERIRE IMMAGINI
INSERIRE LISTE ORDINATE
INSERIRE TABELLE
CREARE FORM
CREARE FRAME
MAPPE CLICCABILI
Introduzione
La lettura di documenti html avviene tramite i browser (ovvero il programma che l'utente finale usa per navigare sul web). Questa lettura avviene tramite dei codici speciali detti propriamente Tag.
Un tag, e' generalmente rappresentato da un comando specifico chiuso tra due parentesi angolari (min.: < , e mag. >); per esempio:
<TABLE>

Quando un tag viene aperto, esso deve essere anche chiuso. Questo si contraddistingue per l'uso dello slash ( / ) prima del nome del comando; ad esempio:

</TABLE>

Esempio:

<CENTER>testo</CENTER>

In questo esempio, tutto quello scritto tra i due tag viene visualizzato al centro della pagina. Se il tag non viene chiuso, il comando continuera' ad essere applicato sino a che non viene chiuso il tag o il documento.

Che programma serve per scrivere un documento html?
Per scrivere un testo html si utilizza un editor. Per i sistemi Windows 3.1, Windows 95 e Windows NT va benissimo Blocco Note. Esistono comunque in commercio vari programmi per la creazione di pagine web, uno di questi è Microsoft Front Page. Altri possono essere tranquillamente scaricati da Internet o acquistati in edicola.


La struttura di un documento html


Un documento html si divide principalmente in due parti:
una parte iniziale (HEAD) seguita da un corpo (BODY)

HEAD
Questa parte contiene informazioni che riguardano il documento (per esempio il titolo)

BODY
Costituisce il corpo del documento


Ecco come si presenta una semplice struttura di un documento html:

<HTML>
<HEAD>
<TITLE>titolo del documento</TITLE>
testo da non mostrare
</HEAD>
<BODY>
testo da mostrare
</BODY>
</HTML>

Modifica degli sfondi e dei colori del testo

Per modificare lo sfondo di una pagina, il colore del testo, dei link e dei link gia visitati, basta inserire una specifica estensione al tag < body >, queste le estensioni possibili:

background="nomefile.estensione"
Aggiungendo questo attributo lo sfondo sara' una immagine scelta da voi.

bgcolor="#rrggbb"
Aggiungendo questo attributo (dove #rrggbb e' un colore in formato esadecimale) il vostro sfondo sara' uguale al colore scelto.

text="#rrggbb"
Aggiungendo questo attributo il testo sara' uguale al colore scelto.

link="#rrggbb"
Aggiungendo questo attributo i link saranno evidenziati col colore scelto.

vlink="#rrggbb"
Aggiungendo questo attributo i link gia visitati saranno evidenziati col colore scelto.

alink="#rrggbb"
Aggiungendo questo attributo i link correntemente attivati saranno visualizzati col coloer scelto.


Attivare collegamenti

I link sono dei collegamenti ad altre pagine o ad altri siti www. Essi consentono l'interazione di un documento html con altri documenti:

  • Link locali

  • Sono detti link locali tutti quelli che appartengono allo stesso sito e che si trovano nel nostro computer.
    Supponiamo di doverci spostare dalla Home page di un sito ad una sezione del sito supponiamo dedicata allo sport:
    Dovremo aggiungere al documento html della Home page i seguenti tag, utilizzando la seguente sintassi:

    <A HREF="sport.htm">SPORT (testo del link)</A>

    otterremo:

    SPORT

  • Link esterni

  • Simile comportamento anche per i link esterni, dove la sintassi sarà la seguente:

    <A HREF="http://www.microsoft.com/it">Microsoft Italia</A>

    otterremo:

    Microsoft Italia


    Modifica degli attributi del testo


    Il testo di un documento html puo' essere formattato e modificato a nostro piacimento, tramite l'ausilio di specifiche tag.
    Importantissimo e' il tag H (Heading). Questi indica il tipo di titolo che deve avere il testo compreso tra i due tag. Il valore varia da un minimo di 1 ad un massimo di 6 dove H1 ha altezza maggiore, H6 minore.

    Esempio

    <BODY>
    <H2>Questo e' un documento HTML</H2>
    </BODY>

    Inoltre abbiamo:
    <B>testo</B> : (bold) per scrivere in neretto il testo tra i due tag;
    <I>testo</I> : (italic) per scrivere inclinato;
    <TT>testo</TT> : (typewriter) ogni carattere del testo occupa lo stesso spazio ( sia i, sia o)

    Altri tag:
    <P> (paragraph) : scrive il testo sulla riga sotto e lascia una riga bianca.
    <BR> (break) : Manda a capo il testo ma non lascia una riga vuota.

    Esiste anche un tag di separazione, <HR> (hard rule) : questo tag manda a capo il testo ed inserisce una riga orizzontale
    NB: questi ultimi 3 tag non hanno bisogno di essere chiusi.


    Inserire immagini


    Per inserire immagini in un documento html, si usa la seguente sintassi:
    < IMG SRC="nomefile.estens" >

    E' importante precisare che una immagine puo' essere associata ad un link, ne verrebbe fuori:
    < a href="pagina.htm" >< IMG SRC="nomefile.estens" > eventuale testo < /A >

    Nota bene che quando nel link inserisci un immagine, intorno ad essa apparira un bordo colorato a segnificare che l'immagine attiva un collegamento. Se vuoi eliminare il bordo bisogna aggiungere dopo il nome del file di immagine l'attributo border=0 e il gioco e' fatto.



    La guida e' ancora in fase di sviluppo e aggiornamento.
    Ogni sezione gia sviluppata risulta incompleta per alcuni attributi. Per ora sono stati inserite solo le cose principali.


    Home page
    1