Lezione 3: formattazione del testo

Per quanto interessanti ed utili possano essere le informazioni che hai intenzione di inserire in un sito Internet saranno sempre in molti a tenersene alla larga se queste informazioni non sono accessibili in modo razionale.
Alle informazioni da inserire pensi tu mentre io ti aiuterò renderne la presentazione più accattivante.
Un primo importante passo consiste nell'apprendere quei tag necessari per dare inizio ad una formattazione del testo.
Prendiamo in esame il listato 3.1

<HTML>
<HEAD>
<TITLE>racconto</TITLE>
</HEAD>
<BODY>
Ospiti e letti.

La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.

L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.

A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua)
</BODY>
</HTML>

Visualizza questo testo per renderti conto di come il browser (Netscape Navigator, Internet Explorer ecc.) lo interpreti. Per farlo puoi copiare ed incollare il listato all'interno di un elaboratore testi e salvare il tutto con estensione .htm oppure .html.
In alternativa puoi schiacciare il bottone che trovi quì sotto: si aprirà un'altra finestra ed il browser procederà alla lettura del listato di cui sopra

La conclusione è che un documento senza alcuna formattazione del testo come quello appena preso come esempio risulta praticamente illegibile.
Cerchiamo dunque di migliorare l'aspetto di questo documento iniziando dai titoli.
All'interno di un documento HTML i titoli vengono creati attraverso i 6 tag H (che sta per HEADER che in italiano significa appunto titolo).

<H1>Titolo di primo livello </H1>
<H2>Titolo di secondo livello </H2>
<H3>Titolo di terzo livello </H3>
<H4>Titolo di quarto livello </H4>
<H5>Titolo di quinto livello </H5>
<H6>Titolo di sesto livello </H6>

Facendo leggere le istruzioni dal tuo browser otterrai questo risultato:

Titolo di primo livello

Titolo di secondo livello

Titolo di terzo livello

Titolo di quarto livello

Titolo di quinto livello

Titolo di sesto livello

Sulla base di quanto appena visto listato 3.1 inseriamo un titolo che utilizzando la seguente sintassi: <H1>Ospiti e letti</H1>
A questo punto introduciamo il tag <P> (la P sta per paragraph; in italiano, paragrafo) il cui corrispondente tag di chiusura ha la forma usuale </P>
Questo tag di chiusura è opzionale per cui può essere omesso. Il browser capirà che un paragrafo è terminato quando incontrerà un nuovo tag di apertura (<P>)
Il tag <P> viene impiegato per segnare l'inizio di un nuovo paragrafo e produce una spaziatura di riga maggiore di quella normalmente adottata proprio per separare anche visivamente ogni paragrafo da quelo che lo precede.
Sempre con riferimento al listato 3.1 spezziamo il testo in 3 paragrafi procedendo come segue:

<P> La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.</P>

<P> L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.</P>

<P> A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua) </P>

Il tag <P> supporta l'attributo align=allineamento dove al posto di allineamento si può inserire uno dei tre paramentri consentiti e cioè:

right per un allineamento del paragrafo a destra;
center per un allineamento del paragrafo al centro;
left per un allineamento del paragrafo a sinistra; questa è la soluzione normalmente adottata, per cui tale allineamento viene adottato senza che sia espresso esplicitamente

Questo attributo è supportato anche dai tag di titolo, per cui, per centrare il titolo di questo racconto scriveremo:

<H1 align=center>Ospiti e letti</H1>

Supponiamo ora di voler introdurre un'interruzione di riga, per far ciò ricorriamo al tag <BR> (che è l'abbreviazione di break che in in italiano significa interruzione). Sinora tutti i tag incontrati lavoravano in coppia il tag BR è invece un tag solitario, non presenta dunque alcun tag di chiusura.
Se nel listato 3.1 vogliamo iniziare una nuova riga dopo ogni punto il listato dovrà essere così modificato:

<P>La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.<BR>
Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.</P>

<P> L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.<BR>
L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.</P>

<P> A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
<BR> ...(continua)</P>

Se decidi di intervenire sul modo in cui viene visualizzato il testo (tipo, dimensione e colore) dovrai impiegare la coppia di tag <FONT> e </FONT>. Il tag di apertura dovrà contenere almeno uno dei tre attributi richiesti per produrre l'effetto o gli effetti desiderati. Così, se si intende modificare il tipo di carattere (ad esempio, comic sans ms) scriverai:
<FONT face="comic sans ms">testo di tipo comic sans</FONT>
Se vuoi riprodurre il testo, o parte di esso, in un colore diverso scriverai:
<FONT color="valore">testo colorato</FONT>
il valore richiesto può essere espresso in due modi diversi
Se invece vuoi modificare la dimensione del testo scriverai:
<FONT size="valore">testo di dimensione diversa </FONT>
il valore richiesto può essere un numero da 1 a 7 compresi. In alternativa puoi ricorrere ai numeri relativi inserendo numeri da -6 a +6 compresi. Ti ricordo che il valore predefinito per il font è 3.
Puoi impiegare i tag appena appresi per modificare ancora il listato 3.1, ad esempio alternando il colore del testo per i singoli paragrafi, riproducendo il testo con un font diverso e riducendo o ingrandendo alcune parole.
Riscrivo per intero il listato con le ultime modifiche, per vedere come viene letto dal tuo browser copia e incolla il testo in un elaboratore di testi, salva in formato .htm o .html e visualizza il documento con il tuo browser oppure schiaccia il pulsante che trovi in fondo al listato stesso.

<HTML>
<HEAD>
<TITLE>racconto</TITLE>
</HEAD>
<BODY>
<H1 align=center>
<FONT face="comic sans ms" color="#003333">
Ospiti e letti
</FONT></H1>
<P>
<FONT face="comic sans ms" color="#FF9933"> La casa in cui vivo con la mia famiglia è
<FONT size=-1>piccola</FONT> ma
<FONT size=+1>accogliente</FONT>, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.<BR>
Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.</FONT></P>

<P>
<FONT face="comic sans ms" color="#CC9933"> L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.<BR>
L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.</FONT></P>

<P>
<FONT face="comic sans ms" color="#FF9933"> A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
<BR> ...(continua)</P>
</BODY>
</HTML>

Vediamo ora i cambiamenti introdotti con l'inserimento di questi tag.

Altri tag di formattazione....

Hai appena appreso l'uso del tag <BR>, grazie ad esso puoi spezzare una riga nel punto che hai stabilito...
...ma a volte potresti voler ricercare l'effetto contrario. Ossia potresti voler costringere un'insieme di parole su una stessa riga anche quando il tuo browser non ne vuole sapere e si ostina a mandare il testo daccapo prima del dovuto, per far ciò bisogna istruire esplicitamente il browser racchiudendo tutte le parole e/o i numeri che si intende mantenere sulla medesima riga nella coppia di tag <NOBR> e </NOBR>(abbreviazione di nobreak)
Se disponi di un browser grafico come Netscape Navigator o Internet Explorer sicuramente stai visualizzando questo testo con un tipo di carattere detto a larghezza variabile, questo perchè alcuni caratteri occuperanno meno spazio di altri (ad esempio una i occuperà meno spazio di una m). Esistono tuttavia anche caratteri cosiddetti a spaziatura fissa che assegnano uno stesso spazio ad ogni carattere. Per riprodurre quest'ultimo tipo di carattere si può ricorrere alla coppia di tag <TT> e </TT> operando nel modo consueto:
<TT>testo a spaziatura fissa</TT>

Il testo a spaziatura fissa si presenta in questo modo

Con la coppia di tag <DIV> e </DIV> si può creare un blocco (contenente testo, immagini e qualunque altra serie di elementi che è possibile implementare) di cui è possibile gestire l'allineamento. Difatti il tag <DIV> supporta l'attributo align="allineamento" il cui funzionamento e spiegato più su a proposito del tag <P>
Per enfatizzare alcune parole di un testo hai appreso nella precedente lezione come inserire il grassetto e il corsivo.
Se vuoi sottolineare o barrare alcune parole dovrai ricorrere alle seguenti coppie di tag

<U>testo sottolineato</U>
testo sottolineato

Impara ad usare questo tag con parsimonia poichè anche i link (collegamenti ad altre risorse), sono generalmente sottolineati, per cui un uso frequente di questo tag potrebbe generare qualche confusione in chi sta visitando la tua pagina.

Per barrare un testo userai l'apposita coppia di tag nel modo consueto:

<STRIKE>testo barrato</STRIKE>
~~testo barrato~~

Due coppie di tag come <SUB> e </SUB> e poi, <SUP> e </SUP> si rivelano utili per riproporre in una pagina web sigle particolari quali:

le formule chimiche.
Esempio: una molecola d'acqua è H₂O
ed ecco come si opera: H<SUB>2</SUB>O
le potenze.
Esempio: 2 elevato 3: 2³
ed ecco come si opera: 2<SUP>3</SUP>

Per spezzare un blocco di testo da una immagine o da un altro blocco di testo spesso si ricorre a righe orizzontali che è possibile inserire attraverso questo tag <HR>.
la lunghezza e la larghezza di questa linea sono rispettivamente definite attraverso i due attributi width="valore" e height="pixel".
Al posto del termine valore si inserisce la larghezza in pixel o in percentuale della larghezza del documento; mentre per regolare lo spessore della linea orizzontale si ricorre all'attributo height="..." il cui valore può essere specificato solo ed esclusivamente in pixel.
Un altro attributo che presenta questo tag è quello che ne regola l'allineamento, il suo funzionamento è spiegato più su.
Nella prossima lezione imparerai come inserire una lista in un documento HTML.

Buon proseguimento :-)

lezione 2

indice

lezione 4

Nella lezione quattro scoprirai come introdurre gli elenchi numerati e non.