HTML - Formattazione
Se utilizzi un elaboratore di testi, devi avere familiarità con la capacità di rendere il testo in grassetto, corsivo o sottolineato; queste sono solo tre delle dieci opzioni disponibili per indicare come il testo può apparire in HTML e XHTML.
Testo grassetto
Tutto ciò che appare all'interno <b>...</b> elemento, viene visualizzato in grassetto come mostrato di seguito -
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>Questo produrrà il seguente risultato:
Testo in corsivo
Tutto ciò che appare all'interno <i>...</i> l'elemento è visualizzato in corsivo come mostrato di seguito -
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Questo produrrà il seguente risultato:
Testo sottolineato
Tutto ciò che appare all'interno <u>...</u> elemento, viene visualizzato con la sottolineatura come mostrato di seguito -
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Questo produrrà il seguente risultato:
Testo di avvertimento
Tutto ciò che appare all'interno <strike>...</strike> l'elemento viene visualizzato con barrato, che è una linea sottile attraverso il testo come mostrato di seguito -
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>Questo produrrà il seguente risultato:
Carattere a spaziatura fissa
Il contenuto di un file <tt>...</tt>l'elemento è scritto in caratteri a spaziatura fissa. La maggior parte dei caratteri sono noti come caratteri a larghezza variabile perché lettere diverse hanno larghezze diverse (ad esempio, la lettera "m" è più larga della lettera "i"). In un carattere a spaziatura fissa, tuttavia, ogni lettera ha la stessa larghezza.
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>Questo produrrà il seguente risultato:
Testo in apice
Il contenuto di un file <sup>...</sup>l'elemento è scritto in apice; la dimensione del carattere utilizzato è la stessa dei caratteri che lo circondano, ma viene visualizzata a metà dell'altezza di un carattere sopra gli 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>Questo produrrà il seguente risultato:
Testo in pedice
Il contenuto di un file <sub>...</sub>l'elemento è scritto in pedice; la dimensione del carattere utilizzato è la stessa dei caratteri che lo circondano, ma viene visualizzata a metà dell'altezza di un carattere sotto gli 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>Questo produrrà il seguente risultato:
Testo inserito
Tutto ciò che appare all'interno <ins>...</ins> l'elemento viene visualizzato come testo inserito.
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>Questo produrrà il seguente risultato:
Testo eliminato
Tutto ciò che appare all'interno <del>...</del> elemento, viene visualizzato 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>Questo produrrà il seguente risultato:
Testo più grande
Il contenuto di <big>...</big> l'elemento viene visualizzato di una dimensione del carattere più grande del resto del testo che lo circonda 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>Questo produrrà il seguente risultato:
Testo più piccolo
Il contenuto di <small>...</small> l'elemento viene visualizzato di una dimensione del carattere più piccola del resto del testo che lo circonda 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>Questo produrrà il seguente risultato:
Raggruppamento di contenuti
Il <div> e <span> Gli elementi consentono di raggruppare più elementi per creare sezioni o sottosezioni di una pagina.
Ad esempio, potresti voler inserire tutte le note a piè di pagina in una pagina all'interno di un elemento <div> per indicare che tutti gli elementi all'interno di quell'elemento <div> sono correlati alle note a piè di pagina. Potresti quindi allegare uno stile a questo elemento <div> in modo che appaiano utilizzando un insieme speciale di regole di stile.
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" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Questo produrrà il seguente risultato:
L'elemento <span>, d'altra parte, può essere utilizzato per raggruppare solo elementi inline. Quindi, se hai una parte di una frase o 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>Questo produrrà il seguente risultato:
Questi tag sono comunemente usati con i CSS per consentire di allegare uno stile a una sezione di una pagina.