HTML - Formattazione

Se hai familiarito con un editor testuale, conoscerai la possibilità di rendere il testo in grassetto, corsivo o sottolineato; esse sono solo tre delle dieci opzioni disponibili per indicare come può apparire un testo in HTML e XHTML.

Testo Grassetto

Tutto ciò che è compreso nell' elemento <b>...</b>, verrà mostrato in grassetto, come nell' esempio seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a bold typeface.

Testo Corsivo Italic Text

Tutto ciò che è compreso nell' elemento <i>...</i>, verrà mostrato in corsivo, come nell' esempio seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a italicized typeface.

Testo Sottolineato

Tutto ciò che è compreso nell' elemento <u>...</u>, verrà sottolineato, come nell' esempio seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a underlined typeface.

Testo Sbarrato

Tutto ciò che è compreso nell' elemento <u>...</u>, verrà sbarrato, come nell' esempio seguente:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a strikethrough typeface.

Font Monospaziato

Tutto ciò che è compreso nell' elemento <u>...</u>, verrà scritto con un font monospaziato. Generalmente nei font le lettere occupano una larghezza differente (ad esempio, la lettera 'm' occupa più spazio della lettera 'i'). Nei font monospaziati invece, ogni lettera occupa lo stesso spazio.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a monospaced typeface.

Testo in Apice

Tutto ciò che è compreso nell' elemento <sup>...</sup>, verrà scritto in apice; la dimensione del carattere utilizzato è la stessa dimensione degli altri caratteri ma verrà visualizzato nella parte superiore rispetto agli altri caratteri.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a superscript typeface.

Testo in Pedice

Tutto ciò che è compreso nell' elemento <sub>...</sub>, verrà scritto in pedice; la dimensione del carattere utilizzato è la stessa dimensione degli altri caratteri ma verrà visualizzato nella parte inferiore rispetto agli altri caratteri.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a subscript typeface.

Testo Aggiunto

Tutto ciò che è compreso nell' elemento <ins>...</ins>, verrà mostrato come testo aggiunto.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

Produrrà il seguente risultato:

I want to drink cola wine

Testo Eliminato

Tutto ciò che è compreso nell' elemento <del>...</del>, verrà mostrato come testo eliminato.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

Produrrà il seguente risultato:

I want to drink cola wine

Testo Allargato

Tutto ciò che è compreso nell' elemento <big>...</big>, verrà mostrato di un punto più grande rispetto al resto del testo circostante. Come mostrato di seguito:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a big typeface.

Testo Rimpicciolito

Tutto ciò che è compreso nell' elemento <small>...</small>, verrà mostrato di un punto più piccolo rispetto al resto del testo circostante. Come mostrato di seguito:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

Produrrà il seguente risultato:

The following word uses a small typeface.

Raggruppare Contenuto

Gli elementi <div> e <span> permettono di raggruppare diversi elementi per creare sezioni e sottosezioni di una pagina.

Per esempio si potrebbero raggruppare tutte le note finali in una pagina tramite un elemento <div> per indicare che tutti gli elementi all' interno di quel <div> fanno parte del footer. Infine si potrebbe abbinare un foglio di stile CSS a quel div, in modo di stilizzare la sezione.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> | 
<a href="/about/contact_us.htm">CONTACT</a> | 
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

Produrrà il seguente risultato:

Content Articles

Actual content goes here.....

L' elemento <span> in pratica può essere usato per raggruppare solo elementi inline. Quindi se hai una parte di un paragrafo che vuoi raggruppare, puoi usare l' elemento <span> come segue:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

Produrrà il seguente risultato:

This is the example of span tag and the div tag alongwith CSS

These tags are commonly used with CSS to allow you to attach a style to a section of a page.

Advertisements