Voglio fare la mia Prima Pagina Web!
Seconda Lezione

Per rendere le cose meno complicate, in questa lezione indicherò soltanto quello che sarà compreso tra i tags <BODY>. Ometterò i tags <HTML>, <HEAD> & <TITLE> che, ovviamente, dovranno essere presenti nel tuo documento..

<BODY>
</BODY>

Scrivi qualcosa di divertente.

<BODY>
Qualcosa di divertente
</BODY>
Qualcosa di divertente

Ogni volta che apporti una modifica al tuo documento, salvalo e premi il bottone di Reload/Aggiorna sul tuo browser. Se la tua pagina non dovesse visualizzarsi con le ultime modifiche (potrebbe succedere con Netscape), premi SHIFT e clicca contemporaneamente su Reload.

Credo che la prima cosa che tu debba imparare sia come cambiare il colore dello sfondo (background). Il colore grigio di default è piuttosto triste, no?

<BODY BGCOLOR="#FFFFFF">
Qualcosa di divertente
</BODY>
Qualcosa di divertente
FFFFFF è la traduzione esadecimale del colore bianco. Qui trovi tutte le combinazioni di colore.
Netscape e Internet Explorer effettua una mappatura delle immagini in 256 colori. Se un colore di background non rientra in questa risoluzione, verrà visualizzato un colore simile. Anche se non è fondamentale, puoi capire quali siano i 256 colori utilizzati da Netscape, leggendo questa spiegazione.

Puoi decidere di definire un'immagine come sfondo.

<BODY BACKGROUND="swirlies.gif">
Qualcosa di divertente
</BODY>

Questa è l'immagine di sfondo
Puoi trovare questa immagine (swirlies.gif) nella cartella "pics". Se stai leggendo la guida on-line, clicca sull'immagine con il tasto destro del mouse e salvala sul tuo disco.

Le immagini che vengono utilizzate come sfondo sono cicliche, poichè vengono visualizzate una accanto all'altra fino a riempire completamente lo sfondo. Se usi una immagine lunga e stretta, puoi ottenere un effetto come questo...

<BODY BACKGROUND="bluebar.gif">
Qualcosa di divertente
</BODY>

Questa è l'immagine di sfondo

(Le dimensioni reali sono di 800x2. Per l'esempio è stata ridimensionata in 530x2, in modo da essere visibile con qualsiasi risoluzione).

Torniamo allo sfondo bianco.

<BODY BGCOLOR="#FFFFFF">
Qualcosa di divertente
</BODY>
Qualcosa di divertente

Possiamo scrivere in grassetto.

<BODY BGCOLOR="#FFFFFF">
Qualcosa di <B>divertente</B>
</BODY>
Qualcosa di divertente
Quello che stiamo dicendo al browser è di visualizzare in grassetto <B> da questo punto in poi </B> fino a questo punto.

Lo stesso principio si applica per il corsivo...

<BODY BGCOLOR="#FFFFFF">
Qualcosa <I>di</I> <B>divertente</B>
</BODY>
Qualcosa di divertente

...e sottolineato.

<BODY BGCOLOR="#FFFFFF">
<U>Qualcosa</U> <I>di</I> <B>divertente</B>
</BODY>
Qualcosa di divertente

Torniamo allo sfondo bianco.

<BODY BGCOLOR="#FFFFFF">
Qualcosa di divertente
</BODY>
Qualcosa di divertente

Questi tags possono essere combinati insieme.

<BODY BGCOLOR="#FFFFFF">
Qualcosa di <I><B>divertente</B></I>
</BODY>
Qualcosa di divertente
Questo è un primo esempio di tags annidati. Se usate tags in combinazione, per evitare confusione nella visualizzazione da parte del browser, devono essere annidati fra loro e non sovrapposti. Ad esempio...

   <THIS><THAT></THIS></THAT>    Tags sovrapposti... sbagliato
   <THIS><THAT></THAT></THIS>    Tags annidati... giusto

Un tipo di effetto piuttosto utile è costituito da font a spaziatura fissa.

<BODY BGCOLOR="#FFFFFF">
<TT>Qualcosa di divertente</TT>
</BODY>
Qualcosa di divertente

Ogni lettera utilizza la stessa quantità di spazio orizzontale.

Questo è un font regolare -> iiiiiiiiii
oooooooooo
mmmmmmmmmm
Questo è un font a spaziatura fissa-> iiiiiiiiii
oooooooooo
mmmmmmmmmm

Possiamo cambiare la grandezza dei fonts... piutt osto  facilmente!

Prima aggiungi il tag <FONT> ...

<BODY BGCOLOR="#FFFFFF">
Qualcosa di <FONT>divertente</FONT>
</BODY>

Quindi specifica la grandezza:SIZE.

<BODY BGCOLOR="#FFFFFF">
Qualcosa di <FONT SIZE=6>divertente</FONT>
</BODY>
Qualcosa di divertente
I fonts possono avere 7 grandezze:

piccolissimo piccolo normale medio largo grande & grandissimo!
1 2 3 4 5 6 7

Vediamo di capire: un <TAG> dice al browser di fare qualcosa, un ATTRIBUTO inserito nel <TAG> dice al browser come deve farlo.
E' importante considerare i valori di defaults. Come probabilmente, sai, il valore di default è un valore che il browser assume se non gli si è detto niente di specifico. Le grandezze di default dei fonts sono 3. Se non si specifica la grandezza, viene predefinita come 3, anche nel caso in cui venga specificato un tipo di carattere particolare.

Ogni browser ha un set di caratteri di default, colore e grandezza: Times New Roman 12p (nel nostro caso grandezza 3), nero. Ora, con i browser dell'ultima generazione (Netscape 3.0 Internet Explorer 3.0) è possibile cambiare il tipo di font e utilizzare ARIAL, ad esempio, oppure COMIC SANS.

<BODY BGCOLOR="#FFFFFF">
Qalcosa di<FONT FACE="ARIAL">divertente</FONT>
</BODY>
Qualcosa di divertente
Attenzione però: i font verranno visualizzati soltanto se sono stati installati sul computer. Infatti, se chi guarda una pagina non ha installato i font che sono stati specificati, vedrà semplicemente quello di default. Quindi bisogna utilizzarli con giudizio. Arial e Comic Sans MS sono distribuiti con Windows. Come anche Impact!. Si può ovviare a questo inconveniente specificando diversi tipi di font, in questo modo.... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Qualcosa di divertente</FONT>.
Così, ecco cosa succede: il browser cerca ARIAL. Se lo trova lo visualizza, se non lo trova, cerca HELVETICA. E così di seguito, se non trova nemmeno questo cerca LUCIDA SANS. E se non trova neanche questo usa il font di default.

Ecco una serie di esempi: Handy Dandy Font Viewer.

Bene, ora ti annoierò con un po' di sintassi. Avai certamente notato che ogni tag è racchiuso tra i due caratteri < e >. Sono importantissimi: non puoi immaginare di quanto tempo io abbia perso a fare una pagina che poi risultava "attorcigliata". Interamente sballata perchè mi ero dimenticato uno di questi due caratteri, quindi mi raccomando: fai attenzione. Una cosa che faccio abitualmente è quella di scrivere i tags utilizzando le LETTERE MAIUSCOLE. E' una preferenza personale, non un obbligo, che io adotto perchè mi permette di trovarli più facilmente in un documento Html. Puoi scrivere <font> oppure<FONT>, ma potresti anche scrivere <fOnT>, se ti piacesse.

E' possibile cambiare il colore dei font.

<BODY BGCOLOR="#FFFFFF">
Qualcosa di <FONT COLOR="#FF0000">divertente</FONT>
</BODY>
Qualcosa di divertente

Ovviamente, è possibile usare più di un ATTRIBUTO nello stesso <TAG>...

<BODY BGCOLOR="#FFFFFF">
Qualcosa di <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">divertente</FONT>
</BODY>
Qualcosa di divertente

Vediamo un altro esempio...

<BODY BGCOLOR="#FFFFFF">
Qualcosa di <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">divertente</FONT></B></I></U>
</BODY>
Qualcosa di divertente
Vorrei sottolineare ancora una volta che tags multipli devono essere annidati.

<TAG3><TAG2><TAG1>Ciao a tutti!</TAG1></TAG2></TAG3>

Non importa quale sia il primo tag. Se vuoi scrivere qualcosa in rosso e grassetto devi decidere quale indicare per primo, ma puoi metterli in qualsiasi ordine. Ad esempio..

<TAG2><TAG1><TAG3>Ciao a tutti!</TAG3></TAG1></TAG2>

Il modo più veloce di confondere un browser è quello di sovrapporre i tags...

<TAG3><TAG2><TAG1>Ciao a tutti!</TAG3></TAG1></TAG2>

Un'ultima cosa prima di passare alla lezione successiva. Il browser ha configurato di default i colori del testo, dei links, dei links attivi e dei links visitati. Sono questi...

Il testo è nero
I links sono blu
I links attivi sono rossi
I links visitati sono viola

E' possibile cambiarli se è necessario (nota che ho detto necessario). Tutti ormai si sono abituati a vedere i links blu, perchè confondere le idee?
Puoi cambiare la configurazione di defalut per l'intero documento nel tag <BODY>.

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Qualcosa di divertente
</BODY>
Qualcosa di divertente
Ancora non ho spiegato come fare un link, questo era solo un esempio di come cambiare i colori. In seguito vedremo come creare un link.
    Come vedi, ora il colore di sfondo è nero e il testo è giallo.
    I links ora sono rossi
    I links visitati sono rosso scuro
    E i links attivi sono verdi.

Bene, ora conosci tutto su come manipolare il testo nel tuo documento. Puoi fareGrosse lettere rosse o piccole lettere in grassetto. Puoi usare diversi tipi di carattere, o caratteri a spaziatura fissa..
Puoi anche fare le montagne russe!

Il codice per le montagne russe è qui se vuoi vederlo.

<--BACK        NEXT-->

Introduzione Lezione 1 Lezione 2 Lezione 3 Lezione 4 Lezione 5 Indice