Slide HTML 5

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>
</article>
</section>
<footer>
<p>Copyright 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>
<!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>
</article>
<article>
</article>
</section>
<footer>
<p>Copyright 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
</html>
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;
}
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>

</video>
attributi width e height usati per

dimensionare il video
Tag <video>

</video>
attributo controls usato per

mostrare i controlli video (play,
pause,…)
Tag <video>

</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>

</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…

Slide HTML 5

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Slide HTML 5

Caricato da

Copyright:

Formati disponibili

HTML 5

• Nuovo standard per la strutturazione di pagine/

• prima versione dello standard pubblicata

• Ancora non pienamente supportato dai

• Queste slide rappresentano una sintesi (non

• Testo di supporto: Dive Into HTML5 di Mike Pilgrim

• Miglioramento dei form online

<META charset=”nome charset”>

<META charset=”nome charset”>

Dichiarazione per codifica UNICODE

• HTML5 offre nuovi tag semantici per la

• Si evita di organizzare la struttura mediante

• Per implementare un layout è necessario

<video width="320" height="240" controls>

• Formati generalmente supportati dai browser

<video width="320" height="240" controls>

attributi width e height usati per

<video width="320" height="240" controls>

attributo controls usato per

<video width="320" height="240" controls>

<video width="320" height="240" controls>

Il testo è visualizzato se non è

loop manda in loop il video

muted elimina l’audio

• Formati generalmente supportati dai browser

il file audio viene riprodotto

loop manda in loop il file audio

muted elimina l’audio

• tipicamente gli elementi grafici e le animazioni

<canvas id="myCanvas" width="200" height="100" >

• tipicamente gli elementi grafici e le animazioni

<canvas id="myCanvas" width="200" height="100" >

Dimensioni del canvas

// Clear the board.

// Fill the board.

// Clear the board.

// Fill the board.

Potrebbero piacerti anche