Intestazioni

Le intestazioni ( headings) danno la possibilitá di titolare alcune parti del testo. La sintassi di uso di un headings é:

<Hx> testo dell'intestazione </Hx>

dove x é uno dei 6 livelli disponibili, numerati a partire da 1. Ogni passaggio tra un'intestazione ed un'altra ha le seguenti conseguenze:

cambiamento dello stile del font e del formato;
interruzione dei paragrafi precedenti e seguenti;
inserzioni di uno spazio bianco sufficiente a impaginare l'intestazione.

È possibile inserire più titoli all'interno della pagine, anche dello stesso livello.
Tutti i marcatori di questi titoli interni supportano un attributo che permette di specificare l'allineamento del testo. Il nome dell'attributo è align, e i valori possibili, che specificano il tipo di allineamento, sono:

center
left
right

Vediamo a questo punto "a video" come vengono interpretati i vari livelli e gli allineamenti:

Prova pratica

<H1 align=center>Prova pratica</H1>

Prova pratica

<H2>Prova pratica</H2>

Prova pratica

<H3 align=left>Prova pratica</H3>

Prova pratica

<H4>Prova pratica</H4>

Prova pratica

<H5 align=right>Prova pratica</H5>

Prova pratica

<H6>Prova pratica</H6>

Se non usiamo alcun attributo all'interno del tag H per default viene mantenuto l'allinamento a sinistra.

Il dimensionamento dei caratteri

Il secondo gruppo di istruzioni che è utile analizzare permette di controllare la dimensione dei caratteri. Abbiamo già visto che gli elementi per i titoli provocano un cambiamento di dimensione del font. Le istruzioni che elenchiamo ora danno la possibilità di avere un controllo molto più raffinato della dimensione del carattere, e permettono di ottenere effetti grafici molto particolari.

La dimensione del carattere in un documento HTML può essere espressa in termini assoluti o relativi. Nel primo caso (termini assoluti) si usa il seguente marcatore:

<font size="n">testo</font>

Dove n è un numero che va da 1 a 7, ad es.: <font size="4">testo</font>.

La dimensione per default del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7 si ottiene un font ingrandito.

Per esprimere la dimensione del font in termini relativi si usa la seguente marcatura:

<font size="+/- n">testo</font>

In questo caso n può variare da -2 a +4. Miscelando queste varie direttive è possibile ottenere effetti come questo:

<font size="+4">C</font><font size="+3">I</font><font size="-1">A</font><font size="+2">O</font>

che producono:

CIAO

La dimensione normale, espressa in termini assoluti, può essere modificata con il seguente marcatore inserito subito dopo l'istruzione <body>:

<basefont size="n"> (es.: <basefont size="4">)

Questa istruzione ha effetto su tutto il documento, non ha bisogno di tag di chiusura, e influisce sulle eventuali direttive di font relative. Un po' di esercizi saranno utili per familiarizzare con il meccanismo del dimensionamento relativo. È infine facile verificare che, in seguito a un basefont, anche il range di valori utili del dimensionamento relativo può variare. Ad esempio, con basefont uguale a 4, il range va da -3 a +3 (e non più da -2 a +4).

<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 (termini assoluti)

<font size=#> ... </font> #=-1, -2, +1, +2, +3 (termini relativi)

Prova Prova (partendo dal default che corrisponde a 3 per raggiungere il massimo che è 7, usando un termine relativo + 4 come vedete il risultano non cambia)	`<font size=7>Prova</font>` `<font size=+4>Prova</font>`
Prova	`<font size=6>Prova</font>`
Prova	`<font size=5>Prova</font>`
Prova	`<font size=4>Prova</font>`
Prova	`<font size=3>Prova</font>`
Prova Prova	`<font size=2></font>` `<font size=-1>Prova</font>`
Prova

Paragrafi

In qualsiasi documento, di norma, insieme ai titoli c'è anche del testo normale.
Nella stampa "tradizionale" il testo viene diviso in blocchi, i capoversi (che gli inglesi chiamano paragraph), al fine di dividerlo in unità concettuali e aumentare la leggibilità.
Anche un documento Html può essere diviso in capoversi.
L'elemento <P> serve per inserire un'interruzione di paragrafo all'interno del testo. Quando un browser incontra un tag <P>, manda il testo a capo e aggiunge una spaziatura verticale fra la riga appena terminata e la riga successiva.

Se noi scriviamo in questo modo:
<HTML>
<HEAD>
<TITLE>Paragrafi </TITLE>
</HEAD>
<BODY>

Questa é la prima riga. 

Questa e` la seconda.

</BODY>
</HTML>
verrebbero visualizzate come una riga unica:
Questa e` la prima riga. Questa e` la seconda.

Per rimediare a ció si inserisce un'interruzione di paragrafo:
<BODY>
<P>Questa é la prima riga
<P>Questa é la seconda.
</BODY>

      ... e questo e' il risultato:

Questa e` la prima riga.

Questa e` la seconda.

Si deduce quindi che l'Html visualizza i capoversi separandoli in funzione dell'istruzione <P> e non degli "a capo" con tastiera che dovessimo inserire nel nostro file. Anche il marcatore <P> può avere degli attributi di tipo align.
Se nel paragrafo usiamo l'attributo align, dobbiamo necessariamente usare </P> per la chiusura del paragrafo stesso.

<P align=center>Ciao<\P> <P align=right>Ciao<\P> <P align=left>Ciao<\P>

Ciao

L'elemento <BR>.
Un altro marcatore che riguarda la gestione dei capoversi è <BR> (abbreviazione di break). La sua funzione è quella di spezzare una riga, producendo un "a capo", ma senza introdurre una riga vuota e senza interrompere l'unità concettuale del capoverso ( e nemmeno la sua impaginazione; ovvero un capoverso allineato a destra, ad esempio, continuerà ad essere allineato a destra, fino al marcatore </P>, anche se contiene uno o più <BR>):
<BR> non ha un marcatore di chiusura in quanto indica semplicemente il punto in cui intervenire. Ricorrendo a più marcatori <BR> in sequenza si possono creare delle spaziature verticali.

L'elemento <HR> permette di introdurre una linea separatrice tra i paragrafi lunga quanto la larghezza della finestra del browser. Si noti che tale linea, a differenza di altri oggetti che possono essere introdotti come separatori tra sezioni (ad esempio, piccole immagini), è di gomma, nel senso che si allarga o si stringe al modificarsi delle dimensioni della finestra stessa. Si tartta comunque di un'istruzione "secca" che non richiede tag di chiusura.

E' possibile comunque utilizzare delle istruzioni specifiche nei tag HR se vogliamo che le nostre righe, abbiamo a video, un aspetto predefinito. Alcuni attributi applicabili sono:

size="n", dove n indica lo spessore della riga;
noshade, che serve ad eliminare l'effetto "ombra" della linea;
width="n% |n", che regola la larghezza della riga, sia in percentuale, relativamente alla larghezza dello schermo, sia in assoluto, in pixel;
align="left | center | right", per allineare la riga rispettivamente a sinistra al centro e a destra (gli effetti di questo attributo, ovviamente, sono visibili solo se la linea ha una larghezza inferiore al 100% dello schermo)

esempi:

<HR size="n">
<HR size="10">

<HR noshade>
<HR noshade>

<HR width="n% | n">(Come potete notare, se non viene inserito alcun attributo di allineamento, la riga inserita, per default viene visualizzata al centro)
<HR width="50">
<HR width="50%">

<HR align="left | center | right">
<HR width="50%" align="left">
<HR width=50% align=rigth>

Allineamento nelle Divisioni di frasi

L'elemento <div>

Quando si vogliono allineare contemporaneamente più capoversi, e altri elementi HTML che vedremo in seguito, come le tabelle, si può ricorrere al tag <div>. Anche in questo caso la sintassi è molto semplice:

<div align="left | center | right"> ... </div> (es.: <div align="center">Prova</div>)

Le versioni più vecchie di alcuni browser non riconoscono il comando <div>, introdotto relativamente di recente, ma un altro tag (<center>) che però non fa parte delle specifiche HTML standard. Per assicurare la massima compatibilità alle proprie pagine, vemgono inseriti entrambi. Es.:

<div align="center"><center>Prova</center></div>

Doveroso notare che, nel nostro esempio, avremmo ottenuto lo stesso effetto con un assai più semplice <p align="center">Prova</p>. Il tag <div>, comunque, si mostrerà più utile in seguito.

<div align=left> ... </div>

<div align=left> Vediamo un po' come funziona? <br> Non c'è male! funziona perfettamente. </div>

Vediamo un po' come funziona?
Non c'è male! funziona perfettamente.

<div align=center> ... </div>

Vediamo un po' come funziona?
Non c'è male! funziona perfettamente.

<div align=right> ... </div>

Vediamo un po' come funziona?
Non c'è male! funziona perfettamente