HTML 5
HyperText Markup Language 5
Module : Technologies web 1
AS:2022-2023
Enseignant : [Link] Ben 1
Harrath
Objectifs
Apprendre à créer des pages en langage HTML 5
Savoir les principaux apports de HTML5 par rapport à ses prédécesseurs
Enseignant : [Link] Ben 2
Harrath
PLAN
Structure d’un document HTML5
Une nouvelle sémantique
Les nouveaux éléments de formulaire
Les nouveaux éléments pour les médias
Web Storage
Géolocalisation
Plus d’APS
Enseignant : [Link] Ben 3
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben Harrath 4
Le DOCTYPE
HTML 4.01 Strict
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
Enseignant : [Link] Ben 5
Harrath
Nouvelle Structure
<div<header>
id="header">
<div class="article">
<article>
<div <div
<nav> <div <section>
id="content"> <aside>
id="nav"> id="right">
<div<footer>
id="footer">
Enseignant : [Link] Ben 6
Harrath
Structure d’un document HTML5
<header> l’en-tête
<footer> le pied-de-page
<nav> les principaux liens de navigation
Menus du site
<section> les parties thématiques de la page
<aside> les informations complémentaires
<article> Un article provenant d'une autre page
Enseignant : [Link] Ben 7
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 8
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 9
Harrath
Structure d’un document HTML5
❖ La plupart des sites web possèdent en général une en-tête.
❖ On y trouve le plus souvent
• un logo
• une bannière
• le slogan de votre site…
Enseignant : [Link] Ben 10
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 11
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 12
Harrath
Structure d’un document HTML5
❖ À l'inverse de l'en-tête, le pied de page se trouve en général
tout en bas du document.
❖ On y trouve des informations comme
• des liens de contact,
• le nom de l'auteur
• les mentions légales, etc...
Enseignant : [Link] Ben 13
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 14
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 15
Harrath
Structure d’un document HTML5
❖ Regrouper tous les principaux liens de navigation du site.
❖ Par exemple le menu principal de votre site
Enseignant : [Link] Ben 16
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 17
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 18
Harrath
Structure d’un document HTML5
❖ La balise <section> sert à regrouper des contenus en fonction
de leur thématique.
❖ Elle englobe généralement une portion du contenu au centre
de la page.
Enseignant : [Link] Ben 19
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben 20
Harrath
Structure d’un document HTML5
21
Enseignant : [Link] Ben Harrath
Structure d’un document HTML5
❖ La balise <aside> est conçue pour contenir des informations
complémentaires au document que l'on visualise.
❖ Ces informations sont généralement placées sur le côté
Enseignant : [Link] Ben Harrath 22
Structure d’un document HTML5
Enseignant : [Link] Ben 23
Harrath
Structure d’un document HTML5
Enseignant : [Link] Ben Harrath 24
Structure d’un document HTML5
❖ Englober une portion généralement autonome de la page.
❖ C'est une partie de la page qui pourrait ainsi être reprise sur
un autre site.
❖ Les actualités
❖ articles de journaux ou de blogs
Enseignant : [Link] Ben Harrath 25
Structure d’un document HTML5
Enseignant : [Link] Ben Harrath 26
Nouvelle sémantique en HTML5
Enseignant : [Link] Ben Harrath 27
Les nouveaux élément de formulaire
Enseignant : [Link] Ben 28
Harrath
Les nouveaux éléments de formulaire
<input type="datetime">
<input type="text" list="list">
<datalist id="list">
<option value="Mr">
...<input<input type="number">
type="range">
<input type="url">
<input
</datalist> type="email">
Et encore…
Enseignant : [Link] Ben 29
Harrath
Les nouveaux éléments de formulaire
Minimum
Regular
MaxLengthand Maximum
Expressions
Required for
Fields textarea Values
Et encore…
<input type="text"
<input
<input pattern="[A-Za-z0-9_\-]+">
type="email"
type="range"
<textarea required="required">
min="20" max="80">
maxlength="2000"></textarea>
Enseignant : [Link] Ben 30
Harrath