Vous êtes sur la page 1sur 84

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

elmouelhi.achref@gmail.com

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

I ©
U ELH
M O
f E L
chr e
©A

H & H: Research and Training 6 / 118


Introduction

HTML

HTML : Hyper Text Markup Language

Ce n’est pas un langage de programmation


I ©
C’est plutôt un langage de description
U E LH
M O
composé de plusieurs balises (tags)

f E L
interprété par le navigateur
c h r e
© A
Il ne nécessite pas un éditeur de texte particulier
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

U E LH
chargé de promouvoir la compatibilité des technologies web
M
(HTML, XML, CSS, SOAP...) O
f E L
WHATWG (Web Hypertext
Group) :
c hr e Application Technology Working

© A 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 I ©
U E LH
O
Signature d’une collaboration entre W3C et WHATWG
M
f E L
But : développement d’une version unique des spécifications
HTML et DOM
chr 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.
I ©
H és comme les
HTML3 : apparue en 1996 avec plusieurs nouveaut
tableaux, les scripts, le positionnementU E L
M O du texte autour des
images, etc.
HTML4 : apparue ene f E L
d’utiliser dec
r 1998 avec la possibilité :
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

I ©
De quoi on a besoin ?
U E LH
un navigateur
M O
f E L
un éditeur de texte
c h r e
©A

H & H: Research and Training 11 / 118


Outils

HTML

Quelques navigateurs

Google chrome : https://www.google.com/chrome/ I ©


U E LH
Mozilla firefox :
O
M
f E L
https://www.mozilla.org/fr/firefox/new/
e
Edge (installé parhdréfaut sous Windows)
c
... © A

H & H: Research and Training 12 / 118


Outils

HTML
Quelques éditeurs de texte

Sublime text : https://www.sublimetext.com/3

Atom : https://atom.io/

I ©
Notepad++ :

U E
https://notepad-plus-plus.org/download/v7.5.7.html LH
M O
Brackets : http://brackets.io/
f E L
...
chr e
©A

H & H: Research and Training 13 / 118


Outils

HTML
Quelques éditeurs de texte

Sublime text : https://www.sublimetext.com/3

Atom : https://atom.io/

I ©
Notepad++ :

U E
https://notepad-plus-plus.org/download/v7.5.7.html LH
M O
Brackets : http://brackets.io/
f E L
...
chr e
©A
CodePen : une solution en ligne

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


https://codepen.io/

H & H: Research and Training 13 / 118


Outils

HTML

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

I ©
LH
Console auto-intégrée

U E
Auto-complétion
M O
Auto-compilation
f E L
c h 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

code.visualstudio.com/download

I ©
U ELH
M O
f E L
chr e
©A

H & H: Research and Training 15 / 118


Outils

HTML

Quel IDE pour HTML ?

Visual Studio Code

code.visualstudio.com/download

I ©
U E LH
M O
E L
Visual Studio Code (ou VSC) , pourquoi ?
f
Gratuit
chr 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


I ©
H File >
Pour activer la sauvegarde automatique : E
U L
aller dans
AutoSave
M O
E
Pour indenter son codef: Alt
L
c h r e Shift f

© Asélection multiple : Ctrl f2


Pour faire une

H & H: Research and Training 16 / 118


Outils

HTML

Pour créer un projet sous VSC


Allez dans File > Open Folder...
I ©
U ELH
Cliquez sur Nouveau dossier et saisissez cours-html
M O
f E L
Cliquez sur le dossier cours-html puis sur le dossier

chr
Sélectionner un dossier e
©A
Créez un fichier index.html dans cours-html
Dans index.html, 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>
I ©
<meta charset="UTF-8">
U ELH
scale=1.0"> M O
<meta name="viewport" content="width=device-width, initial-

<title>Document</title>
f E L
</head>
chr e
<body> ©A
</body>

</html>

H & H: Research and Training 18 / 118


Outils

HTML

Extension Live Server


I ©
Installez l’extension Live Server
U ELH
M O
E L
Faites un clic doit sur index.html
f
c
Cliquez sur Openh e
r Live Server
with
©A

H & H: Research and Training 19 / 118


Concept de balises

HTML
Syntaxe
<balise>
objet
</balise>

I ©
U ELH
M O
f E L
chr e
©A

H & H: Research and Training 20 / 118


Concept de balises

HTML
Syntaxe
<balise>
objet
</balise>

I ©
ou bien (les balises orphelines ou auto-fermantes)
U ELH
[objet] <balise/>
M O
f E L
chr e
©A

H & H: Research and Training 20 / 118


Concept de balises

HTML
Syntaxe
<balise>
objet
</balise>

I ©
ou bien (les balises orphelines ou auto-fermantes)
U ELH
[objet] <balise/>
M O
f E L
chr e
© A
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>

I ©
ou bien (les balises orphelines ou auto-fermantes)
U E LH
[objet] <balise/>
M O
f E L
chr e
© A
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 ©
E L
Tout ce qui est entouré par deux balises s’appelle élément
U
M
Un élément peut éventuellement contenir duO texte, liens, balises...
E
Un texte en clair (non-entourfé par
L
c h r e une balise) est affiché

© Areconnues seront ignorées (non-affichées)


Les balises non

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

I ©
une entête : head
un corps : body U ELH
M O
f E L
chr 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

I ©
une entête : head
un corps : body U ELH
M O
f E L
chr 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
I ©
document HTML et indiquant sa version
U E LH
C’est une directive permettant de préciser qu’il s’agit d’un

M O
f E L
c hr e
<!DOCTYPE©
A
<!-- HTML4.01 transitional -->
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

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

I ©
<head> : les méta informations
U E LH
M O
E L
<title> titre du document (affiché par le navigateur en haut de la page)
f
chr 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>

I ©
U ELH
M O
f E L
chr 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>
I ©
texte
U ELH
tableau
M O
f E L
image/vidéo/document

chr e
©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.
I ©
On leur associe donc des attributs.
U ELH
M O
Certains attributs :
f E L
h r e
prennent une seule
c valeur
prennentA
© 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>

I ©
U ELH
M O
f E L
chr e
©A

H & H: Research and Training 27 / 118


Attributs d’une balise

HTML

Exemple d’attribut acceptant une seule valeur


<input type=text>

I ©
U ELH
Une balise peut avoir plusieurs attributs
M O
E L
<input type=text placeholder="saisir votre nom">
f
chr e
©A

H & H: Research and Training 27 / 118


Attributs d’une balise

HTML

Exemple d’attribut acceptant une seule valeur


<input type=text>

I ©
U ELH
Une balise peut avoir plusieurs attributs
M O
E L
<input type=text placeholder="saisir votre nom">
f
chr e
© 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
I ©
</p>
U ELH
M O
f E L
chr 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
I ©
</p>
U ELH
M O
f E L
Remarques
chr 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)
U E L
id : identifiant unique dans la pageO
L M (à voir dans le cous CSS)
style : style CSS de
r e E
l’félément
c h
... ©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

I ©
LH
style="text-align:center;" : pour l’alignement du texte

U E
style="font-family:arial;" : pour le font du text
M O
...
f E L
chr 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

I ©
LH
style="text-align:center;" : pour l’alignement du texte

U E
style="font-family:arial;" : pour le font du text
M O
...
f E L
chr e
©A
Pour choisir une couleur
https://www.w3schools.com/colors/colors_picker.asp

H & H: Research and Training 30 / 118


Attributs d’une balise

HTML

Clés standards de l’attribut style


I ©
width : pour la largeur d’un élément U ELH
M O
E L
height : pour la hauteur d’un élément
f
... chr e
©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
I ©
embed
U ELH
M O
iframe
f E L
img
chr 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


I ©
<b>...</b> : pour mettre un texte en gras
U ELH
M O
f E L
<u>...</u> : pour souligner un texte

h r e
<i>...</i> : pour mettre un texte en italic
c une ligne horizontale
©
<hr> : pour A
afficher

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


I ©
<b>...</b> : pour mettre un texte en gras
U E LH
M O
f E L
<u>...</u> : pour souligner un texte

h r e
<i>...</i> : pour mettre un texte en italic
c une ligne horizontale
©
<hr> : pour A
afficher

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


I ©
U E LH
<strong>...</strong> : pour mettre un texte bien en valeur
M O
E L
<em>...</em> : pour mettre un texte un peu en valeur
f
c h e
r : 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

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

U E
<cite> : citation (en italique)

M O
E L
<code> : élément de code informatique
f
chr
<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) I ©


U E LH
<var> : variable ou expression mathématique (écrite en italique)
M O
E L
<kbd> : texte représentant un raccourci clavier
f
c h r 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>

I ©
U ELH
M O
f E L
chr 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


I ©
ELH
<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>
U
M O
f E L
chr 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


I ©
ELH
<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>
U
M O
f E L
Exemple avec var et sup
chr e
©A
<p><var>x<sup>2</sup></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


I ©
ELH
<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>
U
M O
f E L
Exemple avec var et sup
chr e
©A
<p><var>x<sup>2</sup></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>
I ©
<summary>Programmation par contraintes</summary>
U ELH
<p>
M O
un paradigme de programmation apparu dans les années

f E L
1970 permettant de résoudre des problèmes

chr 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
I ©
chaque paragraphe U ELH
Les navigateurs ajoutent automatiquement un espace entre

M O
E L
Bien que le texte ’flottant’ (non inclus dans un élément de la page)
f
chr e
soit affiché par les navigateurs, il vaut mieux pour des raisons de

©A
’style’ inclure la totalité 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>
I ©
<h2>...</h2>
U ELH
<h3>...</h3> M O
E L
<h4>...</h4> ref
A c h
©
<h5>...</h5>
<h6>...</h6>

H & H: Research and Training 40 / 118


Listes

HTML

Les listes
<ul>...</ul> : une liste non-ordonnée (non-numérotée)
I ©
<ol>...</ol> : une liste ordonnée
U E LH
M Oliste
<li>...</li> : un élément d’une
f E L
c h e
<dl>...</dl> :rune liste de description

© 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>
I ©
<li>Marseille</li>
<li>Manchester</li>
U E LH
</ul>
M O
f E L
chr e
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>
I ©
<li>Marseille</li>
<li>Manchester</li>
U E LH
</ol>
M O
f E L
chr e
©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>
I ©
<li>Manchester</li>
</ol>
U ELH
M O
f E L
c h e
rpour l’attribut type
©A
Les valeurs possibles
1
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>
I ©
<li>Marseille</li>
<li>Manchester</li>
U ELH
</ol>
M O
f E L
chr e
©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>
I ©
<li>Turin</li>
U E LH
</ul>
</li> M O
<li>Espagne</li>
f E L
</ul>
chr 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>
I ©
<dt>Allemagne</dt>
U E LH
<dd> Noir jaune rouge</dd>
M O
</dl>
f E L
chr 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

I ©
une image locale (<img src="image.png">), ou

E LH
à distance (<img src="http://www.site.fr/image.png">)
U
M O
f E L
Cette balise a deux attributs obligatoires : src et alt
Une image n’est c h
pase
r ’incluse’ dans un document. Elle est
référenc© A son adresse
ée par
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
I ©
être W3C Valid)
U E LH
height : hauteur
M O
width : largeur f E L
chr 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
I ©
être W3C Valid)
U E LH
height : hauteur
M O
width : largeur f E L
chr e
©A
Exemple
<img src="image.png" 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
I ©
figure et figcaption
U E LH
<figure>
M O
f E L
<img src="image.png" alt="image personnelle">

chr e
<figcaption>Légende de la figure.</figcaption>

©A
</figure>

H & H: Research and Training 50 / 118


Liens <a>

HTML

Les liens
<a>...</a> : insérer un lien (interne ou externe)
I ©
Hou distant
<a href="http://monsite.fr">U E L
pour créer un lien vers un autre document local
O
M 2 </a>
monsite </a> ou
<a href="page2.html"> Page
f E L
pour pointer versh
c e
unr 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="http://www.lsis.org/elmouelhia/courses/web/coursCSS.
pdf" download="cours.pdf">
Télécharger mon cours CSS
</a>
I ©
U E LH
M O
f E L
chr e
©A

H & H: Research and Training 52 / 118


Liens download

HTML
Lien pour télécharger un fichier

<a href="http://www.lsis.org/elmouelhia/courses/web/coursCSS.
pdf" download="cours.pdf">
Télécharger mon cours CSS
</a>
I ©
U E LH
M O
Remarques
f E L
c h r e
©A
La valeur de l’attribut download est optionnel.

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 cours.pdf.

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


I ©
H target="
E L
<a href="http://www.lsis.org/elmouelhia/"
U
_blank">
M O
Ma page
f E L
</a>
c hr e
©A

H & H: Research and Training 53 / 118


Liens <base>

HTML

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


<base href="http://www.lsis.org/elmouelhia/">
I ©
U E LH
M O
f E L
chr 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="http://www.lsis.org/elmouelhia/">
I ©
U E LH
M O
E L
Ainsi, on peut simplifier la création de liens
f
c h r
<a href="teaching.html">Mes
e cours</a>
© A
En cliquant sur ce lien, on se redirige vers
http://www.lsis.org/elmouelhia/teaching.html

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.
I ©
U E LH
Une table (balise <table>) est divisée en lignes et colonnes
M O
f E L
Une bordure délimite ou non les cellules de la table (Balise <td>),

chr e
organisée en lignes (balise <tr>)

©A
La table préserve en permanence l’aspect visuel de colonnes dont
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


I ©
<table> : pour déclarer un tableau U E LH
M O
E L
<tr> : pour déclarer une ligne dans un tableau (table row)
f
c h e
r une 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> I ©
<td>PHP</td>
U E LH
<td>10</td>
M O
</tr>
f E L
<tr>
<td>Java</td>
chr e
</tr>
<td>8</td>
©A
</table>

H & H: Research and Training 57 / 118


Tableaux <caption> et <th>

HTML

Autres balises de tableau I ©


U E LH
<caption> : pour ajouter une légende au tableau (texte
M O
associé)
f E L
h e
r cellule d’en-tête
<th> : pour déclarer
c une

©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> I ©
<th>Moyenne</th>
U E LH
</tr>
M O
<tr>
f E L
<td>PHP</td>
<td>10</td>
chr 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>
I ©
<th>Nom</th>
<th colspan="2">Mail</th>
U E LH
</tr> M O
<tr>
f E L
chr e
<td>Achref El Mouelhi</td>
©A
<td>achref@elmouelhi.fr</td>
<td>elmouelhi@achref.fr</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>
I ©
<td>Achref El Mouelhi</td>
U E LH
</tr>
M O
<tr>
f E L
<th rowspan="2">Mail</th>
chr e
<td>achref@elmouelhi.fr</td>
</tr>
<tr>
©A
<td>elmouelhi@achref.fr</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>
I ©
</thead>
<tbody>
<tr>
U E LH
<td>January</td>
M O
<td>600$</td>
</tr>

f E L
<tr>
<td>February</td>

chr e
©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>
I ©
<td>Matière</td>
<td>Coefficient</td>
U E LH
<td>Moyenne</td>
M O
</tr>
f E L
<tr>
<td>PHP</td>
chr e
©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 :


I ©
background-color
U E LH
border M O
f E L
width
chr e
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


I ©
width : pour définir la largeur
U E LH
M O
height : pour la hauteur
f E L
h r e
text-align : pour l’alignement
c 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
I ©
organiser les pages des sites web. U E LH
Les tableaux ont été largement utilisés dans le passé pour

M O
E L
Cet usage est aujourd’hui obsolète et absolument découragé.
f
On utilise pourc h e
rles balises <div> et les styles CSS qui
A loin.
© plus
seront vus
cela

H & H: Research and Training 66 / 118


Formulaires

HTML
Déclaration d’un formulaire

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


</form>

I ©
U E LH
M O
f E L
chr 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>

I ©
Les attributs d’un formulaire

U E LH
O
method : concerne l’envoi de données et peut prendre deux valeurs.
M
E L
GET : non fréquemment utilisée car limitée à 2048 caractères. En
f
chr e
plus, les informations envoyées seront visibles dans la zone
A
d’adresse.
©
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 ?


I ©
Des zones de saisie U E LH
M O
Des zones de choix
f E L
Des boutons chr 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">

I ©
U E LH
M O
f E L
chr 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

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

U E
M O
f E L
chr 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

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

U E
M
Un libellé associé à une zone de saisie O
f E L
chr e
<label for="identifiant zone saisie">texte</label>

©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

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

U E
M
Un libellé associé à une zone de saisie O
f E L
chr e
<label for="identifiant zone saisie">texte</label>

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

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

U E
M
Un libellé associé à une zone de saisie O
f E L
chr e
<label for="identifiant zone saisie">texte</label>

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


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

c h e
r value=’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

I ©
U E LH
M O
f E L
chr e
©A

H & H: Research and Training 71 / 118


Formulaires Zones de saisie

HTML

Avant HTML 5
password : pour les mots de passe

I ©
U E LH
Avec HTML 5
M O
f E L
c h r e
email : pour les adresses emails

© A les nombres (attributs min, max et step)


number : pour
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


I ©
Les cases à cocher
U E LH
M O
Les boutons radio
f E L
c h r e
Les listes déroulantes
©A

H & H: Research and Training 72 / 118


Formulaires Zones de choix

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

I ©
U E LH
M O
f E L
chr e
©A

H & H: Research and Training 73 / 118


Formulaires Zones de choix

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

I ©
Boutons radios
U E LH
<input type="radio" name="nom du choix" [checked]>
M O
f E L
chr e
©A

H & H: Research and Training 73 / 118


Formulaires Zones de choix

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

I ©
Boutons radios
U E LH
<input type="radio" name="nom du choix" [checked]>
M O
f E L
chr 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>
I ©
...
<option value="valeur1">valeurN</option>
U E LH
</optgroup>
M O
<optgroup label="label2">
f E L
chr e
<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">
I ©
<datalist id="sports">
U E LH
<option value="football">
M O
<option value="handball">
f E L
<option value="cross fit">
chr e
©A
<option value="tennis">
<option value="hockey">
</datalist>

H & H: Research and Training 75 / 118


Formulaires Boutons

HTML

Trois types de boutons

I ©
LH
submit : envoie le contenu d’un formulaire à la page indiqué
dans l’action
U E
M O
f E L
reset : remet à zéro (efface) le contenu d’un formulaire
button : boutonh
c e
r é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
I ©
U E LH
M O
f E L
chr 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
I ©
U E LH
M O
f E L
Pour déclarer un bouton simple (pas de type submit) dans une
balise form
chr e
©A
<input type="button" value="cliquer">

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
I ©
U E LH
M O
f E L
Pour déclarer un bouton simple (pas de type submit) dans une
balise form
chr e
©A
<input type="button" value="cliquer">

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 ©
E L
<input type="submit" value="envoyer">
U
M O
f E L
c hr e
©A

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 E L
M O
f E L
Ou tout simplementh
c r e
(uniquement dans un formulaire)
©A
<button>envoyer</button>

H & H: Research and Training 78 / 118


Formulaires Barres de progression

HTML

Deux types de barre de progression I ©


U E
progress : barre de progression dynamique représentant
LH
M O
l’avancement d’une tâche.
f E L
meter : barre deh
c r e
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>


I ©
LH
<progress id="compte" value="60" max="100"> 60% </progress>

U E
M O
f E L
chr 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>


I ©
LH
<progress id="compte" value="60" max="100"> 60% </progress>

U E
M O
Exemple avec meter
f E L
c h e
r mémoire utilisé : </label>
© Avalue="120" min="0" max="500">120 sur 500 GO</
<label for="disk">Espace
<meter id="disk"
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
I ©
chargement de la page
U E LH
autocomplete : pour indiquer M Oautorise auto-complétion
si on
f E L
h r e
multiple : pour indiquer
c
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="traitement.php">


<fieldset>
<legend>Nom complet</legend> <!-- partie nom prénom -->
<label for="nom">nom :</label>
I ©
LH
<input type="text" id="nom"><br>
<label for="prenom">prénom :</label>
U E
<input type="text" id="prenom">
M O
</fieldset>
f E L
<fieldset>
chr 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>

I ©
U ELH
M O
f E L
chr 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>

I ©
Attention

U ELH
O
Les navigateurs ne supportent pas tous les formats audios existants
M
f E L
chr 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>

I ©
Attention

U E LH
O
Les navigateurs ne supportent pas tous les formats audios existants
M
f E L
chr 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>

I ©
U E LH
M O
f E L
chr 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>

I ©
Attention

U ELH
M O
Les navigateurs ne supportent pas tous les formats vidéos existants

f E L
chr 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>

I ©
Attention

U ELH
M O
Les navigateurs ne supportent pas tous les formats vidéos existants

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

<video controls>
<source src="fichier.mp4">
<source src="fichier.webm">
<source src="fichier.ogv">
</video>

H & H: Research and Training 84 / 118


Encore un peu de multimédia

HTML

Une deuxième solution consiste à


I ©
héberger la vidéo sur YouTube U ELH
M O
E L
copier l’identifiant de la vidéo
f
c h
utiliser ce dernier
e
r la balise iframe
dans
©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 I ©


U ELH
<iframe width="400" height="300" src="https://www.
M O
youtube.com/embed/8cm1x4bC610">
f E L
</iframe>
chr e
©A

H & H: Research and Training 86 / 118


Encore un peu de multimédia

HTML

Les attributs possibles


I ©
poster : image à afficher à la place de la vidéo
U ELH
controls : pour afficher les boutons lecture et pause
M O
f E
loop : pour jouer le fichier L
vidéo en boucle
c h r e
autoplay :A
la page© pour lire le contenu du fichier dés le chargement de

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


I ©
PDF
U ELH
flash
M O
f E L
image
chr e
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


I ©
PDF
U E LH
flash
M O
f E L
image
chr e
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 fichier.html
<!DOCTYPE html>
<html>
<head>
<title>Fichier</title>
</head>
<body style="background-color:teal">
I ©
Hello everybody
</body>
U E LH
</html>
M O
f E L
chr e
©A

H & H: Research and Training 89 / 118


Objets

HTML
Considérons la page fichier.html
<!DOCTYPE html>
<html>
<head>
<title>Fichier</title>
</head>
<body style="background-color:teal">
I ©
Hello everybody
</body>
U E LH
</html>
M O
f E L
e
Il est possible d’inclure fichier.html dans une autre page index.html

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

HTML

I ©
Remarque
U E LH
O
La balise orpheline <embed> permet également d’inclure un
M
f E L
document HTML, une image ou un flash (n’est pas compatible avec

chr e
tous les navigateurs et dépréciée depuis 2015)

©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.
I ©
H à l’intérieur
d’une balise block. Elle ne crée pas deU E L
inline : c’est une balise qui se situe obligatoirement

M O retour à la ligne, le texte

sur la même ligne. ef E


L
qui se trouve à l’intérieur s’écrit donc à la suite du texte précédent,

c h r
© A
Exemple
block : <p>, <h1>...
inline : <a>...

H & H: Research and Training 91 / 118


Classification des balises

HTML

Les balises universelles


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

H & H: Research and Training 92 / 118


Classification des balises

HTML

Quelques propriétés de balise inline I ©


U
Il ignore les marges top et bottom mais applique les margesELH
M O
f E L
left et right, ainsi que tout padding.

c h
Il ignore les propri r
ét e
é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


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

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

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


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

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

chr
©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
I ©
section
U E LH aside

M
article O
f E L
c h 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; : ç
I ©
&amp; : &
&aelig; : æ
U ELH
&times; : ×
M O
&quot; : ”
f E L
&lt; : <
chr e
&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; : ç
I ©
&amp; : &
&aelig; : æ
U ELH
&times; : ×
M O
&quot; : ”
f E L
&lt; : <
chr e
&gt; : >
... ©A
Autres caractères spéciaux

https://www.w3schools.com/charsets/ref_utf_latin1_supplement.asp

H & H: Research and Training 96 / 118


Attributs globaux

HTML
Quelques attributs globaux

id

class

I ©
style

U E LH
draggable
M O
lang
f E L
chr e
hidden
© A
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

I ©
LH
<a href="http://www.lsis.org/elmouelhia" accesskey="e" title="
alt shift e">
U E
Ma page
M O
</a>
<br>
f E L
chr e
<a href="http://www.francefootball.fr" 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">
I ©
LH
Les meilleures années, les annees 80...
</textarea>
U E
M O
f E L
chr 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">
I ©
LH
Les meilleures années, les annees 80...
</textarea>
U E
M O
f E L
h r
S’il ne s’agit pas d’une zone e
de saisie, on ajoute l’attribut contenteditable
c et vérifier que le contenu est éditable)
A
(cliquer sur le paragraphe
©
<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

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

H & H: Research and Training 100 / 118


ARIA

HTML

ARIA
I ©
et accessibles) U E LH
Accessible Rich Internet Applications (applications internet riches

M O
E
Ensemble d’attributs HTML
f L
Permettant de c h e
r accessible le contenu d’une application web
A outils d’assistance
rendre
© quelques
en utilisant

H & H: Research and Training 101 / 118


ARIA

HTML

Quelques outils d’assistance


I ©
H Google
ChromeVox (pour ajouter comme extensionsLsous
U E
Chrome
O
https://chrome.google.com/webstore/detail/chromevox
M
L )
-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=fr
f E
Jaws
c h r e
©A
VoiceOver

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

I ©
U E LH
M O
f E L
chr 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

I ©
Exemples de rôle

U E LH
M O
Rôles de structure : main, navigation, article, heading...

f E L
c h r e
Rôles de composant graphique : alert, button, link, radio...

A
Rôles composés
©
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>
I ©
</div>
U E LH
M O
f E L
chr 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>
I ©
</div>
U ELH
M O
E L
def composant
Exemple 2 avec un rôle e
ch r graphique

© A
<h2 role="alert">
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>
I ©
U ELH
M O
f E L
chr e
©A

H & H: Research and Training 105 / 118


ARIA

HTML

Exemple avec un rôle de structure


<nav role=navigation>
...
</nav>
I ©
U E LH
M O
E L
Exemple avec des rôles composés
f
c hr e
<nav role=navigation>
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...
I ©
U E LH
M O
f E L
chr 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...
I ©
U E LH
M O
Ne jamais faire ça
f E L
c hr 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...
I ©
U E LH
M O
Ne jamais faire ça
f E L
c hr 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


I ©
accepte comme valeur un texte personnalisé
U E LH
M O
f E L
chr 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


I ©
accepte comme valeur un texte personnalisé
U E LH
M O
f E L
chr e
©A
Exemples de propriétés

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>
I ©
</div>
U ELH
M O
f E L
chr 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>
I ©
</div>
U ELH
M O
f E L
c h r e
Exemple 2 avec une propriété de composant graphique
<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 ©
E L
Les propriétés de composant graphique aria-valuemax,
Uavant HTML5
O
aria-required, etc ont été introduites
M
f E L
c h r e
HTML5 a intégré quelques propriétés comme required,

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

I ©
U E LH
M O
f E L
chr 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>

I ©
U E LH
Exemple avec une propriété de relation (aria-labelledby permet d’indiquer les

M O
identifiants des éléments qui labellisent l’objet)

f E L
<div id="teacher">Enseignant</div>

chr e
©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>

I ©
<div>
<div id=nom>Nom</div> U E LH
M
<input type="text" aria-label="zone de saisie" O
aria-labelledby="nom teacher">f E L
</div>
chr 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>
I ©
<input type=text aria-required=true aria-
U ELH
describedby="description" >
M O
</div>
f E L
c h e
r hidden>
A un champ obligatoire, il faut saisir
<div id="description"
© est
Le prénom
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
I ©
U ELH
M O
f E L
chr 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
I ©
U ELH
M O
Exemple
f E L
c hr e
<img src="http://www.lsis.org/elmouelhia/images/
mario.jpg"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="http://www.lsis.org/elmouelhia/images/ I ©
mario.jpg"
U ELH
alt="Super Mario"
M O
width="500px"
f E L
height="300px"
chr e
©A
editeur="nintendo"
lancement=1985>

H & H: Research and Training 114 / 118


HTML5 et compatibilité des navigateurs

HTML

I ©
Hles navigateurs
E
Pour tester la compatibilité d’un élément HTML5
U L
avec
M O
https://caniuse.com/
f E L
c h r e
©A

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
I ©
En HTML5, il n’est plus nécessaire de fermer les balises
orphelines . Donc, ces deux écritures sont équivalentes :
U ELH
M
<input .... / > et <input .... > O
f E L
recommandA é en h r e
Contrairement aux langages de programmation, il est
c HTML5 de ne pas mettre d’espace avant et
©érateur =
après l’op
É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
U E L
M O
f
<html lang="en-US"> pour E L
En HTML5, il est recommandé d’indiquer la langue utilisée dans la page
aider les moteurs de recherche
c h re
En HTML5, ilAest 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


I ©
https://validator.w3.org/
U ELH
M O
f E L
chr e
©A

H & H: Research and Training 118 / 118


Code HTML5 valide

HTML

Pour tester la validité d’un code HTML5


I ©
https://validator.w3.org/
U ELH
M O
f E L
chr e
©A
Extension VSC pour la validité du code
W3C Validation

H & H: Research and Training 118 / 118

Vous aimerez peut-être aussi