Abbiamo visto nella lezione precedente come inserire un semplice testo senza stile. Adesso vediamo come renderlo più bello e come formattarlo a nostra scelta.
Per creare dei titoli e dei testi più grandi o più piccoli rispetto a quelli di un testo normale, si utilizzano i tag <h1>, <h2>, <h3>, <h4>, <h5>, ecc. Il tag <h1> crea un testo molto grande, il tag <h2> un testo grande, <h3> medio, <h4> piccolo e così via, fino a <h6>. Dopo la fine di questi tag, il testo andrà a capo da solo.
<!DOCTYPE html>
<html>
<!-- Il resto della pagina -->
<body>
<h1>Il titolo della pagina</h1>
<h2>Il sottotitolo della pagina</h2>
<h3>Aumentando il numero dopo h, la grandezza</h3>
<h4>del testo diminuisce continuamente</h4>
<h5>fino ad essere molto piccolo</h5>
<h6>e piccolissimo.</h6>
</body>
<html>
Il tag per creare un paragrafo è <p>, in cui all’interno si inserisce il testo che vogliamo:
<!DOCTYPE html>
<html>
<!-- Il resto della pagina -->
<body>
<p>Questo paragrafo contiene un gran numero di parole:
posso inserire tutto quello che voglio</p>
</body>
<html>
Come avrai visto, le parole non vanno a capo quando nell’editor di testo si va a campo. Esiste un tag che serve proprio per andare a capo: <br/>. Questo tag particolare non ha un tag di apertura e uno di chiusura, ma è da inserire da solo. Puoi anche scriverlo come <br> o <br />, perché HTML lo leggerà ugualmente.
<!DOCTYPE html>
<html>
<!-- Il resto della pagina -->
<body>
<p>Questo paragrafo contiene un gran numero di parole:<br/>
posso inserire tutto quello che voglio</p>
</body>
<html>
Per dare uno stile ad un testo, per esempio grassetto o corsivo, si utilizzano alcuni tag:
<b> e </b> per testo in grassetto;<code> e </code> per testo evidenziato;<i> e </i> per testo in corsivo;<small> e </small> per testo piccolo;<del> e </del> per testo cancellato;<u> e </u> per testo sottolineato.Vediamo un esempio:
<!DOCTYPE html>
<html>
<!-- Il resto della pagina -->
<body>
<p>Questo paragrafo contiene alcuni stili: <br>
il <b>grassetto</b>, il <i>corsivo</i>,
un testo <mark>evidenziato</mark>, un <small>piccolo</small> testo,
un testo <u>sottolineato</u> e uno <del>cancellato</del>.
</p>
</body>
<html>
Esistono altri tag, meno importanti, per dare lo stile al testo:
<strong> per dare importanza a un testo (il testo risulta in grassetto);<em> per enfatizzare un testo (il testo risulta in corsivo);<sub> per mettere un testo al pedice;<sup> per mettere un testo all’apice.