Inserimento di elementi di testo HTML

Al suo principio l'Html era utilizzato, causa le scarse confronto alle odierne tecnologie, come sistema di scambio di informazioni testuali.

Nonostante le appena citate "evoluzioni della specie", un'eredità che ci viene lasciata è quella di poter utilizzare elementi di testo. Possiamo considerare tre diversi gruppi di elementi di testo:

1. Titoli
2. Paragrafi
3. Elenchi

Tutti con diverse sfaccettature e differenze tra loro e nell'ambito degli stessi.

Inserimento di Titoli

Abbiamo 5 livelli di titoli, tutti definibili allo stesso modo, l'unica differenza che intercorre tra loro è la dimensione del carattere, 1 più grande in assoluto a 5 più piccolo in assoluto.

Vediamo un esempio:

<h1>Titolo di primo livello</h1>

<h2>Titolo di secondo livello</h2>

<h3>Titolo di terzo livello</h3>

<h4>Titolo di quarto livello</h4>

<h5>Titolo di quinto livello</h5>

Nota: gli esempi forniti nella parte iniziale di questo manuale sono solo di natura didattica e privi di uno sbocco pratico, più avanti, acquisite le nozioni più importanti, gli esempi che ci si troverà ad implementare troveranno applicabilità e concretezza.

Ci troviamo di fronte ad un Tag non vuoto, cioè che richiede la chiusura dello stesso, cioè ad <h1> corrisponde </h1> e tutto quello che vi si trova in mezzo farà parte del titolo di primo livello (in questo caso) di cui sopra.

Un Tag chiuso crea un'interruzione di riga, ovvero manderà a capo un prossimo elemento Html.

C'è poi da dire che, e questo vale per tutti gli elementi Html di questo tipo, non c'è differenza tra

<h1>Titolo di primo livello</h1>

e

 <h1> Titolo di primo livello </h1>

è a libera discrezione dello sviluppatore indentare (formattare, giustificare, scrivere come vi pare) il codice, purchè risulti chiaro e leggibile., pronto quindi ad essere agevolmente corretto o modificato.

Inserimento di Paragrafi

Nello stesso modo in cui si lavora per i titoli è possibile lavorare per i paragrafi, utilizzando il Tag <p> e </p>.

Vediamo un esempio:

<p>
Questo è un paragrafo ... ... ...
</p>

Per questo Tag consiglio l'indentatura del tipo dell'esempio presentato, cioè mandando a capo il Tag di apertura, il testo, poi il Tag di chiusura, dato che si presume che un paragrafo sia abbastanza lungo da far risultare più comoda la sua stesura in questo modo.

Per quanto riguarda il ritorno a capo sulla pagina, il browser manda automaticamente a capo il testo appena finisce lo spazio a disposizione, ovvero alla fine della pagina Hrml fisica.

Si provi a sostituire nella pagina di esempio il testo di esempio con un passo della Divina Commedia, una barzelletta o comunque un testo abbastanza lungo, scrivendolo nel codice su di una sola riga, e poi a verificarne il risultato.

Inserimento di elenchi puntati e numerati

E' possibile creare elenchi e liste ordinate, come in un normale word processor, iniziamo a vedere come si crea un elenco puntato e su quali caratteristiche possiamo lavorare:

<ul>
  <li>Prima voce dell'elenco puntato</li>
  <li>Seconda voce dell'elenco puntato</li>
  <li>Terza voce dell'elenco puntato</li>
</ul>

La chiusura del Tag <li> è opzionale, ne è tuttavia, per una questione di correttezza sintattica, consigliato l'utilizzo.

Possiamo agire sul puntatore dell'elenco modificandone l'aspetto, utilizzando l'attributo type nel Tag ul: per default il suo valore è disc che può essere modificato in circle (cerchio vuoto) o square (quadrato pieno):

<ul type="circle">
  <li>Prima voce dell'elenco puntato</li>
  <li>Seconda voce dell'elenco puntato</li>
  <li>Terza voce dell'elenco puntato</li>
</ul>

<ul type="square">
  <li>Prima voce dell'elenco puntato</li>
  <li>Seconda voce dell'elenco puntato</li>
  <li>Terza voce dell'elenco puntato</li>
</ul>

E' possibile nidificare gli elenchi puntati ed ottenere un effetto grafico e funzionale ad alto livello:

<ul>
  <li>Prima voce dell'elenco puntato</li>
    <ul>
      <li>Prima sottovoce dell'elenco puntato</li>
      <li>Seconda sottovoce dell'elenco puntato</li>
      <li>Terza sottovoce dell'elenco puntato</li>
    </ul>
  <li>Seconda voce dell'elenco puntato</li>
  <li>Terza voce dell'elenco puntato</li>
</ul>

Poco differenti dagli elenchi puntati sono gli elenchi numerati, la sintassi è la stessa e le regole di formattazione sono pressochè identiche, l'unico cambiamento è l'utilizzo del Tag <ol> invece di <ul>:

<ol>
  <li>Prima voce dell'elenco numerato</li>
  <li>Seconda voce dell'elenco numerato</li>
  <li>Terza voce dell'elenco numerato</li>
</ol>

Anche qui possiamo agire sul puntatore dell'elenco modificandone l'aspetto, utilizzando l'attributo type nel Tag ol: per default il suo valore è 1 che può essere modificato in a (elenco alfabetico in minuscolo), A (elenco alfabetico in maiuscolo) ed I (elenco con numeri romani):

<ol type="a">
  <li>Prima voce dell'elenco numerato</li>
  <li>Seconda voce dell'elenco numerato</li>
  <li>Terza voce dell'elenco numerato</li>
</ol>

<ol type="A">
  <li>Prima voce dell'elenco numerato</li>
  <li>Seconda voce dell'elenco numerato</li>
  <li>Terza voce dell'elenco numerato</li>
</ol>

<ol type="I">
  <li>Prima voce dell'elenco numerato</li>
  <li>Seconda voce dell'elenco numerato</li>
  <li>Terza voce dell'elenco numerato</li>
</ol>

Possiamo stabilire l'inizio dell'elenco numerato, o quel che sia, utilizzando l'attributo start nel Tag ol, possiamo quindi, ad esempio, stabilire di far partire un elenco numerato da 5:

<ol start="5">
  <li>Quinta voce dell'elenco numerato</li>
  <li>Sesta voce dell'elenco numerato</li>
  <li>Settima voce dell'elenco numerato</li>
</ol>

Altri elementi di testo

Non sono finiti gli elementi di testo che troviamo in Html, esamineremo ora i più usati:

<tt>
<address>
<cite>
<div>
<span>

Si tratta di Tag che prevedono una chiusura.

Vediamo un esempio globale con spiegazione inclusa:

<tt>Testo a spaziatura fissa, non fa differenza 
tra lettere di dimensioni diverse come la "m" o la "l"</tt>

<address>Usato per un indirizzo o per una firma</address>

<cite>Usato per una citazione, include il testo in corsivo</cite>

<div>Usato per i fogli di stile Css</div>

<span>Usato per i fogli di stile Css, non prevede ritorno a capo</span>

Nella prossima lezione vedremo tutti i metodi per dare un'estetica al testo e tutti i trucchi per ottenere, con pochi comandi, una formattazione ed una visualizzazione corretta dello stesso.

Autore: Luca Ruggiero