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.