Manuale di HTML
Inserimento del testo
Impostazione del testo
Creare una pagina web priva di significato e che non offre nulla di interessante è facile come imbrattare un muro con orrendi scarabocchi privi di forma. La situazione è la stessa in entrambi i casi: non c'è niente da fare se non sentirsi frustrati per essersi resi ridicoli. Il contenuto di un sito web è essenziale per una sua buona riuscita. Altrettanto essenziale è il modo in cui questo contenuto viene esposto e mostrato.
Un testo lungo e articolato, sebbene interessante, perde interesse se mostrato senza una degna struttura e impaginazione; l'uso del colore, di tabulazioni, di indentazioni, etc..., rende più leggibile anche il testo più complicato. È per questo che prima di definire quali caratteri usare, di che dimensione e colore descriviamo come impaginare e posizionare il testo all'interno di una pagina Web.
L'HTML dispone di di TAG che consentono di costruire un layout (visualizzazione) abbastanza precisa del testo, permettendoci di disporlo come lo si vuole, utilizzando titoli, paragrafi, separatori e interlinee.
Il tag <Hn> e </Hn> definisce un titolo. Il simbolo n viene sostituito da un numero da 1 a 6 che indica la dimensione del titolo; <H1> è il più grande e <H6> il più piccolo. Il tag <Hn> ha l'attributo ALIGN, opzionale, che permette di dare l'allineamento al titolo; i valori possibili sono "left", "center", "right" e "justify", ma quest'ultimo ha poco senso, parlando di un titolo. L'attributo predefinito è l'allineamento a sinistra, "left", e può omettersi; la sintassi corretta, per un titolo di grandezza 2 allineato al centro, è <H2 ALIGN="right">.
Il tag <DIV> è utilizzato per raggruppare vari elementi isolati (testo, immagini e così via) in una singola unità, alla quale si vuole applicare la stessa formattazione (di solito l'allineamento); riconosce l'attributo ALIGN , con gli stessi valori del tag <Hn>; riconosce anche l'attributo ID="nome" nei fogli di stile CSS, insieme al tag <STYLE> che vedremo più avanti.
Il tag <P> e </P> indica un paragrafo (inizio e fine); ad un paragrafo viene sempre anteposta una interlinea di una riga e mezza e ad esso segue un'altra interlinea di una riga e mezza. Due paragrafi successivi appaiono separati da una sottile striscia vuota. Esattamente come per i tag precedenti riconosce l'attributo ALIGN, con gli stessi valori, il valore predefinito è ALIGN="left" e può omettersi. Il tag <P> può essere usato anche da solo (senza il tag di chiusura </P>), purché si inizi il paragrafo successivo con un altro <P> altrimenti il browser suppone di stare ancora nel paragrafo corrente.
Il tag (o meglio il comando di markup) <BR> equivale esattamente a un ritorno a capo. Non contiene attributi e non ha tag di chiusura. Esso manda a capo il testo interponendo una interlinea singola.
Il tag <DIR> inserisce una tabulazione. Le tabulazioni in HTML hanno un valore fisso (in genere una 80-ina di pixel) e non possono essere modificate. Le tabulazioni possono essere inserite una dentro l'altra per ottenere una tabulazione doppia, tripla, etc... Vedere come esempio il titolo e l'argomento del presente capitolo, in alto nella pagina.
Il tag <BLOCKQUOTE> è esattamente identico al tag <DIR> e </DIR> e inserisce una tabulazione, dello stesso valore. Le tabulazioni possono essere inserite una dentro l'altra per ottenere una tabulazione doppia, tripla, etc...
Il tag <HR> inserisce una riga orizzontale (di solito con una ombreggiatura) di separazione tra due paragrafi consecutivi; non c'è il tag di chiusura e riconosce 4 attributi: ALIGN che definisce l'allineamento della riga con gli stessi valori dei tag precedenti (il valore predefinito è ALIGN="center"); WIDTH indica la lunghezza in pixel della linea, se questo numero è seguito dal simbolo % allora si tratta di una percentuale della larghezza della finestra; SIZE indica lo spessore in pixel della linea; NOSHADE (senza parametri) elimina l'ombreggiatura. Ad esempio, il comando <HR SIZE="2" WIDTH="70%" NOSHADE> visualizza la linea mostrata qui sotto.
Con i comandi e i parametri ora introdotti già possiamo visualizzare un testo; certo, sarà senza formattazione, però già gli possiamo dare una forma.
Vediamo di applicare con un piccolo esempio le nozioni appena introdotte.
<HTML> <HEAD> <TITLE>Guida di HTML</TITLE> .... </HEAD> <BODY BGCOLOR="#BBFFBB"> <H2>Titolo della pagina</H2> <P ALIGN="justify>Questo è un testo giustificato (notare l'allineamento su entrambi i lati) scritto in un paragrafo. Quando la pagina termina la frase viene troncata e la riga allineata. Notare che se anche si va a capo nel testo HTML, nella pagina non si va a capo, perché il browser non trova alcun comando per farlo. Stesso discorso se si lasciano molti spazi tra una parola e l'altra, il browser li ignora e visualizza uno spazio solo.<BR> Qui va a capo senza lasciare una interlinea. Qui sotto vediamo una linea allineata a destra, molto spessa.</P> <HR ALIGN="right" SIZE="8" WIDTH="50%"> <DIR>Questo è invece un testo allineato a sinistra, a cui è stato posto una tabulazione; il testo risulta spostato più a destra.</DIR> .... </BODY> </HTML> |
Titolo della pagina
Questo è un testo giustificato (notare l'allineamento su entrambi i lati) scritto in un paragrafo. Quando la pagina termina la frase viene troncata e la riga allineata. Notare che se anche si va a capo nel testo HTML, nella pagina non si va a capo, perché il browser non trova alcun comando per farlo. Stesso discorso se si lasciano molti spazi tra una parola e l'altra, il browser li ignora e visualizza uno spazio solo. |
Nel prossimo capitolo daremo finalmente una formattazione al testo.