Html 7

Paragrafi e giustificazione del testo

Cosa imparerai in questa lezione: come posizionare testo e immagini; centrare oggetti, creare linee orizzontali

Nella lezione precedente abbiamo visto come formattare del semplice testo in HTML. A questo punto dobbiamo affrontare il modo in cui sistemare, dividere, posizionare il testo e gli altri oggetti di una pagina HTML all'interno del documento.
PARENTESI SUI CARATTERI SPECIALI
L' & indica l'inizio di un carattere speciale, mentre ; ne indica la fine e le lettere tra questi due caratteri sono una specie di abbreviazione. Ecco un esempio di caratteri speciali. (Nota: devono essere scritti in minuscolo)
·   ( spazio)
· < (minore)
· > (maggiore)
· & (&)
· " (virgolette)
·  (trattino)
Non hai bisogno di utilizzarli sempre, ma solo quando scrivere il carattere reale può confondere il browser. Come capire quando usarli? ...con l'esperienza e un po' di pratica.

Creare paragrafi con <P>

Il tag <P> definisce un nuovo paragrafo del testo indicando al browser che lo stesso deve rimanere su una nuova riga ed essere posizionato a destra, a sinistra o al centro. Se non specificato oltre, il tag <P> allinea il testo di default sulla sinistra. Per indicare altri tipi di posizionamento esistono attributi specifici:

<P ALIGN=left>
Definisce un paragrafo e allinea sulla sinistra (left).

<P ALIGN=right>
Definisce un paragrafo e allinea sulla destra (right).

<P ALIGN=center>
Definisce un paragrafo ed allinea al centro (center).

Andare a capo con <BR>

<BR> è un tag di interruzione di riga. Ha un funzionamento simile al paragrafo visto in precedenza, ma se ne discosta perchè non inizia un nuovo paragrafo.
In altri termini la sua funzione è simile alla pressione del tasto "invio" della tastiera.
Va usato singolarmente senza tag di chiusura.
Posizionare il testo con <DIV ALIGN> e <CENTER>

L'elemento <DIV> viene utilizzato per allineare il testo in posizione orizzontale a sinistra, destra e centro della pagina. L'attributo ALIGN è fondamentale a questo scopo.

<DIV ALIGN=left>Testo e immagini a sinistra</DIV>
Sposta gli elementi contenuti tra i suoi tag sulla sinistra.

<DIV ALIGN=right>Testo e immagini a destra</DIV>
Sposta gli elementi sulla destra.

<DIV ALIGN=center>Testo e immagini centrate</DIV>
Sposta gli elementi in posizione centrale.
GUARDARE l'esempio; esempioDIVALIGN.htm

Il tag <CENTER> ha un funzionamento del tutto simile a <DIV ALIGN=center> ma il suo uso è stato "deprecato" dallo standard 4 di HTML. L'uso di <CENTER> è stato introdotto da Netscape, proprio quando l'HTML prevedeva l'uscita di DIV. L'enorme diffusione iniziale di Netscape ha reso questo tag altrettanto diffuso e per questa ragione ancora viene usato e riconosciuto dai browser (anche da MsIe). L'uso di <CENTER> è molto semplice:

<CENTER>Testo da centrare</CENTER>

Linee orizzontali con <HR>

Le linee orizzontali sono un ottimo strumento per dividere parti del documento e rendere il testo più leggibile. La sintassi necessaria al loro inserimento in un documento HTML è la seguente:

Il tag HR (acronimo che sta per Horizontal Rule) non ha bisogno di chiusure successive. Si compone di diversi attributi:
· aling="CENTER": definisce la posizione della riga (center, right, left).
· size="2": definisce l'altezza, in pixel, della riga.
· width="400": definisce lunghezza orizzontale, in pixel, della linea. Può anche esprimersi in percentuale di spazio disponibile: width=80%.
· color="RED": definisce il colore della linea.

Creare elenchi puntati e numerati

Gli elenchi rappresentano uno dei modi più diffusi per organizzare informazioni all'interno di siti Web. Una delle loro caratteristiche principali è sicuramente quella di fornire un quadro chiaro e sintetico dell'argomento trattato.
HTML mette a disposizione diversi tipi di elenchi che di seguito andiamo a trattare singolarmente.

Elenchi ordinati (numerati)

Gli elenchi ordinati sono costiuiti da un singolo tag di apertura e chiusura <OL></OL> e tanti tag di apertura per quante sono le voci di menu <LI>. Questa è la corretta sintassi per creare elenchi ordinati:

<OL>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</OL>

Dall'esempio si nota come è possibile omettere il tag <BR> per il ritorno a capo, visto che è automaticamente inserito da <LI>. Se non stabilito diversamente (come vedremo in seguito) il tipo di elenco ordinato che il browser visualizzato è numerato (cioè l'elenco è costituita da una serie di numeri che da 1 crescono progressivamente). Le ultime versione di HTML prevedono la possibilità di elenchi ordinati che contengono un sistema di indicizzazione diverso dai numeri visti in precedenza:

Indicizzazione alfabetica maiuscola:

<OL TYPE=A>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</OL>

Indicizzazione alfatabetica minuscola:

<OL TYPE=a>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</OL>

Indicizzazione con numeri romani maiuscoli:

<OL TYPE=I>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</OL>

Indicizzazione con numeri romani minuscoli:

<OL TYPE=i>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</OL>

Elenchi NON ordinati (puntati)

Gli elenchi non ordinati funzionano in modo simile a quelli ordinati. La differenza di fondo è che le risorse indicizzate non sono legate da stretti rapporti di successione gerarchica, per cui non sono previsti elenchi progressivi quali numeri o lettere.

Gli elenchi non ordinati (o puntati) si compongono di un tag unico di apertura e chiusur <UL></UL> e tanti tag di elenco per quante sono le voci da indicizzare <LI>. La corretta sintassi per definire un elenco puntato è la seguente:

<UL>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL>

Se non definito diversamente l'elenco è costituito da una serie di pallini.
Come per gli elenchi numerati anche in questo caso è possibile indicare diversi tipi di elenco:

I pallini pieni visti in precedenza sono ottenibili con disc:

<UL TYPE=disc>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL>

L'attributo circle imposta pallini vuoti all'interno:

<UL TYPE=circle>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL>

L'attributo square imposta elenchi definiti da quadratini pieni:

<UL TYPE=square>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL>