Formattare un testo

Formattare il testo di una pagina HTML è il modo migliore per prendere dimestichezza con i tag. Non dimenticate 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.

Differenza tra formattazione e semantica

In questa lezione andremo a riportare alcuni tag che formattano un testo; definiremo quindi una sorta di regola su come dovrà essere visualizzato. È bene sapere che alcuni dei tag che troveremo, pur essendo di default molto simili, avranno uno scopo semantico diverso. Questi tag permetteranno di specificare lo scopo per cui è stato creato quel dato elemento. Un tag quindi non racchiude sempre e solo una regola di formattazione, ma può rappresentare anche il “significato” dell’elemento che compone

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;
  • il testo in grassetto, che possiamo ottenere mediante l’utilizzo di due tag: <b> che sta per bold <strong> per strongly emphasized. Pur avendo di default una formattazione visivamente identica, <b> e <strong> nascondono una sottile differenza. Il tag <b> rappresenta una formattazione testuale priva di qualsiasi valore semantico, mentre il tag <strong> è utilizzato per quelle porzioni di testo che desideriamo enfatizzare fortemente. Nel primo caso quindi ci stiamo limitando ad applicare una semplice formattazione del testo, nel secondo invece intendiamo attribuire a quella formattazione un valore semantico;
  • il testo in corsivo, allo stesso modo del grassetto, può essere definito attraverso due tag visivamente simili: <i> e <em>. Il primo sta per italic, mentre il secondo per emphasized;
  • 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).

Vediamo di seguito degli esempi che vi mostrano come scrivere correttamente queste tipologie di liste:

Definizione e aspetto degli elementi

Esercizio per formattare un testo in HTML

Ora che abbiamo elencato i tag principali per formattare un testo in HTML, mettiamoci subito all’opera e cerchiamo di replicare questa formattazione:

[immagine testo]

Vi consiglio di mettervi alla prova subito, senza aspettare la soluzione che vi mostrerò a breve. Prendetevi il tempo che vi serve e cercate il più possibile di realizzare una formattazione quanto più fedele possibile a quella originale. Cercate inoltre di utilizzare i tag anche per avvalorare il senso del testo; quindi fate uso anche dello <strong> e del tag <em> per contrassegnare le parti che meritano di essere enfatizzate. 

Soluzione dell’esercizio per formattare un testo in HTML

Di seguito vi 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 potete vedere, l’esercizio prevedeva l’utilizzo di due grandezze di titoli (h1 e h2), comprese in un tag hgroup e una serie di altri elementi.  In questo esercizio potete percepire la differenza tra il semplice testo in grassetto e il testo fortemente enfatizzato. Quando riportiamo il nome del filosofo Tristan Tzara, il nostro scopo è quello di rendere semplicemente più evidente il nome. Quando invece desideriamo attribuire un’enfasi marcata al senso della sua opera, abbiamo utilizzato il tag <strong>.

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

Secondo lo stesso criterio che abbiamo attuato con l’utilizzo di <b> e <strong>, i tag <i> sono stati utilizzati per andare marcare all’interno del paragrafo i titoli delle opere (es. Anna Blume). Per le citazioni contenute nelle opere – che non necessitano di un blocco distaccato dal paragrafo – è stato fatto uso di <em> (es. Blu è il colore dei tuoi capelli gialli, rossa è la coda del tuo verde uccello). 

Sito Web Old School [Parte 1]

Esercizio 1:  Formattare un testo

Prima di andare avanti, vi suggerisco di svolgere un nuovo piccolo esercizio che forse potrà essere per alcuni di voi più interessante. Come vi avevo già anticipato all’inizio del corso, al termine di questa guida introduttiva, sarete in grado di creare il vostro sito web old school. Naturalmente intendo accompagnarvi nel corso di questo processo e perciò vi suggerisco di iniziare già da ora seguendo questi semplici passi, che non devono essere vincolanti, ma solo degli spunti per permettervi di fare anche altro:

  1. Create il titolo della vostra pagina con il vostro nome o nickname;
  2. Create un titolo più piccolo dove specificate il vostro lavoro, la vostra scuola o la vostra università;
  3. Create un paragrafo dove scrivete il vostro luogo di residenza;
  4. Separate questa prima parte con una linea divisoria;
  5. Ora create un terzo paragrafo dove potete descrivere in maniera più dettagliata la vostra biografia

Quello che state realizzando è il vostro sito web old school che si rifà al layout di un noto social utilizzato dai professionisti: Linkedin.

[Immagine linkedin con blocco evidenziato]

Nella prossima lezione vedremo delle tecniche di formattazione più avanzate come le liste. Seguiremo di pari passo il progredire delle lezioni e apporteremo di volta in volta degli aggiornamenti per lo sviluppo del nostro sito web old school.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *