HTML5

Live slides

https://slides.com/phra/html5/live

Francesco Soncina

https://github.com/phra

https://it.linkedin.com/in/phraa

Bachelor degree in Computer Science
Full Stack Developer
DevOps
SysAdmin
JavaScript Enthusiast

Abstract

HTML
HTML5

HTML

Struttura

Metadati

Contenuto

Formato

Sintassi

Testi

Contenitori

Utilizzati per dividere il contenuto in blocchi
Utilizzati per implementare il layout
Di default non hanno nessun stile applicato

div1

div2

div3

Tabelle

Pensate per presentare una collezione di dati in forma tabellare
In passato venivano usate anche per fare layout
Hanno una riga d'intestazione e più di contenuto

Liste

Lista ordinata

<ol>

Lista non ordinata

<ul>

<ol>
    <li>elemento</li>
    <li>elemento</li>
    <li>elemento</li>
</ol>

<ul>
    <li>primo elemento</li>
    <li>secondo elemento</li>
    <li>terzo elemento</li>
</ul>

Liste

Lista ordinata

<ol>

Liste

Lista non ordinata

<ul>

Links

<a href="#anchor">
    link to anchor</a>
<a href="relative.html">
    relative link</a>
<a href="../relative.html">
    relative link to parent dir</a>
<a href="/absolute.html">
    absolute link</a>
<a href="http://anothersite.com/page.html">
    link to another host</a>

Forms

Pensato per inviare dati al server
Racchiude tanti elementi input quanti i dati da inviare
Può avere degli elementi input invisibili
Ha un pulsante per l'invio dei dati
Di default utilizza il metodo HTTP POST

Inputs

Text: prende in input una stringa di testo
Password: prende in input una stringa di testo nascondendo a video il contenuto
Checkbox: permette di effettuare una selezione multipla
Radio: permette di effettuare una scelta mutualmente esclusiva
Image: permette di caricare un'immagine
File: permette di caricare un file generico
Hidden: permette di definire un campo invisibile
Submit: permette di inviare i dati del form al server
Reset: permette di resettare l'intero form

Inputs

Includere CSS inline

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>

        <p style="background-color: red;">Hello world!</p>

    </body>
</html>

Includere CSS embedded

<!doctype html>
<html>
    <head>
        ...

        <style>
            p {
                background-color: blue;
            }
        </style>
    </head>
    <body>

        <p>Hello world!</p>

    </body>
</html>

Includere CSS esterno

<!doctype html>
<html>
    <head>
        ...

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <!-- css/main.css
            p { background-color: black;} -->
    </head>
    <body>

        <p>Hello world!</p>

    </body>
</html>

Includere JS inline

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
        <button onclick="console.log('pulsante premuto!');">
        </button>
    </body>
</html>

Includere JS embedded

<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
        ...

        <script>
            console.log('console.log from JS embedded!');
        </script>
    </body>
</html>

Includere JS esterno

<!doctype html>
<html>
    <head>
        ...
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        ...

        <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
        <script>window.jQuery ||
            document.write(
                '<script src="js/vendor/jquery-1.12.2.min.js"><\/script>')
        </script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

Esempio

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Titolo</title>
        <meta name="description" content="Descrizione">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser.
            Please <a href="http://browsehappy.com/">upgrade your browser</a>
            to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>

        <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
        <script src="js/main.js"></script>

    </body>
</html>

HTML5

Storia

Pubblicato dal Web Hypertext Application Technology Working Group (WHATWG)
2008: primo working draft pubblico
2011: last call
2012: candidate recommendation
2014: proposed recommendation
2014: W3C recommendation

Novità

Progettato per rimpiazzare HTML4 e XHTML1
Pensato per più dispositivi
Utilizzato per applicazioni multipiattaforma
Focalizzato sull'aspetto semantico
Aggiunge nuovi elementi
Elimina alcuni elementi
Definisce nuove APIs

Nuovi attributi

async (<script>)
charset (<meta>)
id (globale)
tabindex (globale)
hidden (globale)
data-* (globale)

Nuovo doctype

<!DOCTYPE html>

Nuovi elementi

article
aside
audio
bdi
canvas
command
data
datalist
details
embed
figcaption

figure
footer
header
keygen
mark
meter
nav
output
progress
rp
rt

ruby
section
source
summary
time
track
video
wbr

Tags semantici HTML5

<section>

Definisce una sezione tematica del sito, tipicamente con un header
Utilizzato per esempio per separare la sezione principale, quella introduttiva oppure la sezione dei contatti

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

<article>

L'elemento <article> definisce un blocco di contenuto "isolato"
Un articolo solitamente non ha bisogno di altri elementi per essere significativo
Può essere usato per: forum posts, blog posts, newspaper articles

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop
    the degradation of our
    planet's natural environment,
    and build a future in which humans
    live in harmony with nature.</p>
</article>

<header>

L'elemento header dichiara il preambolo per un documento
L'elemento header dichiara il preambolo di una sezione o articolo
L'elemento header deve contenere i dati introduttivi alla sezione relativa
Possono esserci più elementi header in un documento

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop
    the degradation of our
    planet's natural environment,
    and build a future in which humans
    live in harmony with nature.</p>
</article>

<footer>

L'elemento footer definisce la parte finale di un documento
L'elemento footer definisce la parte finale di una sezione o articolo
Deve contenere dati relativi al blocco che chiude
Tipicamente un footer contiene l'autore, copyright, termini d'utilizzo

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information:
     <a href="mailto:someone@example.com">
      someone@example.com</a>
  </p>
</footer>

<nav>

L'elemento nav definisce un blocco di links per la navigazione
Pensato per grandi quantità di links
Non tutti i links di un documento devono essere in un nav!

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<figure> & <figcaption>

L'elemento figcaption definisce una descrizione testuale di una immagine
Si può utilizzare l'elemento figure per racchiudere immagine e didascalia.

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock"
    width="304" height="228">
  <figcaption>Fig1. - 
    The Pulpit Rock, Norway.</figcaption>
</figure>

<audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<video>

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

<canvas>

L'elemento canvas definisce un'area rettangolare nel documento
Permette di disegnare al suo interno tramite JavaScript
Può disegnare linee, rettangoli, cerchi, testo ed immagini

<canvas id="myCanvas" width="200"
    height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Esempio canvas

Elementi deprecati

acronym
applet
basefont
big
center
dir

font
frame
frameset
isindex
noframes
strike
tt

Nuove APIs

Nuovi tipi di inputs

color
date
datetime
datetime-local
email
month
number

range
search
submit
tel
time
url
week

Standards correlati

HTML Working Group – HTML Canvas 2D Context
Web Apps Working Group – Web Messaging, Web Workers, Web Storage, WebSocket, Server-sent events
IETF HyBi Working Group – WebSocket Protocol
WebRTC Working Group – WebRTC
Web Media Text Tracks Community Group – WebVTT
WHATWG: Microdata

Question time

Live coding

HTML5

By Francesco Soncina

HTML5

Francesco Soncina

Abstract

HTML

Struttura

Sintassi

Testi

Contenitori

Tabelle

Liste

Liste

Liste

Links

Forms

Inputs

Inputs

Includere CSS inline

Includere CSS embedded

Includere CSS esterno

Includere JS inline

Includere JS embedded

Includere JS esterno

Esempio

HTML5

Storia

Novità

Nuovi attributi

Nuovo doctype

Nuovi elementi

Tags semantici HTML5

<section>

<article>

<header>

<footer>

<nav>

<figure> & <figcaption>

<audio>

<video>

<canvas>

Esempio canvas

Elementi deprecati

Nuove APIs

Nuovi tipi di inputs

Standards correlati

Question time

Live coding

HTML5

More from Francesco Soncina