|
<html> <head> <title> Titolo della pagina </title> </head> <body> Ciao mondo </body> </html> |
Ecco uno per uno i tag che compongono la struttura base di una pagina:
|
| bgcolor = "colore" |
Il colore dello sfondo. Può essere espresso con valori esadecimali oppure con nomi riconosciuti dai browser (come black, white, blue, cyan, red... e così via). È indispensabile se non si usa una immagine di sfondo, perchè altrimenti lo sfondo stesso è bianco per default (parlo di IE). È inoltre necessario specificarlo nel caso si usino scritte molto chiare e una immagine di sfondo scura. Questo perché altrimenti, durante l'attesa per il caricamento della texture, il testo potrebbe essere illeggibile o avere lo stesso colore dello sfondo. Trucchetto: se scrivete pagine con testo di colore uguale a quello dello sfondo, potete vedere il testo "invisibile" semplicemente cliccando da una parte dello schermo e trascinando il cursore come se stesse selezionando (in effetti lo fate) qualcosa, ed il testo magicamente apparirà! Salvo poi scomparire di nuovo quando fate clic da qualche altra parte! |
| background = "url_immagine" |
Mettendo il nome del file oppure il percorso completo di una immagine questa verrà inserita come immagine di sfondo. Ogni tipo di immagine supportata dai browser può essere uno sfondo (anche le gif animate :-], ma fate attenzione a non abusarne!). Gli sfondi migliori sono le texture, immagini medio-piccole, poco "pesanti" (in Kb), che si ripetono. Quasi dimenticavo: le immagini di dimensioni inferiori a quelle dello schermo vengono ripetute (è questo il vantaggio delle textures). |
| text = "colore" |
È il colore di default del testo. Per i colori valgono le cose dette per l'attributo bgcolor. Attenzione, questo indica il colore di default del testo, tuttavia più sotto si spiega come cambiare colore al testo localmente. |
|
link = "colore" alink = "colore" vlink = "colore" |
Sono i tre attributi per specificare i colori dei tre diversi stati dei link. link indica il colore dei link a pagine che non si sono mai visitate (di default è blue). alink indica il colore del link attivo, ovvero quello sul quale abbiamo appena fatto clic (di default è red). vlink indica il colore dei link che portano a pagine che abbiamo già visitato (ovvero quelle che si trovano nella cartella dove vengono messi i files temporanei di internet, solitamente c:\windows\temporary internet files) (di default è purple). Se cancellate o fate cancellare i files da questa cartella, i link ritorneranno del colore specificato nell'attributo link. |
| bgproperties = "fixed" | Da usare solo in caso di immagine di sfondo, questo attributo serve a non far scorrere lo sfondo quando si scrolla verticalmente o orizzontalmente il documento.Personalemente lo uso sempre quando ho una immagine di sfondo perché offre un migliore effetto visivo. |
|
<html> <head> <title> Titolo della pagina </title> </head> <body bgcolor="navy" background="pref.jpg" text="white" link="yellow" alink="orange" vlink="lime" bgproperties="fixed"> Ciao mondo </body> </html> |
Ecco fatto. Questo è lo script di prima con il tag body modificato. |
| face="nome_del_carattere" | Il nome del carattere che volete che sia mostrato (di default è il Times new Roman). |
| color="colore" | Il colore del carattere. Può essere scritto sia come nome del colore che in RGB esadecimale, preceduto in questo ultimo caso dal cancelletto # (il colore di default è nero). |
| size="Numero_tra_1_e_7" | La dimensione del carattere, con un indice che va da uno a sette. Personalmente ritengo migliore il dimensionamento del carattere tramite gli headers (vedi più sotto). La dimensione di default è 3. |
|
<html> <head> <title> Titolo della pagina </title> </head> <body bgcolor="navy" background="pref.jpg" text="white" link="yellow" alink="orange" vlink="lime" bgproperties="fixed"> <h1> <font face="comic sans ms" color="white"> Scritta con header 1, in comic sans ms, colore bianco </font> </h1> <br> <h2> <font face="arial" color="yellow"> Scritta con header 2, in arial, colore giallo </font> </h2> <br> <h3> <font face="verdana" color="lime"> Scritta con header 3, in verdana, colore lime </font> </h3> <br> <h4> <font face="courier new" color="cyan"> Scritta con header 4, in courier new, colore cyan </font> </h5> <br> <h5> <font color="red"> Scritta con header 5, in times new roman (default perché non specificato nel tag), colore rosso </font> </h5> </body> </html> |
Come potete vedere ogni scritta è all'interno di un header e di un tag <font> che definisce il carattere e il colore. Ognuno di questi due tipi di tag deve essere chiuso se si vuole passare a definirne un altro senza fare confusione (in effetti si potrebbe anche non chiuderlo, dato che in un insieme di tag annidati è sempre l'ultimo che imposta le proprietà, ma dato che l'intento di queste pagine è quello di cercare di spiegare come funziona l'html a chi ne sa poco o niente, penso sia meglio mantenere il codice più pulito e comprensibile possibile. Quando avrete dimestichezza con il linguaggio, deciderete da soli se e quando è possibile non chiudere un tag o annidarlo in un altro.). Come avrete visto, c'è un nuovo tag che non deve essere chiuso, anche perché non esiste un tag di chiusura per esso: <br>. Questo tag serve semplicemente per andare a capo; come potrete vedere visualizzando l'esempio della pagina, infatti, le varie scritte non sono sullo stesso rigo. In questo caso particolare poi, sono staccate tra loro perché ogni volta che si chiude o si apre un header, il browser manda automaticamente a capo il testo!!! Attenzione quindi a questo particolare! |