Titoli e paragrafi
Quando si parla di contenuti html, partire dal testo è d’obbligo.
Si è già visto come qualunque testo, ad esclusione dei tag, venga inserito all’interno dell’elemento BODY viene visualizzato dal browser. Inserendo il testo in questo modo, però non hai la possibilità di definire nessun tipo di caratteristica di formattazione, neppure un invio a capo. Va, infatti, ricordato che all’interno del codice il browser non riproduce ne’ gli a capo in ASCII ne’ gli spazi aggiuntivi dopo il primo.
Ovviamente, esistono una serie di tag che permettono di ovviare a questo. Gli elementi di base che permettono di gestire i testi sono i titoli e i paragrafi.
I titoli sono una serie di tag da H1 (<h1>…</h1>) a H6 (<h6>…</h6>), che permettono di definire, per l’appunto, sei livelli di intestazioni (H sta per headers) all’interno del testo, essi non assumono attributi. L’elemento P (<p>…</ p>) può essere utilizzato per racchiudere un paragrafo di testo.
Ogni paragrafo è un elemento contenitore (al suo interno si potranno avere anche altri tag) che ha la caratteristica di lasciare un’interlinea doppia dopo di sé; l’attributo di P align può assumere come valori right (allineamento a destra), left (allineamento a sinistra), center (allineamento centrato).
Questi almeno sono le indicazioni del sito dell’ICANN https://it.wikipedia.org/wiki/ICANN
La visualizzazione di titoli e paragrafi – un ordine gerarchico alle sezioni della pagina
I sei livelli di intestazioni dell’HTML si distinguono tra di loro per il tipo di formattazione che impongono al testo, dal più al meno evidente. Utilizzare i titoli e i paragrafi permette già una prima organizzazione dei contenuti.
Ecco un esempio di codice (il testo dei paragrafi è stato tagliato per ragioni di spazio):
<hl>Titoli di livello 1</hl> <h2>Titolo di livello 2</h2> <h3>Titolo di livello 3</h3> <h4>Titolo di livello 4</h4> <h5>Titolo di livello 5</h5> <h6>Titolo di livello 6</h6> <h2>Paragrafo allineato a sinistra</h2> <p>Lorem ipsum … </p>
<h2>Paragrafo allineato a destra</h2>
<p align=”right”>Lorem ipsum …</p> <h2>Paragrafo centrato</h2>
<p align=”center”>Lorem ipsum …. </p>
Una questione di carattere
La divisione in paragrafi del testo è solo l’inizio: HTML è un potente strumento di impaginazione
Sono molti i tag che permettono di gestire la visualizzazione e la formattazione del testo. Alcuni molto semplici come ad esempio <br> (senza chiusura) che serve per inserire un invio a capo forzato all’interno del testo, oppure <hr> (senza chiusura) che serve a disegnare una linea retta orizzontale possono essere molto utili in fase di impaginazione. Per controllare la formattazione dei caratteri, si utilizza l’elemento FONT (<font>…</font>) che, grazie ai suoi attributi, permette di variare il tipo di carattere, la dimensione, il colore di una parte del testo. Ecco un esempio di tag font, nel box in questa sequenza trovi l’elenco degli attributi e la loro spiegazione:
<font color=”#CC3300″ size=”3″ face=”Arial, Helvetica, sans-serif”>
L’attributo color può assumere come valore il codice esadecimale o il nome di un colore; modifica il colore di visualizzazione del testo.
L’attributo size permette di modificare la dimensione del font utilizzato, può assumere un valore assoluto (da 1 a 7) o relativo (da -7 a +7) alla dimensione standard del carattere che è 3.
L’attributo face permette di modificare il tipo di font che viene utilizzato: può assumere come valore uno o più nomi di font separati da virgola.
Grassetti, corsivi & …
Riprodurre le possibilità di formattazione di un word processor in HTML
Ci sono tag specifici che permettono di modificare l’aspetto dei caratteri e spesso sono utilizzati anche per una sola parola. In particolare, è possibile attribuire a un testo lo stile grassetto (<b>…</b>), corsivo (<i>…</i>) oppure sottolinea-to (<u>…</u>).
Questi tag possono essere inseriti nel codice in modo nidificato, rendendo, ad esempio, lo stesso testo sia grassetto che sottolineato. Ad esempio:
<p>Questa è una frase di testo con una <i>parola</i> in corsivo e una <b><u>parola</u></b> in grassetto sottolineato.</p>
Esistono alcuni elementi particolari, poi, che permettono di definire stili particolari come BLOCKQUOTE (<blockquote>…</blockquote>) che si comporta come il paragrafo P, ma aggiungendo un’indentazione a destra e sinistra della frase. Un altro elemento poco utilizzato ma utile in molti casi è PRE (<pre>…</pre>) grazie a questo tag, tutto il testo inserito all’interno verrà visualizzato con un carattere monospaziato, rispettando gli spazi e gli a capo inseriti nel sorgente (questo è l’unico caso in cui avviene). Può servire per visualizzare tabelle ASCII o testo di codice.
Seguimi su questo sito lanciando un search #prosperica
