02. Tag di formattazione del testo

Formattazione del testo

Paragrafo: 

<p> </p>

La coppia di tag <p> e </p> sono utilizzati per definire un paragrafo.

Un paragrafo inizia sempre su una nuova riga, e i browser aggiungono automaticamente un rigo vuoto prima e dopo un paragrafo.

Esempio:

<p>Primo paragrafo</p>

<p>Secondo paragrafo</p>

<p>

Terzo paragrafo scritto

su più righe. Durante la visualizzazione

il testo sarà continuo 

su una sola riga.

</p>

Heading (titoli): 

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

Ciascuna di queste coppie di tag consente di definire un titolo o un sottotitolo del documento. La coppia di tag <h1>, </h1> definisce titoli con maggiore enfasi (ad esempio quelli utilizzati per i capitoli del documento) mentre la coppia di tag tag <h6>, </h6> definisce i sottotitoli con minore enfasi (ad esempio quelli utilizzati nel corpo di un capitolo). Gli altri tag definiscono titoli con enfasi intermedie.

I titoli per il resto si comportano in maniera analoga ai paragrafi.

Esempio:

<h1>Titolo del capitolo</h1>

<h2>Titolo di una sezione del capitolo</h2>

Break: 

<br>

Il tag <br> è utilizzato per interrompere un testo e farlo andare a capo, ad esempio all'interno di un paragrafo o di un titolo. Non dà luogo ad un nuovo paragrafo.

Non ha tag di chiusura.

Esempio:

<p>Prima riga<br>Seconda riga</p>

Grassetto: 

<b> </b>

<strong> </strong>

Questi tag consentono di evidenziare un testo tramite grassetto (bold) all'interno di un paragrafo.

Esempio:

<p>Fare <b>attenzione</b> quando si usa il coltello</p>

<p><strong>SPEGNERE</strong> il motore prima di scendere dall'auto</p>

Corsivo: 

<i> </i>

<em> </em>

Questi tag consentono di evidenziare un testo tramite corsivo (italico) all'interno di un paragrafo.

Esempio:

<p>Il linguaggio <i>HTML</i> consente la formattazione di documenti tramite <i>tag</i></p>

Riduzione del font:

<small> </small>

Questi tag consentono di ridurre la dimensione del font all'interno di un paragrafo.

Esempio:

<p>Testo normale e <small>testo di dimensioni ridotte</small></p>

Pedice e apice:





Questi tag consentono di definire parti del testo da utilizzare come pedice e apice.

Esempio:

<p>a con pedice i si scrive a_i</p>

<p>3 alla 4 si scrive 3⁴</p>

Testo sottolineato:

<u> </u>

<ins> </ins>

Questi tag consentono di definire parti del testo evidenziato tramite sottolineatura.

Esempio:

<p>Parte <u>inserita</u> nel documento</p>

Testo barrato:

<del> </del>

Questi tag consentono di definire parti del testo evidenziato tramite tratto di cancellazione (tratto centrale).

Esempio:

<p>Parte <del>eliminata</del> nel documento</p>

Lista puntata:

<ul> </ul>

<li> </li>

La coppia di tag <ul> e </ul> definisce l'inizio e la fine della lista. Ogni elemento puntato della lista è identificato tramite i tag <li> e </li>.

Esempio:

     <ul>

       <li>elemento puntato uno</li>

       <li>elemento puntato due</li>

       <li>elemento puntato tre</li>

   </ul>

Lista numerata:

<ol> </ol>

<li> </li>

La coppia di tag <ol> e </ol> definisce l'inizio e la fine della lista. Ogni elemento numerato della lista è identificato tramite i tag <li> e </li>.

Esempio:

     <ol>

       <li>elemento numerato uno</li>

       <li>elemento numerato due</li>

       <li>elemento numerato tre</li>

  </ol>

Tabella:

<table> </table>

<tr> </tr>

<th> </th>

<td> </td>

La coppia di tag <table> e </table> definisce l'inizio e la fine della tabella. 

• Riga: ogni riga è delimitata tramite i tag <tr> e </tr>. 

• Intestazione: le celle dell'intestazione (se presente) sono delimitata da da <th> e </th>.

• Celle: le celle delle righe successive sono delimitate da <td> e </td>

E' possibile che righe diverse abbiano un numero di celle diverse, anche se questa possibilità normalmente andrebbe evitata.

Esempio:

<table>

     <tr>

          <th>Nome</th>

          <th>Età</th>

          <th>Occupazione</th>

    </tr>

    <tr>

          <td>Mario Rossi</td>

          <td>30</td>

          <td>Ingegnere</td>

    </tr>

    <tr>

          <td>Carla Neri</td>

          <td>25</td>

          <td>Studente</td>

          </tr>

    <tr>

          <td>Lucia Verdi</td>

          <td>40</td>

          <td>Medico</td>

    </tr>

</table>

Pagina di esempio:

Applichiamo in un documento HTML alcuni dei tag precedentemente descritti per vedere l'effetto che producono.

<!DOCTYPE html>

<html lang="it">

     <head>

          <meta charset="UTF-8">

          <title>Formattazione del testo</title> 

     </head> 

     <body> 

          <h1>Titolo di capitolo h1</h1> 

          <h2>Sottotitolo di paragrafo h2</h2> 

          <p>

               <b><u>Paragrafo con esempi di formattazione su più righe</u></b><br><br>

               - <b>grassetto</b><br>- <i>corsivo</i><br>- <ins>sottolineato</ins><br>

               - <del>testo barrato</del><br>- testo con _pedice<br>

               - testo con ^apice

          </p>

          <p><b><u>Paragrafo che introduce le liste:</u></b></p>

          <ul>

               <li>elemento puntato uno</li>

               <li>elemento puntato due</li>

               <li>elemento puntato tre</li>

          </ul>

          <ol>

               <li>elemento numerato uno</li>

               <li>elemento numerato due</li>

               <li>elemento numerato tre</li>

          </ol>

          <p><b><ins>Paragrafo che introduce la tabella:</ins></b></p>

          <table>

               <tr>

                    <th>Nome</th>

                    <th>Età</th>

                    <th>Occupazione</th>

               </tr>

               <tr>

                    <td>Mario Rossi</td>

                    <td>30</td>

                   <td>Ingegnere</td>

               </tr>

               <tr>

                    <td>Carla Neri</td>

                    <td>25</td>

                    <td>Studente</td>

               </tr>

               <tr>

                    <td>Lucia Verdi</td>

                    <td>40</td>

                    <td>Medico</td>

               </tr>

          </table>

     </body>

</html>

Notare che gli spazi multipli inseriti all'interno del paragrafo sono ignorati così come il testo a capo non ha effetto. Nel documento HTML il testo va a capo esclusivamente in corrispondenza del tag <br> e di un nuovo paragrafo o titolo.

Simboli e caratteri

In HTML, è possibile inserire simboli e caratteri particolari utilizzando le entità di carattere.

Ad esempio le entità di carattere possono essere utilizzate per inserire in un documento HTML caratteri che non possono essere digitati sulla tastiera.

Esistono due tipi di entità di carattere:

• • entità di carattere nominale;

  • entità di carattere numerica.

Le entità di carattere iniziano sempre con il carattere &.

Entità di carattere nominale

L'entità di carattere nominale è un nome che corrisponde al carattere da rappresentare. Ad esempio, l'entità di carattere nominale per il simbolo del copyright è &copy;.  Inoltre va detto che l'uso di alcuni caratteri è riservato per specifici scopi e, per questi caratteri, andrebbero  usate le corrispondenti entità di carattere nominale per ottenere la normale visualizzazione del carattere in un testo.

Un discorso a parte va fatto per il carattere spazio, infatti in un normale testo la spaziatura può essere fatta con un unico spazio. Gli spazi aggiuntivi, se presenti, vengono ignorati in visualizzazione. Per inserire più spazi va utilizzata l'entità nominale del carattere spazio.

La lista dei caratteri con uso riservato in HTML è la seguente:

   carattere      entità nominale

      &                &amp;

      <                &lt;

      >                &gt;

      '                &apos;

      "                &quot;

    SPACE              &nbsp;

Esempio:

<p>Questo è un paragrafo con il simbolo del copyright: &copy;</p>

<p>Questo è un paragrafo con molti spazi &nbsp; &nbsp; &nbsp; &nbsp; nel corpo del testo</p>

Entità di carattere numerica

L'entità di carattere numerica consente di rappresentare un carattere tramite il numero che corrisponde al codice Unicode del carattere stesso. Ad esempio, l'entità di caratteri numerica per il simbolo del copyright è &#169;.(in decimale) o &#xA9; (in esadecimale)

Esempio:

<p>Questo è un paragrafo con il simbolo del copyright: &#169;</p>

Sito:  7ecnologie

Sezione: 18. HTML & CSS

Capitolo: 04. Tag HTML

Paragrafo: 02. Tag di formattazione del testo

Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi 

Indice dei paragrafi: 01. Tag di struttura - 02. Tag di formattazione del testo - 03. Tag multimediali e di collegamento - 04. Tag di modulo - 05. Tag di stile