Introduction à HTML 5

Introduction
à
M. Abdoulaye DIENG Jan 20171

Objectif général
Découvrir quelques nouveautés du HTML5
2

Objectifs opérationnels
• Connaître les avantages du HTML5
• Utiliser les nouveaux éléments de structuration
• Utiliser les nouveaux éléments conteneurs
• Utiliser les nouveaux éléments de contenu
incorporé
• Utiliser les nouveaux éléments et attributs de
formulaire
3

Sommaire
1. Présentation de HTML5
2. Avantages du HTML5
3. Squelette de base
4. Éléments de structuration
5. Éléments conteneurs
6. Éléments de contenu incorporé
7. Éléments et attributs de formulaire
4

Présentation de HTML5
• HTML5 (HyperText Markup Language 5) est la dernière
révision majeure du standard HTML
• HTML5 est finalisé en octobre 2014 par le WHATWG (Web
Hypertext Application Technology Working Group) et le W3C
(World Wide Web Consortium)
• HTML5 se focalise sur les applications Web et l'interactivité,
sans toutefois délaisser l'accessibilité et la sémantique.
• HTML5 se positionne également comme concurrent des
technologies Flash, Silverlight et mobiles (natives)
• Tous les navigateurs ne supportent pas toutes les
fonctionnalités offertes par HTML5.
Vérifier le support sur : http://caniuse.com/
5

Avantages du HTML 5
• Pour le développeur :
– code plus léger
– validation intégrée de formulaire
– facilité de mettre des animations
– beaucoup d’API JavaScript intégrées
• Pour l’internaute :
– chargement plus rapide des pages
– formulaires plus efficaces et plus faciles à utiliser
– pas besoin de plugin pour les animations
– augmentation de l’UX (drag&drop, webcam, geoloc., etc.)
6

Squelette de base du HTML 5
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title> Titre de la page </title>
</head>
<body>
contenu de la page
</body>
</html>
7

Éléments de structuration
schéma
8

section
• Utilisé pour regrouper des éléments différents, mais
partageant la même thématique.
• section est équivalent (ou remplaçant) de div
• Définit les chapitres, en-têtes, pieds de page, ou toutes autres
sections du document.
9

section
<section>
<h2> Section 1 </h2>
<section>
<h3> Section 1.1 </h3>
<section>
<h4> Section 1.1.1 </h4>
</section>
</section>
</section>
<section>
<section>
<h3> Section 2.1 </h3>
<p>Lorem Ipsum Dolor Sit Amet.<p>
</section> 10

article
• Délimite du contenu ayant son propre sens indépendamment
du reste de la page
• Ce contenu est distribuable et réutilisable.
• Ce contenu peut être un billet de forum, un article de journal,
un gadget, un commentaire d'utilisateur.
11

article
<article>
<h2> titre de l'article </h2>
<section>
<p> lorem ipsum dolor …
</p>
</section>
…
</article>
12

nav
• Délimite des liens de navigation inter-pages ou intra-page
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="apropos.html">À propos</a></li>
<li><a href="services.html">Nos
services</a></li>
</ul>
</nav>
13

aside
• Encapsule du contenu supplémentaire relative à un article,
une section ou une page
• Peut être :
– un glossaire, une citation de l'article ou de la section
parent
– Liste de blogues lus, liens relatifs pour une page ou un site.
• Le contenu ne doit pas être nécessaire à la compréhension de
l'article, de la section ou de la page
14

aside
<article>
<h1>Titre de l'article</h1>
<section>
<h2>Section 1</h2>
<p> lorem ipsum dolor … </p>
</section>
<aside>
<h2>Glossaire</h2>
<dl>
<dt>mot 1</dt>
<dd>Lorem Ipsum Dolor Sit Amet</dd>
<dt>mot 2</dt>
<dd>Lorem ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
15

header
• Pour l'entête d'une section et/ou d'une page
• Peut contenir le titre principal h1 de la page, une table des
matières, un logo, un formulaire de recherche, etc.
• Possibilité d’avoir plusieurs header dans une page
16

header
<header>
<h1>Le titre le plus important de la
page</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Nos produits</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>Titre de cet article</h2>
</header>
<p>...Lorem Ipsum dolor set amet...</p> 17

footer
• Pied de page pour le premier ancêtre parent de type section
• Peut contenir l'information sur l'auteur et sur les droits
d'auteur
• Peut contenir des liens relatifs à la section, des liens vers la
carte du site, des liens vers le formulaire de contact, etc.
• Ces liens ne doivent pas être délimités par nav.
18

footer
<article>
contenu de l’article ….
<footer>
<p>Cet article a été écrit par …
Copyright © … </p>
<ul>
<li><a href="#">À propos</a></li>
<li><a href="#">Nous contacter</a></li>
</ul>
</footer>
</article>
19

Éléments conteneurs
figure et figcaption
• figure sert de conteneur dans lequel s'insèrent divers
éléments comme des images, des schémas, des diagrammes
ou du code.
• figcaption, enfant direct de figure, son rôle est de légender
son parent, sous forme de texte et/ou de liens.
• figcaption est facultatif et peut se placer avant ou après le
contenu principal de figure.
<figure>
<figcaption>Bobby, le chien de
Modou</figcaption>
<img src="bobby.jpg" width="304" height="228"
/>
</figure> 20

Éléments conteneurs
main
• Délimite le contenu principal du document ou de l'application.
• Ce contenu doit être unique dans le document, excluant tout
contenu qui est répété sur plusieurs documents comme des
barres latérales, liens de navigation, informations de
copyright, logo du site, et champs de recherche
• Un seul élément main dans un document
tp1
21

Éléments de contenu incorporé
video
• video permet d’intégrer une vidéo dans une page sans recourir
à un plugiciel
• L’attribut src : lien vers le fichier de la vidéo
• L’attribut autoplay : lecture automatique
• L’attribut loop : relecture automatique
• L’attribut poster : lien vers une image à présenter pendant que
la vidéo se charge ou si elle n'est pas disponible
• L’attribut controls : affichage des commandes de lecture
• L’attribut preload = auto|metadata|none : préchargement
– metadata : nom, format, taille, durée, …
– none : aucun
– auto (par défaut) : le navigateur décide s'il doit précharger
toute la vidéo, uniquement les métadonnées ou rien du tout22

video - formats et support
Chrome Firefox Opera Safari IE9+
WebM Oui Oui Oui Non Oui
mp4 Oui Non Non Oui Oui
Ogg Oui Oui Oui Non Non
• Il n'y a pas de format vidéo unique qui est supporté par
tous les navigateurs.
• Fournir plusieurs formats à la fois afin d'assurer le soutien
de lecture dans tous les principaux navigateurs.
Plateforme utile : http://www.online-convert.com/
• L’élément source, enfant de video, permet de fournir
plusieurs versions de la vidéo avec son attribut src.
23

video - exemple
<video preload="none" controls>
<source src="mon_film.mp4" type="video/mp4">
<source src="mon_film.ogv" type="video/ogg">
<source src="mon_film.webm"
type="video/webm">
Votre navigateur ne supporte pas la balise video.
</video>
tp2
24

audio
• audio permet d’intégrer de l’audio dans une page sans recourir
à un plugiciel
• L’attribut src : lien vers le fichier audio
• L’attribut autoplay : lecture automatique
• L’attribut loop : lecture en boucle
• L’attribut controls : affichage des commandes de lecture
25

audio - formats et support
Chrome Firefox Opera Safari IE9+
Wav Oui Non Oui Oui Oui
Mp3 Oui Non Non Oui Oui
Ogg Oui Oui Oui Non Non
Aac Oui Non Non Oui Non
• Il n'y a pas de format audio unique qui est supporté par
tous les navigateurs.
• Fournir plusieurs formats à la fois afin d'assurer le soutien
de lecture dans tous les principaux navigateurs.
• L’élément source, enfant de audio, permet de fournir
plusieurs versions de l’audio avec son attribut src.
26

audio - exemple
<audio controls="controls">
<source src="concerto_mozart.wav" type="audio/wav" />
<source src="concerto_mozart.ogg" type="audio/ogg" />
<source src="concerto_mozart.mp3" type="audio/mp3"
/>
<source src="concerto_mozart.aac" type="audio/aac" />
Votre navigateur ne supporte pas la balise audio.
</audio>
27

Éléments de formulaire
champ email
• Pour renseigner une ou plusieurs adresses e-mail.
• Ce champ attend au minium un caractère (caractère non
accentué comprenant les séparateurs tiret ou underscore)
suivi d'un @ suivi à son tour d'un caractère.
• Un navigateur de SmartPhone compatible avec ce type de
champ présentera un clavier adapté incluant les symboles . et
@.
<input type="email" name="votre_email" />
<input type="email" name="vos_emails[]"
multiple="multiple" />
28

champ url
• Pour renseigner une URL
• Tous les types d'URL sont admis (ftp://, mailto:, http://, …).
champ présentera un clavier adapté incluant les touches /, . et
.com.
<input type="url" name="votre_site" />
29

champ tel
• Pour renseigner un numéro de téléphone.
champ présentera un clavier de type numérique.
<input type="tel" name="votre_phone"
/>
30

champ date
• Pour renseigner une date
• Un navigateur compatible propose une aide au remplissage
<input type="date" name="date_naiss"
/> 31

champ number
• Pour renseigner une valeur numérique.
• Un navigateur compatible propose deux boutons permettant
l'incrémentation et la décrémentation d'une valeur
numérique initiale (0 par défaut).
• Un Smartphone compatible propose un clavier numérique.
• L’attribut step permet de modifier le pas (1 par défaut) de
l’incrémentation.
• Les attributs min et max permettent de limiter le nombre
dans un intervalle défini.
<input type="number" name="age"
/>
32

champ range
• Pour renseigner une valeur numérique dans un intervalle
donné.
• Un navigateur compatible propose un curseur.
• L’attribut step permet de modifier le pas (1 par défaut) de
l’incrémentation.
• Les attributs min et max permettent de limiter le nombre
dans un intervalle défini.
• Par défaut cet intervalle est [0; 100]
<input type="range" name="niveau"
/> 33

élément datalist
• datalist : délimite une liste de suggestions, liée à un
élément input.
34
• option : enfant de datalist, définit une suggestion comme
valeur de son attribut value
• Le champ (input) et la liste de suggestions (datalist + option)
sont reliés grâce à la valeur commune des attributs list de
l’input et id de la datalist.

élément datalist
<label for="a">Votre plat
préféré</label>
<input id="a" list="plat" />
<datalist id="plat">
<option value="tiébou dieune">
<option value="mafé">
<option value="thiou">
<option value="yassa">
<option value="cbon">
</datalist>
35

attribut autofocus
• Spécifie si le champ doit recevoir automatiquement le curseur
au chargement du formulaire
<form action="login.php">
Email : <input type="email" name="email"
autofocus><br>
Mot de
passe: <input type="password" name="pass"><br>
<input type="submit" value="Connexion" >
</form>
36

attribut placeholder
• Permet d’afficher une valeur indicative dans un champ de
texte
• Quand l’utilisateur clique dans le champ, contrairement à ce
qui se passe avec l’attribut value, le contenu disparaît.
• La valeur indicative n'est pas transmise lors de la soumission
du formulaire.
• NB : La présence d'un placeholder ne dispense pas de
renseigner un label pertinent.
<input type="text" placeholder="Votre pseudonyme"
name="pseudo"/>
37

attribut required
• Permet de rendre obligatoire le remplissage d'un champ et de
bloquer la validation du formulaire si l'un des champs
(concernés par cet attribut) n'a pas été renseigné.
• NB : L'attribut required ne dispense pas de rajouter, pour
chaque champ obligatoire, dans l'étiquette associée une
astérisque et de faire précéder le formulaire du message
« Les champs indiqués par une * sont obligatoires ».
<input type="text" required="required"
name="pseudo"/>
38
tp3

Introduction à HTML 5

Contenu connexe

Tendances

En vedette

Similaire à Introduction à HTML 5

Plus de Abdoulaye Dieng

Introduction à HTML 5

Notes de l'éditeur