PROGRAMMATION WEB : HTML 5

Créer des pages WEB avec HTML5

HTML (HyperText Markup Language) est un langage standard pour la création et la structuration
du contenu des pages Web.

1. Quelles sont les versions d'HTML ?

• HTML 1 (1991) : Créé par Tim Berners-Lee.
• HTML 2 (1994) : Les règles et le fonctionnement de cette version sont donnés par le W3C. Elle définit les
bases des versions suivantes du HTML.
• HTML 3 (1996) : Rajoute de nombreuses possibilités au langage comme les tableaux, les scripts, le
positionnement du texte autour des images, etc.
• HTML 4 (1998) : Elle propose l'utilisation de frames, des tableaux plus complexes, des améliorations sur les
formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style (CSS).
• HTML 5 (2014) : Dernière version d'HTML, elle apporte de nombreuses améliorations comme la possibilité
d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les
formulaires, etc.

2. Structure d’un document HTML

3. Balises HTML
Pour créer une page Web, vous devez préciser les éléments de contenu que vous souhaitez afficher sur la page à
l'aide de "balises".

▪ Une balise est une commande à l'intention du navigateur lui indiquant quel type d'élément HTML on veut
insérer dans la page (texte, image, formulaire, lien hypertexte, …)
▪ A chaque élément de contenu correspond donc une balise HTML.

PR. AIT DAOUD 1

 PROGRAMMATION WEB : HTML 5

Exemples :
✓ <a> : Lien hypertexte
✓ <form> : Formulaire
✓ <table> : Tableau

a. Balises en paire/ Balises double

▪ Généralement, les balises fonctionnent par paires c’est-à-dire, tout contenu est spécifié entre une balise
ouvrante et une balise fermante.
▪ La balise fermante doit avoir le même nom que la balise ouvrante correspondante et débute par /.
Syntaxe :
<nom_balise> contenu </nom_balise>

Balise ouvrante Balise fermante

Exemples :

b. Balises orpheline/ Balises simple

▪ Ce type de balise, ne nécessitent pas une balise fermante. Dans ce genre, le nom de la balise précise lui-
même le contenu à insérer.
Exemples :
✓ <br /> : pour insérer un saut de ligne
✓ <hr /> : pour tracer une ligne
✓ <img /> : pour insérer une image.

4. Attributs
▪ Une balise peut contenir un ou plusieurs attributs qui indiquent au navigateur comment il doit afficher
l'élément.
▪ Les attributs sont précisés dans la balise ouvrante et doivent être séparés les uns des autres par un espace
typographique.
▪ Chaque attribut a généralement une valeur qui doit être définie entre guillemets.
Syntaxe :
<nom_balise attribut1="valeur1" attribut2="valeur2" > contenu </nom_balise>
Exemple :
<img src = "photo.jpg" title=" ciel bleu" />

PR. AIT DAOUD 2

 PROGRAMMATION WEB : HTML 5

5. De quel logiciel j'ai besoin pour écrire du code HTML ?

Un document HTML se compose uniquement de texte. Par conséquent, vous pouvez créer une page Web dans un
éditeur de texte tel que le Bloc-notes, ou vous pouvez utiliser un éditeur de texte dédié à la création de pages web
comme Notepad++, brackets, atom, sublimeText, … .

6. Quel est le logiciel qui interprète le code HTML ?

C'est le navigateur qui s'occupe de lire le code HTML, l'interprète puis affiche le résultat à l'écran. L'interprétation
du code HTML dépend donc du navigateur utilisé, en effet les différents navigateurs n'affichent pas le même
site exactement de la même façon !
C'est pour cela qu'il faut prendre l'habitude de vérifier régulièrement que votre site fonctionne correctement sur la
plupart des navigateurs.

7. Pourquoi valider votre code HTML !

Comme HTML est toujours en cours de spécifications, il arrive que certaines balises ou attributs ne soient pas
reconnus et donc non interprétés par certains navigateurs. Il faut donc valider votre code afin que votre code soit
compatible avec l'ensemble des navigateurs existants.
Pour valider une page HTML aller à : https://validator.w3.org/

PR. AIT DAOUD 3

 PROGRAMMATION WEB : HTML 5

TP1 : Créer un premier document HTML5

Objectif : Créer une page WEB minimale en HTML5

1. Créez un nouveau dossier sur le bureau que vous appellerez " WEB".
▪ Cliquez avec le bouton droit sur le bureau, cliquez sur Nouveau puis Dossier. Nommez ce
dossier "WEB".

2. Démarrez Notepad++
▪ Un nouveau document s'ouvre.

3. Choisissez HTML, comme langage de codage.

▪ Cliquez sur le menu Langage, mettez le curseur sur H puis cliquez sur HTML

PR. AIT DAOUD 4

 PROGRAMMATION WEB : HTML 5

4. Choisissez UTF-8 (sans BOM) pour l'encodage des caractères.

5. Enregistrer la page sous le nom "index.html".

▪ Cliquez sur le menu Fichier, puis cliquez sur Enregistrez sous

▪ Enregistrez dans le dossier WEB

▪ Sous le nom index.html

6. Cliquez sur le bouton Enregistrer

▪ La page index.html.

7. Tapez <! DOCTYPE html>, puis appuyez sur [Entrée]

▪ La déclaration < ! DOCTYPE html> informe les navigateurs que le contenu du document
est écrit en HTML5. Elle est nécessaire aussi pour les validateurs HTML qui devront valider
ou corriger le code de la page web.

PR. AIT DAOUD 5

 PROGRAMMATION WEB : HTML 5

8. Tapez <html>, appuyez deux fois sur [Entrée], puis tapez </html>, comme illustré ci-dessous.
▪ L'élément html marque le début et la fin de la page Web.

Signale le début document HTML

Signale la fin du document HTML

9. Enregistrez votre travail

A. Eléments d'un document HTML

Le document HTML5 est divisé en deux sections :

• L'en-tête : L'élément head
• Le corps : L'élément body

1. Cliquez sur la ligne vide entre la balise d'ouverture<html> et la balise de fermeture </html>,
appuyez sur [Espace] trois fois, puis tapez <head>
▪ L'ajout d'un nombre fixe d'espaces avant une balise imbriquée la rend plus visible et à
mesure que le code de votre page Web devient plus long et plus complexe, ces indentations
vous permettent d'identifier le début et la fin d'un élément en un coup d'œil. Dans les TP,
utilisez trois espaces pour chaque niveau de retrait.

PR. AIT DAOUD 6

 PROGRAMMATION WEB : HTML 5

2. Appuyez deux fois sur [Entrée], puis tapez </head>

▪ La section <head> … </head> contient des éléments qui spécifient des informations
générales sur la page comme son titre, le jeu de caractères utilisé, l'auteur, etc. Ces
informations n'apparaissent pas sur la page lorsqu'elle est affichée par le navigateur.
3. Appuyez sur [Entrée], puis tapez <body>
4. Appuyez deux fois sur [Entrée], puis tapez </body>
• Le contenu de la section <body> …. </body> est le seul contenu visible lorsque la page Web est
affichée par le navigateur Web. C'est ici ou on doit préciser à l'aide de balises les éléments de
contenu qu'on veut afficher dans la page Web.

5. Enregistrez votre travail

B. Eléments de l'en-tête d'une page Web :

1. Cliquez sur la ligne vide entre la balise ouvrante<head> et la balise fermante </head>, appuyez
sur [Espace] trois fois, puis tapez :
<title> Créer vos pages Web avec HTML5 </title>
▪ L'élément title spécifie le texte qui apparaît dans la barre de titre du navigateur Web
ouvrant la page. Ce texte est utilisé par les moteurs de recherches pour le référencement de
votre site.
2. Enregistrez puis ouvrez votre page sur Chrome.
▪ Cliquez sur le menu Exécution, puis cliquez sur Launch in Chrome

PR. AIT DAOUD 7

 PROGRAMMATION WEB : HTML 5

▪ Vous obtenez la page Web suivante :

Le texte spécifié
avec < title>
apparaît dans la
barre de titre du
navigateur Web

3. Retournez sur Notepad++, cliquez à la fin de la ligne contenant l'élément "title", puis appuyez sur
[Entrée].
4. Tapez : <meta charset="utf-8" />
▪ Les balises <meta> permettent de préciser un ensemble d'informations destinées aux
navigateurs et aux moteurs de recherche.
▪ L'attribut "charset" de la balise "meta" spécifie la méthode d'encodage que doit utiliser le
navigateur pour traduire l'information électronique représentant la page en des symboles
lus par l'être humain comme les lettres, les chiffres, … .
▪ On choisit la méthode d'encodage utf-8 car elle permet d'afficher pratiquement tous les
symboles de toutes les langues.

5. Appuyez sur [Entrée], puis tapez :

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Le paramétrage du viewport permet de contrôler l'affichage sur les navigateurs mobiles. L'instruction ci-
dessus rend tout le contenu de la page lisible sans faire défiler à gauche ou à droite.
▪ viewport : désigne schématiquement la surface de la fenêtre d'affichage du navigateur.
▪ width=device-width : la largeur du contenu de la page sera égale à la largeur de l'écran
de l'appareil utilisé.
▪ initial-scale=1.0 : Le niveau de zoom initial sera 100%

PR. AIT DAOUD 8

 PROGRAMMATION WEB : HTML 5

width

width-device

C. Les commentaires en HTML

▪ Un commentaire commence par <! -- et se termine par -->. Il n'est pas affiché par les navigateurs.
Très utile lorsque vous créez un site Web volumineux (sert de mémo si vous revenez sur votre code
source après un long moment d'absence) ou lorsque d'autres développeurs Web travaillent avec
votre code.
1. Cliquez à la fin de la ligne contenant la balise <body>, puis appuyez sur [Entrée]
2. Ajoutez le commentaire suivant :

Balise ouvrante du commentaire

Balise fermante du commentaire

3. Enregistrez, puis actualisez ou rechargez la page dans le navigateur.

▪ Vous obtenez la page Web suivante :

Le contenu de l'en-tête et les

commentaires ne sont pas
affichés par le navigateur !

PR. AIT DAOUD 9

 PROGRAMMATION WEB : HTML 5

4. Cliquez à la fin de la ligne contenant la balise fermante du commentaire -->, puis appuyez sur
[Entrée]
5. Ajoutez le commentaire suivant :
«Hello world!»
6. Enregistrez, puis actualisez ou rechargez la page dans le navigateur.
▪ Vous obtenez la page Web suivante :

D. Eléments HTML vus dans ce TP :

Elément Fonction Exemple

<html>
html Marque le début et la fin du document HTML Contenu du document
</html>
<head>
Contient les éléments qui n'apparaissent pas dans la page Contenu de l'en-tête, comme l'élément
head
web affichée par le navigateur title et l'élément meta
</head>
<title>
Spécifie le texte affiché dans la barre de titre de la page
title Apprendre HTML5
affichée par le navigateur
</title>
<meta charset ="utf-8 "/>
Les balises meta donnent aux navigateurs et aux moteurs de
meta <meta name ="description"
recherche des informations sur votre page
content="description de la page" />
<body>
body Inclue le contenu qui sera affiché par le navigateur Web Contenu du body
</body>
<! - -
Spécifie le texte vu seulement par les autres développeurs
Commentaire Séance 1 : programmation web
qui examinent le code de votre page Web
-->

PR. AIT DAOUD 10

 PROGRAMMATION WEB : HTML 5

TP2 : structurer le contenu d'une page Web

Titres, paragraphes, Mise en forme de texte

Objectif : Spécifier les balises HTML appropriées pour rédiger des paragraphes, associer
des titres aux paragraphes et donner de l’importance a certaine partie du texte a l’aide des
balises de mise en forme.
10. Ouvrez Notepad++.
11. Choisissez HTML, comme langage de codage.
12. Choisissez UTF-8 (sans BOM) pour l'encodage des caractères.
13. Enregistrer la page sous le nom "TP2.html"
14. Ecrire le code suivant dans la page "TP2.html"

L'attribut lang précise la langue dans laquelle

<!DOCTYPE html> le contenu de la page est écrit.
<html lang="fr">
<head>
<title> Créer vos pages Web en HTML </title>
<meta charset="utf-8">
</head>
<body>

</body>
</html>

E. Les titres
1. Cliquez sur la ligne vide après la balise <body>, appuyez sur [Espace] trois fois, puis tapez :
<h1> HTML 5 </h1>
▪ L'élément h1 représente le titre de niveau 1. Ce sera le titre le plus grand de la page.
Le tableau ci-dessous compare ce titre aux 5 autres titres en HTML.

Elément Code HTML Rendu

h1 <h1> HTML </h1>

h2 <h2> HTML</h2>

h3 <h3> HTML</h3>

h4 <h4> HTML </h4>

h5 <h5> HTML </h5>

h6 <h6> HTML</h6>

PR. AIT DAOUD 11

 PROGRAMMATION WEB : HTML 5

2. En utilisant les éléments h2 et h4, complétez la page par le sommaire suivant :

‫أ‬
h2
Introduction
‫أ‬
h4
Qu'est-ce qu'HTML?
‫أ‬
h4
Mon premier document HTML

Les bases du HTML5

Les paragraphes

Les titres

Les listes

Les liens hypertextes

3. Enregistrez puis ouvrez votre page sur Chrome.

F. Les paragraphes
▪ L'élément p signale un paragraphe de texte.
1. Cliquez à la fin de la ligne contenant le titre "Les paragraphes", puis appuyez sur [Entrée].
2. Appuyez sur [Espace] trois fois, puis tapez :
<p> Début du paragraphe
Le texte d'une page peut être divisé en différents paragraphes
</p> fin du paragraphe
3. Enregistrez puis actualiser ou recharger votre page sur Chrome.
4. Cliquez à la fin de la ligne contenant le titre "Les listes", puis appuyez sur [Entrée].
5. Appuyez sur [Espace] trois fois, puis tapez :

<p> Il existe deux types de listes : </p>

<h5> Listes à puces <h5>
<p> Il s’agit des listes non ordonnées </p>
<h5> Listes numérotes <h5>
<p> Il s’agit des listes ordonnées </p>

6. Enregistrez puis actualiser ou recharger votre page sur Chrome.

PR. AIT DAOUD 12

 PROGRAMMATION WEB : HTML 5

G. Comment donner de l'importance à certains mots de son texte ?

HTML 5 propose différentes balises pour donner de l'importance à du texte dans une page Web.

<b> Définir un texte en gras

<i> Indiquer qu'une partie du texte est différent du reste

Mettre une partie de texte en emphase

<em>
<p> Htlm5 est le langage de création de <em> pages Web </em></p>
Définir un texte important
<strong>
<p> <strong> Htlm5 </strong> est le langage de création de pages Web </p>
La taille du texte sera plus petite que celle du contexte où il se trouve.
<small>
<p> Html 5 est une extension du <small> Html 4 </small></p>
Le texte est surligné en jaune.
<mark>
<p> Htlm5 est <mark> une amélioration du HTML4 </mark> </p>
Ecrire du code informatique ou scientifique et le mettre en évidence par rapport au contexte.
<code>
<p>Soit l'équation du premier degré à deux inconnues : <code> 2x + 6y = 5 </code>.</p>

Ecrire un texte en exposant.

<h2> 1^erChapitre</h2>
<sup>
=> 1er Chapitre

Ecrire un texte en indice.

<sub> X_n
=> Xn
<ins> insérer un nouveau texte dans un document révisé

<del> indiquer qu'une partie de texte est supprimée, mais conservée pour en garder la trace.

Travail à faire :
En utilisant les balises du tableau ci-dessus, complétez la page par les paragraphes suivants :

PR. AIT DAOUD 13

 PROGRAMMATION WEB : HTML 5

H. Eléments HTML vus dans ce TP :

Elément Fonction
Les titres
h1 Titre de niveau 1
h2 Titre de niveau 2
h3 Titre de niveau 3
h4 Titre de niveau 4
h5 Titre de niveau 5
h6 Titre de niveau6
Les paragraphes
p Paragraphe de texte
br Retour a la ligne
Mise en forme de texte
b Texte en gras
i Texte en italique
sup Exposant
sub Indice
strong Mise en valeur forte (en gras)
em Mise en valeur normale (en italique)
mark Mise en valeur visuelle (en jaune)
small Texte plus petit
address Adresse de contact
code Pour du code sur une ligne
pre Pour du code sur plusieurs lignes (pour les codes sources)
del Texte supprimé
ins Texte dans un document révisé

PR. AIT DAOUD 14

 PROGRAMMATION WEB : HTML 5

TP3 : Structurer le contenu d'une page Web

Les éléments Listes, div, header, footer, section, nav,

article, aside
Objectif :
Dans ce TP nous allons apprendre à organiser du contenu à l'aide des listes à puces et des
listes numérotées et utiliser des balises permettant de regrouper d'autres éléments HTML.
Ces balises ont une signification sémantique qui indique le rôle de leur contenu dans la page
Web.
15. Ouvrez Notepad++.
16. Choisissez HTML, comme langage de codage.
17. Choisissez UTF-8 (sans BOM) pour l'encodage des caractères.
18. Enregistrer la page sous le nom "TP4.html"
19. Ecrire le code suivant dans la page "TP4.html" L'attribut lang précise la langue dans laquelle
le contenu de la page est écrit.
<!DOCTYPE html>
<html lang = "fr">
<head>
<title> Créer vos pages Web en HTML </title>
<meta charset="utf-8">
</head>
<body>

</body>
</html>
20. Chargez la page dans le navigateur.

I. Les listes non ordonnées ou listes à puces :

▪ On définit une liste non ordonnée avec la balise <ul> (unordred list)
▪ Chaque élément de la liste est spécifié avec la blaise <li> (list item)
▪ vous pouvez définir le type de puces (square, circle, disc) de la liste à l'aide de l'attribut type de
la balise <ul>

PR. AIT DAOUD 15

 PROGRAMMATION WEB : HTML 5

Syntaxe Rendu
<ul type = "circle">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul type = "square">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul type = "disc">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

J. Les listes ordonnées :

▪ On définit une liste ordonnée avec la balise <ol> (ordred list)
▪ Chaque élément de la liste est spécifié avec la blaise <li> (list item)
▪ Le type de numérotation est spécifié avec l'attribut type de la balise <ol>
▪ La valeur de départ de la liste est définie à l'aide de l'attribut start de la balise <ol>
▪ Inversez l'ordre de la liste à l'aide de l'attribut reversed de la balise <ol>

Syntaxe Rendu
<ol type = 1>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
<ol type = "A" reversed>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
< ol type = "I" start= "3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

Travail à faire :

PR. AIT DAOUD 16

 PROGRAMMATION WEB : HTML 5

1. En utilisant les balises <ol> et <ul> transformez le sommaire de la page comme suit :

I. Introduction

a. Qu'est ce qu'HTML?
b. Mon premier document HTML
▪ L' en tête du document
▪ Le contenu de la page

II. Les bases du HTML5

1. Les paragraphes
2. Les titres
3. Les listes
2. Enregistrez votre document, revenez à votre navigateur, puis cliquez sur le bouton Actualiser.

K. L'élément div :
• L'élément div est utilisé comme conteneur pour d'autres éléments HTML, mais Il n'a pas de
signification sémantique car il ne donne aucune information sur le rôle du contenu qu'il
contient.
1. Créer un nouveau document HTML sous le nom "TP4-1.html"
2. Cliquez sur la ligne vide entre <body> et </body>
3. Tapez le code HTML suivant :
<div >
<h2> Introduction </h2>
<h3> c'est quoi html? </h3>
<h4> HTML5 </h4>
<p> HTML5 est un langage de création de pages Web </p>
</div>
4. Enregistrez puis rechargez la page dans le navigateur.

L. L'élément header :
• Regroupe le contenu de l'en-tête d’une page Web. On y place des éléments de titre, une image
qui sert de logo, un formulaire de recherche, etc.
1. Cliquez après la balise d'ouverture <body>, appuyez sur [Entrée]
2. Tapez le code HTML suivant :

<header>
<center>
<h1>Apprendre HTML5 </h1>

PR. AIT DAOUD 17

 PROGRAMMATION WEB : HTML 5

</center>
</header>
3. Enregistrez puis rechargez la page dans le navigateur.

M. L'élément footer :
• Regroupe les éléments du pied de la page web. On y place les informations concernant l’auteur,
les mentions légales (copyright) ou les liens vers d'autres pages du site.
1. Cliquez après la balise de fermeture </div>, appuyez sur [Entrée]
2. Tapez le code HTML suivant :
<footer> <p> &copy 2AP, EMSI, 2021 </p> </footer>

3. Enregistrez puis rechargez la page dans le navigateur.

Remarque : Liste des principaux caractères spéciaux :

Caractère Code HTML

& &amp;
© &copy;
> &gt;
< &lt;
" &quot
' &apos;

N. L'élément nav
• On y place le menu de navigation du site Web.
1. Cliquez après la balise de fermeture </header>, appuyez sur [Entrée]
2. Tapez le code HTML suivant :
<nav> <!—menu de navigation -->
La balise <a> définit un lien hypertexte
<ul>

<li><a href ="#" > Titres </a> </li>

<li><a href ="#" > Paragraphes </a></li>

<li><a href ="#"> Listes </a> </li>

</ul>

</nav>

3. Enregistrez puis rechargez la page dans le navigateur.

O. L'élément section
• Regroupe du contenu axé sur un thème commun, comme un chapitre d'un ouvrage (une
section peut aussi contenir un header, un nav et un footer)
1. Cliquez après la balise d'ouverture <div>, appuyez sur [Entrée]
2. Modifiez le code HTML entre <div> et </div> par le code suivant :

PR. AIT DAOUD 18

 PROGRAMMATION WEB : HTML 5

<section>

<h2> Introduction </h2>

<h3> c'est quoi html? </h3>
<h4> HTML5 </h4>
<p> HTML5 est un langage de création de pages Web </p>
</section>

3. Enregistrez puis rechargez la page dans le navigateur.

P. L'élément article
• La balise<article>sert à englober une portion généralement autonome de la page. C'est une
partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des
actualités (articles de journaux ou de blogs).
1. Cliquez après la balise d'ouverture <section>, appuyez sur [Entrée]
2. Modifiez le code HTML entre <section> et </section> par le code suivant :
<section>
<h2> Introduction </h2>
<h3> c'est quoi html? </h3>
<article>
<h4> HTML5 </h4>
<p> HTML5 est un langage de création de pages Web </p>
</article>
</section>
3. Enregistrez puis rechargez la page dans le navigateur.

Q. L'élément aside
• La balise <aside> est conçue pour contenir des informations complémentaires au document
que l'on visualise. Ces informations sont généralement placées sur le côté (ce n’est pas une
obligation).
1. Cliquez après la balise de fermeture </section>, appuyez sur [Entrée]
2. Tapez le code HTML suivant :

<aside>
<!-- Placez ici des informations complémentaires -->
<address>
A propos de l’auteur <br> 2 AP
</address>
</aside>
3. Enregistrez puis rechargez la page dans le navigateur.

PR. AIT DAOUD 19

 PROGRAMMATION WEB : HTML 5

Travail à faire :
En utilisant les balises HTML, créez la page suivantes :

R. Les balises vues dans ce TP :

Les listes
ul Liste à puces ou liste non numérotée
ol Liste numérotée
li Élément de la liste.

Balises Sémantiques

Balise Rôle

<header> En-tête

<footer> Pied de page

<nav> Menu de navigation

<section> Regroupe du contenu axé sur le même thème

<article> Contenu autonome, comme un article d'un blog.

PR. AIT DAOUD 20

 PROGRAMMATION WEB : HTML 5

<aside> Informations complémentaires qu'on place dans les zones latérales de la page Web.

Balises universelles :
Ce sont des balises qui n'ont pas de sens sémantique. On les utilise pour construire le design de la page.
Balise Description

<div> Conteneur d'éléments de type bloc.

<span> Conteneur d'éléments de type inline.

PR. AIT DAOUD 21

 PROGRAMMATION WEB : HTML 5

TP 6 : Règles d'application des styles CSS

Objectifs :
• Comprendre le principe d'héritage en CSS
• Comprendre le principe de priorité des règles de style
• Utiliser les outils du développement intégrés aux navigateurs pour examiner les règles
de style appliquées aux éléments d'une page Web

A. Héritage des styles CSS

✓ En CSS, chaque élément enfant hérite de certaines propriétés de style de son parent.
Exemple :

✓ Si vous appliquez une propriété de style à l'élément body, tous les enfants de body (div
et p) hériteront de ce style.
✓ Remarque : Certaines propriétés de style ne s'héritent pas.
Travail à faire :
1. Ouvrez Notepad++.
2. Créez un nouveau fichier.

3. Choisissez HTML, comme langage de codage.

4. Enregistrer la page sous le nom "TP6.html"
5. Tapez le code suivant dans la page "TP6.html"
<!DOCTYPE html>
<html lang = "fr">
<head>
<title> Créer vos pages Web en HTML </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header> <!- -En-tête de la page -->
<h1>Apprendre HTML5 et CSS3 </h1>
</header>
<section> <!- -contenu principal de la page -->
<h2> Le langage HTML5 </h2>
<p class ="p-section"> HTML5 est le langage de structuration des
pages Web </p>

PR. AIT DAOUD 22

 PROGRAMMATION WEB : HTML 5

<h2> Le langage CSS3 </h2>

<p class="p-section"> CSS3 est le langage de mise en forme des
pages Web </p>
</section>
<footer> <!- -pied de page -->
<p id ="copyright"> &copy 2AP, EMSI, 2020 </p>
</footer>
</body>
</html>
6. Enregistrez puis chargez la page dans le navigateur.
7. Revenez à votre éditeur et créez un nouveau fichier
8. Choisissez CSS, comme langage de codage.
9. Enregistrer la page sous le nom "style.css"
10. Tapez le code suivant :
body {
color : blue;
}
header {
background-color : skyblue;
}
section {
background-color : ivory;
}
footer{
background-color : dodgerblue;
}
h1{
color : white;
}
h2{
color : dodgerblue ;
}
p{
text-align : justify ;
color : grey;
}
#copyright {
text-align : center;
color : white;
}

.p-section {
font-size : 1.5em;
font-family : Arial;
}
11. Dans votre navigateur, rechargez la page TP6.html
12. Cliquez avec le bouton droit sur le titre "Apprendre HTML5 et CSS3 ", puis cliquez sur Inspecter

PR. AIT DAOUD 23

 PROGRAMMATION WEB : HTML 5

▪ Sur le côté supérieur droit de la fenêtre du navigateur, dans l'onglet "Elements" une vue hiérarchique du
code HTML de la page s'affiche avec l'élément h1 mis en évidence.

▪ Sur le côté inférieur droit de la page, dans l'onglet "Styles", sont listées les règles de styles qui sont associées
à l'élément h1. La première figure dans notre fichier "style.css", la deuxième figure dans la feuille de style
par défaut du navigateur et la troisième est héritée de son parent body.
Le titre est écrit en blanc !

La déclaration de couleur dans

la règle de style h1 aura la
priorité sur celle héritée de
l'élément body et sera donc
appliquée

La déclaration de couleur dans

la règle de style body est barrée
indiquant que ce style n'a pas
été appliqué à l'élément h1

PR. AIT DAOUD 24

 PROGRAMMATION WEB : HTML 5

13. Trouvez la règle de style h1, déplacez le pointeur de la souris sur la propriété "color" jusqu'à ce qu'une
case à cocher s'affiche à sa gauche, puis cliquez sur la case à cocher pour la décocher.
Le titre est écrit en bleu !

Lorsque vous supprimez la

déclaration de couleur
associée au sélecteur h1,
c'est la couleur héritée du
body qui sera appliquée.

14. Cliquez sur le bouton Actualiser ou Recharger la page.

▪ Le navigateur recharge la feuille de style enregistrée, ramenant le titre à sa couleur
blanche d'origine.

Remarque : Un style hérité d'un élément parent n'est appliqué à l'élément enfant que si on n'a pas attribué
un style spécifique à l'élément enfant.

B. Priorité des Règles de style :

Lorsque plusieurs règles de style sélectionnent le même élément et spécifient des valeurs différentes pour la
même propriété CSS, ce sera la règle CSS déclarée avec le sélecteur qui a le poids le plus élevé qui l'emportera
sur les autres. Le poids des sélecteurs est régi par l'expression suivante :

Sélecteur d'ID > Sélecteur de classe > sélecteur de type

Le navigateur calcule la priorité d’une règle de style en fonction du poids du sélecteur utilisé dans la règle. Il
ordonne ensuite les règles appliquées à chaque élément de la priorité la plus élevée à la priorité la plus faible

15. Cliquez avec le bouton droit sur les informations du copyright, puis cliquez sur Inspecter

PR. AIT DAOUD 25

 PROGRAMMATION WEB : HTML 5

16. Faites défiler la liste des règles de style associées au copyright

▪ Deux règles, l'une avec le sélecteur p, l'autre avec le sélecteur #copyright s'appliquent à l'élément.

▪ Notez que la règle de style avec le sélecteur #copyright, se trouve en haut de la liste car le sélecteur
#copyright un poids plus élevé que le sélecteur de type p
▪ La valeur de couleur "white" sera donc attribuée à la couleur du texte du copyright.
17. Trouvez la règle de style #copyright puis désactivez la propriété color .
▪ Lorsque vous supprimez la déclaration de couleur associée au sélecteur #copyright, la déclaration
de couleur du sélecteur p est appliquée à l'élément sélectionné car il a maintenant le poids le plus
élevé. Les informations du copyright seront donc écrites en gris.

18. Cliquez sur le bouton Actualiser ou Recharger la page.

PR. AIT DAOUD 26

 PROGRAMMATION WEB : HTML 5

▪ Le navigateur recharge la feuille de style enregistrée, ramenant le copyright à sa couleur

blanche d'origine.
19. Cliquez avec le bouton droit sur le texte du 1er paragraphe, puis cliquez sur Inspecter
▪ Le code HTML de la page s'affiche avec l'élément <p class ="p-section"> contenant le texte
du paragraphe mis en évidence.

20. Faites défiler la liste des règles de style associées au 1er paragraphe.
▪ Le sélecteur p et le sélecteur .p-section sélectionnent l'élément

▪ Étant donné que le sélecteur .p-section ne spécifie pas une couleur pour le texte, c'est la
valeur "grey" définie par le sélecteur p qui sera attribuée à la couleur du texte du
paragraphe. (Pas de conflit)
21. Trouvez la règle de style .p-section puis cliquez à la fin de la dernière ligne de la règle de style.

▪ Une nouvelle ligne est insérée et un curseur clignotant vous invite à saisir une nouvelle
propriété.
22. Tapez color : red

PR. AIT DAOUD 27

 PROGRAMMATION WEB : HTML 5

▪ On se trouve dans un cas de conflit, notez que la déclaration de couleur dans la règle de
style p est maintenant barrée indiquant qu'elle n'est plus appliquée.
▪ Étant donné que le sélecteur .p-section a un poids plus grand, la valeur de couleur "red"
est donc attribuée à la couleur du texte du paragraphe.
23. Cliquez sur le bouton Actualiser ou Recharger la page.
24. Revenez à styles.css dans votre éditeur.
25. Cliquez après l'accolade fermante de la dernière règle de style, puis appuyez sur [Entrée]
26. Tapez le code suivant :
p{
text-align : right ;
}
27. Revenez à TP6.html dans votre navigateur, cliquez sur le bouton "Actualiser".
▪ Notez que le texte des paragraphes est maintenant aligné à droite.
28. Cliquez avec le bouton droit sur le texte du 1er paragraphe, puis cliquez sur Inspecter
29. Faites défiler la liste des règles de style associées au 1er paragraphe.

Deux règles avec le

sélecteur p définissent
l'alignement du texte.

▪ Lorsque deux règles sélectionnent le même élément et sont définies avec des sélecteurs
ayant même poids, c’est la règle qui apparait en dernier qui sera prioritaire.
▪ Le texte du paragraphe sera donc aligné à droite.

Remarque :
Si votre code CSS n'affecte pas l'apparence des éléments dans les navigateurs comme vous vous y attendez, vous
pouvez utiliser des outils de développement intégrés aux les navigateurs pour déboguer votre code. Ces outils
vous permettent d'inspecter les propriétés et valeurs CSS de chaque élément d'un document et voir quelles
déclarations sont appliquées à un élément.

PR. AIT DAOUD 28

 PROGRAMMATION WEB : HTML 5

TP5 : Feuille de style externe

Une feuille de style intégrée fonctionne bien pour une page Web autonome. Cependant, si vous avez plusieurs
pages, un changement de style sur l'ensemble du site nécessiterait de changer le même code de style sur chaque
page ce qui n'est pas pratique. Il est donc recommandé d'utiliser des feuilles de style externes.

Objectifs :
• Créer une feuille de style externe.
• Lier un document HTML à une feuille de style externe.
• Ajouter un commentaire à une feuille de style externe

1. Ouvrez Notepad++.
2. Créez un nouveau fichier.

3. Choisissez HTML, comme langage de codage.

4. Enregistrer la page sous le nom "TP5.html"
5. Tapez le code suivant dans la page "TP5.html"
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Les sélecteurs CSS3 </title>
</head>
<body>
<header>
<h1> Les sélecteurs en CSS3 </h1>
</header>
<section>
<h2> Sélecteur de type </h2>
<p> < mark> Un sélecteur de type/ simple</mark>
sélectionne tous les éléments correspondants à la même
balise. <br> Un sélecteur simple porte le nom d'une
balise HTML
</p>
<h2> Sélecteur d'identifiant </h2>
<p> Un <mark> sélecteur d’identifiant </mark> est
utilisé pour sélectionner un unique élément HTML.</p>
<div><a href="#"> Lire plus </a><div>
</section>

PR. AIT DAOUD 29

 PROGRAMMATION WEB : HTML 5

<footer>
<p > &copy 2AP, EMSI, 2021 </p>
</footer>
</body>
</html>

6. Enregistrez puis chargez la page dans le navigateur.

A. Mise en forme de texte

1- Propriétés CSS3 pour styler du texte

ACTION PROPRIETE CSS3

Préciser la couleur du texte color : green; /*nom de la couleur */
color : #00FF00 ; /* notation hexadécimale de la couleur*/
color : rgb(0,255,0); /* notation rgb */
Préciser la taille du texte font-size : 10 px; /* en pixel */
font-size : 1.2 em ; /* en em */
font-size : 120% ; /* en pourcentage */
Choisir la police des caractères font-family : Arial, Arial Black, Comic Sans MS, Sans-serif
Ecrire du texte en italique font-style : italic ;
Ecrire du texte en oblique font-style : oblique ;
Rendre un texte normal font-style : normal ;
Mettre du texte en gras font-weight : bold ;
Souligner du texte text-decoration : underline;
Enlever le souligné d'un texte text-decoration : none;
Barrer du texte text-decoration : line-through;
Tracer une ligne au-dessus du texte text-decoration : overline;
Aligner du texte à gauche text-align : left ;
Aligner du texte à droite text-align : right;
Aligner du texte en justifié text-align : justify ;
Centrer du texte text-align : center ;
Ecrire en majuscules text-transform : uppercase;
Ecrire en minuscules text-transform: lowercase;
Préciser l'espace entre lignes line-height : 10px;
Préciser l'espace entre mots word-spacing : 30px;
Préciser l'espace entre caractères letter-spacing : 5px;

2- Unités de longueur en CSS3

Unité Description
em Correspond à la largeur de la lettre "m" de la police utilisée ou à la valeur de la propriété
font- size héritée.
Exemple : font-size: 1.2em
La taille de la police est 20% plus grande.
px Correspond à la taille d'un pixel. Dépend du média de visualisation.
Exemple : font-size: 10px
% Exemple : font-size: 120%
La taille de la police est 20% plus grande que la taille de la police utilisée.

PR. AIT DAOUD 30

 PROGRAMMATION WEB : HTML 5

3- Quelques polices des caractères en CSS3

B. Créer une feuille de style externe

1. Revenez à votre éditeur et créez un nouveau fichier
2. Choisissez CSS, comme langage de codage.

3. Enregistrer la page sous le nom "style.css"

4. en utilisant des sélecteurs de type, appliquez ce qui suit :
a) Pour les titres de niveau1 (<h1>) :
• Police des caractères : 'Arial Black', Gadget, Sans-serif;
• Couleur du titre : #555
• Titre écrit en Majuscule.
• Espacement entre lettres : 5px
• Titre centré
b) Pour les titres de niveau2 (<h2>) :
• Police des caractères : Verdana, Tahoma, Sans-serif;
• Couleur du titre : #ee5522
• Titre souligné

PR. AIT DAOUD 31

 PROGRAMMATION WEB : HTML 5

c) Pour les paragraphes (<p>) :

• Arrière-plan de couleur : #555
• Couleur du texte : #fff
• Alignement du texte : Justifié.
• Police des caractères : Helvetica, Arial, Sans-serif
• Espacement entre lignes : 50px
• Taille des caractères : 1.2em;
d) Pour les liens (<a>) :
• Arrière-plan de couleur : #ee5522
• Police des caractères : "Comic sans Ms", Arial, Sans-serif
• Couleur du lien : blanc.
• Texte du lien en gras.
• Lien non souligné
e) Pour les éléments (<mark>) :
• Arrière-plan de couleur : orange
• Couleur du texte : vert
• Texte en italique
f) Pour les conteneurs (<div>) :
• Alignement de texte : à droite

C. Lier un document HTML à une feuille de style externe :

30. Fermez styles.css, puis rouvrez tp5.html dans votre éditeur s'il n'est pas encore ouvert.
31. cliquez à la fin de la ligne contenant l'élément <meta>, puis appuyez sur [Entrée].
32. Tapez le code suivant : <link rel="stylesheet" href="style.css" />
▪ La balise <link> fait le lien entre la feuille de style "style.css" et document HTML "index.html"
▪ L'attribut rel spécifie le type de contenu dans le fichier lié.
▪ rel = "stylesheet" indique que c'est une feuille de style CSS qui sera liée au document HTML
▪ L'attribut href specifies le nom du fichier lié.
33. Enregistrez votre document, revenez à votre navigateur, puis cliquez sur le bouton Actualiser.

D. Ajouter un commentaire à une feuille de style

1. Ouvrez style.css dans votre éditeur
2. Cliquez avant le sélecteur header, puis tapez [Entrée]
3. Tapez le code suivant :
/*
Auteur : 2AP
Année universitaire : 2019/2020
*/
▪ Tout ce que vous saisissez entre /* et */ est ignoré par les navigateurs.
4. Enregistrez votre document CSS
5. Dans votre navigateur, rechargez la page TP5.html
▪ Vous remarquerez que l'apparence de la page est inchangée.

PR. AIT DAOUD 32

 PROGRAMMATION WEB : HTML 5

TP 6 : Règles d'application des styles CSS

Objectifs :
• Comprendre le principe d'héritage en CSS
• Comprendre le principe de priorité des règles de style
• Utiliser les outils du développement intégrés aux navigateurs pour examiner les règles
de style appliquées aux éléments d'une page Web

C. Héritage des styles CSS

✓ En CSS, chaque élément enfant hérite de certaines propriétés de style de son parent.
Exemple :

✓ Si vous appliquez une propriété de style à l'élément body, tous les enfants de body (div
et p) hériteront de ce style.
✓ Remarque : Certaines propriétés de style ne s'héritent pas.
Travail à faire :
34. Ouvrez Notepad++.
35. Créez un nouveau fichier.

36. Choisissez HTML, comme langage de codage.

37. Enregistrer la page sous le nom "TP6.html"
38. Tapez le code suivant dans la page "TP6.html"
<!DOCTYPE html>
<html lang = "fr">
<head>
<title> Créer vos pages Web en HTML </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header> <!- -En-tête de la page -->
<h1>Apprendre HTML5 et CSS3 </h1>
</header>
<section> <!- -contenu principal de la page -->
<h2> Le langage HTML5 </h2>
<p class ="p-section"> HTML5 est le langage de structuration des
pages Web </p>

PR. AIT DAOUD 33

 PROGRAMMATION WEB : HTML 5

<h2> Le langage CSS3 </h2>

<p class="p-section"> CSS3 est le langage de mise en forme des
pages Web </p>
</section>
<footer> <!- -pied de page -->
<p id ="copyright"> &copy 2AP, EMSI, 2020 </p>
</footer>
</body>
</html>
39. Enregistrez puis chargez la page dans le navigateur.
40. Revenez à votre éditeur et créez un nouveau fichier
41. Choisissez CSS, comme langage de codage.
42. Enregistrer la page sous le nom "style.css"
43. Tapez le code suivant :
body {
color : blue;
}
header {
background-color : skyblue;
}
section {
background-color : ivory;
}
footer{
background-color : dodgerblue;
}
h1{
color : white;
}
h2{
color : dodgerblue ;
}
p{
text-align : justify ;
color : grey;
}
#copyright {
text-align : center;
color : white;
}

.p-section {
font-size : 1.5em;
font-family : Arial;
}
44. Dans votre navigateur, rechargez la page TP6.html
45. Cliquez avec le bouton droit sur le titre "Apprendre HTML5 et CSS3 ", puis cliquez sur Inspecter

PR. AIT DAOUD 34

 PROGRAMMATION WEB : HTML 5

▪ Sur le côté supérieur droit de la fenêtre du navigateur, dans l'onglet "Elements" une vue hiérarchique du
code HTML de la page s'affiche avec l'élément h1 mis en évidence.

▪ Sur le côté inférieur droit de la page, dans l'onglet "Styles", sont listées les règles de styles qui sont associées
à l'élément h1. La première figure dans notre fichier "style.css", la deuxième figure dans la feuille de style
par défaut du navigateur et la troisième est héritée de son parent body.
Le titre est écrit en blanc !

La déclaration de couleur dans

la règle de style h1 aura la
priorité sur celle héritée de
l'élément body et sera donc
appliquée

La déclaration de couleur dans

la règle de style body est barrée
indiquant que ce style n'a pas
été appliqué à l'élément h1

PR. AIT DAOUD 35

 PROGRAMMATION WEB : HTML 5

46. Trouvez la règle de style h1, déplacez le pointeur de la souris sur la propriété "color" jusqu'à ce qu'une
case à cocher s'affiche à sa gauche, puis cliquez sur la case à cocher pour la décocher.
Le titre est écrit en bleu !

Lorsque vous supprimez la

déclaration de couleur
associée au sélecteur h1,
c'est la couleur héritée du
body qui sera appliquée.

47. Cliquez sur le bouton Actualiser ou Recharger la page.

▪ Le navigateur recharge la feuille de style enregistrée, ramenant le titre à sa couleur
blanche d'origine.

Remarque : Un style hérité d'un élément parent n'est appliqué à l'élément enfant que si on n'a pas attribué
un style spécifique à l'élément enfant.

D. Priorité des Règles de style :

Lorsque plusieurs règles de style sélectionnent le même élément et spécifient des valeurs différentes pour la
même propriété CSS, ce sera la règle CSS déclarée avec le sélecteur qui a le poids le plus élevé qui l'emportera
sur les autres. Le poids des sélecteurs est régi par l'expression suivante :

Sélecteur d'ID > Sélecteur de classe > sélecteur de type

Le navigateur calcule la priorité d’une règle de style en fonction du poids du sélecteur utilisé dans la règle. Il
ordonne ensuite les règles appliquées à chaque élément de la priorité la plus élevée à la priorité la plus faible

48. Cliquez avec le bouton droit sur les informations du copyright, puis cliquez sur Inspecter

PR. AIT DAOUD 36

 PROGRAMMATION WEB : HTML 5

49. Faites défiler la liste des règles de style associées au copyright

▪ Deux règles, l'une avec le sélecteur p, l'autre avec le sélecteur #copyright s'appliquent à l'élément.

▪ Notez que la règle de style avec le sélecteur #copyright, se trouve en haut de la liste car le sélecteur
#copyright un poids plus élevé que le sélecteur de type p
▪ La valeur de couleur "white" sera donc attribuée à la couleur du texte du copyright.
50. Trouvez la règle de style #copyright puis désactivez la propriété color .
▪ Lorsque vous supprimez la déclaration de couleur associée au sélecteur #copyright, la déclaration
de couleur du sélecteur p est appliquée à l'élément sélectionné car il a maintenant le poids le plus
élevé. Les informations du copyright seront donc écrites en gris.

51. Cliquez sur le bouton Actualiser ou Recharger la page.

PR. AIT DAOUD 37

 PROGRAMMATION WEB : HTML 5

▪ Le navigateur recharge la feuille de style enregistrée, ramenant le copyright à sa couleur

blanche d'origine.
52. Cliquez avec le bouton droit sur le texte du 1er paragraphe, puis cliquez sur Inspecter
▪ Le code HTML de la page s'affiche avec l'élément <p class ="p-section"> contenant le texte
du paragraphe mis en évidence.

53. Faites défiler la liste des règles de style associées au 1er paragraphe.
▪ Le sélecteur p et le sélecteur .p-section sélectionnent l'élément

▪ Étant donné que le sélecteur .p-section ne spécifie pas une couleur pour le texte, c'est la
valeur "grey" définie par le sélecteur p qui sera attribuée à la couleur du texte du
paragraphe. (Pas de conflit)
54. Trouvez la règle de style .p-section puis cliquez à la fin de la dernière ligne de la règle de style.

▪ Une nouvelle ligne est insérée et un curseur clignotant vous invite à saisir une nouvelle
propriété.
55. Tapez color : red

PR. AIT DAOUD 38

 PROGRAMMATION WEB : HTML 5

▪ On se trouve dans un cas de conflit, notez que la déclaration de couleur dans la règle de
style p est maintenant barrée indiquant qu'elle n'est plus appliquée.
▪ Étant donné que le sélecteur .p-section a un poids plus grand, la valeur de couleur "red"
est donc attribuée à la couleur du texte du paragraphe.
56. Cliquez sur le bouton Actualiser ou Recharger la page.
57. Revenez à styles.css dans votre éditeur.
58. Cliquez après l'accolade fermante de la dernière règle de style, puis appuyez sur [Entrée]
59. Tapez le code suivant :
p{
text-align : right ;
}
60. Revenez à TP6.html dans votre navigateur, cliquez sur le bouton "Actualiser".
▪ Notez que le texte des paragraphes est maintenant aligné à droite.
61. Cliquez avec le bouton droit sur le texte du 1er paragraphe, puis cliquez sur Inspecter
62. Faites défiler la liste des règles de style associées au 1er paragraphe.

Deux règles avec le

sélecteur p définissent
l'alignement du texte.

▪ Lorsque deux règles sélectionnent le même élément et sont définies avec des sélecteurs
ayant même poids, c’est la règle qui apparait en dernier qui sera prioritaire.
▪ Le texte du paragraphe sera donc aligné à droite.

Remarque :
Si votre code CSS n'affecte pas l'apparence des éléments dans les navigateurs comme vous vous y attendez, vous
pouvez utiliser des outils de développement intégrés aux les navigateurs pour déboguer votre code. Ces outils
vous permettent d'inspecter les propriétés et valeurs CSS de chaque élément d'un document et voir quelles
déclarations sont appliquées à un élément.

PR. AIT DAOUD 39