Guida alla formattazione HTML del testo

1. I tag Html

I TAG sono i comandi che definiscono la struttura di una pagina HTML e che permettono una corretta visualizzazione da parte del browser; si riferiscono al titolo della pagina, al colore e alle impostazioni dei caratteri e dello sfondo, all'impostazione del testo, delle immagini e dei collegamenti ipertestuali e in pratica permettono di visualizzare e gestire tutto quello che si vuole far vedere o tenere nascosto nella pagina.

I tag sono racchiusi tra parentesi angolari ( "<" e ">" ) e possono essere digitati indifferentemente sia in minuscolo che in maiuscolo;
la maggior parte dei tag ha anche un tag correlato che ne indica il termine e si indica anteponendo al nome del tag il simbolo slash "/"; si chiamano tag di apertura e chiusura.
Ad esempio, i tag che indicano l'inizio e la fine di un paragrafo si indicano con <P> e </P>.

Un tag può avere degli attributi, che specificano alcuni aspetti del tag; in questo caso la forma è:

<TAG attributo1="valore1" attributo2="valore2" ... >testo compreso</TAG>.

Esempio:

<p align="center">Paragrafo con testo allineato al centro</p>.

Per allineare un testo sulla pagina utilizziamo l'attributo align per tutti gli elementi di testo, i cui valori possono essere left (di default), center e right: quindi <p align="center"> allineerà un testo al centro della pagina.

2. Paragrafi e a capo

Le tag <p></p> si utilizzano per andare a capo e facilitare la lettura del testo si usano i paragrafi

<p>Questo è un paragrafo</p>.

<p> Questo è un a capo <br />
 senza interrompere un paragrafo</p>

Per andare a capo, senza interrompere il paragrafo, si usa il tag <br />.
È interessante il fatto che il tag <br /> non dev'essere chiuso. Al posto del tag di chiusura si inserisce una barra (/) dopo il nome del tag.

Per inserire un separatore orizzontale (una linea orizzontale) si usa il tag <hr />.

3. Grassetto, corsivo, sottolineato e caratteri speciali

Possiamo definire lo stile del testo utilizzando il grassetto, il corsivo ed il sottolineato, rispettivamente con i Tag <stong> (grassetto), <em> (sottolineato) e <u> (underline).

Vediamo un esempio:

<p><strong>Testo in grassetto</strong></p>

<p><em>Testo in corsivo</em></p>

<p><u>Testo sottolineato</u></p>

Caratteri Speciali

&nbsp; spazio vuoto ed unificatore
&copy; ©
&reg; ®
&lt; <
&gt; >
&#187; »
&#171; «

Nota: naturalmente questo elenco è incompleto, i caratteri speciali sono moltissimi, potete scaricare un elenco più o meno completo cliccando qui

Il simbolo &nbsp; è molto utilizzato; provoca uno spazio bianco che normalmente otteniamo digitandolo con la barra spaziatrice della tastiera, ma se ne volessimo ottenere due o più? con la tastiera non è possibile, quindi, inserendo tra due lettere o parole più spazi unificatori, si otterrà una spaziatura maggiore:

<p>C&nbsp;&nbsp;I&nbsp;&nbsp;A&nbsp;&nbsp;O</p>

4. I titoli

Un altro importante elemento nell'HTML sono i titoli.

L'HTML mette a disposizione 6 livelli di titoli. Per inserire un titolo di primo livello (il più grande) su utilizza il tag <h1>Titolo</h1>. Un titolo di primo livello può avere sotto-titoli di secondo livello (<h2>Sotto-titolo</h2>). Un titolo di secondo livello può avere dei sotto-titoli di terzo livello, e così via fino al livello 6, che è l'ultimo.

    <h1>Titolo della sezione</h1>  
    <p>Testo della sezione</p>  

5. Liste ed elenchi

Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le “liste”, che sono sostanzialmente di due tipi:

• Elenchi ordinati
• Elenchi non ordinati

Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell’elenco.

Elenchi ordinati

Il tag da utilizzare per aprire un elenco ordinato è <ol> (“ordered list”) e gli elementi sono individuati dal tag <li>(“list item”):

Testo che precede la lista
<ol>
 <li>primo elemento</li>
 <li>secondo elemento</li>
 <li>terzo elemento</li>
</ol>
Testo che segue la lista

Elenchi non ordinati

Gli elenchi non ordinati sono individuati dal tag <ul> (“unordered list”), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li> (in buona sostanza si tratta di quello che i programmi di videoscrittura chiamano elenchi puntati):

<ul>

<li>primo elemento</li>

<li>secondo elemento</li>

<li>terzo elemento </li>

</ul>

6. Link html

Ecco la sintassi per creare un link con riferimento a un sito web:

<a href=”http://scuoladelsociale.info/”>Clicca qui</a> per andare sul sito della scuola del sociale

Per ottenere il collegamento, all'interno del codice HTML abbiamo racchiuso le parole "questo sito" nel tag <a>; guardiamolo un po' più da vicino:

• a è il nome del tag; 'a' sta per anchor (àncora). Infatti una metafora molto usata per descrivere i collegamenti ipertestuali è proprio quella dell'àncora, che va da una pagina all'altra
• href="INDIRIZZO" è l'attributo che indica dove il collegamento deve saltare (nell'esempio il link salterà al sito http://www.scuoladelsociale.info/). Questo attributo è indispensabile per collegare due pagine, ma non è obbligatorio perchè, come vedremo tra qualche paragrafo, il tag <a> può essere usato anche per altri scopi.

È indifferente che la destinazione dell’ancora sia una pagina HTML di un sito, un’immagine, un file pdf , un file zip, o un file exe: il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa; poi il browser si comporterà in modo differente a seconda della risorsa.