Formattare un testo

Titoli, grassetti, corsivi e blocchi per le citazioni

creativecode avatar Giulio Tiseo

26 Giu, 2019

~6min.

Formattare il testo di una pagina HTML è il modo migliore per prendere dimestichezza con i tag. Non dimenticare che i testi sono i contenuti principali della pagine web; una formattazione corretta garantirà una comoda lettura dei contenuti e quindi un maggior successo della pagina.

Requisiti

È di fondamentale importanza che tu conosca i principi cardine dei tag. Se non lo hai già fatto, leggi con attenzione l’articolo Primi passi con il linguaggio HTML che ti aiuterà ad avere più chiare le informazioni che condividerò in questo articolo. 

# La semantica nell’HTML

In questo articolo ti parlerò dei tag che ti permetteranno di creare e formattare un testo in HTML. Tieni presente che ogni tag racchiude, oltre che un aspetto diverso, anche un significato ben preciso che cambia spesso il senso di ciò che stai realizzando. Un tag quindi non rappresenta sempre e solo una regola di formattazione, ma può rappresentare anche il significato stesso dell’elemento

# Formattazione di base

Nel corso delle lezioni abbiamo avuto modo di provare qualche tag per la formattazione di un testo: h1, h2, p, ecc… Tuttavia, esistono tanti altri tag che ci consentono di ampliare le possibilità di formattazione del testo. Possiamo pensare di scrivere in HTML:

  • titoli di grandezza diversa che vanno dal più grande  <h1> al più piccolo <h6>. Le dimensioni dei titoli intermedi (h2, h3, h4, h5) saranno progressivamente inferiori rispetto all’h1;
  • il testo in grassetto, che possiamo ottenere mediante l’utilizzo di due tag: <b> che sta per bold <strong> che sta per strongly emphasized. Questi due tag possono essere utilizzati a tua discrezione, non vi è alcuna differenza fra l’uno o l’altro;
  • il testo in corsivo, allo stesso modo del grassetto, può essere definito attraverso due tag identici: <i> e <em>. Il primo sta per italic, mentre il secondo per emphasized. Così come per il bold, la scelta nell’utilizzo di un tag piuttosto che di un altro sta esclusivamente a te;
  • una citazione o una sezione di testo distaccata dal paragrafo, definendo il tag <blockquote>;
  • un testo pre-formattato, cioè uno elemento che riporta tutti gli spazi e ritorni a capo scritti nel codice HTML, attraverso il tag <pre>;
  • un testo monospaziatoche può essere definito con l’utilizzo del <code>. Tag come questo sono utilizzati per rappresentare l’output di un computer. Per intenderci, ogni volta che ho scritto un tag HTML in questo articolo, ho utilizzato il tag <code>;
  • apici o esponenti con il tag <sup> (superscript) oppure pedici con il tag <sub> (subscript).

# Esercizio per formattare un testo in HTML

Ora che ti ho elencato i tag principali per formattare un testo in HTML, prova a replicare questa formattazione:

Formattare un testo in HTML (esercizio)
apri l’immagineapri il testo

Ti consiglio di metterti alla prova subito, senza andare a vedere immediatamente la soluzione. Prenditi tutto il tempo di cui hai bisogno e cerca di realizzare una formattazione quanto più fedele possibile a quella originale. 

Soluzione dell’esercizio per formattare un testo in HTML

Di seguito ti mostro la soluzione dell’esercizio per formattare un testo in HTML. Il brano parla di uno dei movimenti più importanti della storia dell’arte contemporanea: il Dadaismo

<hgroup>
   <h1>Dadaismo</h1>
   <h2>L'essenza dell'anti-arte</h2>
</hgroup>
<p>Nel suo <em>Manifesto sull'amore debole e amore amaro</em>, pubblicato nel 1920, <b>Tristan Tzara</b> fornisce <strong>istruzioni per scrivere una poesia: </strong></p>
<blockquote>
   <pre> 
   Prendete un giornale. Prendete delle forbici. 
   Scegliete da questo giornale un articolo avente la lunghezza che desiderate dare alla vostra poesia. 
   Ritagliate l’articolo. Ritagliate poi con cura ciascuna delle parole che formano l’articolo e mettetele in un sacchetto. 
   Agitate dolcemente. 
   Tirate fuori ciascun ritaglio uno dopo l’altro disponendoli nell’ordine in cui sono usciti dal sacchetto. 
   Copiate scrupolosamente. La poesia vi rassomiglierà. 
   Ed eccovi diventato uno scrittore infinitamente originale e di una sensibilità incantevole, benché incompreso dal volgo. </pre>
</blockquote>
<p> Su di esso si basarono le poesia di <b>Hans Harp</b> e di altri esponenti dadaisti. Ne potevano nascere componimenti volutamente assurdi come <i>Anna Blume</i> di Schiwitters tra i cui versi d'amore si legge: "<em>Blu è il colore dei tuoi capelli gialli, rossa è la coda del tuo verde uccello</em>". </p>

Come puoi osservare, la prova prevedeva l’utilizzo di due grandezze di titoli (h1 e h2), comprese in un tag hgroup e una serie di altri elementi. 

Con il tag blockquote ho inserito un blocco per la citazione distaccato dal paragrafo. Il tag pre contenuto in blockquote, mi ha permesso invece di mantenere fede alla formattazione originale copiata/incollata nel codice HTML.

Ho scelto di utilizzare tutti i tag per grassetti e corsivi esclusivamente per dimostrarti che non vi è alcuna differenza fra il <b> e lo <strong>, e l’<em> e la <i>.

# Creare una pagina web in puro HTML – Il classico social (Parte 1)

Esercizio 1:  Formattare un testo

Prima di andare avanti, svolgi un altro piccolo esercizio:

  1. Create il titolo della tua pagina con il vostro nome e cognome;
  2. Crea un titolo più piccolo dove specifichi il tuo lavoro, la tua scuola o la tua università;
  3. Create un paragrafo dove scrivi il tuo luogo di residenza;
  4. Separa questa prima parte con una linea divisoria;
  5. Ora crea due o tre sezioni in cui vai ad inserire dei post separati da <hr> che rispondano alla domanda: “cosa ho imparato dall’ultimo articolo?”. Se vuoi, puoi inserire questa domanda subito dopo la linea divisoria e aggiornare la lista man mano che prosegui con la lettura della guida (te lo consiglio!).

Quello che stai realizzando è una pagina web che si rifà ai contenuti presenti nella pagina profilo di un classico social network, che chiamerò goliardicamente Il classico social. Nei prossimi articoli della Guida base all’HTML Il classico social verrà riempito con altri elementi fino a diventare una pagina profilo di tutto rispetto. Così facendo, potrai lavorare concretamente su un prodotto tutto sommato attuale e stimolante. Mi raccomando, non perderti i prossimi articoli!

PS: Per seguire gli aggiornamenti del Classico social, scarica la repository Github della Guida base all’HTML.