Scribd
Carica
125 visualizzazioni

Slide HTML 5

Caricato da

Antonio Pio Tufo
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
125 visualizzazioni

Slide HTML 5

Caricato da

Antonio Pio Tufo
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 27

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…

Potrebbero piacerti anche