HTML 5
• Nuovo standard per la strutturazione di pagine/
applicazioni Web
• prima versione dello standard pubblicata
solo nel 2014
• Ancora non pienamente supportato dai
browser
Risorse per lo studente
• Queste slide rappresentano una sintesi (non
completa) di
http://www.w3schools.com/html/html5_intro.asp
• Testo di supporto: Dive Into HTML5 di Mike Pilgrim
http://diveinto.html5doctor.com/
HTML 5 - What’s new?
• Nuovi tag semantici per la strutturazione del
testo
• Miglioramento dei form online
• Tag per il supporto di audio e video
• Grafica e animazione in Javascript via Canvas
• Geolocalizzazione
•…
HTML 5 - Cosa cambia?
• Si semplifica il DOCTYPE in
<!DOCTYPE html>
• Si semplifica la dichiarazione della codifica dei
caratteri (charset) in
<META charset=”nome charset”>
HTML 5 - Cosa cambia?
• Si semplifica il DOCTYPE in
<!DOCTYPE html>
• Si semplifica la dichiarazione della codifica dei
caratteri (charset) in
<META charset=”nome charset”>
Es. <META charset=”UTF-8”>
Dichiarazione per codifica UNICODE
Struttura minimale di un
documento HTML 5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titolo del documento</title>
</head>
<body>
Contenuto del documento
</body>
</html>
Tag da non usare in
HTML 5
Tag rimossi dallo
standard perché poco
usati nelle precedenti
versioni di HTML
Si migliora il
disaccoppiamento
contenuto
presentazione
Nuovi tag semantici
• specificano chiaramente a browser e web
developer il loro significato
Es. Tag non semantici: <div>, <span>
Es. Tag semantici: <table>, <img>
• HTML5 offre nuovi tag semantici per la
strutturazione del documento HTML
Es.: <article>, <header>,…
• Si evita di organizzare la struttura mediante
blocchi <div> (e.g. <div id=”header”> … </div>)
Nuovi tag semantici
Nuovi tag semantici
• Attenzione: i tag semantici visti indicano solo il
significato di un dato blocco di codice HTML, ma
non non implementano nessun layout predefinito.
Es.: Un blocco <aside> elementi </aside> non
collocherà automaticamente i suoi elementi su
di un lato della finestra del browser.
• Per implementare un layout è necessario
assegnare agli elementi semantici delle
opportune regole css
Layout via tag semantici
<!DOCTYPE html>
<html>
<title>Esempio layout HTML5</title>
<meta charset="utf-8">
<link href="stile.css" rel="stylesheet" type="text/css">
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li><a href="http://www.cnn.it">News</a></li>
<li><a href="http://www.ilmeteo.it">Weather</a></li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
</section>
<footer>
<p>Copyright 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>
Layout via tag semantici
<!DOCTYPE html>
<html>
<title>Esempio layout HTML5</title>
<meta charset="utf-8">
<link href="stile.css" rel="stylesheet" type="text/css">
HTML per definire
contenuto e struttura
<body>
<header>
<h1>Monday Times</h1>
</header>
logica
<nav>
<ul>
<li><a href=“http://www.mysite.com/news”>News</a></li>
<li><a href=“http://www.mysite.com/meteo“>Weather</a></li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
</section>
<footer>
<p>Copyright 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>
Layout via tag semantici
body {
font-family:Verdana,sans-serif;font-size:0.8em; CSS per la definizione
}
header,footer,section,article { del layout di pagina
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444444;margin-bottom:5px;
}
section {
background-color:#dddddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
Layout via tag semantici
body {
font-family:Verdana,sans-serif;font-size:0.8em; CSS per la definizione
}
header,footer,section,article { del layout di pagina
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444444;margin-bottom:5px;
}
section {
background-color:#dddddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
Tag <video>
• Usato per includere video in una pagina HTML
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• Formati generalmente supportati dai browser
• MP4
• OGG
Tag <video>
• Usato per includere video in una pagina HTML
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
attributi width e height usati per
dimensionare il video
Tag <video>
• Usato per includere video in una pagina HTML
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
attributo controls usato per
mostrare i controlli video (play,
pause,…)
Tag <video>
• Usato per includere video in una pagina HTML
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Tag source usato per caricare un
video.
Ci possono essere più source, in
questo caso il browser carica il
primo formato video supportato
Tag <video>
• Usato per includere video in una pagina HTML
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Il testo è visualizzato se non è
possibile riprodurre il video.
altri attributi di <video>
il video viene riprodotto
autoplay appena caricato
loop manda in loop il video
muted elimina l’audio
permette di visualizzare
l’immagine all’indirizzo URL
poster=”URL” mentre il video si sta
caricando e finché l’utente
non avvia il video
Tag <audio>
• Usato per includere file audio in una pagina
HTML
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio eleme
</audio>
• Formati generalmente supportati dai browser
• MP3
• WAV
• OGG
alcuni attributi di <audio>
il file audio viene riprodotto
autoplay appena caricato
loop manda in loop il file audio
muted elimina l’audio
HTML5 Canvas
• Un HTML Canvas permette di definire un’area
sulla finestra del browser nella quale inserire
grafica ed animazioni
• tipicamente gli elementi grafici e le animazioni
in un canvas sono specificate mediante codice
Javascript.
<canvas id="myCanvas" width="200" height="100" >
</canvas>
HTML5 Canvas
• Un HTML Canvas permette di definire un’area
sulla finestra del browser nella quale inserire
grafica ed animazioni
• tipicamente gli elementi grafici e le animazioni
in un canvas sono specificate mediante codice
Javascript.
<canvas id="myCanvas" width="200" height="100" >
</canvas>
Dimensioni del canvas
in pixel
HTML5 Canvas
function drawBall() {
// Clear the board.
ctx.clearRect(0,0,boardX,boardY);
// Fill the board.
ctx.fillStyle = "pink";
ctx.beginPath();
ctx.rect(0, 0, boardX, boardY);
ctx.closePath();
ctx.fill();
.
.
.
HTML5 Canvas
function drawBall() {
// Clear the board.
ctx.clearRect(0,0,boardX,boardY);
// Fill the board.
ctx.fillStyle = "pink";
ctx.beginPath();
ctx.rect(0, 0, boardX, boardY);
ctx.closePath();
ctx.fill();
.
.
. Prossimamente, in
questo corso…
