HTML - Formattazione del testo

In HTML è possibile formattare il testo come in un programma di videoscrittura.
Per formattare il testo esistono diversi tag, qui di seguito vedremo quelli principali e più utilizzati.

TESTO IN GRASSETTO
Per scrivere il testo in grassetto esistono due tag uno <b> e l'altro <strong> con i rispettivi tag di chiusura </b> e </strong>

Esempio 1-2:

Questo è l'<b>esempio 1</b> di testo in grassetto

view raw html_grassetto1.html hosted with ❤ by GitHub

Questo è l'<strong>esempio 2</strong> di testo in grassetto

view raw html_grassetto2.html hosted with ❤ by GitHub

Risultato 1-2: Questo è l'esempio 1 di testo in grassetto con il tag <b>
Questo è l'esempio 2 di testo in grassetto con il tag <strong>

---

TESTO IN CORSIVO
Per scrivere il testo in corsivo esistono due tag uno <i> e l'altro <em> con i rispettivi tag di chiusura </i> e </em>

Esempio 1-2:

Questo è l'<i>esempio 1</i> di testo in corsivo

view raw html_corsivo1.html hosted with ❤ by GitHub

Questo è l'<em>esempio 2</em> di testo in corsivo

view raw html_corsivo2.html hosted with ❤ by GitHub

Risultato 1-2: Questo è l'esempio 1 di testo in corsivo con il tag <i>
Questo è l'esempio 2 di testo in corsivo con il tag <em>

---

TESTO SOTTOLINEATO
Per scrivere il testo sottolineato è necessario utilizzare il tag  <u> con il rispettivo tag di chiusura </u>

Esempio:

Questo è <u>un testo sottolineato</u>

view raw html_sottolineato.html hosted with ❤ by GitHub

Risultato: Questo è un testo sottolineato

---

TESTO COLORATO
Per scrivere il testo colorato è necessario utilizzare il tag <span> aggiungendo l'attributo style="color: #......;"

Esempio:

<span style="color: #ff9600;">Testo colorato</span>

view raw html_testocolorato.html hosted with ❤ by GitHub

Risultato:
Testo colorato
Dopo il carattere # inserire il colore in codice esadecimale

---

TESTO EVIDENZIATO
Per scrivere il testo evidenziato è necessario utilizzare il tag <span> aggiungendo l'attributo style="background-color: #......;"

Esempio:

<span style="background-color: #eeff80;">Testo evidenziato</span>

view raw html_evidenziato.html hosted with ❤ by GitHub

Risultato:
Testo evidenziato
Dopo il carattere # inserire il colore in codice esadecimale

---

ANDARE A CAPO
In HTML quando si scrive un testo il ritorno a capo è automatico in base alle dimensioni del contenitore (semplificando: larghezza della pagina), quindi se si vuole andare a capo in modo forzato esiste un tag specifico.
Per andare a capo è necessario utilizzare il tag  <br> nel punto della frase in cui si vuole andare a capo. Non esiste un tag di chiusura. E' possibile aggiungere una riga vuota tra una frase e l'altra semplicemente mettendo due tag <br> consecutivi (vedi Esempio 2): questa scrittura è preferibile evitarla scegliendone una più specifica per questo scopo, come l'utilizzo dei paragrafi.

Esempio 1 - 2:

	Testo1<br>
	Testo2<br>
	Testo3<br>

view raw html_andare_capo1.html hosted with ❤ by GitHub

	Testo1<br>
	Testo2<br>
	Testo3<br><br>
	Testo4<br>

view raw html_andare_capo2.html hosted with ❤ by GitHub

Risultato1: Testo1
Testo2
Testo3

Risultato 2:
Testo1
Testo2
Testo3

Testo4

---

PARAGRAFI
Il paragrafo in HTML è una porzione di testo. Se si inseriscono due concetti in due paragrafi separati questi saranno distanziati automaticamente senza l'utilizzo del tag <br>
Per inserire un paragrafo è necessario utilizzare il tag  <p> con il rispettivo tag di chiusura </p>

Esempio:

	<p>Testo del paragrafo uno</p>
	<p>Testo del paragrafo due</p>

view raw html_paragrfo.html hosted with ❤ by GitHub

Risultato:

Testo del paragrafo uno

Testo del paragrafo due

---

APICE
Per inserire un apice è necessario utilizzare il tag  ^{con il rispettivo tag di chiusura}

Esempio:

E = mc<sup>2</sup>

view raw html_apice.html hosted with ❤ by GitHub

Risultato:

E = mc²

---

PEDICE
Per inserire un pedice è necessario utilizzare il tag  _{con il rispettivo tag di chiusura}

Esempio:

H<sub>2</sub>O

view raw html_pedice.html hosted with ❤ by GitHub

Risultato:

H₂O

---

VARIABILI
Per inserire una testo in stile variabile, la famosa x della scuola è necessario utilizzare il tag  <var> con il rispettivo tag di chiusura </var>

Esempio:

<var>x</var>

view raw html_variabili.html hosted with ❤ by GitHub

Risultato:

Lettera x predefinita - Lettera x come variabile

---

RIGA ORIZZONTALE
Per inserire una riga orizzontale in modo da separare parti di testo è necessario utilizzare il tag  <hr>
Non esiste un tag di chiusura.

Esempio:

	Testo sopra la riga
	<hr>
	Testo sotto la riga

view raw html_riga_oriz.html hosted with ❤ by GitHub

Risultato:

Testo sopra la riga

---

Testo sotto la riga