Gestire il testo in HTML5 (terza parte)
Il nuovo HTML, oltre ad aggiungere elementi inediti, ha rinnovato il significato semantico e talvolta il meccanismo di funzionamento di alcuni tag storici. Un esempio concreto è costituito dalle liste ordinate che adesso è possibile invertire tramite l’attributo reverse.
Il tag <ol>
Le liste ordinate, sono uno strumento per organizzare delle informazioni in elenchi progressivi. Abbiamo un tag genitore <ol> riferito alla lista, e vari tag figli <li>, desinati a specificare le singole voci che la compongono. Inoltre possiamo, tramite appositi attributi, specificare in che modo vogliamo ordinare l’elenco. Per cui, volendo ad esempio elencare gli episodi della prima stagione del telefilm Colombo, potremmo usare un listato di questo tipo:
<!DOCTYPE html>
<html lang="it">
<head>
<title>La prima serie Colombo</title>
<meta charset="ISO-8859-1">
</head>
<body>
<article>
<h3>La prima serie di Colombo</h3>
<ol type="1">
<li>Murder by the Book - 1971</li>
<li>Death Lends a Hand - 1971</li>
<li>Dead Weight - 1971</li>
<li>Suitable for Framing - 1971</li>
<li>Lady in Waiting - 1971</li>
<li>Short Fuse - 1972</li>
<li>Blueprint for Murder - 1972</li>
</ol>
</article>
</body>
</html>
Così facendo avremo una numerazione progressiva associata ad ogni voce.
L’attributo type ci consente di specificare le caratteristiche della lista. Il valore “1” indica una sequenza numerica, “a” una progressione di lettere minuscole, “A” le lettere maiuscole, “i” la numerazione romana minuscola ed infine “I”, la numerazione romana maiuscola. In altre parole, valgono le stesse regole viste per il vecchio HTML. Le novità introdotte sono due:
- La reintroduzione dell’attributo start precedentemente deprecato,
- l’introduzione del nuovo attributo reverse.
Vediamoli nel dettaglio riprendendo l’esempio precedente. Supponiamo di voler elencare in modo rigoroso, le apparizioni televisive di Colombo. Volendo essere precisi, anche se la prima serie comincia a partire dall’episodio Murder by the Book, che in Italia è stato tradotto come Un giallo da manuale (e che vede alla regia un giovanissimo Spielberg), ci sono due piloti girati precedentemente. Per cui potremmo riscrivere il codice precedente in questo modo:
<!DOCTYPE html>
<html lang="it">
<head>
<title>La prima serie Colombo</title>
<meta charset="ISO-8859-1">
</head>
<body>
<article>
<h3>La prima serie di Colombo</h3>
<ol type="1" start="3">
<li>Murder by the Book - 1971</li>
<li>Death Lends a Hand - 1971</li>
<li>Dead Weight - 1971</li>
<li>Suitable for Framing - 1971</li>
<li>Lady in Waiting - 1971</li>
<li>Short Fuse - 1972</li>
<li>Blueprint for Murder - 1972</li>
</ol>
</article>
</body>
</html>
Con questa sintassi, abbiamo stabilito che il primo elemento della lista, corrispondente alla terza apparizione di Colombo, deve essere connotato dal numero 3. Gli episodi successivi saranno subordintai a questo nuovo ordine numerico.
Per quanto riguarda il nuovo attributo reversed, si tratta, come suggerisce la parola, di una semplice inversione di ordine. Supponiamo di voler ordinare l’elenco completo degli episodi a partire dalla data più recente.
<!DOCTYPE html>
<html lang="it">
<head>
<title>La prima serie Colombo</title>
<meta charset="ISO-8859-1">
</head>
<body>
<article>
<h3>La prima serie di Colombo</h3>
<ol type="1" reversed>
<li>Prescription: Murder - 1968</li>
<li>Ransom for a Dead Man - 1971</li>
<li>Murder by the Book - 1971</li>
<li>Death Lends a Hand - 1971</li>
<li>Dead Weight - 1971</li>
<li>Suitable for Framing - 1971</li>
<li>Lady in Waiting - 1971</li>
<li>Short Fuse - 1972</li>
<li>Blueprint for Murder - 1972</li>
</ol>
</article>
</body>
</html>
In questo caso, pur restando invariata la lettura sequenziale delle informazioni, abbiamo un’ordine numerico invertito in una sorta di conto alla rovescia.
Il tag <a>
Un’altra piccola novità riguarda la gestione delle ancore. Nelle versioni precedenti del linguaggio a marcatori, il w3c sconsigliava la creazione di collegamenti ipertestuali che inglobassero altri elementi. Inoltre anche se era possibile poter rendere cliccabili più elementi contemporaneamente, talvolta, usando le pseudoclassi si poteva avere qualche piccolo inconveniente di compatibilità con alcuni browser. Oggi, la possibilità di incorporare in un solo collegamento ipertestuale più elementi è ufficialmente riconosciuta dal w3c. L’unico limite a questa regola, riguarda la possibilità di includere altri oggetti interattivi come ad esempio pulsanti o link. Volendo fare un esempio al volo, potremmo usare il codice precedente per rendere linkabile il titolo, la lista ed eventuali immagini.
<!DOCTYPE html>
<html lang="it">
<head>
<title>La prima serie Colombo</title>
<meta charset="ISO-8859-1">
<style>
.linkabile{
text-decoration:none;
color:#ffffff;
font-family:verdana;
}
.art1{
margin: 2px;
width: 340px;
padding:10px;
background-color: #228899;
}
.lista{
font-size:small;
}
.foto{
padding-left:20px;
}
</style>
</head>
<body>
<article>
<a href="http://goo.gl/tz0ttI">
<h3>La prima serie di Colombo</h3>
<img src="columbo.jpg">
<ol type="1">
<li>Prescription: Murder - 1968</li>
<li>Ransom for a Dead Man - 1971</li>
<li>Murder by the Book - 1971</li>
<li>Death Lends a Hand - 1971</li>
<li>Dead Weight - 1971</li>
<li>Suitable for Framing - 1971</li>
<li>Lady in Waiting - 1971</li>
<li>Short Fuse - 1972</li>
<li>Blueprint for Murder - 1972</li>
</ol>
</a>
</article>
</body>
</html>
Come è possibile notare osservando l’esempio, attraverso l’uso di una sola ancora, abbiamo linkato tutti gli elementi presenti nell’articolo.
<time>
Il nuovo elemento time, è nato per rappresentare in modo specifico orari e date espressi nel calendario gregoriano introdotto nel 1582. Di conseguenza sono ammesse tutte le date tranne quelle precedenti al 1582. Attraverso i suoi attributi possiamo creare un riferimento temporale legato ad un evento qualsiasi, oppure alla data di pubblicazione del documento. Nel primo caso possiamo ricorrere all’attributo datetime, il quale specifica una data nel formato anno-mese-giorno.
Ad esempio, potremmo usare un codice di questo tipo:
<p>In occasione del
<time datetime="2016-06-10">prossimo campionato europeo di calcio</time>,
la nostra agenzia di viaggi preparerà una serie di pacchetti vacanza.
</p>
Per specificare in modo preciso la data esatta in cui si svolgerà il prossimo campionato europeo di calcio che si terrà il prossimo dieci Giugno del 2016. Il valori da passare all’attributo sono del tipo: anno – mese – giorno.
L’attributo pubdate ha un meccanismo identico. In quel caso però, la data si riferisce alla pubblicazione del documento HTML e non ad un evento temporale generico. Ad esempio, questo codice:
<small>pubblicato<time pubdate="2013-08-10">due giorni fa</time></small>
Associa al termine generico “due giorni fa” un riferimento temporale preciso.
Volendo possiamo anche associare un orario attraverso la sintassi ora:minuti:secondi. Per fare un esempio concreto riprendiamo il codice usato per le ancore:
<!DOCTYPE html>
<html lang="it">
<head>
<title>La prima serie Colombo</title>
<meta charset="ISO-8859-1">
<style>
h3{
padding-left:20px;
}
.linkabile{
text-decoration:none;
color:#ffffff;
font-family:verdana;
}
.linkabile:hover{
opacity: 0.8;
}
.art1{
margin: 2px;
width: 340px;
padding:10px;
background-color: #228899;
}
.lista{
font-size:small;
}
.foto{
padding-left:20px;
}
small{
padding-left:20px;
color:#eeeeee;
}
</style>
</head>
<body>
<article>
<a href="http://goo.gl/tz0ttI">
<h3>La prima serie di Colombo</h3>
<img src="columbo.jpg">
<ol type="1">
<li>Prescription: Murder -<time datetime="1968-02-20">1968</time></li>
<li>Ransom for a Dead Man -<time datetime="1971-03-01">1971</time></li>
<li>Murder by the Book -<time datetime="1971-09-15">1971</time></li>
<li>Death Lends a Hand -<time datetime="1971-10-06">1971</time></li>
<li>Dead Weight -<time datetime="1971-10-27">1971</time></li>
<li>Suitable for Framing -<time datetime="1971-11-17">1971</time></li>
<li>Lady in Waiting -<time datetime="1971-12-15">1971</time></li>
<li>Short Fuse -<time datetime="1972-01-19">1972</time></li>
<li>Blueprint for Murder -<time datetime="1972-02-09">1972</time></li>
</ol>
</a>
<small>pubblicato <time pubdate="2013-08-10T19:21:00">il 10 Agosto</time></small>
</article>
</body>
</html>
Nel codice di esempio, abbiamo usato il tag <time> per indicare la data esatta in cui sono stati trasmessi gli episodi e, nella parte finale, un riferimento alla data e all’ora di pubblicazione e del file. E con questo pezzo si conclude la parte introduttiva dei miei appunti online. A partire dal prossimo articolo, cominceremo ad affrontare le funzioni più interessanti (e divertenti) messe a disposizione dall’HTML5.
