Oggi, seguendo la strada intrapresa col mio post precedente come introduzione all’HTML5, vorrei introdurre alcuni dei nuovi elementi che l’HTML5 ci mette a disposizione. I tag che oggi vedremo assieme sono solo alcuni tra i più famosi che HTML5 ci mette a disposizione. Ovviamente nelle prossime settimane cercherò di scendere sempre più nel dettaglio dei vari tag.
Il tag Canvas
L’elemento <canvas> è un contenitore per le sezioni grafiche. Il canvas è semplicemente la superficie sulla quale possiamo disegnare elementi grafici e inserire immagini. Esso offre la gestione di due attributi:
- width
- height
Chiaramente non si tratta di attributi obbligatori, poichè è anche possibile gestire le dimensioni con i CSS, però si consiglia di utilizzare questa via poichè altri metodi (vedi CSS) potrebbero distorcere il rendering con alcuni browser.
Creiamo il nostro primo Canvas:
[html]<html>
<head>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>[/html]
I disegni per il nostro primo canvas vengono effettuati dal codice “scripts.js”. Per creare forme ed effettuare disegni il canvas mette a disposizione un context che è il vero contenitore dei nostri elementi grafici. Per ottenere il context viene offerto il metodo getContext che, richiamato con un parametro, ci restituisce il nostro piano di disegno (pensiamo ad un disegnatore). Attualmente l’unico context offerto è “2d“.
Per entrare nel vivo dell’uso del canvas ti aspetto nel mio prossimo post.
Il tag Article
L’elemento
Un esempio:
[html]<article>
<p><a href="#">
Il titolo del mio post
Il mio articolo …</a></p>
</article>[/html]
I tag Audio e Video
Come per i due elementi precedenti, anche <audio> e <video> sono dei contenitori. Com’è chiaro, l’utilizzazione di questi due tag è legata alla riproduzione di elementi audio e video.
La sintassi:
[html]<video src="http://url-del-tuo-video">Codice per i browser che non supportano il tag</video>
<audio src="il-tuo-audio.mp3">Codice per i browser che non supportano il tag</audio>[/html]
Conclusione
Oggi ho voluto semplicemente introdurre pochi tag, in modo da non offrire troppo materiale da analizzare. La mia scelta è basata sul desiderio di voler approfondire bene i tag HTML5 uno ad uno con esempi e codice scaricabile.
Quindi, non perdere il prossimo articolo!
