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>
Spazi multipli vengono convertiti in uno spazio singolo. Per inserire più spazi di seguito bisogna ripetere la sequenza di escape:
Se vogliamo che i caratteri speciali non vengano interpretati dal browser:
& corrisponde a: &
< corrisponde a: <
> corrisponde a: >
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.
<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>
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
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>
<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>
![]() |
![]() |
![]() |