HTML5 ha introdotto nuovi elementi, alcuni già visti nella lezione precedente (elementi semantici). Qui ne vediamo altri che non riguardano la struttura ma che servono a migliorare e potenziare i contenuti.
Indice dei contenuti
<time>...</time>
L'elemento time demarca la data e l'ora su un orologio con formato 24 ore.
Viene dunque usato per esprimere data ed ora, se non è inserito all'interno di un elemento <article> farà riferimento alla data e all'ora dell'intero documento. Ha attributi opzionali come datetime che riporta data ed ora nel formato ISO. Usando questo elemento sarà possibile passare il dato ad un sistema automatico e renderlo visibile per l'utente.
La data viene espressa inserendo prima l'anno (2013), poi il mese (01), ed infine il giorno (13) separati dal trattino - (meno).
Volendo aggiungere anche l'ora si dovrà inserire a fine data una T seguita da ore, minuti e fuso orario separati dai : (due punti).
Questo il risultato:
<mark>...</mark>
L'elemento mark demarca una parte di testo del documento.
Viene dunque usato per evidenziare parti di testo che per qualche motivo necessitano di essere poste in evidenza, alcuni browser mostrano questo testo in grassetto, altri lo evidenziano pennellandolo di giallo.
Questo il risultato:
<figure>...</figure>
L'elemento figure demarca un insieme di contenuti autonomi quali: immagini grafiche, fotografie, listati, diagrammi ecc. che possono essere anche spostati su altre pagine o parti diverse della stessa pagina perchè considerati di poca importanza e di conseguenza non alterano il senso del testo che li citava.
<img src="forum.png" alt="Forum di web-link">
</figure>
Anche parti di codice che non incidono col contenuto della pagina
Questa pagina è esclusiva proprietà di © Andrea Bianchi <a href="http://www.web-link.it">Web-Link.it</a> 1997 ~ 2013
</figure>
<figcaption>...</figcaption>
L'elemento figcaption serve per inserire una didascalia, un titolo, una descrizione e deve essere necessariamente inserito all'interno dell'elemento figure visto sopra dal momento che questa didascalia riguarda solo ed esclusivamente quanto contenuto in <figure>.
<img src="forum.png" alt="Forum di web-link">
<figcaption> Logo del forum di web-link <figcaption>
</figure>
Più immagini ed una sola didascalia
<img src="foto1.png" alt="Foto1"><img src="foto2.png" alt="Foto2"><img src="foto3.png" alt="Foto3">
<figcaption>Una sola descrizione per le tre immagini sopra<figcaption>
</figure>
<ruby>...</ruby> <rt>...</rt> <rp>...</rp>
L'elemento <ruby> in giapponese - furigana e romaji, insieme a <rt> e <rp>servono per il supporto alle lingue orientali, servono per indicare la pronuncia corretta, li cito solo per informazione ma ritengo in questo contesto del tutto inutile approfondirli ulteriormente. <rt> acronimo di Ruby Text è utilizzabile all'interno di ruby per contrassegnare gli ideogrammi ruby. <rp> acronimo di Ruby Parenthesis è utilizzabile all'interno di ruby per circoscrivere le annotazioni ideogrammi ruby.
?????<rp>(</rp><rt>?????</rt><rp>)</rp>?????
</ruby>
Al posto dei punti interrogativi ????? ci saranno gli ideogrammi della lingua utilizzata.
<progress>...</progress>
L'elemento <progress> indica il progresso per il completamento di una attività, per esempio il caricamento di un file. Potrebbe però non essere conosciuto il suo valore per via di diversi fattori, per esempio essere in attesa di collegarsi al server dove si trova il file.
Ci sono due attributi che determinano il completamento dell'attività: valuespecifica la quantità di attività che è stata completata, max specifica quanto viene richiesto in totale. Il valore scritto all'interno del tag serve per i browser che non supportano progress.
Progress: <progress max="100">0%</progress>
</section>
Progress: <progress value="60" max="100">60%</progress>
</section>
E' possibile lasciare a javascript il compito di calcolare la progressione con questo script che è l'esempio ufficiale del W3C
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;}
</script>
<meter>...</meter>
L'elemento <meter> indica il valore di un indicatore quando i suoi valori di min.e max. sono conosciuti, non va confuso con progress visto sopra e di conseguenza non accetta valori in percentuale. Ci sono tre attributi per determinare la scala ed il suo valore: value, min , e max. Il valore scritto all'interno del tag serve per i browser che non supportano meter.
Per fare un esempio, si vogliono rappresentare graficamente 3 votazioni da 1 a 10
<meter min="0" max="10" value="8"> 8 di 10 </meter> Storia
<meter min="0" max="10" value="10"> 10 di 10 </meter> Geografia
<meter min="0" max="10" value="2"> 2 di 10 </meter> Matematica
</section>
<wbr>
L'elemento <wbr> (Word Break) inserito in una parola lunga indica il punto in cui è possibile ritornare a capo nel caso in cui la visualizzazione di quel testo fosse all'interno di una finestra del browser più ristretta rispetto a quella da noi prevista. Se infatti si prova a stringere o allargare la finestra del browser si noterà come i contenuti si ridispongano ogni volta per riempire tutto lo spazio, ci sono parole o frasi che vengono suddivise per il ritorno a capo in modo del tutto casuale, con <wbr> è invece possibile indicare al browser il punto in cui spezzare per tornare a capo.
Nel caso di un forzato ritorno a capo, la parola http://
Quindi: Nel caso di un ritorno
a capo, la parola http://
Web-Link.it può essere spezzata
Nella prossima lezione vedremo i nuovi elementi per i Moduli o Forms.
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.
