Il testo in una pagina web

Titoli

I titoli di una pagina web sono delle scritte in grassetto solitamente più grandi dei paragrafi. I titoli si identificano con la lettera h (h = header ovvero titolo in inglese) e vanno da h1 fino ad h6: h1 è il titolo più grande mentre h6 è il titolo più piccolo. Un esempio di titolo può essere:

<h1>Questo &egrave; un titolo in h1</h1>

Che viene renderizzato (quindi caricato, rappresentato dal browser) in questo modo:

Questo è un titolo in h1

Gli altri titoli sono progressivamente più piccoli e si ottengono variano il numero a fianco dell'h da entrambe le parti:

<h2>Questo &egrave; un titolo in h2</h2>

Questo è un titolo in h2

Questo è un titolo in h3

Questo è un titolo in h4

Questo è un titolo in h5

Questo è un titolo in h6

Paragrafi

Una pagina web contiene anche del testo organizzato in paragrafi. I paragrafi sono contenuti all'interno dei tag ....:

<p>Questo &egrave; il mio primo paragrafo in HTML</p>

Il tag  ha l'effetto di lasciare una riga bianca prima e dopo il paragrafo. Infatti, se scriviamo due paragrafi attaccati nel codice, come:

<p>Questo &egrave; il primo paragrafo</p>
<p>Questo &egrave; il secondo paragrafo</p>

otteniamo:

Questo è il primo paragrafo

Questo è il secondo paragrafo

Se si guarda al linguaggio HTML, tuttavia, lasciare delle righe bianche nel codice non influisce sulla spaziatura mostrata nella pagina. Quindi l'output dell'esempio sopra, equivale all'output del codice:

<p>Questo &egrave; il primo paragrafo</p>

<p>Questo &egrave; il secondo paragrafo</p>

In ogni caso, può essere utile lasciare delle righe bianche nel codice HTML allo scopo di aumentarne la leggibilità.

Il tag ` `

Se lo scopo è quello di interrompere la riga ad un certo punto del testo, come ad esempio dopo un punto fermo, si può usare il tag   all'interno di un tag . Ad esempio:

<p>Primo paragrafo. <br>
Secondo paragrafo.
</p>

risulta in:

Primo paragrafo.
Secondo paragrafo.

Grassetto e corsivo

Il testo in un paragrafo può essere personalizzato dandogli dei pesi e degli stili diversi. Attraverso i tag HTML può, infatti, apparire come normale, grassetto o corsivo. I seguenti paragrafi:

<p>
Questo &egrave; il primo paragrafo e <b>Questo &egrave; il grassetto</b>
</p>
<p>
Questo &egrave; il secondo paragrafo e <i>Questo &egrave; il corsivo</i>
</p>

Sono renderizzati come:

Questo è il primo paragrafo e Questo è il grassetto

Questo è il secondo paragrafo e Questo è il corsivo

dove:

: tag per rendere il testo in grassetto (b sta per bold che in inglese è grassetto). Può essere sostituito dal tag ;
: tag per il corsivo (i = italics ovvero corsivo in inglese);

Questi due tag possono anche essere “annidati” insieme ovvero messi uno dentro l'altro. L'importante è che il primo che si apre è l'ultimo che si chiude, in questo modo:

<strong><i>Questo &egrave; un testo in corsivo-grassetto</i></strong>

Per cui questo:

<strong><i>Questo &egrave; un testo in corsivo-grassetto</strong></i>

è sbagliato.

Simboli e lettere accentate (entità html)

Le lettere accentate tipo è, à, ò e i simboli tipo ?, !, &, “” eccetera vanno trattati come tali, ovvero vanno specificati all'interno della pagina web con dei codici speciali per fare in modo che siano rappresentati nel modo corretto da tutti i browser che li leggono. Questi simboli sono anche detti entità html. Ognuna di queste entità può essere inserito nella pagina web come: &nomeentità; quindi ad esempio ’ oppure ' eccetera.

<p>&ldquo; Questa &egrave; una lettera accentata &rdquo;</p>

viene rappresentato come:

“ Questa è una lettera accentata ”

Una tabella dei simboli usati comunemente può essere trovata qui: https://it.wikibooks.org/wiki/HTML/Entit%C3%A0

Le principali che ci interessano sono:

Simbolo	Codice	Significato
’	`’`	Virgoletta singola inclinata a destra
'	`'`	Apostrofo
“	`“`	Doppie virgolette sinistra (l = left)
”	`”`	Doppie virgolette destra (r = right)
!	`&excl;`	Punto esclamativo (excl = exclamation)
?	`&quest;`	Punto di domanda (quest = question)
&	`&`	e commerciale (ampersand)
©	`©`	Simbolo del copyright
€	`€`	Simbolo dell'euro
à	`à`	a con accento grave
è	`è`	e con accento grave
ì	`ì`	i con accento grave
ò	`ò`	o con accento grave
ù	`ù`	u con accento grave
á	`á`	a con accento acuto
é	`é`	e con accento acuto
í	`í`	i con accento acuto
ó	`ó`	o con accento acuto
ú	`ú`	u con accento acuto
À	`À`	A con accento grave
È	`È`	E con accento grave
Ì	`Ì`	I con accento grave
Ò	`Ò`	O con accento grave
Ù	`Ù`	U con accento grave
Á	`Á`	A con accento acuto
É	`É`	E con accento acuto
Í	`Í`	I con accento acuto
Ó	`Ó`	O con accento acuto
Ú	`Ú`	U con accento acuto

Una pagina completa quindi può essere:

<!DOCTYPE html>
<html>
<head>
<title>La mia prima pagina web</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Questo &egrave; un titolo</h1>
<p>
Questo &egrave; un paragrafo in <b>grassetto</b>, in <i>corsivo</i> e in <b><i>corsivo-grassetto</i></b>.
</p>
</body>
</html>