intro | lezioni | articoli | dizionario | download | e-mail |
Esiste tuttavia un altro sistema molto meno faticoso che ti consente di realizzare documenti HTML di buona fattura, mi riferisco all'impiego di alcuni programmi, i cosiddetti editor HTML, tuttavia ritengo che prima di imparare ad utilizzarne uno dovresti usare il metodo più difficile (scoprirai che quando c'è l'HTML di mezzo la parola difficile non fa paura :-), questo non è il suggerimento di un sadico (o forse si) solo così sarai in grado di utilizzare al meglio questi editor superandone i limiti intrinseci e soprattutto disporrai di una maggiore dimestichezza con l'impiego dell'HTML.
Se stai leggendo ancora queste righe vuol dire che ti ho convinto e non sei scappato ad acquistare l'ultimo mega editor HTML per cui mettiamoci al lavoro!
Un documento HTML è un file di testo composto da una serie di elementi (che da qui in avanti chiamerò tag), e relativi attributi, attraverso queste istruzioni il documento presenta testo, immagini, animazioni, suoni, così da creare un documento multimediale.
Ogni tag e racchiuso tra i segni di minore "<" e maggiore ">", per cui questa è la sintassi: <nome_del_tag> dove con nome_del_tag si intende il nome del comando che si impartisce. Un'importante annotazione da fare e che generalmente i tag lavorano in coppia.
Esempio 2.1
«L'<B>adolescenza</B> è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»
Gene Wilder - attore
La parola adolescenza è racchiusa tra due tag, il tag di chiusura e caratterizzato da una barra che precede il nome del tag stesso (in questo caso la lettera B).
B sta per bold che in italiano significa grassetto per cui il risultato che ottengo è il seguente:
«L'adolescenza è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»
Gene Wilder - attore
I tag possono anche essere racchiusi l'uno dentro l'altro, in questo caso si dice che sono annidati.
Esempio 2.2
«L'<B><I>adolescenza</I></B> è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»
Questa volta sono presenti due tipi di tag oltre al tag <B> che già conosciamo ecco il tag <I>, accompagnato dal corrispondente tag di chiusura</I>
I sta per italic che in italiano significa corsivo.
Adesso la parola adolescenza non solo è scritta in grassetto ma anche in corsivo. Per cui
avrò:
«L'adolescenza è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»
È quindi giunto il momento di vedere quali sono e a cosa servono i tag che stanno alla base di un documento HTML.
Listato 2.3
<HTML>
<HEAD>
<TITLE>Guarda in alto nella barra del titolo!!!</TITLE>
</HEAD>
<BODY bgcolor="#00CC33">
</BODY>
</HTML>
Per vedere quale risultato produce il listato 2.3 segui questa procedura.
- Apri l'elaboratore testi (Blocco Note su Windows o SimpleText su Mac)
- Digita il listato 2.3 (o più semplicemente copia e incolla!)
- Salva il file con il nome titolo.htm
- Apri il tuo browser (Netscape Navigator, Internet Explorer, Opera ecc.) e carica il file in questione.
Se invece vai di fretta...sei pigro...ansioso...precipitoso o troppo curioso clicca pure su questo pulsante.
Si aprirà un'altra finestra ed il browser procederà alla lettura del listato di cui sopra.
Deluso? Magari dopo l'inserimento di tutti quei tag ti aspettavi qualcosa di più interessante che un semplice sfondo verde. Cerchiamo allora di capire a cosa servono tutte queste istruzioni e perchè è necessario inserirle in una pagina web.
Il tag <HTML> indica l'inizio del documento e il corrispondente tag di chiusura </HTML> ne indica la fine. Questo tag comunica al browser che il file prelevato è stato redatto secondo quel linguaggio di contrassegno che è l'HTML.
L'omissione di questa coppia di tag non comporta in genere alcun problema, tuttavia alcuni browser potrebbero alterarsi rifiutandosi di caricare la pagina o caricarla in modo... creativo!
La coppia di tag <HEAD> e </HEAD> contrassegnano ripsettivamente l'inizio e la fine dell'intestazione di un documento HTML. In questa sezione del documento sono annidati altri tag che lavorano dietro le quinte... ma non anticipiamo i tempi.
La coppia di tag <TITLE> e </TITLE> delimitano il titolo.
Tutto quanto digitato tra questi due tag appare nella barra del titolo (è la barra che si trova più in alto nella finestra del tuo browser). Attenzione All'interno di questa coppia di tag non è possibile annidare nessun altro tag!
La coppia di tag <BODY> e </BODY> racchiudono tutti gli altri tag che verranno utilizzati per dar vita al documento HTML.
Il tag <BODY> supporta 6 attributi.
- bgcolor="valore". Assegnando un valore a questo attributo è possibile definire un colore di sfondo per la pagina che si intende creare. Esistono 2 modi per impostare questo valore:
- Si inserisce il nome del colore, in inglese ovviamente!
I colori disponibili sono sedici: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow.
Sebbene questo sistema sia più intuitivo comporta un paio di difetti. Non tutti i browser sono in grado di interpretare questi valori e poi così facendo si ha un controllo limitato sulle sfumature riproducibili come colore di sfondo. - Si scrive una sequenza di questo tipo #RRGGBB dove:
- al posto di RR si inseriscono due cifre esadecimali che definiscono la gradazione di rosso;
- al posto di GG si inseriscono due cifre esadecimali che definisco la gradazione di verde;
- al posto di BB si inseriscono due cifre esadecimali che definisco la gradazione di blu. Miscelando queste 3 gradazioni si ottiene il colore di sfondo.
Le cifre esadecimali sono: 0123456789ABCDEF.
Esempio 2.4
Se scrivessi il seguente tag:
<BODY bgcolor="#000000"> otterrei uno sfondo nero. Tutti i colori sono stati impostati al minimo valore possibile.
Se invece scrivessi così
<BODY bgcolor="#FFFFFF"> otterrei uno sfondo bianco. Tutti i colori sono stati impostati al massimo valore possibile.
Nel mezzo c'è un'ampia gamma di colori. Potrebbe sembrare un sistema complesso in realtà non lo è affatto. Un piccolo aiuto te lo darà la tavola dei colori che rappresenta la prima appendice.
Ad ogni modo se usi Paint Shop Pro 6.0 (ma anche una versione meno recente va ugualmente bene) noterai che una volta selezionato un colore ottieni immediatamente la tripletta esadecimale preceduta dal cancelletto (#) da inserire all'interno dell'attributo bgcolor.
- background="percorso/nome_immagine". Questo attributo è utilizzato per inserire un'immagine come sfondo della pagina che si intende creare.
Non è affatto necessario che l'immagine che si vuole utilizzare riempia tutto lo spazio, il browser si preoccuperà di ripeterla tante volte quanto si renderà necessario a tappezzare tutto lo sfondo.
Tra virgolette va inserito il percorso che consente al browser di stabilire dove si trova l'immagine per poterla usare come sfondo.
Nel caso in cui questa immagine sia messa nella stessa directory (cartella) in cui si trova il documento HTML che stai sviluppando sarà sufficiente inserire solo il nome dell'immagine e la sua estensione (che presumibilmente sarà GIF o JPG ma questo e argomento della 5 lezione - text="valore". Dal momento che è possibile modificare il colore di sfondo e lecito, ed in diversi casi necessario intervenire sul colore che il testo può assumere così da impostare un contrasto tra sfondo e caratteri che non affatichi nella
lettura.
Anche in questo caso ci sono due sistemi per impostare questo valore, gli stessi menzionati per l'attributo bgcolor - link="valore". I link, in italiano collegamenti ipertestuali, sono quelle parole (ma possono essere anche immagini) che presentano un colore diverso dal resto del testo e sono sottolineate, cosa siano i link e argomento della lezione 6 per cui in questa sede mi limito a dirti che grazie ai link puoi saltare da una pagina ad un'altra, da un sito ad un altro ecc. In genere i link hanno il colore blu ma questo colore può essere modificato. Come?
in 2 modi... che conosci già perchè sono gli stessi adottati per l'attributo bgcolor - alink="valore" Se navighi da un po di tempo avrai notato che quando attivi un link e cioè quando poni il puntatore del mouse (sempre che tu non ti stia usando la tastiera per navigare) sul link e tieni premuto il tasto destro il link cambia colore, in genere assume il colore rosso.
Anche su questo colore puoi esercitare il tuo onnipotente controllo e modificarlo come credi usando uno dei due sistemi indicati per l'attributo bgcolor - vlink="valore" Dopo aver usato un link questo assume un colore diverso affinchè ci si possa ricordare che da quella parte si è già passati.
In genere i link visitati assumono colore viola. Mi sembra superfluo aggiungere che questo colore è modificabile secondo i due metodi che ormai conosci alla perfezione.
Per questa seconda lezione è tutto...
...alla prossima :-)
|
|
