HTML : Hyper Text Markup Language

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

[Link]@[Link]

H & H: Research and Training 1 / 118

 Plan

1 Introduction

2 Outils

3 Concept de balises

4 Structure d’une page HTML

5 Attributs d’une balise

6 Organisation du texte

7 Titres

H & H: Research and Training 2 / 118

 Plan

8 Listes
<ul> et <li>
<ol> et <li>
type
start
<dl>, <dt> et <dd>

9 Images

10 Liens
<a>
download
target
<base>

H & H: Research and Training 3 / 118

 Plan
11 Tableaux
<table>, <tr> et <td>
<caption> et <th>
colspan
rowspan
<thead>, <tbody> et <tfoot>
<colgroup> et <col>
12 Formulaires
Zones de saisie
Zones de choix
Boutons
Barres de progression
Autres balises/attributs pour les formulaires
13 Encore un peu de multimédia

H & H: Research and Training 4 / 118

 Plan

14 Objets
15 Classification des balises
16 Restructuration d’une page web avec HTML5
17 Caractères spéciaux
18 Attributs globaux
19 ARIA
20 Données
21 HTML5 et compatibilité des navigateurs
22 Conventions et bonnes pratiques
23 Code HTML5 valide

H & H: Research and Training 5 / 118

 Introduction

HTML

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 6 / 118

 Introduction

HTML

HTML : Hyper Text Markup Language

Ce n’est pas un langage de programmation

H I ©
C’est plutôt un langage de description
EL
M OU
composé de plusieurs balises (tags)

f E
interprété par le navigateurL
e
cpashrun éditeur de texte particulier
A
Il ne nécessite
©
Il est créé en 1991 par Tim Berners-Lee et est standardisé depuis
1994 par W3C

H & H: Research and Training 7 / 118

 Introduction

HTML

En parlant Standardisation : deux organismes

W3C (World Wide Web Consortium) :

I ©
organisme de standardisation fondé par Tim Berners-Lee
H
U
chargé de promouvoir la compatibilité des L
Etechnologies web
(HTML, XML, CSS, SOAP...)
L MO
WHATWG (Web Hypertext
r e f EApplication Technology Working
Group) :
A ch
© non officielle des différents développeurs de
collaboration
navigateurs Web (Mozilla Foundation, Opera Software, Apple...)
chargé de développement de nouvelles technologies sur la base
sur la base des implémentations actuelles d’Internet Explorer

H & H: Research and Training 8 / 118

 Introduction

HTML

Le 28 mai 2019
H I ©
EL
OU
Signature d’une collaboration entre W3C et WHATWG
M
f E
But : développement d’une L unique des spécifications
version
HTML et DOM hr
c e
©A

H & H: Research and Training 9 / 118

 Introduction

HTML
HTML : évolution
HTML1 : première version créée par Tim Berners-Lee en 1991.
HTML2 : deuxième version, apparue en 1994. On commence à
parler de W3C.
H I ©
EL
HTML3 : apparue en 1996 avec plusieurs nouveautés comme les
U
O
tableaux, les scripts, le positionnement du texte autour des
images, etc.
f E LM
r e
HTML4 : apparue en 1998 avec la possibilité :
d’utiliser dec h (découpage d’une page en plusieurs parties),
des©
A frames
améliorations sur les formulaires,
d’utiliser des feuilles de style (CSS).
HTML5 : finalisée en octobre 2014 et permet :
d’inclure facilement des vidéos,
d’ajouter plus de précisions sur les champs d’un formulaire

H & H: Research and Training 10 / 118

 Outils

HTML

H I ©
EL
De quoi on a besoin ?
un navigateur O U
f E LM
un éditeur de texte
ch r e
©A

H & H: Research and Training 11 / 118

 Outils

HTML

Quelques navigateurs

Google chrome : [Link]

H I ©
U EL
Mozilla firefox :
O
f E LM
[Link]

ch r e
Edge (installé par défaut sous Windows)
... ©A

H & H: Research and Training 12 / 118

 Outils

HTML
Quelques éditeurs de texte

Sublime text : [Link]

Atom : [Link]

Notepad++ :
H I ©
UEL
[Link]
O
Brackets : [Link]
f E LM
...
ch r e
©A

H & H: Research and Training 13 / 118

 Outils

HTML
Quelques éditeurs de texte

Sublime text : [Link]

Atom : [Link]

Notepad++ :
H I ©
U EL
[Link]
O
Brackets : [Link]
f E LM
...
ch r e
©A
CodePen : une solution en ligne

Trois éditeurs en parallèle : un pour HTML, un pour CSS et un pour JavaScript

[Link]

H & H: Research and Training 13 / 118

 Outils

HTML

Utiliser un IDE (Environnement de développement intégré) ?

Console auto-intégrée
H I ©
U EL
Auto-complétion
O
Auto-compilation
f E LM
ch r e
A
Coloration syntaxique
©
Meilleure structuration du projet

H & H: Research and Training 14 / 118

 Outils

HTML

Quel IDE pour HTML ?

Visual Studio Code

[Link]/download

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 15 / 118

 Outils

HTML

Quel IDE pour HTML ?

Visual Studio Code

[Link]/download

H I ©
U EL
O
E
Visual Studio Code (ou VSC) , pourquoi ?
f LM
Gratuit
ch r e
©A
Offrant la possibilité d’intégrer des éditeurs de texte connus (comme Sublime Text, Atom...)

Pouvant s’adapter selon le langage de programmation

Extensible via l’installation de quelques centaines d’extensions

H & H: Research and Training 15 / 118

 Outils

HTML

Quelques recommandations (raccourcis) pour VSC

H I ©
Pour activer la sauvegarde automatique : E
U Ldans File >
aller
AutoSave
L MO
Pour indenter son codef: Alt
r e E Shift f
A
Pour faire une
h multiple : Ctrl f2
csélection
©

H & H: Research and Training 16 / 118

 Outils

HTML

Pour créer un projet sous VSC

Allez dans File > Open Folder...
H I ©
U ELcours-html
Cliquez sur Nouveau dossier et saisissez

L MOpuis sur le dossier

Cliquez sur le dossier cours-html
Sélectionner un r e f E
dossier
A h
[Link]
©
Créez un fichier dans cours-html
Dans [Link], saisissez html:5 puis cliquez sur Entree

H & H: Research and Training 17 / 118

 Outils

HTML

Code généré

<!DOCTYPE html>
<html lang="en">

<head>
H I ©
<meta charset="UTF-8">
UEL
O
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
f E LM
</head>
ch r e
<body> ©A
</body>

</html>

H & H: Research and Training 18 / 118

 Outils

HTML

Extension Live Server

H I ©
Installez l’extension Live Server
UEL
M O
E L
Faites un clic doit sur [Link]
f
Cliquez sur Openchwithe
r Live Server
© A

H & H: Research and Training 19 / 118

 Concept de balises

HTML
Syntaxe
<balise>
objet
</balise>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 20 / 118

 Concept de balises

HTML
Syntaxe
<balise>
objet
</balise>

H I ©
ou bien (les balises orphelines ou auto-fermantes)
UEL
O
LM
[objet] <balise/>

r e f E
ch
©A

H & H: Research and Training 20 / 118

 Concept de balises

HTML
Syntaxe
<balise>
objet
</balise>

H I ©
ou bien (les balises orphelines ou auto-fermantes)
UEL
O
LM
[objet] <balise/>

r e f E
A ch
©
Avec HTML5, plus besoin de / pour les balises orphelines
[objet] <balise>

H & H: Research and Training 20 / 118

 Concept de balises

HTML
Syntaxe
<balise>
objet
</balise>

H I ©
ou bien (les balises orphelines ou auto-fermantes)
UEL
O
LM
[objet] <balise/>

r e f E
A ch
©
Avec HTML5, plus besoin de / pour les balises orphelines
[objet] <balise>

Commentaire : balise particulière

<!-- ceci est un commentaire -->

H & H: Research and Training 20 / 118

 Concept de balises

HTML

Propriétés

Les balises doivent être ouvertes puis fermées récursivement, comme des
parenthèses ([...]{(...)})

H I ©
EL
Tout ce qui est entouré par deux balises s’appelle élément
U
O
LM
Un élément peut éventuellement contenir du texte, liens, balises...

r e f E
Un texte en clair (non-entouré par une balise) est affiché
ch
©A
Les balises non reconnues seront ignorées (non-affichées)

Les commentaires en HTML sont ignorés par le navigateur

Les commentaires ne sont pas affichés mais restent visibles dans le code
source de la page et ne doit donc jamais contenir une information confidentielle.

H & H: Research and Training 21 / 118

 Structure d’une page HTML

HTML
Composition

Le contenu d’une page HTML est compris entre deux balises html

Une page HTML est composée de deux parties

une entête : head

H I ©
un corps : body UEL
O
f E LM
ch r e
©A

H & H: Research and Training 22 / 118

 Structure d’une page HTML

HTML
Composition

Le contenu d’une page HTML est compris entre deux balises html

Une page HTML est composée de deux parties

une entête : head

H I ©
un corps : body UEL
O
f E LM
ch r e
<!DOCTYPE html>
<html>
©A
<head>
</head>
<body>
</body>
</html>

H & H: Research and Training 22 / 118

 Structure d’une page HTML

HTML
DOCTYPE
Ce n’est pas une balise
C’est facultatif

H I ©
C’est une directive permettant de préciser qu’il s’agit d’un
document HTML et indiquant sa version
UEL
O
f E LM
ch r e
<!DOCTYPE©
A
<!-- HTML4.01 transitional -->
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"[Link]

<!-- HTML5 -->

<!DOCTYPE html>
H & H: Research and Training 23 / 118
 Structure d’une page HTML

Que peut contenir <HEAD> ?

<head>
<meta charset="utf-8">
<meta name="description" content="Formation HTML">
<title>Formation 2017</title>
</head>

H I ©
<head> : les méta informations
U EL
O
E LM
<title> titre du document (affiché par le navigateur en haut de la page)
f
ch r e
<link> pour référencer un fichier (CSS par exemple)

©A
<style> pour inclure du code CSS

<meta> peut contenir :

des informations sur le codage

des informations pour les moteurs de recherche

H & H: Research and Training 24 / 118

 Structure d’une page HTML

Que peut contenir <body> ?

<body>
les informations qui seront affichées dans le navigateur
</body>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 25 / 118

 Structure d’une page HTML

Que peut contenir <body> ?

<body>
les informations qui seront affichées dans le navigateur
</body>

Dans le <Body>
H I ©
texte
UEL
O
LM
tableau

image/vidéo/document
r e f E
ch
©A
menu

lien

formulaire

liste

...

H & H: Research and Training 25 / 118

 Attributs d’une balise

HTML

Attribut
Les balises, dans certains cas, ne suffisent pas.
H I ©
On leur associe donc des attributs.
UEL
O
Certains attributs :
f E LM
ch r e
prennent une seule valeur

©A
prennent plusieurs valeurs chacune attribuée à une clé
ne prennent pas de valeur

H & H: Research and Training 26 / 118

 Attributs d’une balise

HTML

Exemple d’attribut acceptant une seule valeur

<input type=text>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 27 / 118

 Attributs d’une balise

HTML

Exemple d’attribut acceptant une seule valeur

<input type=text>

H I ©
EL
OU
Une balise peut avoir plusieurs attributs
M
E L
<input type=text placeholder="saisir
f votre nom">

c h re
©A

H & H: Research and Training 27 / 118

 Attributs d’une balise

HTML

Exemple d’attribut acceptant une seule valeur

<input type=text>

H I ©
EL
OU
Une balise peut avoir plusieurs attributs
M
E L
<input type=text placeholder="saisir
f votre nom">

c h re
©A
Exemple d’attribut n’acceptant pas de valeur
<input type=text placeholder="saisir votre nom" readonly>

H & H: Research and Training 27 / 118

 Attributs d’une balise

HTML

Exemple d’attribut acceptant plusieurs valeurs

<p style="color: white; background-color: red">
Bonjour
</p>
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 28 / 118

 Attributs d’une balise

HTML

Exemple d’attribut acceptant plusieurs valeurs

<p style="color: white; background-color: red">
Bonjour
</p>
H I ©
UEL
O
f E LM
Remarques
ch r e
©A
Avec HTML5, la valeur d’un attribut peut être entourée par des
guillemets, des apostrophes comme elle peut ne pas être entourée si
elle ne contient pas d’espace.

H & H: Research and Training 28 / 118

 Attributs d’une balise

HTML

Quelques attributs standards

H I ©
class : nom de classe (à voir dans le cous CSS)
UEL
O
LM
id : identifiant unique dans la page (à voir dans le cous CSS)

r e f
style : style CSS de l’élémentE
ch
... ©A

H & H: Research and Training 29 / 118

 Attributs d’une balise

HTML

Autres clés de style pour le format d’un texte

style="font-size:60%;" : pour la taille du texte
style="text-align:center;" : pour l’alignement du texte
H I ©
UEL
O
style="font-family:arial;" : pour le font du text
...
f E LM
ch r e
©A

H & H: Research and Training 30 / 118

 Attributs d’une balise

HTML

Autres clés de style pour le format d’un texte

style="font-size:60%;" : pour la taille du texte
style="text-align:center;" : pour l’alignement du texte
H I ©
UEL
O
style="font-family:arial;" : pour le font du text
...
f E LM
ch r e
©A
Pour choisir une couleur
[Link]

H & H: Research and Training 30 / 118

 Attributs d’une balise

HTML

Clés standards de l’attribut style

H I ©
EL
OU
width : pour la largeur d’un élément
M
E L élément
height : pour la hauteur d’un
f
... c h re
©A

H & H: Research and Training 31 / 118

 Attributs d’une balise

HTML

width et height peuvent être utilisés comme attributs pour les

balises suivantes
canvas
H I ©
embed
UEL
O
iframe
f E LM
img
ch r e
input ©A
object
video

H & H: Research and Training 32 / 118

 Organisation du texte

HTML

Les paragraphes

<p>...</p> : pour délimiter un paragraphe

<br> : pour aller à la ligne

H I ©
<b>...</b> : pour mettre un texte en gras
UEL
O
<u>...</u> : pour souligner un texte
f E LM
ch r e
<i>...</i> : pour mettre un texte en italic

©A
<hr> : pour afficher une ligne horizontale

H & H: Research and Training 33 / 118

 Organisation du texte

HTML

Les paragraphes

<p>...</p> : pour délimiter un paragraphe

<br> : pour aller à la ligne

H I ©
<b>...</b> : pour mettre un texte en gras
UEL
O
<u>...</u> : pour souligner un texte
f E LM
ch r e
<i>...</i> : pour mettre un texte en italic

©A
<hr> : pour afficher une ligne horizontale

Il ne faut jamais oublier qu’on utilise HTML pour la structure et CSS pour le style

H & H: Research and Training 33 / 118

 Organisation du texte

HTML

Pour organiser un texte, on peut plutôt utiliser

H I ©
<strong>...</strong> : pour mettreU EunLtexte bien en valeur
M O
E L
<em>...</em> : pour mettre
f
un texte un peu en valeur
r e
ch : pour marquer un texte
<mark>...</mark>
© A

H & H: Research and Training 34 / 118

 Organisation du texte

HTML

Autres balises de formatage

<abbr> : abréviation

<time> : heure

<address> : adresse formatée (en italique)

H I ©
UEL
<cite> : citation (en italique)
O
E
<code> : élément de code informatique
f LM
ch r
<pre> : texte pré-formaté e
©A
<del> : texte supprimé dans un document (barré)

<ins> : texte inséré dans un document (souligné)

<sub> : indice

<sup> : exposant

H & H: Research and Training 35 / 118

 Organisation du texte

HTML

Autres balises de formatage

<q> : texte entre guillemets (quote)

H I ©
EL
OU
<var> : variable ou expression mathématique (écrite en italique)
M
E
<kbd> : texte représentant
f Lun raccourci clavier
chr e
A
<dfn> : définition
©
...

H & H: Research and Training 36 / 118

 Organisation du texte

HTML
Exemple avec abbr

<p>Le <abbr title="World Wide Web Consortium">W3C</abbr></p>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 37 / 118

 Organisation du texte

HTML
Exemple avec abbr

<p>Le <abbr title="World Wide Web Consortium">W3C</abbr></p>

Exemple avec del et ins

H I ©
EL
<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>
U
O
f E LM
ch r e
©A

H & H: Research and Training 37 / 118

 Organisation du texte

HTML
Exemple avec abbr

<p>Le <abbr title="World Wide Web Consortium">W3C</abbr></p>

Exemple avec del et ins

H I ©
EL
<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>
U
O
f E LM
Exemple avec var et sup
ch r e
©A
<p><var>x²</var> = 0 => <var>x</var> = 0</p>

H & H: Research and Training 37 / 118

 Organisation du texte

HTML
Exemple avec abbr

<p>Le <abbr title="World Wide Web Consortium">W3C</abbr></p>

Exemple avec del et ins

H I ©
EL
<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>
U
O
f E LM
Exemple avec var et sup
ch r e
©A
<p><var>x²</var> = 0 => <var>x</var> = 0</p>

Exemple avec kbd

<p>Appuyez sur <kbd>Ctrl</kbd> + <kbd>C</kbd> pour copier sous Windows.

</p>

H & H: Research and Training 37 / 118

 Organisation du texte

HTML

Exemple avec details et summary

<details>
H I ©
<summary>Programmation par contraintes</summary>
UEL
<p>
O
f E LM
un paradigme de programmation apparu dans les années
1970 permettant de résoudre des problèmes

ch r e
combinatoires de grande taille (wiki).

©A
</p>
</details>

H & H: Research and Training 38 / 118

 Organisation du texte

HTML

Règles générales

H I ©
EL
Les navigateurs ajoutent automatiquement un espace entre
chaque paragraphe
M OU
E
Bien que le texte ’flottant’ (non
f L inclus dans un élément de la page)
’style’ inclureA
hre
soit affiché par les navigateurs, il vaut mieux pour des raisons de
lactotalité du texte utile de la page dans des balises,
©
<p> notamment.

H & H: Research and Training 39 / 118

 Titres

HTML

Les titres : de plus grand au plus petit

<h1>...</h1>
H I ©
<h2>...</h2>
UEL
O
<h3>...</h3>
f E LM
<h4>...</h4>
ch r e
<h5>...</h5> ©A
<h6>...</h6>

H & H: Research and Training 40 / 118

 Listes

HTML

Les listes
<ul>...</ul> : une liste non-ordonnée (non-numérotée)
H I ©
<ol>...</ol> : une liste ordonnée
UEL
O
f E LM
<li>...</li> : un élément d’une liste

r e
<dl>...</dl> : une liste de description
ch
©A
<dt>...</dt> : un terme d’une liste
<dd>...</dd> : la description d’un terme

H & H: Research and Training 41 / 118

 Listes <ul> et <li>

HTML

Exemple d’une liste nom numérotée

<ul>
<li>Barcelone</li>
<li>Marseille</li>
H I ©
<li>Manchester</li>
U EL
O
LM
</ul>

r e f E
ch
L’affichage ©A
Barcelone
Marseille
Manchester

H & H: Research and Training 42 / 118

 Listes <ol> et <li>

HTML

Exemple d’une liste numérotée

<ol>
<li>Barcelone</li>
<li>Marseille</li>
H I ©
<li>Manchester</li>
U EL
O
LM
</ol>

r e f E
ch
©A
L’affichage (sans les puces)
1 Barcelone
2 Marseille
3 Manchester

H & H: Research and Training 43 / 118

 Listes type

HTML
Si on veut remplacer les chiffres par des lettres
<ol type="A">
<li>Barcelone</li>
<li>Marseille</li>
<li>Manchester</li>
H I ©
</ol>
UEL
O
f E LM
r e
ch pour l’attribut type
1 © A
Les valeurs possibles

A
a
I
i
H & H: Research and Training 44 / 118
 Listes start

HTML

Pour commencer d’un autre chiffre que 1

<ol start="5">
<li>Barcelone</li>
<li>Marseille</li>
H I ©
<li>Manchester</li>
UEL
O
LM
</ol>

r e f E
ch
©A
L’affichage (sans les puces)
5 Barcelone
6 Marseille
7 Manchester

H & H: Research and Training 45 / 118

 Listes start

HTML
Il est possible d’imbriquer les listes
<ul>
<li>France</li>
<li>Italie
<ul>
<li>Milan</li>
H I ©
<li>Turin</li>
UEL
</ul>
O
</li>
<li>Espagne</li>
f E LM
</ul>
ch r e
L’afficha ge
©A
France
Italie
Milan
Turin
Espagne
H & H: Research and Training 46 / 118
 Listes <dl>, <dt> et <dd>

HTML

Exemple d’une liste de description

<dl>
<dt>France</dt>
<dd> Bleu blanc rouge</dd>
H I ©
<dt>Allemagne</dt>
U EL
<dd> Noir jaune rouge</dd>
O
</dl>
f E LM
ch r e
L’affichage
© A
France
Bleu blanc rouge
Allemagne
Noir jaune rouge

H & H: Research and Training 47 / 118

 Images

HTML

Les images

La balise <img > permet d’insérer soit

une image locale (<img src="[Link]">), ou
H I ©
EL
à distance (<img src="[Link]
U
Cette balise a deux attributsL MO : src et alt
obligatoires
r e f E
Une image n’est
A c h
pas ’incluse’ dans un document. Elle est
référenc© ée par son adresse
Si l’image référencée n’est pas accessible, le navigateur peut
afficher soit une zone rectangulaire de bonnes dimensions, soit un
texte alternatif

H & H: Research and Training 48 / 118

 Images

HTML
Les attributs recommandés pour garantir un affichage correct
src : URL de l’image
alt : texte à afficher si image indisponible (indispensable pour
être W3C Valid)
H I ©
U EL
height : hauteur O
width : largeur f E LM
ch r e
©A

H & H: Research and Training 49 / 118

 Images

HTML
Les attributs recommandés pour garantir un affichage correct
src : URL de l’image
alt : texte à afficher si image indisponible (indispensable pour
être W3C Valid)
H I ©
U EL
height : hauteur O
width : largeur f E LM
ch r e
©A
Exemple
<img src="[Link]" alt="image personnelle" height=
"128" width="128">

H & H: Research and Training 49 / 118

 Images

HTML

Pour ajouter une légende à une image, on ajoute les deux balises
figure et figcaption
H I ©
UEL
<figure>
O
f E LM
<img src="[Link]" alt="image personnelle">
r e
<figcaption>Légende de la figure.</figcaption>
ch
©A
</figure>

H & H: Research and Training 50 / 118

 Liens <a>

HTML

Les liens
<a>...</a> : insérer un lien (interne ou externe)
H I ©
EL
pour créer un lien vers un autre document local ou distant
U
O
<a href="[Link] monsite </a> ou
<a href="[Link]"> Page 2 </a>
f ELM
ch r e
pour pointer vers un signet (’name’ ou ’id’) dans un document
©A
<a href="#top"> vers le haut de page </a>
href est l’attribut de l’élément <a> le plus important puisqu’il
indique la destination du lien.

H & H: Research and Training 51 / 118

 Liens download

HTML
Lien pour télécharger un fichier

<a href="[Link]
pdf" download="[Link]">
Télécharger mon cours CSS
</a>

H I ©
UEL
O
f ELM
ch r e
©A

H & H: Research and Training 52 / 118

 Liens download

HTML
Lien pour télécharger un fichier

<a href="[Link]
pdf" download="[Link]">
Télécharger mon cours CSS
</a>

H I ©
U EL
O
Remarques
f E LM
r e
chdownload est optionnel.
A
La valeur de l’attribut
©
Par défaut, le nom du fichier téléchargé est égal à celui du fichier original.

Ici, le fichier téléchargé aura le nom [Link].

L’attribut download fonctionne seulement si le fichier à télécharger a le même

nom du domaine que l’application.

H & H: Research and Training 52 / 118

 Liens target

HTML

Lien pour ouvrir une nouvelle fenêtre

H I ©
EL target="
<a href="[Link]
U
_blank">
L MO
Ma page
r e f E
</a>
A ch
©

H & H: Research and Training 53 / 118

 Liens <base>

HTML

Pour définir une base pour tous les liens de la page

<base href="[Link]
H I ©
UEL
O
f ELM
ch r e
©A

H & H: Research and Training 54 / 118

 Liens <base>

HTML

Pour définir une base pour tous les liens de la page

<base href="[Link]
H I ©
EL
M OU
E L de liens
Ainsi, on peut simplifier la création
f
chr e
<a href="[Link]">Mes cours</a>
© A
En cliquant sur ce lien, on se redirige vers
[Link]

H & H: Research and Training 54 / 118

 Tableaux

HTML

Les tableaux
Les tables constituent un mode privilégié de présentation
d’information structurée.
H I ©
Une table (balise <table>) est divisée en E
U L et colonnes
lignes
Une bordure délimite ou nonLlesM
O
cellules de la table (Balise <td>),
r e f E<tr>)
organisée en lignes (balise
La table© Achen permanence l’aspect visuel de colonnes dont
préserve
toutes les cellules ont la même largeur.
En revanche, les lignes peuvent avoir des hauteurs différentes

H & H: Research and Training 55 / 118

 Tableaux <table>, <tr> et <td>

HTML

Quelques balises de tableau

H I ©
<table> : pour déclarer un tableau U EL
M O
E L dans un tableau (table row)
<tr> : pour déclarer une ligne
f
c h reune cellule dans un tableau (table data)
<td> : pour déclarer
©A

H & H: Research and Training 56 / 118

 Tableaux <table>, <tr> et <td>

HTML

Exemple
<table border="1">
<tr>
H I ©
<td>PHP</td>
U EL
<td>10</td>
O
</tr>
f E LM
<tr>
<td>Java</td>
ch r e
</tr>
<td>8</td>
©A
</table>

H & H: Research and Training 57 / 118

 Tableaux <caption> et <th>

HTML

Autres balises de tableau

H I ©
U EL
<caption> : pour ajouter une légende au tableau (texte
O
associé)
f E LM
ch r e
<th> : pour déclarer une cellule d’en-tête

©A

H & H: Research and Training 58 / 118

 Tableaux <caption> et <th>

HTML
Exemple
<table border="1">
<caption>Moyenne par matière</caption>
<tr>
<th>Matière</th>
H I ©
<th>Moyenne</th>
U EL
</tr>
O
<tr>
f E LM
<td>PHP</td>
<td>10</td>
ch r e
</tr>
<tr> ©A
<td>Java</td>
<td>8</td>
</tr>
</table>

H & H: Research and Training 59 / 118

 Tableaux colspan

HTML

Fusionner les cellules d’une même colonne d’un tableau

<table border="1">
<tr>
<th>Nom</th> H I ©
<th colspan="2">Mail</th>
UEL
O
</tr>
<tr>
f E LM
ch r e
<td>Achref El Mouelhi</td>
©A
<td>achref@[Link]</td>
<td>elmouelhi@[Link]</td>
</tr>
</table>

H & H: Research and Training 60 / 118

 Tableaux rowspan

HTML

Fusionner les cellules d’une même ligne d’un tableau

<table border="1">
<tr>
<th>Nom</th>
H I ©
EL
<td>Achref El Mouelhi</td>
</tr>
O U
<tr>
f E LM
<th rowspan="2">Mail</th>
ch r e
<td>achref@[Link]</td>
</tr>
<tr>
©A
<td>elmouelhi@[Link]</td>
</tr>
</table>

H & H: Research and Training 61 / 118

 Tableaux <thead>, <tbody> et <tfoot>

HTML
Regrouper, par lignes, les éléments d’un tableau en utilisant thead, tbody et tfoot

<table>
<thead>
<tr>
<th>Mois</th>
<th>Loyer</th>
</tr>

H I ©
EL
</thead>
<tbody>
<tr>

O U
LM
<td>January</td>
<td>600$</td>
</tr>
<tr>

r e f E
ch
<td>February</td>

©A
<td>700$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>1 300$</td>
</tr>
</tfoot>
</table>

H & H: Research and Training 62 / 118

 Tableaux <colgroup> et <col>

HTML
Regrouper, par colonnes, les éléments d’un tableau en utilisant <colgroup> et <col>
<table border="1">
<colgroup>
<col style="background-color: blue">
<col span=2 style="background-color: red">
</colgroup>
<tr>
H I ©
<td>Matière</td>
<td>Coefficient</td>
U EL
O
LM
<td>Moyenne</td>
</tr>
<tr>
r e f E
<td>PHP</td>
ch
©A
<td>2</td>
<td>18</td>
</tr>
<tr>
<td>Java</td>
<td>3</td>
<td>15</td>
</tr>
</table>

H & H: Research and Training 63 / 118

 Tableaux <colgroup> et <col>

HTML

L’attribut style de la balise col agit seulement sur les propriétés :

H I ©
background-color
U EL
O
LM
border
width r e f E
ch
visibility ©A

H & H: Research and Training 64 / 118

 Tableaux <colgroup> et <col>

HTML

Autres clés de l’attribut style de la balise table

padding : espace entre le contenu de la cellule et les frontières (la bordure)

border-spacing : espace entre les cellules

H I ©
width : pour définir la largeur
U EL
O
height : pour la hauteur
f E LM
ch r e
text-align : pour l’alignement horizontal du texte dans une cellule (valeurs
A
possibles : left, right et center)
©
vertical-align (à utiliser dans la balise td) : pour l’alignement vertical du
texte dans une cellule (valeurs possibles : top, bottom et middle)

...

H & H: Research and Training 65 / 118

 Tableaux <colgroup> et <col>

HTML

Remarques

H I ©
EL
Les tableaux ont été largement utilisés dans le passé pour
organiser les pages des sites web.
M OU
Cet usage est aujourd’huiE
f L ète et absolument découragé.
obsol
On utilise pourc
e
hrles balises <div> et les styles CSS qui
A cela
© plus loin.
seront vus

H & H: Research and Training 66 / 118

 Formulaires

HTML
Déclaration d’un formulaire

<form method="POST ou GET" action="page web destination">

</form>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 67 / 118

 Formulaires

HTML
Déclaration d’un formulaire

<form method="POST ou GET" action="page web destination">

</form>

Les attributs d’un formulaire

H I ©
EL
OU
method : concerne l’envoi de données et peut prendre deux valeurs.
M
E L ée car limitée à 2048 caractères. En
GET : non fréquemment utilis
f
d’adresse. ch
r e
plus, les informations envoyées seront visibles dans la zone

©A
POST : plus utilisée que GET car elle permet d’envoyer un grand
nombre d’informations et les données saisies dans le formulaire ne
transitent pas par la barre d’adresse.
action : indique l’adresse de la page ou du programme qui va traiter les informations
(généralement avec un langage autre que HTML).

H & H: Research and Training 67 / 118

 Formulaires

HTML

Que peut-on avoir dans un formulaire ?

H I ©
Des zones de saisie UEL
O
Des zones de choix
f E LM
Des boutons ch r e
©A

H & H: Research and Training 68 / 118

 Formulaires Zones de saisie

HTML
Une zone de saisie monoligne

<input type="text" name="nom zone texte">

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 69 / 118

 Formulaires Zones de saisie

HTML
Une zone de saisie monoligne

<input type="text" name="nom zone texte">

Une zone de saisie multiligne

<textarea name="nom zone texte" id="identifiant"></textarea>

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 69 / 118

 Formulaires Zones de saisie

HTML
Une zone de saisie monoligne

<input type="text" name="nom zone texte">

Une zone de saisie multiligne

<textarea name="nom zone texte" id="identifiant"></textarea>

H I ©
U EL
O
LM
Un libellé associé à une zone de saisie

r e f E
<label for="identifiant zone saisie">texte</label>

ch
©A

H & H: Research and Training 69 / 118

 Formulaires Zones de saisie

HTML
Une zone de saisie monoligne

<input type="text" name="nom zone texte">

Une zone de saisie multiligne

<textarea name="nom zone texte" id="identifiant"></textarea>

H I ©
U EL
O
LM
Un libellé associé à une zone de saisie

r e f E
<label for="identifiant zone saisie">texte</label>

ch
Exemple ©A
<label for="nom">Nom :</label> <input type="text" name="nom" id="nom">

H & H: Research and Training 69 / 118

 Formulaires Zones de saisie

HTML
Une zone de saisie monoligne

<input type="text" name="nom zone texte">

Une zone de saisie multiligne

<textarea name="nom zone texte" id="identifiant"></textarea>

H I ©
U EL
O
LM
Un libellé associé à une zone de saisie

r e f E
<label for="identifiant zone saisie">texte</label>

ch
Exemple ©A
<label for="nom">Nom :</label> <input type="text" name="nom" id="nom">

Généralement on associe la même valeur aux attributs id et name

H & H: Research and Training 69 / 118

 Formulaires Zones de saisie

HTML

Avec HTML 5, les 3 écritures suivantes sont équivalentes

H I ©
<input type=text value=John>
U EL
M O
f E L
<input type="text" value="John Wick">

c h revalue=’John Wick’>
©A
<input type=’text’

H & H: Research and Training 70 / 118

 Formulaires Zones de saisie

HTML

Avant HTML 5
password : pour les mots de passe

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 71 / 118

 Formulaires Zones de saisie

HTML

Avant HTML 5
password : pour les mots de passe

H I ©
U EL
Avec HTML 5 O
f E LM
ch r e
email : pour les adresses emails

©A
number : pour les nombres (attributs min, max et step)
color : pour les couleurs
date : pour les calendriers
...

H & H: Research and Training 71 / 118

 Formulaires Zones de choix

HTML

Trois types de zones de choix

H I ©
Les cases à cocher
U EL
O
Les boutons radio
f E LM
Les listes déroulantes
ch r e
©A

H & H: Research and Training 72 / 118

 Formulaires Zones de choix

HTML
Cases à cocher
<input type="checkbox" name="nom du choix" [checked]>

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 73 / 118

 Formulaires Zones de choix

HTML
Cases à cocher
<input type="checkbox" name="nom du choix" [checked]>

Boutons radios H I ©
U EL
O
<input type="radio" name="nom du choix" [checked]>

f E LM
ch r e
©A

H & H: Research and Training 73 / 118

 Formulaires Zones de choix

HTML
Cases à cocher
<input type="checkbox" name="nom du choix" [checked]>

Boutons radios H I ©
U EL
O
<input type="radio" name="nom du choix" [checked]>

f E LM
ch r e
A
Listes déroulantes
©
<select name="liste">
<option value="valeur1" [selected]>valeur1</option>
...
<option value="valeurN">valeurN</option>
</select>

H & H: Research and Training 73 / 118

 Formulaires Zones de choix

HTML

Les listes déroulantes (le regroupement)

<select name="liste">
<optgroup label="label1">
<option value="valeur1">valeur1</option>
H I ©
EL
...
<option value="valeur1">valeurN</option>
O U
LM
</optgroup>
<optgroup label="label2">
r e f E
ch
<option value="valeur1">valeur1</option>

©A
...
<option value="valeur1">valeurM</option>
</optgroup>
...
</select>

H & H: Research and Training 74 / 118

 Formulaires Zones de choix

HTML

Les listes de données (datalist) = liste déroulante + zone de saisie

<input list="sports" name="sport">
H I ©
<datalist id="sports">
U EL
O
LM
<option value="football">
<option value="handball">
r e f E
<option value="cross fit">
ch
©A
<option value="tennis">
<option value="hockey">
</datalist>

H & H: Research and Training 75 / 118

 Formulaires Boutons

HTML

Trois types de boutons

H I ©
submit : envoie le contenu d’un formulaire à la page indiqué
dans l’action
U EL
M O
f E Lle contenu d’un formulaire
reset : remet à zéro (efface)
button : boutonh
c reérique qui permet de réaliser plusieurs
gén
taches pourA
©
JavaScript
HTML (quitter une page,...) ou de déclencher un code

H & H: Research and Training 76 / 118

 Formulaires Boutons

HTML

Remarque

Tout bouton déclaré dans un formulaire avec la balise <button> est

de type submit

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 77 / 118

 Formulaires Boutons

HTML

Remarque

Tout bouton déclaré dans un formulaire avec la balise <button> est

de type submit

H I ©
UEL
O
f E LM
Pour déclarer un bouton simple (pas de type submit) dans une
balise form
r e
ch value="cliquer">
A
<input type="button"
©

H & H: Research and Training 77 / 118

 Formulaires Boutons

HTML

Remarque

Tout bouton déclaré dans un formulaire avec la balise <button> est

de type submit

H I ©
UEL
O
f E LM
Pour déclarer un bouton simple (pas de type submit) dans une
balise form
r e
ch value="cliquer">
A
<input type="button"
©
Ou
<button type=button>cliquer</button>

H & H: Research and Training 77 / 118

 Formulaires Boutons

HTML

Un bouton de type submit peut être aussi déclaré avec la balise

input
H I ©
EL
<input type="submit" value="envoyer">
U
L MO
r e f E
A ch
©

H & H: Research and Training 78 / 118

 Formulaires Boutons

HTML

Un bouton de type submit peut être aussi déclaré avec la balise

input
H I ©
<input type="submit" value="envoyer">
U EL
L MO
Ou tout simplementh r e f E dans un formulaire)
c (uniquement
©A
<button>envoyer</button>

H & H: Research and Training 78 / 118

 Formulaires Barres de progression

HTML

Deux types de barre de progression

H I ©
U
progress : barre de progression dynamique représentant EL
O
l’avancement d’une tâche.
f E LM
ch r e
meter : barre de progression statique représentant une jauge.
©A

H & H: Research and Training 79 / 118

 Formulaires Barres de progression

HTML

Exemple avec progress

<label for="compte">Création de compte :</label>

<progress id="compte" value="60" max="100"> 60% </progress>
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 80 / 118

 Formulaires Barres de progression

HTML

Exemple avec progress

<label for="compte">Création de compte :</label>

<progress id="compte" value="60" max="100"> 60% </progress>
H I ©
U EL
O
Exemple avec meter
f E LM
r e
ch mémoire utilisé : </label>
© A
<label for="disk">Espace
<meter id="disk" value="120" min="0" max="500">120 sur 500 GO</
meter>

H & H: Research and Training 80 / 118

 Formulaires Autres balises/attributs pour les formulaires

HTML

Quelques attributs ne prenant pas de valeurs

required : pour indiquer qu’un champ est obligatoire
autofocus : pour placer le curseur dans cet élément dés
H I ©
chargement de la page
U EL
O
f E LM
autocomplete : pour indiquer si on autorise auto-complétion

ch r e
multiple : pour indiquer qu’il est possible de choisir ou d’insérer

©A
plusieurs éléments
placeholder : pour afficher un message indicatif dans un
champ
readonly : pour rendre le champ en lecture seule

H & H: Research and Training 81 / 118

 Formulaires Autres balises/attributs pour les formulaires

HTML
Exemple

<form method="POST" action="[Link]">

<fieldset>
<legend>Nom complet</legend> <!-- partie nom prénom -->
<label for="nom">nom :</label>
<input type="text" id="nom"><br>
H I ©
<label for="prenom">prénom :</label>
U EL
<input type="text" id="prenom">
O
</fieldset>
f E LM
<fieldset>
ch r e
©A
<legend>Sexe</legend> <!-- partie sexe -->
<input type="radio" name="homme" value="homme">
<label for="homme"> Homme </label><br>
<input type="radio" name="femme" value="femme">
<label for="femme"> Femme </label>
</fieldset>
</form>

H & H: Research and Training 82 / 118

 Encore un peu de multimédia

HTML
Insérer un élément audio

<audio src="audio.mp3"></audio>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 83 / 118

 Encore un peu de multimédia

HTML
Insérer un élément audio

<audio src="audio.mp3"></audio>

H I ©
EL
Attention

O U
Les navigateurs ne supportent pas tous les formats audios existants

f E LM
ch r e
©A

H & H: Research and Training 83 / 118

 Encore un peu de multimédia

HTML
Insérer un élément audio

<audio src="audio.mp3"></audio>

H I ©
EL
Attention

O U
Les navigateurs ne supportent pas tous les formats audios existants

f E LM
ch r e
©A
Les attributs possibles

controls : pour afficher les boutons lecture et pause

loop : pour jouer le fichier audio en boucle

autoplay : pour lire le contenu du fichier dés le chargement de la page

H & H: Research and Training 83 / 118

 Encore un peu de multimédia

HTML
Insérer un élément vidéo

<video src="fichier.mp4"></video>

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 84 / 118

 Encore un peu de multimédia

HTML
Insérer un élément vidéo

<video src="fichier.mp4"></video>

H I ©
Attention

UEL
O
LM
Les navigateurs ne supportent pas tous les formats vidéos existants

r e f E
ch
©A

H & H: Research and Training 84 / 118

 Encore un peu de multimédia

HTML
Insérer un élément vidéo

<video src="fichier.mp4"></video>

H I ©
Attention

UEL
O
LM
Les navigateurs ne supportent pas tous les formats vidéos existants

r e f E
ch
©A
Pour éviter ce problème : définir plusieurs formats

<video controls>
<source src="fichier.mp4">
<source src="[Link]">
<source src="[Link]">
</video>

H & H: Research and Training 84 / 118

 Encore un peu de multimédia

HTML

Une deuxième solution consiste à

H I ©
EL
héberger la vidéo sur YouTube
M OU
copier l’identifiant de la vidéoL
r e f E
chdans la balise iframe
utiliser ce dernier
A
©

H & H: Research and Training 85 / 118

 Encore un peu de multimédia

HTML

Pour les vidéos YouTube, on peut utiliser la balise iframe

H I ©
UEL
<iframe width="400" height="300" src="[Link]
O
[Link]/embed/8cm1x4bC610">
f E LM
</iframe>
ch r e
©A

H & H: Research and Training 86 / 118

 Encore un peu de multimédia

HTML

Les attributs possibles

poster : image à afficher à la place de la vidéo H I ©

UEL
O
controls : pour afficher les boutons lecture et pause

f E
loop : pour jouer le fichier vidéo en boucle LM
ch r e
©A
autoplay : pour lire le contenu du fichier dés le chargement de
la page

H & H: Research and Training 87 / 118

 Objets

HTML
object

balise permettant d’intégrer plusieurs types de contenu dans un document HTML

(compatible avec tous les navigateurs mais dépréciée depuis 2015)

une autre page HTML

H I ©
PDF
U EL
O
LM
flash

image
r e f E
ch
vidéo

audio
©A

H & H: Research and Training 88 / 118

 Objets

HTML
object

balise permettant d’intégrer plusieurs types de contenu dans un document HTML

(compatible avec tous les navigateurs mais dépréciée depuis 2015)

une autre page HTML

H I ©
PDF
U EL
O
LM
flash

image
r e f E
ch
vidéo

audio
©A
Remarque

Pour les audios et vidéos, il est recommandé d’utiliser les balises <audio> et
<video>

H & H: Research and Training 88 / 118

 Objets

HTML
Considérons la page [Link]
<!DOCTYPE html>
<html>
<head>
<title>Fichier</title>
</head>
<body style="background-color:teal">
H I ©
EL
Hello everybody
</body>
</html>
O U
f E LM
ch r e
©A

H & H: Research and Training 89 / 118

 Objets

HTML
Considérons la page [Link]
<!DOCTYPE html>
<html>
<head>
<title>Fichier</title>
</head>
<body style="background-color:teal">
H I ©
EL
Hello everybody
</body>
</html>
O U
f E LM
ch r e
Il est possible d’inclure [Link] dans une autre page [Link]

©A
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<p> Bonjour tout le monde </p>
<object width="400" height="200" data="[Link]"></object>
</body>
</html>
H & H: Research and Training 89 / 118
 Objets

HTML

Remarque
H I ©
UEL
O
La balise orpheline <embed> permet également d’inclure un

f E LM
document HTML, une image ou un flash (n’est pas compatible avec
r e
tous les navigateurs et dépréciée depuis 2015)
ch
©A

H & H: Research and Training 90 / 118

 Classification des balises

HTML

inline et block
block : c’est une balise qui ajoute automatiquement un retour à
la ligne avant et après.
H I ©
EL
inline : c’est une balise qui se situe obligatoirement à l’intérieur
U
O
d’une balise block. Elle ne crée pas de retour à la ligne, le texte

f E LM
qui se trouve à l’intérieur s’écrit donc à la suite du texte précédent,
sur la même ligne.
ch r e
Exemple
©A
block : <p>, <h1>...
inline : <a>...

H & H: Research and Training 91 / 118

 Classification des balises

HTML

Les balises universelles

H I ©
Ce sont des balises sans aucune sémantique,E
U Lées souvent en
utilis
CSS ou dans les formulaires.
L MO
<span>...</span>f: inline
r e E
A
<div>...</div>ch : block
©

H & H: Research and Training 92 / 118

 Classification des balises

HTML

Quelques propriétés de balise inline

H I ©
UEL
Il ignore les marges top et bottom mais applique les marges
O
left et right, ainsi que tout padding.
f E LM
ch r e
Il ignore les propriétés width et height.
©A

H & H: Research and Training 93 / 118

 Restructuration d’une page web avec HTML5

HTML
Les balises structurelles

<header>...</header> : l’entête de la page

<footer>...</footer> : le pied de la page

<main>...</main> : tout le reste de la page

H I ©
<nav>...</nav> : l’emplacement du menu
UEL
O
LM
<section>...</section> : le main peut être composé de plusieurs sections

e f E
<article>...</article> : dans une section on peut définir un ou plusieurs articles
r
ch
©A
...

H & H: Research and Training 94 / 118

 Restructuration d’une page web avec HTML5

HTML
Les balises structurelles

<header>...</header> : l’entête de la page

<footer>...</footer> : le pied de la page

<main>...</main> : tout le reste de la page

H I ©
<nav>...</nav> : l’emplacement du menu
U EL
O
LM
<section>...</section> : le main peut être composé de plusieurs sections

e f E
<article>...</article> : dans une section on peut définir un ou plusieurs articles
r
ch
©A
...

Remarque

Ne pas confondre les deux balises <head> et <header>.

Ces balises sont plutôt sémantiques et n’ont pas de positions fixes.

H & H: Research and Training 94 / 118

 Restructuration d’une page web avec HTML5

HTML

header

main
nav

H I ©
section
UEL aside

O
article
f E LM
ch r
article
e
© A
section

footer

H & H: Research and Training 95 / 118

 Caractères spéciaux

HTML
Le codage de caractères spéciaux
&eacute; : é
&egrave; : è
&ecirc; : ê
&ccedil; : ç
H I ©
EL
&amp; : &
&aelig; : æ
O U
LM
&times; : ×
&quot; : ”
r e f E
&lt; : <
ch
&gt; : >
... ©A

H & H: Research and Training 96 / 118

 Caractères spéciaux

HTML
Le codage de caractères spéciaux
&eacute; : é
&egrave; : è
&ecirc; : ê
&ccedil; : ç
H I ©
EL
&amp; : &
&aelig; : æ
O U
LM
&times; : ×
&quot; : ”
r e f E
&lt; : <
ch
&gt; : >
... ©A
Autres caractères spéciaux

[Link]

H & H: Research and Training 96 / 118

 Attributs globaux

HTML
Quelques attributs globaux

id

class

H I ©
EL
style

draggable
O U
lang
f E LM
ch r e
©A
hidden

title (le texte qui s’affiche en survolant un élément HTML)

accesskey (le raccourci Windows permettant de mettre placer le cursus sur

l’élément HTML)

...

H & H: Research and Training 97 / 118

 Attributs globaux

HTML

Sous Windows, appuyez sur alt shift e pour accéder à ma page ou alt
shift f pour accéder à France Football

H I
<a href="[Link] accesskey="e" title=" ©
alt shift e">
UEL
Ma page
O
</a>
<br>
f E LM
ch r e
<a href="[Link] accesskey="f" title="alt

©A
shift f">
France Football
</a>

H & H: Research and Training 98 / 118

 Attributs globaux

HTML

Pour souligner les fautes d’orthographe, on peut utilise l’attribut spellcheck

(cliquer dans la zone de saisie et vérifier que annees est souligné)

<textarea spellcheck="true">
Les meilleures années, les annees 80...
H I ©
</textarea>
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 99 / 118

 Attributs globaux

HTML

Pour souligner les fautes d’orthographe, on peut utilise l’attribut spellcheck

(cliquer dans la zone de saisie et vérifier que annees est souligné)

<textarea spellcheck="true">
Les meilleures années, les annees 80...
H I ©
</textarea>
UEL
O
f E LM
ch r e
S’il ne s’agit pas d’une zone de saisie, on ajoute l’attribut contenteditable

©A
(cliquer sur le paragraphe et vérifier que le contenu est éditable)

<p spellcheck="true" contenteditable>

Les meilleures années, les annees 80...
</p>

H & H: Research and Training 99 / 118

 ARIA

HTML

Accessibilité dans le développement web

Rendre accessible un contenu web
H I ©
U EL
O
aux personnes avec des handicapes visuels et/ou auditifs
M
f E L d’accès (ordinateur, smart-phone,
quels que soient leurs dispositifs
tablette...)
c h re
© A Initiative (WAI) : ensemble de normes sur
Web Accessibility
l’accessibilité définies par W3C

H & H: Research and Training 100 / 118

 ARIA

HTML

ARIA

H I ©
EL
Accessible Rich Internet Applications (applications internet riches
et accessibles)
M OU
Ensemble d’attributs HTML
f E L
Permettant de c
e
hr accessible le contenu d’une application web
A rendre
© quelques outils d’assistance
en utilisant

H & H: Research and Training 101 / 118

 ARIA

HTML

Quelques outils d’assistance

H I ©
EL
ChromeVox (pour ajouter comme extensions sous Google
U
O
Chrome [Link]

f ELM
-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=fr)

Jaws
ch r e
VoiceOver ©A

H & H: Research and Training 102 / 118

 ARIA

L’attribut role

permet d’ajouter une sémantique à nos balises

accepte un ensemble de valeurs prédéfinies

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 103 / 118

 ARIA

L’attribut role

permet d’ajouter une sémantique à nos balises

accepte un ensemble de valeurs prédéfinies

H I ©
EL
Exemples de rôle

O U
LM
Rôles de structure : main, navigation, article, heading...

e f E
Rôles de composant graphique : alert, button, link, radio...
r
A
Rôles composés ch
©
listbox et option
menubar et (menuitem ou menuitemcheckbox ou
menuitemradio)
...

H & H: Research and Training 103 / 118

 ARIA

HTML

Exemple 1 avec un rôle de composant graphique

<div role=link>
<a href="#">visitez ma page</a>
H I ©
EL
</div>

O U
f ELM
ch r e
©A

H & H: Research and Training 104 / 118

 ARIA

HTML

Exemple 1 avec un rôle de composant graphique

<div role=link>
<a href="#">visitez ma page</a>
H I ©
EL
</div>

O U
f ELM
r e
Exemple 2 avec un rôle de composant graphique
ch
<h2 role="alert">
©A
Votre formulaire ne peut être soumis, veuillez
remplir les champs obligatoires.
</h2>

H & H: Research and Training 104 / 118

 ARIA

HTML

Exemple avec un rôle de structure

<nav role=navigation>
...
</nav>
H I ©
UEL
O
f ELM
ch r e
©A

H & H: Research and Training 105 / 118

 ARIA

HTML

Exemple avec un rôle de structure

<nav role=navigation>
...
</nav>
H I ©
EL
M OU
E Lés
Exemple avec des rôles compos
f
c h
<nav role=navigation> re
A
© role=menubar>
<ul
<li role=menuitem>Accueil</li>
<li role=menuitem>Formation</li>
</ul>
</nav>

H & H: Research and Training 105 / 118

 ARIA

HTML

Remarque

ARIA recommande de privilégier l’utilisation d’élément HTML natif et

de ne pas modifier la sémantique d’une balise...

H I ©
UEL
O
f ELM
ch r e
©A

H & H: Research and Training 106 / 118

 ARIA

HTML

Remarque

ARIA recommande de privilégier l’utilisation d’élément HTML natif et

de ne pas modifier la sémantique d’une balise...

H I ©
UEL
O
Ne jamais faire ça
f ELM
ch r e
<h1 role="button">titre transformé en bouton</h1>
©A

H & H: Research and Training 106 / 118

 ARIA

HTML

Remarque

ARIA recommande de privilégier l’utilisation d’élément HTML natif et

de ne pas modifier la sémantique d’une balise...

H I ©
UEL
O
Ne jamais faire ça
f ELM
ch r e
<h1 role="button">titre transformé en bouton</h1>
©A
Cependant, il est possible d’écrire
<h1><button>titre contenant un bouton</button></h1>

H & H: Research and Training 106 / 118

 ARIA

HTML

L’attribut aria-*

permet d’ajouter une sémantique à nos balises

* à remplacer par quelques propriétés

H I ©
accepte comme valeur un texte personnalisé
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 107 / 118

 ARIA

HTML

L’attribut aria-*

permet d’ajouter une sémantique à nos balises

* à remplacer par quelques propriétés

H I ©
accepte comme valeur un texte personnalisé
U EL
O
f E LM
h r e
A
Exemples de propriét ésc
©
propriétés de composant graphique : aria-label, aria-valuemax,
aria-required...

propriétés de relation : aria-labelledby, describedby...

H & H: Research and Training 107 / 118

 ARIA

HTML
Exemple 1 avec une propriété de composant graphique
<div>
<div id=prenom>Prénom</div>
<input type=text aria-required=true>
H I ©
EL
</div>

O U
f ELM
ch r e
©A

H & H: Research and Training 108 / 118

 ARIA

HTML
Exemple 1 avec une propriété de composant graphique
<div>
<div id=prenom>Prénom</div>
<input type=text aria-required=true>
H I ©
EL
</div>

O U
f ELM
r e
Exemple 2 avec une propriété de composant graphique
ch
<div>
©A
<div id=age>Age</div>
<input type=number aria-valuemin=0 aria-valuemax
=150 >
</div>

H & H: Research and Training 108 / 118

 ARIA

HTML

Remarques
H I ©
EL HTML5
Les propriétés de composant graphique aria-valuemax,
U
L MO
aria-required, etc ont été introduites avant

e f
HTML5 a intégré quelques
r Epropriétés comme required,
A ch
maxlength, max...
©

H & H: Research and Training 109 / 118

 ARIA

HTML
Exemple 3 avec une propriété de composant graphique
<div role=link>
<a aria-label="pour visiter la page de john wick" href="#">visitez ma
page</a>
</div>

H I ©
U EL
O
f ELM
ch r e
©A

H & H: Research and Training 110 / 118

 ARIA

HTML
Exemple 3 avec une propriété de composant graphique
<div role=link>
<a aria-label="pour visiter la page de john wick" href="#">visitez ma
page</a>
</div>

H I ©
U EL
Exemple avec une propriété de relation (aria-labelledby permet d’indiquer les
O
LM
identifiants des éléments qui labellisent l’objet)
<div id="teacher">Enseignant</div>
r e f E
ch
©A
<div>
<div id=nom>Nom</div>
<input type=text aria-labelledby="nom teacher">
</div>

<div>
<div id=prenom>Prénom</div>
<input type=text aria-labelledby="prenom teacher">
</div>

H & H: Research and Training 110 / 118

 ARIA

HTML
En cas de présence de aria-labelledby et aria-label,
aria-label sera ignoré
<div id=teacher>Enseignant</div>

H I ©
EL
<div>
<div id=nom>Nom</div>
O U
aria-labelledby="nom teacher"> f ELM
<input type="text" aria-label="zone de saisie"

</div>
ch r e
<div>
©A
<div id=prenom>Prénom</div>
<input type=text aria-labelledby="prenom teacher">
</div>

H & H: Research and Training 111 / 118

 ARIA

HTML

Exemple avec aria-describedby

<div>
<div id="prenom">Prénom</div>
H I ©
EL
<input type=text aria-required=true aria-
U
describedby="description" >
O
</div>
f E LM
r e
chun champ
©
Le prénom A
<div id="description"
est
hidden>
obligatoire, il faut saisir
au moins un caractère
</div>

H & H: Research and Training 112 / 118

 Données

HTML
L’attribut data-*
permettant d’associer des données à un élément HTML
disponible depuis HTML5
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 113 / 118

 Données

HTML
L’attribut data-*
permettant d’associer des données à un élément HTML
disponible depuis HTML5
H I ©
UEL
O
Exemple
f E LM
ch r e
<img src="[Link]
[Link]"
©A
alt="Super Mario"
width="500px"
height="300px"
data-editeur="nintendo"
data-lancement=1985>

H & H: Research and Training 113 / 118

 Données

HTML

Le code suivant n’est pas HTML5 valide

<img src="[Link]
H I ©
[Link]"
UEL
alt="Super Mario" O
width="500px"
f E LM
height="300px"
ch r e
©A
editeur="nintendo"
lancement=1985>

H & H: Research and Training 114 / 118

 HTML5 et compatibilité des navigateurs

HTML

H I ©
Pour tester la compatibilité d’un élément HTML5
U L les navigateurs
Eavec
[Link]
L MO
r e f E
A ch
©

H & H: Research and Training 115 / 118

 Conventions et bonnes pratiques

HTML
Conventions et bonnes pratiques

HTML n’est pas sensible à la casse mais il est recommandé

d’écrire le nom des balises et attributs en minuscule
En HTML5, il n’est plus nécessaire de fermer les balises
H I ©
U
orphelines . Donc, ces deux écritures sont équivalentes :EL
O
LM
<input .... / > et <input .... >

r e f E
Contrairement aux langages de programmation, il est
ch
©A
recommandé en HTML5 de ne pas mettre d’espace avant et
après l’opérateur =
Éviter d’écrire des lignes de code de plus de 80 caractères
En HTML5, les balises <html> et <body> ne sont pas
obligatoires mais il est recommandé de les utiliser

H & H: Research and Training 116 / 118

 Conventions et bonnes pratiques

HTML
Conventions et bonnes pratiques

En HTML5, la balise <head> n’est pas obligatoire (mais recommandée)

et son contenu (par exemple la balise <title>) peut être déclarer
juste avant body

H I ©
En HTML5, la balise <title> est recommandée
UEL
O
f E LM
En HTML5, il est recommandé d’indiquer la langue utilisée dans la page
<html lang="en-US"> pour aider les moteurs de recherche
ch r e
©A
En HTML5, il est recommandé de donner un nom en minuscule aux
fichiers.

En HTML5, une nouvelle balise a été introduite afin d’ajuster l’affichage

en fonction de l’écran
<meta name="viewport" content="width=device-width,
initial-scale=1.0">

H & H: Research and Training 117 / 118

 Code HTML5 valide

HTML

Pour tester la validité d’un code HTML5

H I ©
[Link]
U EL
L MO
e f E
A chr
©

H & H: Research and Training 118 / 118

 Code HTML5 valide

HTML

Pour tester la validité d’un code HTML5

H I ©
[Link]
U EL
L MO
e f E
r é du code
A clahvalidit
Extension VSC pour
©
W3C Validation

H & H: Research and Training 118 / 118