L3 informatique

2023-2024

Programmation Web
Partie 2 : HTML

Étienne André

Université Sorbonne Paris Nord

[Link]@[Link]

Version diapositives à trous : 25 janvier 2024

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 1 / 103
 Outline

1 Définitions

2 Histoire et normalisation du HTML

3 Structure d’un document HTML5

4 Syntaxe de HTML5

5 Le DOM

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 2 / 103
 Internet

Définition (Internet)
Internet est un ensemble de réseaux interconnectés, utilisant un ensemble de
protocoles de communication et d’échanges de données standardisés.

Internet est donc un réseau de réseaux.

Orthographe recommandée : Internet

(Variantes : l’Internet, l’internet, internet, les Internets)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 3 / 103
 World Wide Web

Définition (World Wide Web)

Le World Wide Web est un système fonctionnant au-dessus d’Internet, et basé sur
des . Il est constitué de organisées en
lesquelles sont consultables grâce à un

Autres noms :
Le Web
La toile

Remarque :
Le World Wide Web n’est qu’une application d’Internet (aux côtés d’autres
comme le

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 4 / 103
 World Wide Web

Définition (World Wide Web)

Le World Wide Web est un système fonctionnant au-dessus d’Internet, et basé sur
des . Il est constitué de organisées en
lesquelles sont consultables grâce à un

Autres noms :
Le Web
La toile

Remarque :
Le World Wide Web n’est qu’une application d’Internet (aux côtés d’autres
comme le

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 4 / 103
 HTML

Définition (HTML)
HTML (HyperText Markup Language), ou langage de balisage d’hypertexte, est

Hyperlien : permet de passer d’un document à un autre

HTML est aujourd’hui de facto le seul langage de description de pages Web.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 5 / 103
 HTML : remarques

Remarque
HTML ne doit pas être confondu avec :
PHP : langage dont une application possible est d’être utilisé côté serveur
pour générer du code HTML

(My)SQL : langage de requêtes d’accès à une base de données dont une

application possible est d’être utilisé côté serveur, par exemple avec PHP,
pour générer du code HTML

JavaScript : langage orienté objet pouvant être utilisé côté client pour
générer du code HTML

jQuery : bibliothèque libre de JavaScript pour manipuler une page Web

Ajax : architecture combinant notamment JavaScript, XML et CSS pour

construire des applications Web

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 6 / 103
 Outline

1 Définitions

2 Histoire et normalisation du HTML

3 Structure d’un document HTML5

4 Syntaxe de HTML5

5 Le DOM

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 7 / 103
 Outline

2 Histoire et normalisation du HTML

Historique
Un langage standardisé

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 8 / 103
 Au commencement : le texte

Années 1980 : nécessité de publier, partager et retrouver des documents

1 Le titre de mon document

2

3 Un paragraphe dans mon document .

4 Un autre paragraphe qui mentionne une autre page Web .

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 9 / 103
 Les liens hypertextes

Fin des années 1980 : les liens hypertextes

Permet de pointer vers une autre page

1 Le titre de mon document

2

3 Un paragraphe dans mon document .

4 Un autre paragraphe qui mentionne une
5 <A HREF = " http :// www . cern . fr " > autre page Web </ A >.

( Syntaxe évidemment non conforme à la norme HTML actuelle.)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 10 / 103
 Les balises
1991 : proposition de balises

1 < TITLE > Le titre de mon document </ TITLE >

2

3 Un paragraphe dans mon document .

4 <P >
5 Un autre paragraphe qui mentionne une
6 <A HREF = " http :// www . cern . fr " > autre page Web </ A >.

( Syntaxe évidemment non conforme à la norme HTML actuelle.)

Tim Berners-Lee

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 11 / 103
 Le Web du début des années 1990

(Navigateur NCSA Mosaic visitant l’ancienne version du site Web du CERN)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 12 / 103
 L’influence des navigateurs
1991–1993 : en l’absence de standard, ce sont les navigateurs Web (Mosaic,
Netscape) qui « décident » de facto de l’évolution de HTML

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 13 / 103
 L’influence des navigateurs
1991–1993 : en l’absence de standard, ce sont les navigateurs Web (Mosaic,
Netscape) qui « décident » de facto de l’évolution de HTML

Ajouts notables des navigateurs :

les images (balise <img>)
diverses balises qui seront « supprimées » par la suite (texte clignotant,
centré, etc.)

1 < TITLE > Le titre de mon document </ TITLE >

2

3 Un paragraphe dans mon document .

4 <P >
5 < BLINK > Du texte clignotant </ BLINK >
6 < CENTER > Du texte centr é </ CENTER >
7 < IMG SRC = " mon_image . gif " >

( Syntaxe évidemment non conforme à la norme HTML actuelle.)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 13 / 103
 HTML 2.0 : la première spécification

1995 : spécification de HTML 2.0 par l’IETF

Internet Engineering Task Force (Détachement d’ingénierie d’Internet), qui
élabore les standards d’Internet

1996 : prise en main par le W3C (World Wide Web Consortium)

Consortium (452 organisations membres en 2021) qui élabore les standards du
Web

1997 : publication de HTML 3.2 par le W3C (sous forme de recommandation)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 14 / 103
 HTML 4.01 : la stabilité

1997–1998 : publication de HTML 4.0 par le W3C (sous forme de

recommandation)

3 variations
Strict : éléments obsolètes interdits
Transitional (transitoire) : éléments obsolètes autorisés
Frameset (cadre) : assemblage d’éléments de type cadre

Les éléments obsolètes sont des éléments autorisés par les navigateurs
Web de l’époque, mais destinés à être remplacés par les feuilles de style

1999 : publication par le W3C de HTML 4.01, restée longtemps la dernière

version du standard

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 15 / 103
 HTML5 : le nouveau standard

2008 : publication par le W3C d’un premier brouillon (draft) de la

spécification de HTML5
Début de la création de pages Web conformes à la pré-spécification HTML5

2011 : dernier appel pour contribuer à la spécification

28 octobre 2014 : publication du standard HTML5 comme recommandation

W3C

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 16 / 103
 HTML5 : le nouveau standard

2008 : publication par le W3C d’un premier brouillon (draft) de la

spécification de HTML5
Début de la création de pages Web conformes à la pré-spécification HTML5

2011 : dernier appel pour contribuer à la spécification

28 octobre 2014 : publication du standard HTML5 comme recommandation

W3C

Ce cours se concentre sur HTML5.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 16 / 103
 Outline

2 Histoire et normalisation du HTML

Historique
Un langage standardisé

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 17 / 103
 L’intérêt du respect du standard

Interopérabilité, compatibilité entre navigateurs

Meilleur référencement
Google favoriserait le référencement des sites Web dont le code HTML est
conforme aux standards

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 18 / 103
 Limite du respect du standard

Limites de l’interopérabilité
Une page Web peut ne pas s’afficher de la même façon selon les navigateurs,
même si elle respecte entièrement le standard HTML5, et même si les navigateurs
respectent eux aussi le standard.
Il convient donc d’en tester l’affichage sur les principaux navigateurs.

Néanmoins, respecter le standard limite les différences potentielles d’affichage !

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 19 / 103
 Validation du code HTML

À la différence de nombreux langages de programmation (qui peuvent afficher

des erreurs à la compilation ou à l’exécution), un non-respect de la syntaxe de
HTML n’empêchera pas l’affichage sur le navigateur.

Plus généralement, le navigateur affichera quelque chose (de non spécifié) ou

n’affichera rien, mais n’affichera jamais d’erreur.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 20 / 103
 Validation du code HTML

À la différence de nombreux langages de programmation (qui peuvent afficher

des erreurs à la compilation ou à l’exécution), un non-respect de la syntaxe de
HTML n’empêchera pas l’affichage sur le navigateur.

Plus généralement, le navigateur affichera quelque chose (de non spécifié) ou

n’affichera rien, mais n’affichera jamais d’erreur.

Validation
Il faut impérativement valider son code HTML avant de le publier.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 20 / 103
 Validateur du W3C

Un outil indispensable
le validateur du W3C :

[Link]

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 21 / 103
 Outline

1 Définitions

2 Histoire et normalisation du HTML

3 Structure d’un document HTML5

4 Syntaxe de HTML5

5 Le DOM

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 22 / 103
 Outline

3 Structure d’un document HTML5

Principe des balises
En-tête

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 23 / 103
 Un langage à base de balises
HTML repose sur la notion de (tags)

Deux types de balises :

1 Les balises qui sont ouvertes puis fermées, et encadrent du contenu
Exemple : <em>Un peu d'italique</em>

2 Les balises qui s’ouvrent et se ferment en même temps

Exemple : <img src="mon_image.png">

1 < h1 > Un exemple de titre </ h1 >

2 < hr >
3 < div >
4 <p >
5 Du texte <b > gras </b > , puis < em > italique </ em > ,
6 puis <b > < em > gras et italique </ em > </ b >.
7 </ p >
8 < img src = " mon_image . png " alt = " Une image " >
9 </ div >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 24 / 103
 Balises et attributs

Certaines balises peuvent posséder des attributs.

Exemples :

1 < meta charset = " utf -8 " >

1 < img src = " mon_image . png " alt = " Une image " >

1 <p class = " important " >

2 Du texte au contenu vraiment important
3 </ p >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 25 / 103
 Balises et hiérarchie

Les balises sont structurées de façon hiérarchique

Chaque balise hérite des propriétés de la balise de niveau supérieur — à moins
qu’elle ne les redéfinisse.

1 <p > Ce texte est <b > seulement en gras </ b >. </ p >
2 <p > Ce texte est <b > seulement en gras <i > et
3 cette partie est en gras et en italique </ i > </ b >. </ p >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 26 / 103
 Balises et hiérarchie

Les balises sont structurées de façon hiérarchique

Chaque balise hérite des propriétés de la balise de niveau supérieur — à moins
qu’elle ne les redéfinisse.

1 <p > Ce texte est <b > seulement en gras </ b >. </ p >
2 <p > Ce texte est <b > seulement en gras <i > et
3 cette partie est en gras et en italique </ i > </ b >. </ p >

Ordre de fermeture
Il est impératif de fermer les balises dans l’ordre inverse duquel on les a ouvertes.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 26 / 103
 Commentaires
Les commentaires sont du code HTML qui n’est pas exécuté, donc invisible sur le
navigateur.
Syntaxe :
1 <! -- Texte entre commentaires -- >

Exemple :
1 < h1 > Un titre ( qui va s ' afficher ) </ h1 >
2

3 <p > Cette phrase va s ' afficher sur le navigateur .

4 <! -- En revanche , cette phrase ne s ' affichera pas -- >
5 </ p >

Rendu :
Un titre (qui va s’afficher)
Cette phrase va s’afficher sur le navigateur.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 27 / 103
 Commentaires : attention

Attention à la visibilité des commentaires

Les commentaires restent visibles dans la source de la page Web, qui est
accessible depuis le client.
Attention à ne pas y laisser d’informations confidentielles !

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 28 / 103
 Espaces
Les espaces affichées en HTML s’affichent également sur le navigateur.
Attention donc à ne pas multiplier les espaces !

En revanche, les sauts de ligne en HTML deviennent des espaces sur le

navigateur.
Pour afficher un saut de ligne, utiliser <br>
Note : un meilleur usage est d’utiliser plusieurs <p>paragraphes</p>

Exemple :
1 <p > Cette phrase s ' affiche
2

3 sur une seule ligne . < br > Cette phrase est dessous . </ p >

Rendu :
Cette phrase s’affiche sur une seule ligne.

Cette phrase est dessous.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 29 / 103
 Structuration d’un document HTML
Deux grandes parties :
En-tête : définition du titre, du codage, des mots-clés, etc.
Information destinée aux machines (navigateur, robots, etc.)

Corps : contenu de la page Web

Information destinée à l’humain (et aux machines)

1 <! DOCTYPE html >

2 < html lang = " fr " >
3 < head >
4 <! -- Ici , l ' en - t ê te -- >
5 </ head >
6

7 < body >

8 <! -- Ici , le corps de la page -- >
9 </ body >
10 </ html >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 30 / 103
 Un exemple minimal (syntaxe conforme à HTML5)

1 <! DOCTYPE html >

2 < html lang = " fr " >
3 < head >
4 < meta charset = " utf -8 " >
5 < title > Le titre de mon document </ title >
6 </ head >
7

8 < body >

9 <p > Ce document est constitu é d ' une seule phrase . </ p >
10 </ body >
11

12 </ html >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 31 / 103
 Outline

3 Structure d’un document HTML5

Principe des balises
En-tête

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 32 / 103
 Document Type Definition
Un document conforme à la syntaxe de HTML5 commence nécessairement par
1 <! DOCTYPE html >

Il s’agit de la définition du type du document (DTD, Document Type Definition), qui

décrit un modèle de document XML ou SGML.

Valeurs pour d’anciennes versions de (X)HTML :

HTML 4.01 strict
1 <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01// EN "
2 " http :// www . w3 . org / TR / html4 / strict . dtd " >

XHTML 1.1
1 <! DOCTYPE html PUBLIC
2 " -// W3C // DTD XHTML 1.1// EN "
3 " http :// www . w3 . org / TR / xhtml11 / DTD / xhtml11 . dtd " >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 33 / 103
 La balise title (1/2)

Située dans l’en-tête du document

Entre les balises et

Seule balise obligatoire de l’en-tête

Syntaxe :
1 <! DOCTYPE html >
2 < html lang = " fr " >
3 < head >
4 < title > Le titre de ma page Web </ title >
5 </ head >
6 ...

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 34 / 103
 La balise title (2/2)
Son contenu définit
Auparavant systématiquement affiché dans le titre de la fenêtre du
navigateur ou de l’onglet
De moins en moins aujourd’hui (rarement sur téléphones intelligents)
Améliore le référencement

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 35 / 103
 Les balises meta

Situées dans l’en-tête du document

Entre les balises

Ordre non spécifié

Permettent de donner des informations au navigateur et aux moteurs de

recherche
Codage des caractères
Auteur, description, mots-clés de la page

Ne s’affichent jamais directement sur la page

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 36 / 103
 Codage des caractères

Syntaxe :
1 < meta charset = " NOM_DU_CODAGE " >

Valeurs possibles
: unicode (très fortement recommandé)
1 < meta charset = " utf -8 " >

: alphabet latin (déconseillé)

et bien dâ ? ?autres

La présence de cette balise nâ ? ?est pas obligatoire selon le W3C, mais très
très très fortement recommandée (comprendre : obligatoire).

Liste complète des valeurs :

[Link]

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 37 / 103
 Codage des caractères : échappement en HTML

Quelques caractères d’échappement utiles en français

caractère codage
À &Agrave;
Ç &Ccedil;
É &Eacute;
È &Egrave;
Ê &Ecirc;
ï &iuml;
€ &euro;
« &laquo;
» &raquo;
< &lt;
> &gt;
& &amp;
&nbsp;

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 38 / 103
 Codage des caractères : échappement en HTML

Quelques caractères d’échappement utiles en français

caractère codage
À &Agrave;
Ç &Ccedil;
É &Eacute;
È &Egrave;
Ê &Ecirc;
ï &iuml;
€ &euro;
« &laquo;
» &raquo;
< &lt;
> &gt;
& &amp;
&nbsp;

. . . mais l’échappement est généralement inutile en sélectionnant l’UTF-8 !

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 38 / 103
 Exemple d’échappement

1 & laquo ;& nbsp ;& Ccedil ; a va ,

& Eacute ; tienne & nbsp ;?& nbsp ;& raquo ;, demanda
& Eacute ; l & eacute ; onore .

Rendu :
« Ça va, Étienne ? », demanda Éléonore.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 39 / 103
 Exemple d’échappement

1 & laquo ;& nbsp ;& Ccedil ; a va ,

& Eacute ; tienne & nbsp ;?& nbsp ;& raquo ;, demanda
& Eacute ; l & eacute ; onore .

Rendu :
« Ça va, Étienne ? », demanda Éléonore.

Équivalent au code suivant en UTF-8 !

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 39 / 103
 Espaces insécables

Les espaces insécables s’affichent en utilisant &nbsp;

Pour non-breakable blank space

Usage typographique en français :

Après 
Avant ? ! ; : 

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 40 / 103
 Espaces insécables

Les espaces insécables s’affichent en utilisant &nbsp;

Pour non-breakable blank space

Usage typographique en français :

Après 
Avant ? ! ; : 

Pour en savoir plus sur la typographie :

Introduction aux règles typographiques en français :
[Link]

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 40 / 103
 Quelques caractères spéciaux

Certains caractères sont interdits dans le code HTML (en dehors des balises)
Il faut donc utiliser un codage particulier du caractère :
: &lt;
: &gt;
: &amp;

Exemple :
1 La recherche R & amp ; D en informatique & gt ; le reste du monde

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 41 / 103
 Quelques caractères spéciaux

Certains caractères sont interdits dans le code HTML (en dehors des balises)
Il faut donc utiliser un codage particulier du caractère :
: &lt;
: &gt;
: &amp;

Exemple :
1 La recherche R & amp ; D en informatique & gt ; le reste du monde

Affiche :
La recherche R D en informatique le reste du monde

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 41 / 103
 Description, mots-clés, auteur

Syntaxe :
1 < meta name = " description " content = " Introduction au
d é veloppement Web " >
2 < meta name = " keywords " content = " cours , HTML , Institut
Galil ée , Web " >
3 < meta name = " author " content = " Le prof " >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 42 / 103
 Description, mots-clés, auteur

Syntaxe :
1 < meta name = " description " content = " Introduction au
d é veloppement Web " >
2 < meta name = " keywords " content = " cours , HTML , Institut
Galil ée , Web " >
3 < meta name = " author " content = " Le prof " >

Remplissage des champs optionnels

Remplir ces champs est important, non pour le client Web, mais pour le
référencement par les moteurs de recherche.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 42 / 103
 Description, mots-clés, auteur

Syntaxe :
1 < meta name = " description " content = " Introduction au
d é veloppement Web " >
2 < meta name = " keywords " content = " cours , HTML , Institut
Galil ée , Web " >
3 < meta name = " author " content = " Le prof " >

Remplissage des champs optionnels

Remplir ces champs est important, non pour le client Web, mais pour le
référencement par les moteurs de recherche.
NB : ces champs tendent néanmoins à être moins privilégiés.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 42 / 103
 Un exemple d’en-tête

1 <! DOCTYPE html >

2 < html lang = " fr " >
3 < head >
4 < meta charset = " utf -8 " >
5 < meta name = " description " content = " Une page Web vraiment
int é ressante " >
6 < meta name = " keywords " content = " cours , HTML , Institut
Galil ée , Web " >
7 < meta name = " author " content = " Le prof " >
8 < title > Le titre de ma page Web </ title >
9 </ head >
10

11 < body >

12 ...
13 </ body >
14 </ html >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 43 / 103
 En-tête : bonnes pratiques

Bonnes pratiques
Il est très fortement conseillé de toujours spécifier au minimum, en plus de la
balise <title> :
le codage des caractères,
l’auteur,
la description,
les mots-clés.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 44 / 103
 Outline

1 Définitions

2 Histoire et normalisation du HTML

3 Structure d’un document HTML5

4 Syntaxe de HTML5

5 Le DOM

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 45 / 103
 Outline

4 Syntaxe de HTML5
Structure de la page
Styles de texte
Listes et énumérations
Tableaux
Médias
Formulaires

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 46 / 103
 Sections

Balise <div> : élément structurel (ou section)

Bonne pratique
Il est d’usage d’organiser la page Web en <div> imbriquées.

1 < div >

2 < div >
3 <! -- Premier cours : r é seaux -- >
4 </ div >
5 < div >
6 <! -- Deuxi è me cours : programmation Web -- >
7 </ div >
8 </ div >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 47 / 103
 Paragraphes

Balise <p>...</p> : paragraphe

Balise <br> : saut de ligne

Bonne pratique
Il est d’usage de créer un second paragraphe (<p>...</p>) plutôt qu’un saut de
ligne (<br>).
La balise <br> est en réalité très peu utilisée.

1 < div >

2 <p > Un premier paragraphe . </ p >
3 <p > Un second paragraphe . </ p >
4 </ div >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 48 / 103
 Les titres

Syntaxe :
<h1> : titre de premier niveau
<h2> : titre de second niveau
...
<h6> : titre de sixième niveau

Bonne pratique
Il est d’usage de n’avoir qu’un seul titre dans le document (ou la section
courante), et de respecter l’ordre croissant des niveaux.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 49 / 103
 Les titres : exemple

1 < h1 > Le titre g é n é ral </ h1 >

2 < h2 > Une premi è re grande section </ h2 >
3 <p > Un texte d ' introduction </ p >
4 < h3 > Un sous - titre dans la premi è re section </ h3 >
5 < h3 > Un autre sous - titre dans la premi è re section </ h3 >
6

7 < h2 > Une seconde grande section </ h2 >

affichera
Le titre général
Une première grande section
Un texte d’introduction
Un sous-titre dans la première section
Un autre sous-titre dans la première section
Une seconde grande section

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 50 / 103
 Les liens hypertextes externes
Syntaxe :
<a href="LA_CIBLE_DU_LIEN">Le texte à afficher</a>
Affiche
Le texte à afficher

Deux types de liens :

Liens relatifs
Chemin local

1 <a href = " index . html " > Texte </ a >

Pointe sur la page [Link] dans le répertoire courant (côté serveur)

Liens absolus
Chemin absolu

1 <a href = " https :// www . univ - paris13 . fr / " > USPN </ a >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 51 / 103
 Les liens hypertextes internes

On peut effectuer un lien vers une autre partie du même document

Syntaxe pour définir l’endroit dans le document (destination)

À l’aide de id
Exemple : <h2 id="macible">Mes films préférés</h2>

Syntaxe pour définir le lien

<a href="#macible">Remonter aux films préférés</a>

Affiche
Mes films préférés
...
Remonter aux films préférés

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 52 / 103
 Les liens hypertextes vers une adresse électronique

On peut effectuer un lien vers une adresse électronique (courriel)

Syntaxe :
1 <a href = " mailto : moi@univ - paris13 . fr " >É crivez - moi </ a >

Affiche
Écrivez-moi

Attention : éviter les adresses électroniques sur les pages Web

Cette utilisation est fortement déconseillée, du fait de la présence sur Internet de
nombreux robots malveillants qui récupèrent les adresses électroniques en clair
pour envoyer des pourriels.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 53 / 103
 Un exemple un peu plus fourni

1 <! DOCTYPE html >

2 < html lang = " fr " >
3 < head >
4 < title > Le titre de mon document </ title >
5 < meta charset = " utf -8 " >
6 < meta name = " author " content = "L ' auteur de la page " >
7 </ head >
8

9 < body >

10 < h1 > Le titre de la page </ h1 >
11 <p > Une phrase avec <a href = " index . html " > un lien </ a >. </ p >
12 < h2 > Une section </ h2 >
13 <p > Une autre phrase . </ p >
14 < h2 > Une seconde section </ h2 >
15 <p > Encore une autre phrase . </ p >
16 </ body >
17 </ html >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 54 / 103
 Balises sémantiques HTML5

Peuvent être vues comme des variations sémantiques de

Pas d’incidence sur l’affichage ou la mise en page
Peuvent être imbriquées

Syntaxe :
<section> : un bloc de contenu cohérent
<article> : un article au contenu cohérent
<main> : le contenu principal de la page (une seule occurence autorisée)
<aside> : contenu accessoire
<header> : en-tête (de page, de section, etc.)
<footer> : pied (de page, de section, etc.)
<nav> : informations de navigation (liens)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 55 / 103
 Balises sémantiques HTML5 : exemple

1 ...
2 < header > Le haut de la page </ header >
3 < article >
4 < h2 > Le titre de mon article </ h2 >
5 < header > Un chapeau pour mon article </ header >
6 <p > Premier paragraphe ........ </ p >
7 <p > Second paragraphe ........ </ p >
8 < footer > Infos finales sur mon article </ footer >
9 < aside > Voir un autre article sur le m ê me sujet </ aside >
10 </ article >
11 < footer >
12 < nav >
13 <a href = " index . html " > Retour à l ' accueil </ a >
14 </ nav >
15 </ footer >
16 ...

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 56 / 103
 Balises sémantiques HTML5 : attention

En-tête : attention aux confusions

Il convient de bien différencier :
1 l’en-tête syntaxique du document HTML (balise <head> unique, contenu
non affiché), et
2 les en-têtes sémantiques dans le corps (<body>) du document (balises
<header> éventuellement multiples).

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 57 / 103
 Outline

4 Syntaxe de HTML5
Structure de la page
Styles de texte
Listes et énumérations
Tableaux
Médias
Formulaires

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 58 / 103
 Gras, italique, souligné

Syntaxe :
<b>... </b> (bold) : gras
<strong>... </strong> : exergue (s’affiche en général comme gras)
<i>... </i> (italique) : italique
<em>... </em> (emphasis) : emphase (s’affiche en général comme
italique)
<u>... </u> (underline) : souligné

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 59 / 103
 Gras, italique, souligné

Syntaxe :
<b>... </b> (bold) : gras
<strong>... </strong> : exergue (s’affiche en général comme gras)
<i>... </i> (italique) : italique
<em>... </em> (emphasis) : emphase (s’affiche en général comme
italique)
<u>... </u> (underline) : souligné

Bonne pratique typographique

Le soulignage ne devrait jamais être utilisé en informatique, à l’exception
(éventuelle) des liens hypertextes (qui tend elle-même à disparaître).

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 59 / 103
 Gras, italique, souligné : remarque

Les balises de styles de texte (<b>, <strong>, <i>, <em>, <u>) sont de moins en
moins utilisées, et devraient être délaissées au profit des feuilles de style CSS

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 60 / 103
 Indices et exposants

Syntaxe :
exposant : ^...
indice : _...

Exemple
1 <p >E = mc < sup >2 </ sup > </ p >
2 <p > Il faut boire de l ' H < sub >2 </ sub >O . </ p >

Rendu :
E = mc2
Il faut boire de l’H2 O.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 61 / 103
 Abréviation

Syntaxe :
Balise <abbr>... </abbr>
Utilisée avec un title="... "

Exemple
1 J ' aime le < abbr title = " HyperText Markup
Language " > HTML </ abbr >.

Rendu :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 62 / 103
 Couleurs
Syntaxe :
Attribut style="color:COULEUR"

Utilisé avec la balise <span> au sein d’un paragraphe

1 Le grand < span style = " color : blue " > bleu </ span >

Rendu :
Le grand bleu

Peut également être utilisé avec <p>, <div>, etc.

1 < h1 style = " color : red " > Red is dead </ h1 >
2 <p style = " color : green " > Le rayon vert </ p >

Rendu :
Red is dead
Le rayon vert

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 63 / 103
 Couleurs : valeurs

Valeurs des couleurs :

Prédéfinies : green, blue, red, etc.
Voir liste complète par exemple sur
[Link]
Hexadécimales : format #RRVVBB (rouge vert bleu)
Exemple : #FFFF00 =

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 64 / 103
 Couleurs : valeurs

Valeurs des couleurs :

Prédéfinies : green, blue, red, etc.
Voir liste complète par exemple sur
[Link]
Hexadécimales : format #RRVVBB (rouge vert bleu)
Exemple : #FFFF00 =

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 64 / 103
 Styles de texte : CSS

Bonne pratique
En général, le formatage du texte est géré non par HTML mais par une feuille de
style CSS.
(voir partie du cours dédiée à CSS)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 65 / 103
 Outline

4 Syntaxe de HTML5
Structure de la page
Styles de texte
Listes et énumérations
Tableaux
Médias
Formulaires

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 66 / 103
 Listes à puces (non ordonnées)

Syntaxe :
1 <p >J ' aime bien les films de & nbsp ;: </ p >
2 < ul >
3 < li > Sh o hei Imamura </ li >
4 < li >C é line Sciamma </ li >
5 </ ul >

Exemple d’affichage sur un navigateur :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 67 / 103
 Listes à puces (non ordonnées)

Syntaxe :
1 <p >J ' aime bien les films de & nbsp ;: </ p >
2 < ul >
3 < li > Sh o hei Imamura </ li >
4 < li >C é line Sciamma </ li >
5 </ ul >

Exemple d’affichage sur un navigateur :

J’aime bien les films de :

Shōhei Imamura
Céline Sciamma

(Le style des puces par défaut peut différer selon le navigateur.)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 67 / 103
 Listes à puces : remarques

Remarques

1 <ul> vient de unordered list

2 Les listes à puces peuvent être imbriquées.

3 L’affichage des listes à puces peut être considérablement personnalisé par

les feuilles de style.

4 Il est d’usage d’utiliser l’environnement <ul> pour la création des menus

(même si ceux-ci n’ont pas l’apparence d’une liste à puces).

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 68 / 103
 Listes ordonnées (énumérations)
Syntaxe :
1 <p > Les meilleurs films de tous les temps & nbsp ;: </ p >
2 < ol >
3 < li > The Assassin </ li >
4 < li > La Ballade de Narayama </ li >
5 < li > Reservoir Dogs </ li >
6 </ ol >

Exemple d’affichage sur un navigateur :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 69 / 103
 Listes ordonnées (énumérations)
Syntaxe :
1 <p > Les meilleurs films de tous les temps & nbsp ;: </ p >
2 < ol >
3 < li > The Assassin </ li >
4 < li > La Ballade de Narayama </ li >
5 < li > Reservoir Dogs </ li >
6 </ ol >

Exemple d’affichage sur un navigateur :

Les meilleurs films de tous les temps :

<ol> vient de ordered list

(Le style des puces par défaut peut différer selon le navigateur.)
Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 69 / 103
 Définitions
Syntaxe :
1 < dl >
2 < dt > Sh o hei Imamura </ dt >
3 < dd >R é alisateur japonais n é en 1926 </ dd >
4 < dt >C é line Sciamma </ dt >
5 < dd >R é alisatrice fran ç aise n é e en 1978 </ dd >
6 </ dl >

Exemple d’affichage sur un navigateur :

Shōhei Imamura
Réalisateur japonais né en 1926
Céline Sciamma
Réalisatrice française née en 1978

<dl> vient de description list

(Le style par défaut peut différer selon le navigateur.)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 70 / 103
 Listes imbriquées
Les listes peuvent être imbriquées naturellement
Attention néanmoins ! Une sous-liste doit être à l’intérieur du <li>...
</li> de la liste parente
Exemple :
1 <p >J ' aime bien les films de & nbsp ;: </ p >
2 < ol >
3 < li > Sh o hei Imamura
4 < ul >
5 < li > Nationalit é & nbsp ;: japonaise </ li >
6 < li >N é en 1926 </ li >
7 </ ul >
8 </ li >
9 < li > Justine Triet
10 < ul >
11 < li > Nationalit é & nbsp ;: fran ç aise </ li >
12 < li >N é e en 1978 </ li >
13 </ ul >
14 </ li >
15 </ ol >
Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 71 / 103
 Listes imbriquées : exemple

Exemple d’affichage du code HTML précédent :

J’aime bien les films de :

1 Shōhei Imamura
Nationalité : japonaise
Né en 1926
2 Justine Triet
Nationalité : française
Née en 1978

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 72 / 103
 Outline

4 Syntaxe de HTML5
Structure de la page
Styles de texte
Listes et énumérations
Tableaux
Médias
Formulaires

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 73 / 103
 Tableaux : exemple (1/2)
Syntaxe :
1 < table >
2 < caption > Quelques films de Nicolas Winding Refn </ caption >
3 < thead >
4 < tr >
5 < th > Titre du film </ th >
6 < th > Ann é e de sortie </ th >
7 </ tr >
8 </ thead >
9 < tbody >
10 < tr >
11 < td > Drive </ td >
12 < td > 2011 </ td >
13 </ tr >
14 < tr >
15 < td > The Neon Demon </ td >
16 < td > 2016 </ td >
17 </ tr >
18 </ tbody >
19 </ table >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 74 / 103
 Tableaux : exemple (2/2)

Affichage :

Quelques films de Nicolas Winding Refn

Titre du film Année de sortie
Drive 2011
The Neon Demon 2016

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 75 / 103
 Exemple de tableau plus complexe : HTML
1 < table >
2 < caption > Quelques films de Wong Kar - Wai </ caption >
3 < thead >
4 <tr >
5 <th colspan ="2" > Filmographie sé lective </ th >
6 </ tr >
7 <tr >
8 <th > Ann ée </ th >
9 <th > Titre </ th >
10 </ tr >
11 </ thead >
12 < tbody >
13 <tr >
14 <td rowspan ="2" > 1994 </ td >
15 <td > Les Cendres du temps </ td >
16 </ tr >
17 <tr >
18 <td > Chungking Express </ td >
19 </ tr >
20 <tr >
21 <td > 2000 </ td >
22 <td >In the Mood for Love </ td >
23 </ tr >
24 </ tbody >
25 </ table >
Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 76 / 103
 Exemple de tableau plus complexe : rendu

Quelques films de Wong Kar-Wai

Filmographie sélective
Année Titre
Les Cendres du temps
1994
Chungking Express
2000 In the Mood for Love

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 77 / 103
 Tableaux : bonne pratique

Bonne pratique
Il est d’usage de n’utiliser l’environnement <table> que pour les tableaux.
Pour aligner des éléments lors de la mise en page, on utilise les environnements
<div> et des feuilles de style.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 78 / 103
 Outline

4 Syntaxe de HTML5
Structure de la page
Styles de texte
Listes et énumérations
Tableaux
Médias
Formulaires

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 79 / 103
 Images

Syntaxe :
1 < img src = " SOURCE_IMAGE " alt = " TEXTE_DE_REMPLACEMENT " >

La plupart des formats d’image courants sont pris en charge par les navigateurs
(.jpg, .png, .gif, etc.).

Exemple :
1 < img src = " img / affiche_2046 . png " alt = " Affiche film 2046 " >

Texte de remplacement obligatoire

Le texte de remplacement (attribut alt) est obligatoire selon la norme HTML.

Il est affiché par le navigateur si l’image n’est pas trouvée (fichier manquant), ou
dans certains cas spécifiques (navigateur Web pour non-voyants).

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 80 / 103
 Audio

Syntaxe :
1 < audio controls >
2 < source src = " yumeji_theme . ogg " type = " audio / ogg " >
3 < source src = " yumeji_theme . mp3 " type = " audio / mpeg " >
4 Votre navigateur ne prend pas en charge les formats audio
propos é s .
5 </ audio >

Exemple de rendu (dans Mozilla Firefox 105) :

Les différents formats sont essayés dans l’ordre descendant, jusqu’au premier
format pris en charge par le navigateur.

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 81 / 103
 Audio et navigateurs

Attention
Tous les navigateurs ne prennent pas tous les formats en charge.

Navigateur AAC FLAC MP3 Ogg Wav

Chrome Oui Oui Oui Oui Oui
Chromium Non Oui Oui Oui Oui
Firefox Partiel Oui Oui Oui Oui
Internet Explorer Oui Non Oui Non Non
Opera Oui Non Oui Oui Oui
Safari Oui Oui Oui Non Oui

Bonne pratique
Prévoir les sons dans suffisamment de formats (au moins Ogg et MP3).

Source : [Link]

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 82 / 103
 Vidéo
Syntaxe :
1 < video width = " 640 " height = " 480 " controls >
2 < source src = " Paris_Covid19 . webm " type = " video / webm " >
3 < source src = " Paris_Covid19 . mp4 " type = " video / mp4 " >
4 Votre navigateur ne prend pas en charge les formats vid é o
propos é s .
5 </ video >

Exemple de rendu (dans Mozilla Firefox 106) :

Les différents formats sont essayés dans l’ordre descendant, jusqu’au premier
format pris en charge par le navigateur.
Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 83 / 103
 Vidéo et navigateurs
Attention
Tous les navigateurs ne prennent pas tous les formats en charge.

Navigateur WebM + VP9 + Opus MP4 + AVC + AAC

Chrome Oui Oui
Chromium Oui Oui
Firefox Oui Oui
Internet Explorer Non Oui
Opera Oui Oui
Safari Oui Oui

Bonne pratique
Prévoir les vidéos dans suffisamment de formats (idéalement WebM, et MP4 en
backup)

Source : [Link]

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 84 / 103
 Image cliquable par endroits

Syntaxe :
1 < img src = " campus . png " width = " 600 " height = " 600 "
2 alt = " Campus de Villetaneuse " usemap = " # campusmap " >
3

4 < map name = " campusmap " >

5 < area shape = " circle " coords = " 120 ,330 ,20 "
6 alt = " arr ê t de bus " href = " https :// www . ratp . fr " >
7 < area shape = " rect " coords = " 150 ,0 ,220 ,150 "
8 alt = " Galil é e " href = " galilee . html " >
9 </ map >

Coordonnées dans coords

circle : x (centre), y (centre), rayon
rect : gauche, haut, droite, bas

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 85 / 103
 Image cliquable par endroits : affichage

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 86 / 103
 Outline

4 Syntaxe de HTML5
Structure de la page
Styles de texte
Listes et énumérations
Tableaux
Médias
Formulaires

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 87 / 103
 Principe des formulaires

Objectif
Transmettre des informations saisies sur la page Web courante à une autre page
Web (qui, en général, est dynamique)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 88 / 103
 Principe des formulaires

Objectif
Transmettre des informations saisies sur la page Web courante à une autre page
Web (qui, en général, est dynamique)

Exemples :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 88 / 103
 Principe des formulaires

Objectif
Transmettre des informations saisies sur la page Web courante à une autre page
Web (qui, en général, est dynamique)

Exemples :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 88 / 103
 Principe des formulaires

Objectif
Transmettre des informations saisies sur la page Web courante à une autre page
Web (qui, en général, est dynamique)

Exemples :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 88 / 103
 Un exemple de formulaire
1 < form action = " traitement . php " >
2 < fieldset >
3 < legend > Vos donn é es personnelles </ legend >
4 <p > < label for = " nom " > Nom </ label >
5 < input type = " text " name = " nom " id = " nom "
placeholder = " Votre nom " > </ p >
6

7 <p > < label for = " ddn " > Date de naissance </ label >
8 < input type = " date " name = " ddn " id = " ddn " > </ p >
9

10 <p > < label for = " mdp " > Mot de passe </ label >
11 < input type = " password " name = " mdp " id = " mdp "
placeholder = " Votre mot de passe " > </ p >
12

13 <p > < button type = " submit "

aria - disabled = " false " > Envoyer </ button > </ p >
14

15 </ fieldset >

16 </ form >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 89 / 103
 Un exemple de formulaire : rendu

Rendu dans Mozilla Firefox 105 (sans feuille de style)

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 90 / 103
 Formulaires : remarques

Il est conseillé d’ajouter à chaque champ un label (étiquette décrivant le

champ)

L’identifiant for du label doit se référer à l’identifiant id du champ

correspondant

Ces identifiants ne doivent pas contenir d’espace, et ne seront jamais

affichés

L’attribut placeholder contient le texte affiché par défaut (et peut, à

l’inverse, contenir tous types de caractères)

La balise <fieldset> permet un rendu agréable par défaut

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 91 / 103
 Formulaires : larges possibilités
Nombreux types de champs possibles, par exemple :
text : champ de texte (une seule ligne)
textarea : zone de texte (plusieurs lignes)
checkbox : cases à cocher (plusieurs choix possibles)
radio : boutons radio (un seul choix possible)
select : sélection dans une liste
toolbar : barre de boutons
file : fichier à téléverser
Variantes de text : color, date, email, password, tel, url, etc.

Voir par exemple :

[Link]
formulaires-html5/ ( )

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 92 / 103
 Formulaires : larges possibilités
Nombreux types de champs possibles, par exemple :
text : champ de texte (une seule ligne)
textarea : zone de texte (plusieurs lignes)
checkbox : cases à cocher (plusieurs choix possibles)
radio : boutons radio (un seul choix possible)
select : sélection dans une liste
toolbar : barre de boutons
file : fichier à téléverser
Variantes de text : color, date, email, password, tel, url, etc.

Voir par exemple :

[Link]
formulaires-html5/ ( )

Attention, certains nouveaux champs de HTML5 (tel, date, color, etc.) ne

s’affichent pas toujours bien sur tous les navigateurs.
Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 92 / 103
 Exemple : text et textarea
1 <! DOCTYPE html >
2 < html lang =" fr " >
3 < head >
4 < meta charset =" utf -8 " >
5 < title > Exemple de champs de texte </ title >
6 </ head >
7 < body >
8 <h1 > Formulaire avec saisie texte </ h1 >
9
10 < form id =" formulaire " name = " monForm "
action =" mailto : toto@truc . fr " method =" post "
enctype =" text / plain " >
11 <p > < label for =" nom " > Votre nom </ label >
12 < input type =" text " required minlength ="4" maxlength = "8"
size =" 10 " id =" nom " placeholder =" Votre nom ici " >
13 </ p >
14 <p > < label for =" zone " > Vos commentaires </ label > < textarea
id =" zone " rows ="5 " cols =" 30 " placeholder =" É crire ici vos
commentaires é ventuels " ></ textarea ></p >
15 <p > < input type =" submit " value =" Valider " > </p >
16 <p > < input type =" reset " value ="Ré initialiser " > </p >
17 </ form >
18 </ body >
19 </ html >
Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 93 / 103
 Exemple : text et area (rendu)

Démonstration
Exemple téléchargeable depuis Moodle

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 94 / 103
 Exemple : boîtes à cocher

1 <h1 > Quiz cin é ma </ h1 >

2 <p > Parmi ces noms , qui a déjà gagn é la Palme d ' or & nbsp ;? </p >
3 < form id =" formulaire " >
4 <p > < input type =" checkbox " id =" besson " >< label > Luc
Besson </ label ></p >
5 <p > < input type =" checkbox " id =" ducournau " >< label > Julia
Ducournau </ label ></p >
6 <p > < input type =" checkbox " id =" imamura " > < label >Sh o hei
Imamura </ label ></p >
7 <p > < input type =" checkbox " id =" tarantino " >< label > Quentin
Tarantino </ label ></p >
8 <p > < input type =" checkbox " id =" vansant " > < label > Gus Van
Sant </ label ></p >
9 <p > < button id =" verifier " >Vé rifier </ button ></ p >
10 <p > < button id =" reinitialiser " >Ré initialiser </ button ></p >
11 </ form >

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 95 / 103
 Exemple : boîtes à cocher (rendu)

Démonstration
Exemple téléchargeable depuis Moodle

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 96 / 103
 Exemple : boutons radio

1 < form id =" formulaire " >

2 <p > Nom & nbsp ;: < input type =" text " name =" nom " size =20 > </p >
3 <p > Pr é nom & nbsp ;: < input type =" text " name =" prenom " size =20 ></p >
4 <p > Ville & nbsp ;: < input type =" text " id =" ville " name =" ville "
size =20 > </p >
5 <p > Convertir en </ p >
6 <p > < input type =" radio " name =" conversion " id =" maj " > Majuscules </p >
7 <p > < input type =" radio " name =" conversion " id =" min " > Minuscules </p >
8 <p > < input type =" radio " name =" conversion " id =" aucune " > Aucune </p >
9 <p > < button id =" reinitialiser " >Ré initialiser </ button ></p >
10 </ form >

Même name dans un groupe de boutons radio

Les différentes options d’un même groupe de boutons radio doivent posséder le
même name

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 97 / 103
 Exemple : boutons radio (rendu)

Démonstration
Exemple téléchargeable depuis Moodle

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 98 / 103
 Exemple : select
1 <! DOCTYPE html >
2 < html lang =" fr " >
3 < head >
4 < meta charset =" utf -8 " >
5 < title > Exemple de formulaire avec sé lection </ title >
6 </ head >
7 < body >
8 <h1 >Sé lection </ h1 >
9
10 < form id =" formulaire " >
11 < label for =" liste " > Choisir votre ville
pr éféré e& nbsp ;: </ label >
12 < select id =" liste " name =" liste " >
13 < option value =" nancy " > Ville de Nancy </ option >
14 < option value =" paris " > Ville de Paris </ option >
15 < option value =" villetaneuse " > Ville de
Villetaneuse </ option >
16 </ select >
17 < input type = " text " readonly size =40 id =" resultat "
value =" Vous avez sé lectionn é : " >
18 </ form >
19 < script src = " formulaire - select . js " > </ script >
20 </ body >
21 </ html >
Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 99 / 103
 Exemple : select (rendu)

Démonstration
Exemple téléchargeable depuis Moodle

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 100 / 103
 Outline

1 Définitions

2 Histoire et normalisation du HTML

3 Structure d’un document HTML5

4 Syntaxe de HTML5

5 Le DOM

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 101 / 103
 DOM : Document Object Model

Fournit une représentation structurelle du document, permettant de

modifier son contenu et sa présentation visuelle

Interface de manipulation d’un document arborescent, indépendante du

langage
chaque nœud de l’arbre = 1 objet
des propriétés : nom, attributs. . .
des méthodes pour manipuler l’arbre

Standard défini par le W3C

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 102 / 103
 DOM : Document Object Model

Fournit une représentation structurelle du document, permettant de

modifier son contenu et sa présentation visuelle

Interface de manipulation d’un document arborescent, indépendante du

langage
chaque nœud de l’arbre = 1 objet
des propriétés : nom, attributs. . .
des méthodes pour manipuler l’arbre

Standard défini par le W3C

Sera utilisé avec JavaScript

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 102 / 103
 DOM : exemple

document

1 <! DOCTYPE html >

2 < html lang = " fr " > html

3 < head > ... </ head >

4 < body > head body
5 < h1 id = " titre "
class = " bleu " > Bienvenue </ h1 >
6 <p >À Sorbonne Paris Nord </ p > text h1 text p text
7 </ body >
8 </ html >
attribute text text
"Bienvenue" "À Sorbonne
"id"="titre" Paris Nord"
"class"="bleu"

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 103 / 103
 Crédits

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 104 / 103
 Source des images utilisées I

Titre : warning sign

Auteur :?
Source : [Link]
Licence :

Titre : Check Mark CSS Green

Auteur : Pigeon43
Source : [Link]
Licence :

Titre : small-n-flat
Auteur : paomedia
Source : [Link]
Licence :

Titre : Nuvola filesystems folder download

Auteur : David Vignoni
Source : [Link]
Licence :

Titre : Tim Berners-Lee

Auteur : John S. and James L. Knight Foundation

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 105 / 103
 Source des images utilisées II
Source : [Link]
Licence :

Titre : NCSA Mosaic Browser

Auteur : Programm : National Center for Supercomputing Applications
Source : [Link]
Licence :

Titre : Netscape icon

Auteur : Netscape Communications
Source : [Link]
Licence :

Titre : Fenêtre de validation du W3C

Auteur : Étienne André
Source :
Licence :

Titre : Page de USPN

Auteur : Étienne André
Source :
Licence :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 106 / 103
 Source des images utilisées III
Titre : Balise abbr
Auteur : Étienne André
Source :
Licence :

Titre : Audio Firefox

Auteur : Étienne André
Source :
Licence :

Titre : Vidéo Firefox

Auteur : Étienne André d’après vidéo WikiCommons
Source :
Licence :

Titre : Campus de USPN

Auteur : Étienne André d’après tuiles OSM
Source :
Licence :

Titre : Formulaire Firefox

Auteur : Étienne André
Source :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 107 / 103
 Source des images utilisées IV
Licence :

Titre : Formulaire
Auteur : Étienne André
Source :
Licence :

Titre : Formulaire
Auteur : Étienne André
Source :
Licence :

Titre : Formulaire
Auteur : Étienne André
Source :
Licence :

Titre : Formulaire
Auteur : Étienne André
Source :
Licence :

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 108 / 103
 Licence de ce document

Ce support de cours peut être réutilisé, modifié et republié selon les termes de la
licence Creative Commons Attribution-NonCommercial-ShareAlike 4.0 Unported
(CC BY-NC-SA 4.0)

[Link]

Auteur : Étienne André

(Source LATEX disponible aux enseignant·e·s sur demande)

Version : 25 janvier 2024

Étienne André (Université Sorbonne Paris Nord) Programmation Web - 2 2023-2024 109 / 103