Formattare il testo

Intestazioni

Per strutturare il testo in sezioni si ricorre spesso alle intestazioni, formattate in modo da essere più evidenti.

In HTML sono disponibili sei livelli di intestazione, specificati dai tag:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

<h1> corrisponde all'intestazione di primo livello e così via.

Esempio:

<h1 align="center">Questo è h1</h1>
<h2 align="right">Questo è h2</h2>
<h3 align="left">Questo è h3</h3>
<h4>Questo è h4 </h4>
<h5>Questo è h5 </h5>
<h6>Questo è h6</h6>

Sequence di escape

Spazi multipli vengono convertiti in uno spazio singolo. Per inserire  più spazi di seguito bisogna ripetere la sequenza di escape:

&nbsp;

Se vogliamo che i caratteri speciali non vengano interpretati dal browser:

&amp; corrisponde a:
&lt; corrisponde a: <
&gt; corrisponde a: >


Paragrafi, interruzioni di riga, linee orizzontali

Poiché i browser ignorano le interruzioni di riga nel testo, è necessario utilizzare appositi tag per andare a capo e per delimitare i paragrafi.

L'elemento <p> interrompe la riga corrente e inserisce una riga vuota:

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

Per andare a capo senza inserire una linea vuota si usa l'elemento:

<br>

Per evidenziare maggiormente il distacco tra parti della pagina, possiamo inserire una linea di separazione:

<hr>

I due tag precedenti, non avendo contenuto, non prevedono tag di chiusura.


Esempio

<html>
<head>
  <title> Titolo </title>
</head>
<body>
  <h1 align="center"> Formattazione del testo:</h1>
  <hr size="10">
  <p>Questo è un paragrafo e, se la finestra del browser <br>
     è abbastanza larga, vado a capo quando lo decido io:
     PrimaParolaPrimaParolaPrimaParolaPrimaParolaPrimaParolaPrimaParolaPrimaParolaPrimaParola
     SecondaParola
     TerzaParolaTerzaParolaTerzaParolaTerzaParola</p>
</body>
</html>

Dimensionare il testo

Per aumentare o diminuire la dimensione dei caratteri:

<big>...</big>
<small>...</small>

Esempio (le verità del Governo):

Le <big>tasse <big>sono <big>diminuite</big></big></big>

Le tasse sono diminuite

I posti <small>di lavoro <small>sono aumentati</small></small>

I posti di lavoro sono aumentati


Stili logici e stili fisici

Per definire gli stili del testo, come per esempio corsivo e grassetto,  HTML offre due serie parallele di elementi, a volte definiti stili logici e stili fisici.  Lo stile logico specifica il formato lasciando al browser il modo in cui verrà reso.

Enfasi, grassetto:

<strong>...</strong>	oppure	<b>...</b>

Corsivo, italic:

<em> ...</em>		oppure	<i>...</i>

Monospaced, typewriter:

<code>...</code>		oppure	<tt>...</tt>

Modifica :

<sub>...</sub>      e       <sup>...</sup>

Testo non formattato (per inserire linee di codice):

<pre>...</pre>

Esempio

<html>
<head>
  <title> Titolo </title>
</head>
<body>
  <h1 align="center"> Stili e dimensionamento</h1>
  <p>Carattere normale. <br>
  <b>grassetto:</b><strong>forte enfasi.</strong><br>
  <em>corsivo</em>, <i>inclinato.</i><br>
  <code>codice.</code></p>
  <p>Inizio del paragrafo, colore e dimensioni normali
  <font size="+3" color="#ff0000">colore e dimensione diversi.</font>
  </p>
</body>
</html>