XHTML, CSS,

JAVASCRIPT

© Février 2023 – Mise à jour : 24 Avril 2024

 XHTML, CSS, JAVASCRIPT

Table des matières

Chapitre 1 Historique ............................................................................................................................................. 1
1.1. Introduction..................................................................................................................................................... 1
1.2. Les différentes versions du HTML et des CSS ...................................................................................... 1
1.3 Les outils nécessaires pour ce cours ........................................................................................................ 2
PARTIE I : MAITRISE DES BASES DU XHTML....................................................................... 4
Chapitre 2 Différence entre HTML et CSS .................................................................................................... 4
2.1. Le HTML............................................................................................................................................................ 4
2.2. Le CSS ............................................................................................................................................................... 4
2.3. Rôle du navigateur ........................................................................................................................................ 5
2.4. En résumé ........................................................................................................................................................ 6
Chapitre 3 Créez votre première page web en XHTML ........................................................................... 7
3.1. Les balises HTML ........................................................................................................................................... 7
3.2. Les attributs des balises.............................................................................................................................. 8
3.3. Structure de base d'une page XHTML .................................................................................................... 8
3.4. Les commentaires en XHTML .................................................................................................................. 12
3.5. Exercice P1C3 ............................................................................................................................................... 12
3.6. En résumé ...................................................................................................................................................... 13
Chapitre 4 Organisation du texte de la page web .................................................................................... 14
4.1. Créer des paragraphes avec les balises <p> </p> ............................................................................ 14
4.2. Revenir à la ligne avec la balise orpheline <br /> ............................................................................. 14
4.3. Créer des titres avec les balises <h1>, <h2>, <h3>, … .................................................................... 14
4.4. Créer des listes avec les balises <li> et <ul> ou <ol> .................................................................. 15
4.5. Mettre en valeur du texte important ..................................................................................................... 15
4.6. Exercice P1C4 ............................................................................................................................................... 16
4.7. En résumé ...................................................................................................................................................... 17
Chapitre 5 Créer un lien hypertexte en XHTML ...................................................................................... 18
5.1. Créer un lien hypertexte avec la balise <a> et l'attribut href ........................................................ 18
5.2. Créer un lien hypertexte vers l'URL d'une page disponible sur internet (lien absolu) .......... 18
5.3. Créer un lien hypertexte d'une page à une autre sur le même site (lien relatif) ..................... 18
5.4. Créer une ancre avec les attributs id et href ................................................................................... 18
5.5. Exercice P1C5 ............................................................................................................................................... 21
5.6. En résumé ...................................................................................................................................................... 22
Chapitre 6 Insérer des images .......................................................................................................................... 23
6.1. Insérer une image avec la balise orpheline <img> ............................................................................ 23
6.2. Choisir le bon format d'image.................................................................................................................. 23
6.3. Ajouter une infobulle avec l'attribut title ........................................................................................ 24

i
 6.4. Créer une miniature cliquable ................................................................................................................ 24
6.5. Exercice P1C6 ............................................................................................................................................... 24
6.6. En résumé ...................................................................................................................................................... 24
Chapitre 7 Autres balises XHTML ................................................................................................................... 26
7.1. Insérer une adresse avec la balise <address> .................................................................................. 26
7.2. Insérer des citations longues avec la balise <blockquote> .......................................................... 26
7.3. Insérer une ligne horizontale avec la balise vide <hr /> ............................................................... 26
7.4. Insérer une liste de définitions avec la balise <dl>.......................................................................... 26
7.5. Créer un tableau avec la balise <table> ............................................................................................. 26
7.6. Insérer une citation courte ou une référence la balise <cite> .................................................... 27
7.7. Insérer des métadonnées avec la balise <meta> ou des liens externes avec la
balise <link> ..................................................................................................................................................... 27
PARTIE II : MISE EN FORME DES PAGES WEB AVEC CSS .................................................. 28
Chapitre 8 Intégrer le CSS dans la page XHTML ..................................................................................... 28
8.1. Lier le fichier CSS au fichier XHTML .................................................................................................... 28
8.2. Appliquer une propriété CSS à une balise XHTML .......................................................................... 28
8.3. Appliquer une propriété CSS à plusieurs balises XHTML à la fois ............................................. 30
8.4. Appliquer un style à un élément isolé avec l'attribut class ......................................................... 30
8.5. Appliquer une propriété CSS à un élément unique avec l'attribut id ......................................... 31
8.6. Appliquer plusieurs propriétés CSS d'un coup à un élément....................................................... 32
8.7. Exploiter les balises universelles <span> </span> et <div> </div> ................................... 33
8.8. Exercice P2C1 ............................................................................................................................................... 33
8.9. En résumé ...................................................................................................................................................... 33
Chapitre 9 Changer l'apparence du texte .................................................................................................... 35
9.1. Changer la taille du texte avec la propriété CSS font-size ........................................................ 35
9.2. Choix d’une police avec la propriété CSS font-family ................................................................. 37
9.3. Mettre du texte en italique avec la propriété CSS font-style ................................................... 38
9.4. Mettre du texte en gras avec la propriété CSS font-weight ....................................................... 38
9.5. Souligner du texte avec la propriété CSS text-decoration ....................................................... 40
9.6. Alignez du texte avec la propriété CSS text-align ........................................................................ 40
9.7. Exercice P2C2 ............................................................................................................................................... 42
9.8. En résumé ...................................................................................................................................................... 43
Chapitre 10 Ajouter de la couleur et un fond............................................................................................ 44
10.1. Changez la couleur du texte avec la propriété CSS color .......................................................... 44
10.2. Appliquer une couleur d'arrière-plan avec la propriété CSS background-color ............... 44
10.3. Ajouter une image de fond avec la propriété CSS background-image ................................... 45
10.4. Exercice P2C3............................................................................................................................................. 48
10.5. En résumé ................................................................................................................................................... 48
Chapitre 11 Créer des bordures et des ombres ......................................................................................... 49

ii
 11.1. Créer des bordures avec la propriété CSS border ......................................................................... 49
11.2. Arrondir les angles avec la propriété CSS border-radius ........................................................ 51
11.3. Ajouter une ombre portée avec la propriété CSS box-shadow................................................... 53
11.4. Ajouter une ombre à un texte avec text-shadow .......................................................................... 54
11.5. Exercice P2C4............................................................................................................................................. 56
11.6. En résumé ................................................................................................................................................... 56
Chapitre 12 Le modèle des boîtes .................................................................................................................. 57
12.1. Différencier les balises de type block et de type inline ............................................................ 57
12.2. Faire bon usage des balises universelles <span> et <div> ......................................................... 57
12.3. Dimensionner les éléments avec les propriétés CSS width et height ................................... 57
12.4. Définir des marges avec les propriétés CSS margin et padding............................................... 58
12.5. Ajouter une marge intérieure avec la propriété CSS padding ................................................... 59
12.6. Ajouter une marge extérieure avec la propriété CSS margin ..................................................... 60
12.7. Spécifier les propriétés margin et padding ...................................................................................... 60
12.8. Centrer les blocs avec width et margin: auto;............................................................................ 61
12.9. Exercice P3C2............................................................................................................................................. 62
12.10. En résumé ................................................................................................................................................. 62
Chapitre 13 Faire la mise en page avec Flexbox ...................................................................................... 64
13.1. Comprendre la logique : un conteneur, des éléments .................................................................. 64
13.2. Alignez les éléments d'un conteneur avec display: flex; ...................................................... 64
13.3. Donner une direction aux éléments avec la propriété flex-direction................................ 64
13.4. Retourner à la ligne avec la propriété flex-wrap .......................................................................... 65
13.5. Aligner les éléments sur un axe principal et secondaire .............................................................. 66
13.6. Répartir les blocs sur plusieurs lignes avec align-content .................................................... 76
13.7. Exercice P3C3............................................................................................................................................. 78
13.8. En résumé ................................................................................................................................................... 78
Chapitre 14 Créer des formulaires ................................................................................................................. 80
14.1. Créer un formulaire avec la balise en paires <form> </form> ................................................. 80
14.2. Insérer des champs de texte avec la balise HTML <input>........................................................ 80
14.3. Utiliser <input> pour des formats de saisie particuliers ............................................................ 82
14.4. Laisser le visiteur choisir une option.................................................................................................. 84
14.5. En résumé ................................................................................................................................................... 88
PARTIE III : RENDRE UNE PAGE WEB DYNAMIQUE AVEC JAVASCRIPT ............................. 89
Introduction ............................................................................................................................................................. 89
Chapitre 15 Comment intégrer un script dans vos pages XHTML .................................................. 89
15.1 Position du code JavaScript dans une page XHTML ...................................................................... 89
15.2. Les commentaires en JavaScript ......................................................................................................... 91
15.3. La balise <noscript> .............................................................................................................................. 91
15.4. Exercice P3C1 : Création d'un JavaScript externe ........................................................................ 91

iii
 15.5. En résumé ................................................................................................................................................... 92
Chapitre 16 Le modèle d'objet de document ou DOM ........................................................................... 93
(Document Object Model en Anglais) ............................................................................................................ 93
16.1. Le DOM, qu’est-ce que c’est ? ............................................................................................................... 93
16.2. Accès aux valeurs à l'aide de la notation par points (.) ou Dot Notation en Anglais ......... 94
16.3. L'objet document ....................................................................................................................................... 95
16.4. La collection de formulaires (<form>) ................................................................................................. 96
16.5. Éléments de formulaire ........................................................................................................................... 97
16.6. Exercice P3C2 : Collecte de données de formulaire ....................................................................... 98
16.7. Collection d'images ................................................................................................................................. 100
16.8. Exercice P3C2 : Un survol d'image simple...................................................................................... 100
16.9. Différents types d'objets ........................................................................................................................ 102
16.10. En résumé ............................................................................................................................................... 102
Chapitre 17 Commencer à programmer avec JavaScript .................................................................. 103
17.1. Les Variables JavaScript ...................................................................................................................... 103
17.2. Les opérateurs JavaScript .................................................................................................................... 104
17.3. Les fonctions JavaScript ....................................................................................................................... 106
17.4. Les expressions conditionnelles ......................................................................................................... 107
17.5. Les boucles ................................................................................................................................................ 110
17.6. Les événements ........................................................................................................................................ 112
17.7. Les objets intégrés .................................................................................................................................. 113
17.7.1. L’objet string ........................................................................................................................................... 113
Exercice P3C3 : Utilisation de l'objet string ........................................................................................... 114
17.7.2. L’objet date ................................................................................................................................................ 115
17.7.3. L’objet math ................................................................................................................................................ 117
17.7.4. L’objet array (tableau) .............................................................................................................................. 118
17.7.5. L’objet window (fenêtre) ............................................................................................................................ 119
17.8. Écrire du JavaScript .............................................................................................................................. 120
17.8.1. Un mot sur les types de données ................................................................................................................. 121
17.8.2. Mots clés ...................................................................................................................................................... 122
17.9. En résumé ................................................................................................................................................. 122
17.10. Exercices.................................................................................................................................................. 122
Chapitre 18 Travailler avec JavaScript ...................................................................................................... 124
18.1. Conseils pratiques pour écrire des scripts ..................................................................................... 124
18.1.1. Quelqu'un a-t-il déjà écrit ce script ? ........................................................................................................... 124
18.1.2. Fonctions réutilisables.................................................................................................................................. 124
18.1.3. Utilisez des fichiers JavaScript externes ....................................................................................................... 124
18.1.4. Placez les scripts dans un dossier de scripts ................................................................................................ 125
18.2. Validation du formulaire ....................................................................................................................... 125

iv
 18.2.1. Quand valider ............................................................................................................................................... 125
18.2.2. Ce que vous pouvez vérifier ......................................................................................................................... 125
18.2.3. Comment vérifier un formulaire .................................................................................................................. 126
18.3. La méthode replace() ......................................................................................................................... 133
Fiche résumée de ce cours ............................................................................................... 135

AIDE MEMOIRE
Liste des balises HTML :
https://course.oc-static.com/courses/1603881/Glossaire+des+balises+HTML.pdf
Liste des propriétés CSS :
https://course.oc-static.com/courses/1603881/Glossaire+des+propri%C3%A9t%C3%A9s+CSS.pdf
Spécificité de toutes les balises HTML :
https://developer.mozilla.org/fr/docs/Web/HTML
Spécificités de toutes les propriétés CSS :
https://developer.mozilla.org/fr/docs/Web/CSS

v
 Chapitre 1 Historique

1.1. Introduction
À ses débuts, le Web n’était guère plus qu’un amas de documents de recherche, reliés les uns aux autres
par du code HTML servant à les mettre en forme et à les structurer simplement. Cependant, quand sa
popularité s’est accrue, il a été utilisé par les développeurs à des fins de présentation. Au lieu de se servir
des éléments de titre pour les titres des pages, ils ont voulu recourir à des combinaisons de balises de police
et de style pour créer différentes sortes d’effets visuels. Les tableaux, d’abord employés pour l’affichage des
données, sont rapidement devenus des outils de mise en page tandis que les instructions blockquote
(L'élément HTML <blockquote> (qui signifie bloc de citation) indique que le texte contenu dans l'élément est
une citation longue.) ont servi à insérer des espaces blancs au lieu de signaler la présence de citations. Très
vite, le Web a perdu tout son sens et s’est transformé en un véritable mélange de balises de polices et de
tableaux. Les concepteurs web ont même forgé une expression pour désigner ce type de balisage : la "soupe
à balises" cf. figure ci-après :
Figure :
Le balisage de l’article à la une
d’abcnews.com, le 14 août 2000,
utilise des tableaux pour la mise
en forme et du texte en gras et
très grand pour les titres. Le code
manque de structure et est
difficile à comprendre.

À force d’être orienté sur la présentation, le code des pages web est devenu de plus en plus difficile à
comprendre et à gérer.
Au lieu d’être considéré comme un simple langage de balisage, le HTML a acquis la réputation d’un langage
compliqué, déroutant et très facilement sujet aux erreurs. De nombreuses personnes craignaient de toucher
au code. Cette tendance a favorisé une dépendance excessive vis-à-vis des éditeurs visuels et contribué à
forger une génération de concepteurs peu aguerris aux techniques de programmation.
À l’orée du nouveau millénaire, le secteur de la conception web se trouvait dans un état de délabrement
avancé. Il fallait faire quelque chose.
C’est dans cet état de marasme complet que sont arrivées les feuilles de styles CSS. Elles offraient aux
utilisateurs la possibilité de contrôler l’apparence des pages avec des feuilles de styles externes et donc de
séparer le contenu de la présentation. Des changements portant sur tout le site pouvaient ainsi s’effectuer à
un seul et unique endroit et se trouver propagés dans tout le système. Les balises de présentation comme
les balises de police furent abandonnées et la mise en page fut contrôlée avec des CSS et non des tableaux.
Le balisage put alors retrouver sa simplicité d’origine et l’on commença à retrouver de l’intérêt au code sous-
jacent.
La signification des éléments a pu naturellement retrouver sa place au sein des documents. Les styles par
défaut des navigateurs pouvant être redéfinis, il était possible de baliser un élément afin d’indiquer qu’il
s’agissait d’un titre, sans nécessairement avoir à le rendre gros, gras et très moche. On put créer des listes
sans se retrouver avec des puces et des balises de citation et être instantanément punis par leur habituel
effet de mise en forme. Les développeurs commencèrent alors à utiliser les éléments HTML pour ce qu’ils
signifiaient et non pour l’apparence qu’ils permettaient d’obtenir.

1.2. Les différentes versions du HTML et des CSS

Les CSS existent en plusieurs versions (ou niveaux). Il était donc important de savoir laquelle utiliser. La
spécification CSS 1, devenue une recommandation à la fin de 1996, incluait des propriétés très
Page 1 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
rudimentaires comme les polices, les couleurs et les marges. La spécification CSS 2, sortie en 1998,
intégrait des concepts avancés tels le flottement et le positionnement, ainsi que de nouveaux sélecteurs
comme les sélecteurs d’enfants, les sélecteurs de frères adjacents et les sélecteurs universels.
Le temps s’écoule à son propre rythme dans l’univers du W3C (World Wide Web Consortium), si bien qu’en
dépit du fait que le travail sur la spécification CSS 3 a débuté avant l’an 2000 sa promulgation officielle
n’était pas encore à l’ordre du jour 10 ans plus tard. Pour accélérer le développement et l’implémentation
dans les navigateurs, la spécification CSS 3 a donc été décomposée en modules qui peuvent être rendus
officiels et implémentés indépendamment. En novembre 2014, cinq modules du CSS3 avaient été
officiellement publiés par le W3C. Et jusqu’à ce jour cela ne cesse d’évoluer pour le plus grand bonheur des
développeurs web.
Le HTML 4.01 est passé au stade de recommandation à la fin de 1999. C’est la version que la plupart des
personnes utilisaient à cette époque. En janvier 2000, le W3C a créé une version XML du HTML 4.01 et l’a
nommée XHTML 1.0. La principale différence entre le XHTML 1.0 et le HTML 4.01 tient au fait que le
premier respecte les conventions de programmation XML. Contrairement au HTML standard, tous les
attributs XHTML doivent contenir des guillemets et tous les éléments doivent être fermés. Les problèmes nés
de la frustration que les développeurs avaient accumulée avec le développement lent et archaïque du
XHTML 2 ont amené une poignée d’entre eux à esquisser leur propre spécification à partir du HTML 5 qui
était lui aussi en cours de développement. Ceci est à la base du fait que HTML 5 était devenu un projet
officiel du W3C et que le développement du XHTML 2 qui était en cours a été suspendu.
Le but du HTML 5 est de produire un langage de balisage moderne qui corresponde mieux au type
d’informations publiées sur le Web. Il introduit donc de nouveaux éléments structurels comme header, nav,
article, sections et footer. Il contient également un ensemble de nouveaux éléments de formulaire qui
devraient faciliter considérablement le développement d’applications web. Sa première version a été finalisée
le 28 octobre 2014. Le W3C clôt les ajouts de fonctionnalités le 22 mai 2011, annonçant une finalisation de
la spécification en 2014, et encourage les développeurs Web à utiliser HTML5 dès ce moment. Fin 2016, la
version 5.1 est officiellement publiée et présente plusieurs nouveautés qui doivent faciliter le travail des
développeurs d'applications Web.
Tout au long de ce cours, chapitre après chapitre, vous allez construire, brique par brique, en codant avec
XHTML, CSS et JAVASCRIPT, le site professionnel d’un personnage fictif : Robbie Lens, photographe
freelance. Cette dernière a besoin d’un site web pour :

 se présenter ;
 mettre son travail en valeur grâce à un portfolio ;
 être contactée plus simplement, en ligne.
Chaque connaissance acquise dans un chapitre permettra d'ajouter une nouvelle pierre à l'édifice : vous
pourrez ajouter des fonctionnalités et améliorer le style du portfolio de Robbie Lens progressivement.

1.3 Les outils nécessaires pour ce cours

Il est question dans ce cours, de vous donner une véritable expérience pratique des concepts que vous
aborderez dans chaque chapitre. L'idée est d'apprendre en faisant !
Visual Studio Code
Pour coder et réaliser les exercices du cours, vous aurez besoin :
 d’un éditeur de code (Visual Studio Code) pour écrire les fichiers de code,
 mais aussi d’un navigateur web à jour comme
o Chrome (https://www.google.com/intl/fr_fr/chrome/)
o Safari (https://www.apple.com/fr/safari/),
o Firefox (https://www.mozilla.org/fr/firefox/new/),
o Opera ou encore Edge (https://www.microsoft.com/fr-fr/edge)
pour voir en direct le résultat de ce que vous codez.
Rendez-vous ici https://code.visualstudio.com/download pour installer Visual Studio Code. C'est gratuit.

Page 2 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
N'hésitez pas à consulter le site de Mozilla Developer pour connaître les spécificités de toutes les balises
HTML à l’adresse https://developer.mozilla.org/fr/docs/Web/HTML et propriétés CSS à l’adresse
https://developer.mozilla.org/fr/docs/Web/CSS (grâce au glossaire situé à gauche de la page).

Page 3 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
PARTIE I : MAITRISE DES BASES DU XHTML
Chapitre 2 Différence entre HTML et CSS
Le HTML et le CSS sont à la base du fonctionnement de tous les sites web. Ils sont utilisés partout dans le
monde. On les appelle des langages web. Plus précisément, le HTML est appelé langage de balisage et le CSS
langage de description. Ce ne sont pas des langages de programmation comme Python, Java, etc. car ils
permettent seulement de décrire du contenu de façon statique. C’est pourquoi le terme approprié pour eux
c’est langage web.
Lorsqu’on tape une adresse dans un navigateur ou qu’on clique sur un lien hypertexte, le navigateur envoie
une requête au serveur qui abrite le site web en question. Ce dernier va analyser et traiter la requête puis
renvoyer le résultat sous forme HTML à la page web. Le navigateur, lui, va analyser le code HTML pour
l’afficher de façon lisible à l’utilisateur.

Traitement et affichage d’une page web

Lorsqu’on fait in clic droit sur une page on peut voir le code source de la page à travers le menu du même
nom. On verra que c’est du code HTML et CSS.
La question qu’on peut se poser c’est celle de savoir pourquoi avoir créé 2 langages et pas 1 seul ?
En fait ces deux langages sont complémentaires.

2.1. Le HTML
Le HTML (HyperText Markup Language) a fait son apparition dès 1991 lors du lancement du Web. Son rôle
est de gérer et d’organiser le contenu. C’est-à-dire de décrire, de structurer le contenu de la page. On
l’utilise pour ajouter à la page du texte, des liens ou des images… En “français”, cela consiste à dire par
exemple : “Ceci est mon titre”, “Ceci est mon menu”, “Voici une image à afficher”, etc. Un site web 100%
HTML n’est pas agréable à voir. Et c’est là que le CSS entre en jeu.

2.2. Le CSS
Le CSS (Cascading Style Sheets, aussi appelées feuilles de style) a pour rôle de gérer l'apparence de la page
web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le
HTML en 1996, et il est toujours au fondement même du style du Web de nos jours.

On peut facilement changer ces propriétés en faisant un clic droit sur un élément de la page et en
sélectionnant l’option inspecter. On a le code HTML d’un côté (onglet Éléments) et le code CSS de l’autre
(onglet Styles). Ces changements n’affectent en rien le code original de la page et ne sont visibles que par
vous. La coexistence de ces deux langages est faite pour faciliter le développement des sites web.

Page 4 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Page web sans CSS
Si vous avez envie de voir ce que ça donne sur d’autres sites que vous utilisez au quotidien, l'extension
“Web Developer” https://chrispederick.com/work/web-developer/ vous permet de désactiver très
simplement le CSS sur des pages web.

Page web avec CSS

Dans sa forme la plus complexe, le CSS ne sert pas seulement à mettre en forme une page web mais permet
d’améliorer les performances de votre site, de créer des effets avancés pour vos images (ou simplement les
centrer) ou même de créer des animations 3D.
L’utilisation du CSS peut paraître simple voire simpliste si on ne se sert que de ses « fonctionnalités » de
base mais peut devenir très complexe si on connait tous ses secrets ! Le CSS peut vous amener à créer des
designs innovants, impressionnants et performants de sites web.
Comme nous venons de le voir, Le CSS a besoin d'une base en HTML pour fonctionner. C'est pour cela que
nous allons d'abord apprendre à coder en HTML avant de nous occuper du style en CSS. Vos premières
pages ne seront donc pas des plus esthétiques au début, mais c'est normal et cela ne durera pas longtemps.

2.3. Rôle du navigateur

Les rôles du HTML et du CSS se complètent. Mais ensuite, c’est le navigateur web qui fait le reste du travail
: lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit “Les titres sont en
rouge”, alors le navigateur affichera les titres en rouge.
Le rôle du navigateur est donc essentiel !
On ne dirait pas comme ça, mais un navigateur est un programme extrêmement complexe. En effet,
comprendre le code HTML et CSS n'est pas une mince affaire.
Les différents navigateurs n'affichent pas toujours le même site exactement de la même façon ! Il faudra
vous y faire, et prendre l'habitude de vérifier régulièrement que votre site fonctionne correctement sur les
navigateurs les plus utilisés.

Page 5 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Aujourd'hui, vous apprenez à développer dans un environnement quasi magique : tous les navigateurs que
vous utilisez embarquent des outils de développement particulièrement sophistiqués, notamment l’outil
d’inspection d’une page web.
En effet, l'inspection d'une page web permet très simplement d'accéder au HTML et au CSS, et de faire des
changements en temps réel. Pour cela, il vous suffit de faire un clic droit sur n'importe quelle page, et de
sélectionner l'inspecteur.
La manière d'accéder à l'inspecteur peut varier selon le navigateur que vous utilisez. Vous trouverez une
liste des différentes manières d'y arriver sur cette page
https://developer.mozilla.org/fr/docs/Learn/Common_questions/What_are_browser_developer_tools .

2.4. En résumé
 Le HTML permet de mettre en place la structure d'une page web.
 Le CSS permet d'ajouter du style à une page web.
 Les deux langages se complètent avec un rôle bien défini pour chacun.
 Le navigateur est un logiciel qui permet de lire les langages du Web : HTML et CSS. Il permet
également d’exécuter les scripts JAVASCRIPT.
 Tous les navigateurs embarquent des outils de développement, dont l'outil d'inspection qui permet
d'accéder au HTML et au CSS d'une page.

Page 6 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 3 Créez votre première page web en XHTML
Pour créer une page web en HTML, il suffit de créer un fichier ayant l'extension .html. Ce fichier s'ouvre
dans le navigateur web simplement en faisant un double-clic dessus.
Pour cela nous allons :
1. Ouvrir notre éditeur Visual Studio Code et cliquer sur Fichier puis Nouveau fichier.
2. Ecrire deux lignes dans ce nouveau fichier. Comme par exemple :
Les oiseaux du monde
Il existe plus de 990 espèces d’oiseaux répertoriées dans toute l’Europe.
3. Enregistrer ce fichier dans le dossier qui contiendra tous les fichiers de notre site. Appelons-le
index.html (c’est le nom qui est généralement donné aux pages d’accueil des sites web).
En double-cliquant sur ce fichier dans l’explorateur de fichiers, il s’ouvre automatiquement dans le
navigateur par défaut de l’ordinateur. Mais on se rend compte que les deux lignes sont collées. Pour cela il
faudrait donner des instructions au navigateur comme par exemple « aller à la ligne ». En HTML ces
instructions portent le nom de balises.

3.1. Les balises HTML

Le langage HTML utilise ce qu'on appelle des balises. On les écrit entre chevrons < et > :

Structure générale d’une balise HTML

3.1.1 Rôle des balises
Les balises indiquent la nature du texte qu'elles encadrent. Elles permettent au navigateur de comprendre
ce qu'il faut afficher à l'écran pour les visiteurs d'un site web.
Si elles pouvaient parler, elles diraient :
<title> </title> : “Ceci est le titre de la page”,
<img>: “Ceci est une image”,
<p> </p>: “Ceci est un paragraphe de texte”, etc.
Pourquoi certaines balises sont doublées et prennent un / dans leur syntaxe ?
On distingue deux types de balises :
1. Les balises en paires (une balise ouvrante et une balise fermante)
2. Et les balises orphelines (une seule balise).
3.1.2. Les balises en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
Exemple de la balise title qui correspond au titre de la page, voici ce que ça nous donne :
<title>Ceci est le titre de ma page</title>
On a donc :
1. Une balise ouvrante : <title> ;
2. Le contenu de la balise ;
3. Et une balise fermante : </title>.
Cet élément délimite ce qui sera traduit par un titre. Pour l'ordinateur, tout ce qui n'est pas entre ces deux
balises n'est pas un titre.
3.1.3. Les balises orphelines
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une
image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur

Page 7 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
“Insère une image ici”. Il n'y a donc pas besoin de faire une balise ouvrante et une fermante, d'où
l'appellation "balise orpheline".
Une balise orpheline s'écrit comme ceci : <nom_de_la_balise_orpheline>
Jusqu'à il y,a peu, on mettait un / à la fin des balises orphelines pour dire qu'elles étaient autofermantes,
comme ceci : <img />.
Cette syntaxe génère maintenant un avertissement sous W3C (Worldwide Web Consortium)
https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium. Il n'est donc pas recommandé de mettre un
slash à la fin d'une balise orpheline. Si vous vouliez le faire néanmoins, n’oubliez pas de mettre des
guillemets aux valeurs de vos attributs. Par exemple :<img src=”…” alt=”…” />

3.2. Les attributs des balises

Les attributs permettent de paramétrer les balises HTML. Ce sont en quelque sorte les options des balises.
Ils viennent les compléter pour donner des informations supplémentaires.
Un attribut est situé dans la balise ouvrante d'une balise en paires, ou directement dans une balise
orpheline, comme c'est le cas ci-dessous avec la balise <img> :

3.3. Structure de base d'une page XHTML

La structure de base d’un document XHTML est la suivante :

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">

<head>
<title>Toute page web doit avoir un titre</title>
</head>

<body>
...Contenu de la page web ici...
</body>
</html>

3.3.1. La syntaxe XHTML

La syntaxe XHTML est très similaire à la syntaxe HTML et presque tous les éléments HTML valides sont
également valides en XHTML. Mais lorsque vous écrivez un document XHTML, vous devez faire un peu plus
attention pour rendre votre document HTML conforme à XHTML.
Voici les points importants à retenir lors de l'écriture d'un nouveau document XHTML ou de la conversion
d'un document HTML existant en document XHTML -
 Écrivez une déclaration DOCTYPE au début du document XHTML.
 Écrivez toutes les balises et tous les attributs XHTML en minuscules uniquement.
 Fermez correctement toutes les balises XHTML.
 Imbriquer toutes les balises correctement.
 Citez toutes les valeurs d'attribut.
 Evitez la minimisation des attributs.
 Remplacez l'attribut name par l'attribut id.

Page 8 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  N’utilisez pas l'attribut de langue de la balise de script.
3.3.2. Explication détaillée des règles XHTML ci-dessus :
A. Déclaration DOCTYPE
Tous les documents XHTML doivent avoir une déclaration DOCTYPE au début. Il existe trois types de
déclarations DOCTYPE, que nous verrons en détail dans ce chapitre. Voici un exemple d'utilisation de
DOCTYPE :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
B. Sensibilité à la casse
XHTML est un langage de balisage sensible à la casse. Toutes les balises et tous les attributs XHTML
doivent être écrits uniquement en minuscules.
<!—Ceci n’est pas valide en XHTML -->
<A Href="/xhtml/xhtml_cours.html">Cours XHTML</A>

<!—Façon correcte de l’écrire en XHTML -->

<a href="/xhtml/xhtml_cours.html">Cours XHTML</a>
Dans l'exemple, Href et la balise d'ancrage A ne sont pas en minuscules, elles sont donc incorrectes.
C. Fermeture des balises
Chaque balise XHTML doit avoir une balise de fermeture équivalente, même les éléments vides doivent
également avoir des balises de fermeture. Voici un exemple montrant des façons valides et non valides
d'utiliser des balises :
<!—Ceci est invalide en XHTML -->
<p>Ce paragraphe ne respecte pas la syntaxe du XHTML.

<!—Ceci est également invalids en XHTML -->

<img src="/images/xhtml.gif" >

La syntaxe suivante montre la manière correcte d'écrire les balises ci-dessus en XHTML. La différence est
que, ici, nous avons correctement fermé les deux balises.
<!-- Ceci est valide en XHTML -->
<p>Ce paragraphe respecte la syntaxe XHTML.</p>

<!-- Ceci aussi est valide en XHTML -->

<img src="/images/xhtml.gif" />

D. Valeurs d'attribut
Toutes les valeurs des attributs XHTML doivent être entre guillemets. Sinon, votre document XHTML est
considéré comme un document non valide. Voici un exemple montrant la syntaxe :
<!-- Ceci est invalide en XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />

<!-- Ceci est correcte en XHTML -->

<img src="/images/xhtml.gif" width="250" height="50" />
E. Minimisation des attributs
XHTML n'autorise pas la minimisation des attributs. Cela signifie que vous devez indiquer explicitement
l'attribut et sa valeur. L'exemple suivant montre la différence
<!-- Ceci est invalide en XHTML -->
<option selected>
<!--Bonne façon de l’écrire en XHTML -->
Page 9 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
<option selected="selected">
Voici une liste des attributs minimisés en HTML et la façon dont vous devez les écrire en XHTML

HTML Style XHTML Style

compact compact="compact"

checked checked="checked"

declare declare="declare"

readonly readonly="readonly"

disabled disabled="disabled"

selected selected="selected"

defer defer="defer"

ismap ismap="ismap"

nohref nohref="nohref"

noshade noshade="noshade"

nowrap nowrap="nowrap"

multiple multiple="multiple"

noresize noresize="noresize"

F. L'attribut id
L'attribut id remplace l'attribut name. Au lieu d'utiliser name = "name", XHTML préfère utiliser id = "id".
L'exemple suivant montre comment le faire :
<!-- Ceci est invalide en XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />

<!-- Bonne façon de l’écrire en XHTML -->

<img src="/images/xhtml.gif" id="xhtml_logo" />

G. L'attribut de langue
L'attribut de langue de la balise de script est obsolète. L'exemple suivant montre cette différence :
<!-- Ceci est invalide en XHTML -->

<script language="JavaScript" type="text/JavaScript">

document.write("Bonjour XHTML!");
</script>

<!-- Bonne façon de l’écrire en XHTML -->

<script type="text/JavaScript">
document.write("Bonjour XHTML!");
</script>

H. Balises imbriquées
Page 10 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Vous devez imbriquer correctement toutes les balises XHTML. Sinon, votre document est considéré comme
un document XHTML incorrect. L'exemple suivant montre la syntaxe :
<!-- Ceci est invalide en XHTML -->
<b><i>Ce texte est en gras et en italique</b></i>

<!—Meilleure façon de l’écrire en XHTML -->

<b><i> Ce texte est en gras et en italique </i></b>

I. Interdictions d'élément
Les éléments suivants ne peuvent contenir aucun autre élément à l'intérieur. Cette interdiction s'applique à
toutes les profondeurs de nidification. Cela signifie qu'il comprend tous les éléments descendants.

Element Prohibition

<a> Must not contain other <a> elements.

<pre> Must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup> elements.

<button> Must not contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe>
or <isindex> elements.

<label> Must not contain other <label> elements.

<form> Must not contain other <form> elements.

Description de toutes les balises de la structure de base d’une page XHTML.

 La première ligne <?xml version="1.0" encoding="UTF-8"?> permet d’indiquer la version de XML

associé au fichier XHTML. L’attribut encoding indique l’encodage utilisé dans le fichier .html : cela
détermine comment les caractères spéciaux s'affichent (accents, idéogrammes chinois et japonais,
etc.).
Si les accents s'affichent mal par la suite, c'est qu'il y a un problème avec l'encodage. Vérifiez que la balise
meta indique bien UTF-8, et que votre fichier est enregistré en UTF-8.
 La première ligne <!DOCTYPE …> est une balise orpheline indispensable : elle indique qu'il s'agit
d'une page HTML.
 La balise en paire <html> </html> englobe tout le contenu de la page web. L’attribut langue
contenu dans cette balise permet de préciser la langue par défaut du site web :
o xml:lang=”fr” lang=”fr” pour le français ;
o xml:lang=”en” lang=”en” pour l’anglais ;
o xml:lang=”es” lang=”es” pour l’espagnol…
 A l'intérieur de la balise html, il y a les balises en paire <head> </head> et <body> </body>.
La liste complète des codes de langue se trouve à cette adresse :
https://www.w3schools.com/tags/ref_language_codes.asp .
 La balise en paire <head> </head> contient deux balises qui donnent des informations au
navigateur : l’encodage et le titre de la page.
 La balise en paire <title> </title> indique au navigateur le titre de la page web. Toute page doit
avoir un titre qui décrit ce qu'elle contient, il s'affichera dans l'onglet du navigateur, et apparaîtra
dans les résultats de recherche, comme sur Google. C’est pourquoi bien choisir son titre est
important !
 La balise en paire <body> </body> contient tout ce qui sera affiché à l'écran sur la page web.
Pour écrire votre première vraie page web en XHTML, ouvrez votre fichier index.html sous Visual Studio
Code et remplacez son contenu avec le code ci-dessous.
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Page 11 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">

<head>
<title>Titre de ma page</title>
</head>

<body>
Les oiseaux du monde
Il existe plus de 990 espèces d’oiseaux répertoriées dans toute l’Europe.
</body>
</html>

Rappel : L’attribut lang permet de préciser la langue du site web que l'on va créer : lang=”fr” signifie que la
langue par défaut du site est le français. Ce n’est pas obligatoire (la balise <html> seule n’empêche pas le
code de fonctionner), c’est simplement que si vous codez un site web en langue française, cela vous évite de
potentiels soucis d’affichage. En outre, cela permet de mettre la langue par défaut de votre site web sur le
français.
L’ordre des balises est important dans cette structure de base. En effet les balises s'ouvrent puis se ferment,
et elles s'emboitent les unes dans les autres dans un ordre précis.
La syntaxe <html><body></html></body> est incorrecte : les balises s'entremêlent.
La syntaxe <html><body></body></html> est correcte : une balise qui est ouverte à l'intérieur d'une
autre balise doit aussi être fermée à l'intérieur de celle-ci.
On a ainsi des éléments dits "parents", qui vont contenir d'autres éléments dits "enfants".
Cela fonctionne un peu comme des poupées russes :
Avant de terminer ce chapitre, abordons une bonne pratique que tout développeur devrait suivre :
commenter son code.

3.4. Les commentaires en XHTML

Un commentaire en XHTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il n'est pas lu
par l'ordinateur, cela ne change rien à l'affichage de la page.
Le commentaire sert au développeur et aux personnes qui liront le code source de la page. Vous pouvez
utiliser les commentaires pour laisser des indications sur le fonctionnement de votre page. Cela vous
permettra de vous rappeler comment fonctionne votre page si vous revenez sur votre code source après un
long moment d'absence.
Un commentaire est une balise HTML avec une forme bien spéciale :
<!-- Ceci est un commentaire -->
Vous pouvez le mettre où vous voulez au sein de votre code source.
Attention, tout le monde peut voir le code HTML source de votre page, une fois celle-ci mise en ligne sur le
Web, avec l’outil d’inspection. Vos commentaires seront donc également visibles en faisant “Afficher le code
source de la page”. Par conséquent, ne mettez pas d'informations sensibles comme des mots de passe dans
les commentaires… et soignez votre code source, car je pourrai venir vérifier si vous avez bien suivi le cours
à la lettre !
D'ailleurs, dans la plupart des éditeurs de code, il existe un raccourci pour commenter une ligne de code
très rapidement.
Sur Visual Studio Code, pour transformer une ligne (ou même plusieurs lignes) en commentaire :
1. Sélectionnez la ligne (ou les lignes) en question
2. Utilisez le raccourci clavier avec la touche CTRL + / (ou ⌘ command + / sur mac).

3.5. Exercice P1C3

Pour cet exercice, vous allez devoir partir de votre fichier index.html que vous venez de créer pour :
 Y insérer la structure de base XHTML ;
 Changer le contenu de la balise <title> </title> pour avoir “Accueil – Robbie Lens Photographie” ;

Page 12 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  Écrire un commentaire dans <body> </body>.

3.6. En résumé

 Pour créer une page web, on crée un fichier ayant l’extension .html, qui pourra être ouvert dans le
navigateur web simplement en faisant un double-clic dessus.
 Chaque fichier HTML est constitué de balises.
 Les balises peuvent avoir plusieurs formes :
o <balise> </balise> : balises en paires, elles s'ouvrent et se ferment pour délimiter le contenu
(début et fin d'un titre, par exemple) ;
o <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles permettent
d'insérer un élément à un endroit précis (par exemple une image).
 Les balises sont parfois accompagnées d'attributs pour donner des indications supplémentaires, ou
paramétrer un élément (exemple : <img src="photo.jpg">).
 Une page web est constituée de deux sections principales : l'en-tête <head> </head> dont le contenu
n'apparaît pas dans l'affichage de la page et le corps <body> </body> qui, lui, apparaît.

Page 13 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 4 Organisation du texte de la page web
Le texte affiché sur une page web est compris entre les balises <body> </body>.
C'est donc dans <body> </body> que nous allons écrire du texte à afficher en utilisant des balises XHTML
pour le structurer grâce à des paragraphes, des titres, des listes ou encore mettre en avant du texte
important.

4.1. Créer des paragraphes avec les balises <p> </p>

Les balises <p> </p> permettent de délimiter des paragraphes en XHTML :

…
<head>
<title>Ma page</title>
</head>
<body>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
</body>
…
Il existe une autre balise pour revenir à la ligne sans créer un nouveau paragraphe.

4.2. Revenir à la ligne avec la balise orpheline <br />

Pour revenir à la ligne, on utilise la balise orpheline <br /> (pour break), on n'a donc pas besoin de la fermer
:

…
<head>
<title>Ma page</title>
</head>
<body>
<p>Ceci est le contenu de mon premier paragraphe, <br>dont le contenu est
particulièrement long.</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
</body>
…
Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs sauts de lignes,
mais on considère que c'est une mauvaise pratique qui rend le code délicat à maintenir. Pour décaler un
texte avec plus de précision, on utilisera le CSS, ce langage qui vient compléter le XHTML pour lui ajouter
du style, et dont nous parlerons un peu plus loin.
Maintenant que vous savez créer des paragraphes et sauter des lignes, voyons comment créer des titres.

4.3. Créer des titres avec les balises <h1>, <h2>, <h3>, …

Les balises de titres vont de <h1> </h1> jusqu'à <h6> </h6>, ce qui permet de hiérarchiser et structurer le
texte dans différentes sections, du niveau le plus grand, au niveau le plus petit.
Il faut toujours structurer sa page en commençant par un titre de niveau 1 <h1>, puis structurer l'intérieur
avec des titres de niveau 2 <h2>, puis, si besoin de structurer l'intérieur, utiliser des titres de niveau 3, etc.
Il ne devrait pas y avoir de sous-titre sans titre principal !
Attention !!! Ne confondez pas les balises <h1> et <title> :
 La balise <h1> sert à créer un titre de niveau 1 qui sera affiché sur la page web.
 La balise <title> n'affiche rien sur la page web, elle affiche le titre de la page dans l'onglet du
navigateur.
Ajoutons donc des balises de titre dans le code :

…
<head>
Page 14 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <title>Ma page</title>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
<h2>Voilà mon sous-titre 1</h2>
<h3>Une sous-partie</h3>
<p>Un paragraphe</p>
<h3>Une autre sous-partie</h3>
<p>Tiens encore un paragraphe</p>
<h2>Voilà mon sous-titre 2</h2>
…
</body>
…
Votre navigateur affiche par défaut des tailles différentes de texte en fonction des titres, mais si vous voulez
modifier la taille du texte, sachez que nous apprendrons à faire cela en CSS un peu plus tard.

4.4. Créer des listes avec les balises <li> et <ul> ou <ol>
Pour créer une liste d’éléments (non ordonnés c’est-à-dire une liste à puce ou bien numérotés) on procède
en deux étapes :
Étape 1 : baliser les éléments de la liste avec <li> </li>
Pour baliser les éléments qu'on veut mettre dans une liste, on utilise <li> </li> (pour "listed item" ou
"élément de la liste" en français). Puis on les insère tous à l'intérieur d'une autre balise pour indiquer s'il
s'agit d'une liste à puces ou d'une liste numérotée.
Étape 2 : insérer la liste dans des balises <ul> </ul> ou <ol> </ol>
Les balises <ul> </ul> (pour "unordered list") permettent d'indiquer qu'on démarre une liste non ordonnée,
c'est-à-dire, ce que l'on appelle en français une liste à puces.
Les balises <ol> </ol> (pour "ordered list") permettent d'indiquer qu'on démarre une liste ordonnée,
autrement dit en français une liste numérotée.
Exemple :

<h1>Les fruits rouges</h1>

<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Groseilles</li>
</ul>

<h1>Ma journée</h1>
<ol>
<li>Je me lève.</li>
<li>Je mange et je bois de l'eau.</li>
<li>Je retourne me coucher.</li>
</ol>
4.5. Mettre en valeur du texte important
Dans le texte qui s'affiche sur une page web, on aimerait parfois faire ressortir certains mots en particulier.
C’est-à-dire les mettre en évidence sur la page.
La balise la plus utilisée pour cela est <strong> mais XHTML propose différents moyens de mettre en valeur
le texte d’une page :

Balises Traduction par le navigateur

Page 15 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
<mark> </mark> Surligner le texte.

<em> </em> Mettre le texte en italique.

<strong> </strong> Mettre le texte en gras.

Testez avec le code ci-dessous pour voir ce que ça donne :

<p>Bonjour !<br>Ceci est mon tout premier test pour mettre des mots en avant, alors
<em>soyez indulgent</em> s'il vous plaît, j'apprends petit à petit comment ça marche.</p>
<p>Bonjour !<br>Ceci est mon deuxième test pour mettre des mots en avant, alors
<strong>soyez indulgent</strong> s'il vous plaît, j'apprends petit à petit comment ça
marche.</p>
<p>Bonjour !<br>Ceci est mon troisième test pour mettre des mots en avant, alors <mark>soyez
indulgent</mark> s'il vous plaît, j'apprends petit à petit comment ça marche.</p>

Il peut arriver que la mise en forme proposer par le navigateur ne nous plaise pas. Car en fait, c'est le
navigateur qui choisit comment afficher les mots qu'on lui indique comme étant plus ou moins importants
(en gras, en italique, …).
Les balises <em> et <strong> ne signifient pas respectivement “mettre en italique" ou "mettre en gras” mais
seulement que le texte est “important”. On pourra décider plus tard, en CSS, d'afficher les mots
“importants” d'une autre façon que le gras, si on le souhaite.
Pourquoi faire ressortir du texte important sur un site web ?
Les robots de moteurs de recherche parcourent le Web en lisant le code XHTML de tous les sites. Les mots-
clés “importants”, mais aussi les titres (headings) hiérarchisés auront tendance à avoir plus de valeur à
leurs yeux ; donc si quelqu'un fait une recherche sur ces mots, il a plus de chances de tomber sur votre site
(votre site aura un meilleur référencement). Mais attention tout de même : abuser de ces balises n’aura pas
l’effet escompté sur votre référencement.

Une nuance tout de même : abuser de ces balises n’aura pas l’effet escompté sur votre référencement. Si
quasiment tout le texte est signalé comme étant important, rien en particulier ne va vraiment pouvoir
"ressortir"… Il vaut donc mieux marquer un mot comme important plutôt que tout un texte.

4.6. Exercice P1C4

La photographe Robbie Lens nous a demandé de lui faire un site web pour mettre en avant son travail. Mais
il va lui falloir également une page pour se présenter. Pour l'occasion, nous avons donc ajouté du contenu
dans le fichier index.html et créé une nouvelle page : a-propos.html.
Vous allez :
1. Créer le titre dans la page a-propos.html : « À propos de Robbie Lens » ;
2. Créer le paragraphe associé : « Photographe depuis plus de 5 ans, je réalise des reportages aux photos
dynamiques et pertinentes pour vos projets de communication. Créativité, qualité, et sérénité pour vous
! Je gère tout, depuis la direction artistique, la réalisation du reportage, jusqu’à la livraison de vos
photos retouchées, prêtes à l’emploi. » ;
3. Créer un titre de niveau 2 pour ajouter une section nommée : « Services » ;
4. Créer une liste non ordonnée pour lister les spécialités de Robbie Lens :
o Portrait seul ou à plusieurs

Page 16 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 o Shooting mode
o Retouches sur mesure
o Développement.
À tout moment, vous pouvez faire un double-clic sur vos fichiers .html pour les ouvrir dans votre
navigateur et voir le résultat. Pensez à les enregistrer régulièrement.

4.7. En résumé
 Le XHTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page.
Ces balises donnent des indications comme “Ceci est un paragraphe”, “Ceci est un titre”, etc.
 Les paragraphes sont définis par la balise <p> </p>, et les sauts de ligne par la balise orpheline
<br>.
 Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon l'importance du titre.
 On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.
 Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste
ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque item.

Page 17 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 5 Créer un lien hypertexte en XHTML
On reconnaît facilement un lien hypertexte (ou hyperlien) sur une page web : par défaut, il est en bleu et
souligné dans le navigateur et un curseur en forme de main apparaît lorsqu'on pointe dessus ; mais on peut
modifier ce style en CSS.

5.1. Créer un lien hypertexte avec la balise <a> et l'attribut href

Pour faire un lien hypertexte il faut procéder comme suit :
1. on utilise la balise <a>(pour "anchor") pour indiquer qu'on va rediriger vers un autre endroit,
2. puis, on ajoute l'attribut href suivi de = pour annoncer l'endroit vers lequel on veut rediriger,
3. on indique explicitement entre double-quote (" ") l'endroit vers lequel le lien doit rediriger,
4. enfin, on écrit le texte qui doit s'afficher sur l'hyperlien.
À partir de là, il y a des subtilités selon l'endroit où l'on veut rediriger l'utilisateur.

5.2. Créer un lien hypertexte vers l'URL d'une page disponible sur internet (lien absolu)
Si vous voulez faire un lien vers un autre site existant en ligne, rien de plus simple, il suffit de copier l'URL
du site et le coller entre " "à la suite de l'attribut href, comme ceci :
<a href="https://www.google.fr/?gws_rd=ssl/">Faire une recherche sur Google</a>
Ce type de lien hypertexte s'appelle un lien absolu : il indique une adresse complète.
Nous allons maintenant voir que l'on peut écrire les liens d'une façon un peu différente, ce qui va nous être
utile pour faire des liens entre les pages de notre site.

5.3. Créer un lien hypertexte d'une page à une autre sur le même site (lien relatif)
Pour l’instant nous n’avons pas d’URL disponible car le site n’est pas encore en ligne. On va donc créer des
liens entre nos pages en utilisant leur nom, et en indiquant leur arborescence dans notre dossier en local.
Ce type de lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier HTML.
Cas n°1 : les deux pages sont situées dans un même dossier en local
Si les pages sont dans le même dossier, il suffit d'écrire comme cible du lien hypertexte le nom du fichier
vers lequel on veut amener, par exemple le fichier nommé page2.html.
Si on veut aller de la page 1 à la page 2, voici ce que nous écrirons dans le fichier de page1.html :
<a href="page2.html">Page 2</a>
Si on veut créer un fichier page 3 et le déplacer dans un dossier ‘/contenu’ il faut indiquer le chemin relatif.
Cas n°2 : les deux pages sont situées dans deux dossiers différents en local
Si on veut créer un fichier page 3 et le déplacer dans un autre dossier, par exemple un dossier /contenu, on
va donc indiquer le chemin à suivre pour trouver ce fichier :
<a href="contenu/page3.html">Page 3</a>
Et s'il y a plusieurs sous-dossiers, on écrira ceci :
<a href="contenu/autredossier/page3.html">Page 3</a>
Si le fichier cible est placé dans un dossier qui se trouve “plus haut” dans l'arborescence (dans un dossier
parent), il faut utiliser deux points .. , comme ceci :
<a href="../page3.html">Page 3</a>
5.4. Créer une ancre avec les attributs id et href
Une ancre est un repère que l'on peut mettre dans une page HTML si elle est très longue, cela aide à la
navigation et rend un contenu plus facile à parcourir. Cela permet par exemple aux visiteurs d'un site web
d'aller directement à la partie qui les intéresse.
Ce comportement est typique d'un site web "one page" comme le site https://zyro.com/fr.blog1:site-
one-page-exemple où tout se situe sur la même page.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être
n'importe quelle balise, une balise de titre par exemple. Voyons comment faire :
La première étape consiste à ajouter l'attribut id suivi de = pour donner un nom à l'ancre entre double
quote " " :
<h2 id="mon_ancre">Titre</h2>

Page 18 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
L'attribut id sert à donner un nom “unique” à une balise, pour s'en servir comme repère. Et, croyez-moi,
vous n'avez pas fini d'entendre parler de cet attribut. Ici, on s'en sert pour faire un lien vers une ancre mais,
en CSS, il pourra nous être utile pour repérer une balise précise, vous verrez.
Évitez de créer des id avec des espaces ou des caractères spéciaux ; utilisez simplement, dans la mesure du
possible, des lettres et des chiffres pour que la valeur soit reconnue par tous les navigateurs.
La seconde étape consiste à indiquer où se situe l'ancre. La méthode pour se faire varie selon que :
1. l'ancre est plus bas sur la même page
2. l'ancre est située sur une autre page
Cas n°1 : l'ancre est plus bas sur la même page
Dans ce premier cas, on crée un lien avec l'attribut href (il contient un dièse # suivi du nom de l'ancre) :
<a href="#mon_ancre">Aller vers l'ancre</a>
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres :
<h1>Ma grande page</h1>
<p>
Découvrez nos conseils d'aménagement pour :<br>
<a href="#cuisine">La cuisine</a><br>
<a href="#jardin">Le jardin</a><br>
<a href="#salon">Le salon</a><br>
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="jardin">Le jardin</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="salon">Le salon</h2>
<p>... (beaucoup de texte) ...</p>

Testez pour voir avec le code suivant :

<h1>Ma grande page</h1>

<p>
Découvrez nos conseils d'aménagement pour :<br>
<a href="#cuisine">La cuisine</a><br>
<a href="#jardin">Le jardin</a><br>
<a href="#salon">Le salon</a><br>
</p>
<h2 id="cuisine">La cuisine</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed
ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero
eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
Page 19 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero
eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.</p>
<h2 id="jardin">Le jardin</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2 id="salon">Le salon</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Page 20 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Vous avez peut-être remarqué que l’on a commencé à utiliser du latin pour remplir des zones de texte dans
notre code. C'est normal, pas de panique ! Il s'agit du «lorem ipsum»
https://fr.wikipedia.org/wiki/Lorem_ipsum , un “faux texte” qu'on peut ajouter provisoirement, de manière
à calibrer une mise en page avant la validation d’un texte définitif.
Cas n°2 : l'ancre est située dans une autre page
Dans ce cas-là, on tape le nom de la page cible avant le dièse # et enfin le nom de l'ancre :
<a href="index.html#jardin">Le jardin</a>
Voici une nouvelle page qui contient trois liens, chacun amenant vers une des ancres de la page de
l'exemple précédent :
<h1>Le Mégamix</h1>
<p>
Rendez-vous quelque part sur la page :<br>
<a href="index.html#cuisine">La cuisine</a><br>
<a href="index.html#jardin">Le jardin</a><br>
<a href="index.html#salon">Le salon</a><br>
</p>
Remarque : il est possible de configurer un lien pour qu'il ait un comportement un peu particulier. Par
exemple :
 target="_blank" fait en sorte que lien hypertexte ouvre un nouvel onglet :
 <p>Bonjour. Souhaitez-vous faire une recherche sur <a href="
https://www.google.fr/?gws_rd=ssl/" target="_blank">Google</a> ?</p>
 href="mailto:[email protected]" crée un lien hypertexte qui ouvre la boîte mail avec un
nouveau message vide.
 href="NOMDEFICHIER.EXTENSION" crée un lien hypertexte qui permet de télécharger un fichier que
vous avez placé au préalable dans le même dossier que votre page web.

5.5. Exercice P1C5

Vous allez maintenant pouvoir mettre en pratique ce que vous venez d'apprendre sur les liens.
Exceptionnellement pour cet exercice, la page a-propos.html a été déplacée dans un dossier dossier-demo
afin que vous puissiez tester votre compréhension des liens relatifs.
Pour cet exercice, votre mission est de :
 créer un sous-dossier appelé dossier-demo et y copier le fichier a-propos.html
 créer sur la page d'accueil un lien vers la page «À propos» (située dans le dossier dossier-demo) ;

Page 21 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  créer sur la page a-propos.html (située dans le dossier dossier-demo) un lien vers la page d'accueil
(sans déplacer les fichiers) ;
 ajouter les liens vers les réseaux sociaux (qui s'ouvrent dans un nouvel onglet) sur la page d'accueil
et la page «À propos» :
o pour Twitter, vous redirigerez vers https://twitter.com/
o pour Instagram, le lien pointe vers https://www.instagram.com/.

5.6. En résumé
 Un lien hypertexte (ou hyperlien) permet de changer de page. Par défaut, il est en bleu et souligné
dans le navigateur mais on peut modifier ce style en CSS.
 Pour faire un lien hypertexte vers un site web existant, on utilise la balise <a> avec l'attribut href
pour indiquer l'adresse de la page web cible. Il s'agit d'un lien absolu. Exemple : <a
href="https://youtube.com">.
 Pour faire un lien hypertexte vers une autre page de son site, on utilise la balise <a> avec l'attribut
href pour indiquer le nom du fichier en local. Il s'agit d'un lien relatif. Exemple : <a
href="page2.html">.
 Un lien hypertexte peut aussi permettre d'amener vers un endroit précis d'une page. Il faut créer une
ancre avec l'attribut id pour “marquer” cet endroit dans la page, puis faire un lien vers l'ancre
comme ceci : <a href="#ancre">.

Page 22 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 6 Insérer des images

6.1. Insérer une image avec la balise orpheline <img>

La balise qui permet d'insérer une image est une balise orpheline : <img>
Pour fonctionner correctement, la balise <img> doit être accompagnée de deux attributs :
1. src : cet attribut permet d'indiquer la source de l'image.
2. alt : cet attribut permet de donner à l'image une description alternative.
6.1.1. Ajouter l'attribut src pour indiquer la source de l'image
La source de l'image est précisée avec l'attribut src pour indiquer au navigateur comment récupérer l'image
que l'on veut insérer. De la même manière qu'un lien hypertexte, on peut indiquer la source d'une image :
…avec un chemin absolu si l'image vient d'internet
On utilise un chemin absolu pour indiquer la source d'une image lorsque celle-ci est en ligne, sur un site,
ou qu'elle est hérbergée sur le web. On copie colle donc simplement l'URL de l'image.
Lorsque vous utilisez cette technique, faites attention à ce que l'URL corresponde bien à l'image
uniquement, et pas à une page web qui contient une image. Pour vous en assurer, vous pouvez faire un clic
droit sur l'image de votre choix, et choisir "Copier l'adresse de l'image".
…ou avec un chemin relatif si l'image est en local sur votre ordinateur
C'est ce que l'on fait si l'image est sur notre ordinateur : on utilise alors le nom et l'arborescence du fichier
de l'image en local pour indiquer sa source.
Si l'image est dans un sous-dossier nommé images, on précise : src="images/logo.png"
Évitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. Par exemple,
voici un chemin qui va poser problème : Images du site/Image toute bête.jpg
Il faut idéalement :
 supprimer les espaces (ou les remplacer par le symbole_) et les accents ;
 tout mettre en minuscules, comme ceci : images_du_site/image_toute_bete.jpg.
Si votre image ne s'affiche pas, c'est très certainement parce que le chemin est incorrect ! Simplifiez au
maximum vos noms de fichiers et de dossiers, et tout ira bien.
Voici un exemple d'insertion d'image :
<p>
Voici une très belle photo que j'ai trouvée sur Unsplash :<br>
<img src="images/paysage.jpg" alt="Photo de plage vue du dessus" />
</p>
6.1.2. Ajouter l'attribut alt pour donner à l'image une description alternative
Donner une decription alternative à une image est une bonne pratique !
Une description alternative est un court texte qui décrit ce que contient l'image. Ce texte alternatif sera :
 inscrit à la place de l'image si elle ne peut pas être affichée au moment du chargement de la page
web (cela arrive) ;
 audio-décrit par les navigateurs de personnes présentant un handicap (trouble de la vue, non-
voyants).
Cela contribue donc à améliorer ce que l'on appelle l'accessibilité d'un site web. En plus, cela aide les robots
des moteurs de recherche pour trouver des images.
D'ailleurs, j'en profite pour faire une petite parenthèse sur les formats d'image !

6.2. Choisir le bon format d'image

Voici quel format adopter en fonction de l'image que vous avez :
 Une photo : utilisez un JPEG.
 N'importe quelle image avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits, ou
éventuellement un GIF.
 N'importe quelle image avec beaucoup de couleurs : utilisez un PNG 24 bits.
 Une image animée : utilisez un GIF animé.
 Un logo vectoriel : utilisez un SVG.

Page 23 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent. C’est une
bonne pratique à mettre en place dès le début. Vous pouvez remplacer les espaces par le caractère
underscore _. Par exemple : mon_image.png

6.3. Ajouter une infobulle avec l'attribut title

Afin d'afficher une bulle d'aide sur vos images, vous pouvez utiliser l'attribut title ; (à ne pas confondre avec
la balise title qui permet d'indiquer au navigateur le titre d'une page web).
L'attribut title est facultatif, contrairement à alt.
Voici ce que cela peut donner :
<img src="montagnes.png" title="Alors, envie de vous balader n'est-ce pas ?" alt="Chemin de
randonnée au milieu des montagnes">
Le visiteur du site, n'aura qu'à survoler la photo avec la souris pour voir l'infobulle "Alors, envie de vous
balader n'est-ce pas ?" apparaître par-dessus l'image.

6.4. Créer une miniature cliquable

Si votre image est très grosse, il est conseillé d'en afficher la miniature cliquable sur votre site. De cette
manière vos pages web mettront moins de temps à s'afficher. Si vos visiteurs souhaitent voir vos images en
taille originale, ils n'auront qu'à cliquer dessus.
Pour ce faire, il faut disposer de deux versions d’une photo : l'image d'origine, et une version de cette image
moins lourde (donc plus petite).
Voyons voir comment faire en sorte que la miniature soit cliquable :
1. placez vos deux images dans un dossier appelé par exemple images.
2. Faites afficher la version montagne_mini.jpg sur une page,
3. et faites un lien vers la version montagne.jpg.
L'image agrandie s'affiche alors lorsqu'on clique sur la miniature.
Voici le code HTML qu’on peut utiliser pour cela :
<p>Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br>
<a href="images/montagne.jpg"><img src="images/montagne_mini.jpg" alt="Chemin de
randonnée au milieu des montagnes" title="Cliquez pour agrandir" ></a>
</p>
Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou violet) pas très esthétique autour de
votre image cliquable. Nous pourrons retirer ce cadre dans peu de temps grâce au CSS.

6.5. Exercice P1C6

Vous allez maintenant pouvoir enrichir le portfolio de Robbie Lens. Pour cela, vous devrez :
 Remplacer les liens Twitter et Instagram en bas des pages « À propos » et « Accueil » par les icônes
correspondantes ;
 Insérer l'image de Robbie Lens sur la page d'accueil (le fichier s'appelle robbie-lens.png) ;
 Afficher tout en haut et tout en bas de la page le logo qui renvoie sur la page d'accueil grâce à un
lien.
Vous trouverez toutes les images nécessaires pour cet exercice directement dans la base de code, dans le
dossier /images.

6.6. En résumé
 Il existe plusieurs formats d'images adaptés au Web : PNG, JPG…
 On insère une image avec la balise <img>.
 <img> doit obligatoirement comporter au moins ces deux attributs : src (source de l'image) et alt
(courte description de l'image).
 Il est possible d'afficher une autre version d'une image grâce à un lien qui entoure l’image.

Les balises <ul> et <ol> sont des balises de type "block" c’est-à-dire qu’elles entourent un bloc de texte. Les
balises <p>, <h1>, etc., sont de la même famille. Ces balises ont quelque chose en commun : elles créent un
nouveau “bloc”, dans la page, et provoquent donc obligatoirement un retour à la ligne.

Page 24 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Les balises <strong> et <em> quant à elles sont de la famille des balises type "inline", c'est-à-dire des
balises que l'on place au sein d'un paragraphe de texte pour sélectionner certains mots uniquement. Ces
balises s'utilisent donc au milieu d'un paragraphe.
Nous allons découvrir dans le prochain chapitres quelques autres balises XHTML.

Page 25 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 7 Autres balises XHTML

7.1. Insérer une adresse avec la balise <address>

La balise <addresse> permet d’insérer une adresse dans une page XHTML.
Exemple : <address>ANDEME Christophe, ESGIS Gabon</address>.
N.B. : L’addresse n’a pas besoin de respecter une forme spécifique.

7.2. Insérer des citations longues avec la balise <blockquote>

La balise <blockquote> est utilisée pour des citations longues. Elle permet de présenter le texte avec un
retrait par rapport aux paragraphes avoisinants. Cette balise ne peut pas directement contenir du texte. On
doit par exemple l’utiliser avec une balise <p>.
Exemple : <blockquote><p>La vie ne vaut rien, mais rien ne vaut la vie !</p> </blockquote>.

7.3. Insérer une ligne horizontale avec la balise vide <hr />
La balise <hr /> (horizontal rule) permet d’insérer une ligne horizontale dans une page XHTML. C’est un
élément qui est toujours vide.

7.4. Insérer une liste de définitions avec la balise <dl>

La balise <dl> (definition list) s’utilise avec les balises <dt> (intitulé du terme défini) et <dd> (définition du
terme) de façon alternative, pour insérer une liste de définitions.
Exemple :
<dl>
<dt>SGML</dt>
<dd>Standard Generalized Markup Language</dd>
<dt>XML</dt>
<dd>Extensible Markup Language</dd>
</dl>

7.5. Créer un tableau avec la balise <table>

Les tableaux sont créés dans un fichier XHTML avec d’autres éléments. A savoir :
 <table> : le tableau lui-même
 <caption> : le titre du tableau
 <tr> : une rangée ou ligne du tableau (Table Row)
 <td> : une cellule du tableau (Table Data)
 <th> : une cellule entête (Table Heading)
Exemple de tableau :
<table>
<caption>Titre du tableau</caption>
<tr>
<th>Titre Colonne 1</th>
<th>Titre Colonne 2</th>
</tr>
<tr>
<td>Ligne 1, colonne 1</td>
<td>Ligne 1, colonne 2</td>
</tr>
<tr>
<td>Ligne 2, colonne 1</td>
<td>Ligne 2, colonne 2</td>
</tr>
</table>
Attributs facultatifs utiles dans un tableau

Page 26 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  Attributs pour l'élément <table>
o summary permet de donner un résumé du tableau
o border="1" ajoute une bordure à chaque cellule. La valeur de cet attribut donne la largeur de
la bordure ; pour une bordure de 2 pixels. On met : border="2"
 Attributs pour les éléments <td> et <th>
o colspan="n" et rowspan="n" indiquent qu’une cellule doit s’étendre sur n colonnes (ou n
rangées); c’est comme si n cellules voisines étaient fusionnées.

Exemple de création d’un tableau avec attributs

<table border="1">
<caption>Titre du tableau</caption>
<tr>
<th>Titre Colonne 1</th>
<th>Titre Colonne 2</th>
<th>Titre Colonne 3</th>
</tr>
<tr>
<td colspan="2">Ligne 1, colonnes 1 et 2</td>
<td rowspan="2">Lignes 1 et 2, colonne 3</td>
</tr>
<tr>
<td>Ligne 2, colonne 1</td>
<td>Ligne 2, colonne 2</td>
</tr>
</table>

Tableaux imbriqués

Un élément <table> peut se retrouver comme contenu d’un élément <td>. Le résultat est un tableau
entièrement imbriqué dans une seule cellule d’un autre tableau.

7.6. Insérer une citation courte ou une référence la balise <cite>

La navigateur affiche généralement le contenu de cette balise en italique.
Exemple : <p><cite>Le nom de la rose</cite> d’Umberto Eco est ton livre préféré.</p>

7.7. Insérer des métadonnées avec la balise <meta> ou des liens externes avec la
balise <link>
Dans l’entête (head) d’un fichier XHTML on retrouve la balise <title> qui est obligatoire. Mais on peut y
retrouver également un ou des éléments <meta> (métadonnée) ; ces éléments sont facultatifs.
On peut également y inscrire un ou des éléments. <link> (lien), au besoin. Ce sont des références à des
fichiers externes, notamment une feuille de styles externe.
Les informations inscrites dans ces éléments sont ignorées par les navigateurs, mais utilisées par certains
outils de recherche Web.
Exemple d’entête avec les balises <meta> et <link> :
<head>
<title>Information documentaire</title>
<meta name="author" content="Monsieur Dupond" />
<meta name="description" content="Site du cours sur XHTML" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

Page 27 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
PARTIE II : MISE EN FORME DES PAGES WEB AVEC CSS
Chapitre 8 Intégrer le CSS dans la page XHTML
Pour débuter en CSS il va vous falloir créer votre première feuille de style.
Vous pouvez créer autant de feuilles de style que vous souhaitez dans votre projet, mais commençons avec
une seule.
Cette feuille de style pourra être nommée comme ceci : style.css que vous pourrez ranger dans un dossier
« styles » où vous rangerez toutes vos feuilles de style (CSS).
Une fois créée, vous devez déclarer votre feuille de style dans votre code XHTML
Nous allons voir dans ce chapitre comment intégrer le CSS dans notre page XHTML.

8.1. Lier le fichier CSS au fichier XHTML

À partir du moment où vous créez un fichier .css pour appliquer du style à votre page web (écrite dans un
fichier .html), il vous faut lier ces deux fichiers. Ainsi, les propriétés CSS que vous ajoutez vont pouvoir
s'appliquer aux balises HTML auxquelles vous souhaitez qu'elles s'appliquent.
Pour lier les fichiers .css et .html, vous allez rajouter une ligne dans le fichier .html pour indiquer au
navigateur d'aller chercher la feuille de style (stylesheet en anglais) afin d'afficher la page web avec les
propriétés de style qu'on lui a appliquées.
Cette ligne à rajouter dans le fichier .html s'ouvre avec la balise orpheline <link> et on la place à l'intérieur
de la balise <head> </head> :

<head>
<meta charset="utf-8">
<title>Ma page</title>
<link href="style.css" rel="stylesheet">
</head>
Lorsque vous cliquerez sur votre fichier XHTML pour l'ouvrir dans le navigateur, ce dernier aura
l'instruction d'appeler le fichier CSS associé pour afficher les propriétés de style de la page web.

8.2. Appliquer une propriété CSS à une balise XHTML

Le principe de règle CSS
Maintenant que vous avez relié votre fichier XHTML à votre fichier CSS vous allez pouvoir écrire votre
premier code en CSS. Mais comment écrire du code CSS ?
Dans un code CSS vous allez avoir 3 éléments importants et 1 notion à retenir. Ces éléments sont :
 le sélecteur,
 la propriété
 et la valeur
La propriété couplée à une valeur induit la notion de règle (ou déclaration) qui détermine la modification
apportée à un élément HTML déterminé par un sélecteur.
Le code CSS est un ensemble de règles défini pour un ou plusieurs sélecteurs.

Sélecteur
C’est une définition de l’élément XHTML qui sera affecté par l’ensemble de règles contenu entre les
accolades { } suivants le sélecteur. Le sélecteur peut être défini par le nom de la balise (h1, h2, p, div, …) ou
par une annotation spécifique à un attribut renseigné dans l’élément XHTML tel que les attributs class ou
id.
N’oubliez pas après votre sélecteur de créer 2 accolades (une ouvrante et une fermante) et de définir vos
règles de style (propriété + valeur) entre ces accolades.

Propriété
À chaque élément XHTML, il existe différentes propriétés CSS possiblement redéfinissable ainsi que de
multiples valeurs (au moins 2) pour chaque propriété.

Page 28 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Par exemple, pour un paragraphe XHTML (balise <p> </p>) on va pouvoir modifier sa couleur (color), sa
taille (font-size) ou son alignement (text-align) qui sont des propriétés de style de l’élément XHTML «
paragraphe ».

Valeur
La valeur suit la propriété après deux points :, c’est la nouvelle mise en forme qui sera attribué à la
propriété de l’élément XHTML. Pour chaque propriété il existe plusieurs valeurs définies possibles. Parfois
une propriété pourra avoir une valeur variable non définie.
Exemples :
La propriété text-align qui détermine l’alignement d’un texte peut prendre les valeurs définies suivantes :
left, right, center ou justify.
Alors que la propriété font-size permettant de définir la taille de police d’un texte peut avoir une valeur
variable en pixel sans limite de taille (théoriquement).
 font-size: 10px;
 font-size : 99999px;

Règle
La règle (ou déclaration) est l’association d’une propriété et de sa valeur. Elle cible un ou plusieurs éléments
HTML à travers un sélecteur et se termine tout le temps par un ;.
Vous pouvez ajouter plusieurs règles à la suite (toujours entre les accolades d’un sélecteur) pour créer un
ensemble de règles et chaque règle devra être définie comme ceci propriété: valeur;.

Exemple de code CSS :

h1 {
color: blue;
}
Dans ce code CSS on trouve les trois différents éléments énumérés plus haut :
1. Le sélecteur : ici on écrit les noms des balises HTML dont on veut modifier l'apparence. Par
exemple, si je veux modifier l'apparence de tous les paragraphes <p>, je dois écrire p (sans les
chevrons). Dans cet exemple on aciblé les titre de premier niveau (h1).
2. La ou les propriétés CSS : les effets de style sont listés via des propriétés. Par exemple, color permet
d'indiquer la couleur du texte, font-size permet d'indiquer la taille du texte, etc. Il existe BEAUCOUP
de propriétés CSS ! Mais rassurez-vous, vous n’avez pas besoin de les connaître toutes par cœur.
3. …et leurs valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la
propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on
veut, etc.

Syntaxe d’un code CSS

On écrit le nom de la balise. Puis entre accolades { } on écrit les propriétés et leurs valeurs. (On peut mettre
autant de propriétés que l'on veut à l'intérieur des accolades).
Chaque propriété est suivie du symbole : puis de la valeur correspondante.
Chaque ligne se termine par ;.
Voici un autre exemple ! Pour changer la couleur des paragraphes, on écrirait :
p {
color: blue;
Page 29 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
}
Ce code signifie en français :
“Je veux que tous les paragraphes soient écrits en bleu."
Pour écrire les commentaires en CSS : tapez /* suivi de votre commentaire, puis */ :
p {
/* J'en profite pour
ajouter un commentaire
sur plusieurs lignes */
color: blue;
}
8.3. Appliquer une propriété CSS à plusieurs balises XHTML à la fois
Ce code CSS signifie que nos titres de niveau 1 et nos paragraphes doivent s'afficher en bleu :

h1 {
color: blue;
}

p {
color: blue;
}
Si les balises ont le même style, il suffit de combiner la déclaration en séparant les noms des balises par
une virgule :

h1, p
{
color: blue;
}
Et voilà ce que ça donne :

Les éléments h1 et p sont en bleu mais le sous-titre h2 reste en noir

Ce que l’on vient de voir implique que TOUS les paragraphes seront écrits en bleu.
Comment faire pour que certains paragraphes soient écrits d'une couleur différente ?
Pour appliquer un style à un seul élément (par exemple à un seul paragraphe parmi tous les paragraphes de
notre code), on peut - en théorie - utiliser deux attributs :
1. l'attribut class ;
2. ou l'attribut id.
Mais pour ce faire - en pratique - on va surtout utiliser l'attribut class.
Les attributs class et id fonctionnent selon la même méthode mais on ne les utilise pas pour les mêmes
raisons :
 pour appliquer un style à un seul élément parmi d'autres, on utilise un attribut class.
 pour appliquer un style à un élément unique en son genre, on utilise un attribut id.
En CSS, on peut appliquer du style à un élément (ou plus) avec l'attribut class. Par contre id ne peut
s'utiliser que pour un seul élément, pas plus.
Voyons comment appliquer la méthode dans un exemple dont l'usage est pertinent avec l'attribut class.

8.4. Appliquer un style à un élément isolé avec l'attribut class

Page 30 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Étape 1 : marquer un élément avec l'attribut class dans le fichier.html
Class est un attribut que l'on peut mettre sur n'importe quelle balise HTML :

<h1 class="voici"> </h1>

<p class="des"> </p>
<img class="classes">
Que met-on comme valeur à l'attribut class ?
En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du moment que le nom
commence par une lettre. Souvenez-vous qu'il s'agit d'un moyen de sélectionner votre élément pour ensuite
lui appliquer du style.
Par exemple, je vais associer ma-classe à mon deuxième paragraphe dans le HTML :

<body>
<h1>Titre principal</h1>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p class="ma-classe">Ceci est le contenu de mon deuxième paragraphe</p>
<h2>Voilà mon sous-titre h2</h2>
</body>
On vient de créer un attribut class nommé ma-classe dans le fichier.html pour marquer un élément auquel
on veut appliquer un style en particulier. Maintenant, il faut appeler l'élément que l'on a marqué dans le
fichier .css pour pouvoir lui appliquer un style.
Étape 2 : appeler le nom de l'attribut class via un point (.) dans le fichier .css
Pour faire cela, on va indiquer dans le fichier .css le nom de notre classe précédée d'un point . :

.ma-classe {
color: #663399;
}
D'ailleurs, on en profite pour utiliser la notation hexadécimale pour indiquer la couleur, ce qui nous permet
d'être plus précis (pas de panique, on verra cela plus en détail dans le prochain chapitre).
Testez le résultat : seul votre paragraphe appelé ma-classe va prendre la couleur qu'on lui a attribué dans
le fichier .css :

La classe "ma-classe" associée à la couleur violette pour le deuxième paragraphe

8.5. Appliquer une propriété CSS à un élément unique avec l'attribut id

L'attribut id fonctionne selon la même méthode que class, mais il y a une différence de taille : id ne peut
être utilisé qu'une fois dans le code.
Quel intérêt alors ?
En CSS, il n'y en a pas vraiment ; cela vous sera surtout utile si vous faites du JavaScript plus tard, pour
reconnaître certaines balises.
En HTML, il y en a un car souvenez-vous on l'avait utilisé dans le chapitre sur les liens hypertextes pour
créer des ancres.
En pratique donc, on n'utilisera en CSS un id que sur un élément qui est unique dans la page, comme le
logo par exemple.
Étape 1 : marquer un élément unique avec l'attribut id dans le fichier .html
Exemple avec le logo, élément unique, que l'on va "marquer" grâce à l'attribut id dans le fichier .html:
Page 31 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
<img src="images/logo.png" alt="Logo du site" id="logo">
Étape 2 : appeler l'attribut id via un # dans le fichier .css
Avec l'attribut id , on définit les propriétés de style de cet élément unique dans le fichier .css en l'appelant
par un dièse # :
#logo {
/* Indiquez les propriétés CSS ici */
}
8.6. Appliquer plusieurs propriétés CSS d'un coup à un élément
En CSS, il est tout à fait possible de cumuler les styles.
Pour l'occasion, j'en profite pour vous montrer une nouvelle propriété : font-size, qui permet d'indiquer la
taille d'un texte (que nous verrons plus en détail dans le chapitre suivant).
Si on veut par exemple que tous nos textes soient de la taille 30px, on peut :
 déclarer le style :

.ma-classe {
color: #663399;
}

.grand-texte {
font-size: 30px;
}
 et l'utiliser sur p (mais aussi sur d’autres éléments ; il est possible de cumuler plusieurs classes au sein
d'une même balise). Par exemple :

<body>
<h1>Titre principal</h1>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p class="ma-classe grand-texte">Ceci est le contenu de mon deuxième paragraphe</p>
<h2 class="grand-texte">Voilà mon sous-titre h2</h2>
</body>
Ce qui donne :

De la même manière, on peut ajouter plusieurs propriétés sur un même sélecteur :

balise1
{
propriete1: valeur1;
propriete2: valeur2;
/* … */
}
Comment faire si on veut appliquer un style à quelque chose qui n'est pas entouré par une balise, par
exemple un mot ou un groupe de mots qu'il y a dans une phrase ?
Si vous avez besoin de donner un attribut à certains mots pour leur donner un style mais que ces derniers
ne sont pas entourés par des balises (un attribut s'applique à une balise en entier, pas juste une partie),
alors vous allez utiliser des balises universelles !

Page 32 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
8.7. Exploiter les balises universelles <span> </span> et <div> </div>

Imaginons, je veux modifier uniquement 990 espèces d'oiseaux dans le paragraphe suivant :
<p>Il existe plus de 990 espèces d'oiseaux répertoriées dans toute l'Europe.</p>
Cela serait facile à faire s'il y avait une balise autour de “990 espèces d'oiseaux”, mais malheureusement, il
n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien.
En fait, on a inventé deux balises dites "universelles", qui n'ont aucune signification particulière (elles
n'indiquent pas que le mot est important, par exemple). Il y a une petite différence (mais significative) entre
ces deux balises :
1. <span> </span>;
2. <div> </div>.
8.7.1. La balise <span> </span>
C'est une balise de type "inline", c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte pour
sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise
s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer “990
espèces d'oiseaux”.
8.7.2. La balise <div> </div>
C'est une balise de type "block", qui entoure un bloc de texte. Les balises <p>, <h1>, etc., sont de la même
famille. Ces balises ont quelque chose en commun : elles créent un nouveau “bloc”, dans la page, et
provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la
construction d'une mise en page, comme nous le verrons plus tard.
Pour le moment donc, nous allons plutôt utiliser la balise <span>.
Exemple :
<body>
<h1>Les oiseaux du monde </h1>
<h2>Les oiseaux d'Europe</h2>
<p>Il existe plus de <span>990 espèces d'oiseaux</span> répertoriées dans toute
l'Europe.</p>
<img src="https://images.unsplash.com/photo-1544647564-b361c54da412?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2073&q=80"
alt="Des mouettes alignées sur des poteaux" height="500">
<p class="ma-classe contenu-texte">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec commodo, lectus et congue finibus, erat nibh dictum sapien, a rutrum nisl dui a
lacus. In quis consectetur nisi. Fusce laoreet mauris a augue facilisis ornare. </p>
</body>
8.8. Exercice P2C1
Vous allez exploiter ce que vous venez d'apprendre, et le mettre à profit dans le projet de Robbie Lens.
Ici, vous allez :
 créer un fichier CSS commun style.css;
 appliquer la couleur black à l'ensemble des liens ;
 mettre le logo et les liens de navigation en haut des pages «Accueil» et «À propos» dans une balise
div ;
 mettre les différents logos en bas des deux pages dans une autre div ;
 sur la page d'accueil, dans le paragraphe d'introduction, vous allez appliquer le style suivant : color:
#A5B4FC; au mot «professionnalisme» et au mot «passion». Pour l'instant, vous utiliserez un <span>,
mais nous le modifierons dans le prochain chapitre pour utiliser <em>.

8.9. En résumé
 CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page
web.

Page 33 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  Pour écrire le code CSS, on crée un fichier séparé portant l'extension .css comme style.css.
 Pour lier les fichiers CSS et HTML, on rajoute une ligne dans la balise <head> </head> du fichier
HTML : <link href="style.css" rel="stylesheet">
 En CSS, on sélectionne les portions de la page HTML qu'on veut modifier, et on change leur
présentation avec des propriétés CSS :

balise1
{
propriete1: valeur1;
propriete2: valeur2;
/* … */
}
 Il existe plusieurs façons de sélectionner la portion de page que l'on veut mettre en forme. Par
exemple, on peut viser :
o toutes les balises d'un même type, en écrivant simplement leur nom (h1par exemple) ;
o certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou
id (.nom-classe ou #nom-id) ;
o uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3, em).

Page 34 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 9 Changer l'apparence du texte
Le texte qui apparaît sur une page web doit être bien formaté afin d’être agréable à l’utilisateur. Formater le
texte n’a rien à voir avec formater le disque dûr. Formater un texte consiste à modifier son apparence. C’est
une étape essentielle pour attirer l’audience d’un site web. Mais attention ! Lorsqu’on travaille sur des
interface web, le choix de la police et sa mise en page doivent être bien pensés afin de proposer un contenu
accessible à tous. Dans ce chapitre, on va enrichir notre fichier CSS avec de nouvelles propriétés à savoir le
type de police, la taille de police, le style de police et l’alignement des textes.
Nous allons maintenant voir comment mettre en forme le texte de nos pages.

9.1. Changer la taille du texte avec la propriété CSS font-size

Pour modifier la taille du texte, on utilise la propriété CSS font-size et ensuite, on indique :
 une taille absolue ;
 ou une taille relative.
Indiquer une taille absolue, c’est très précis, mais il est conseillé de n'utiliser cette méthode que si on sait
sur quelle taille d'écran ou dimension d'impression une personne verra le contenu de la page, car on risque
d'indiquer une taille trop petite pour certains lecteurs.
Indiquer une taille relative a l'avantage d'être plus souple, elle s'adapte, selon les tailles d'écrans, plus
facilement aux préférences des visiteurs.
9.1.1. Donner une taille au texte avec une valeur absolue en px (pixel)

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de
hauteur, vous devez donc écrire :
font-size: 16px;
Les lettres auront une taille de 16 pixels :

Exemple :
HTML :
<p class="elem1">Élément 1 : 8px</p>
<p class="elem2">Élément 2 : 16px</p>
<p class="elem3">Élément 3 : 24px</p>
<p class="elem4">Élément 4 : 32px</p>
<p class="elem5">Élément 5 : 40px</p>
<p class="elem6">Élément 6 : 48px</p>
<p class="elem7">Élément 7 : 56px</p>
<p class="elem8">Élément 8 : 64px</p>
<p class="elem9">Élément 9 : 72px</p>

CSS :
.elem1 {
Page 35 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 font-size: 8px;
}

.elem2 {
font-size: 16px;
}

.elem3 {
font-size: 24px;
}

.elem4 {
font-size: 32px;
}

.elem5 {
font-size: 40px;
}

.elem6 {
font-size: 48px;
}

.elem7 {
font-size: 56px;
}

.elem8 {
font-size: 64px;
}

.elem9 {
font-size: 72px;
}
9.1.2. Donner une taille au texte avec une valeur relative en em (recommandé)

Il y a plusieurs moyens d'indiquer une valeur relative. Une des plus fréquentes consiste à indiquer la taille
en em.
 Le texte a une taille normale avec 1em.
 Le texte est plus grand avec une valeur supérieure à 1, comme 1.3em.
 Le texte est plus petit avec une valeur inférieure à 1, comme 0.8em.
Attention tout de même à la syntaxe : pour les nombres décimaux, il faut mettre un point et non une
virgule. Vous devez donc écrire 1.4em et non pas 1,4em !
Si on le fait en XHTML :

<p class="elem1">Élément 1 : 1em</p>

<p class="elem2">Élément 2 : 1.3em</p>
<p class="elem3">Élément 3 : 2em</p>
… et qu’on y associe le CSS ci-dessous :

.elem1 {
font-size: 1em;
}

Page 36 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 .elem2 {
font-size: 1.3em;
}

.elem3 {
font-size: 2em;
}
… on obtient alors le résultat suivant :

La taille change avec l'unité em

Différence entre une taille absolue et une taille relative
Une valeur absolue en pixel comme 16px est fixe. C'est comme si je vous disais d'indiquer la taille du texte
en millimètres. Si je choisis de mettre la taille d'un texte à 2 millimètres et que vous regardez ma page web
depuis votre smartphone vous devriez pouvoir le lire. Maintenant, si mon site web s'affiche sur l'écran d'un
stadium, à votre avis que se passera-t-il ? C'est pour cela que l'on recommande une taille relative. 16 pixels
est une taille standard pour lire un texte mais peut ne pas suffire selon l'écran sur lequel il s'affiche. Une
valeur relative permet de choisir une taille de la même manière qu'on utiliserait un pourcentage.

9.2. Choix d’une police avec la propriété CSS font-family

La propriété CSS qui permet d'indiquer la police à utiliser est font-family. Sa syntaxe est la suivante :

balise
{
font-family: nom-police;
}
Voici une liste de polices sans sérif qui fonctionnent nativement sur la plupart des navigateurs :
 Arial Black ;
 Futura ;
 Helvetica ;
 Impact ;
 Trebuchet MS ;
 Verdana.
Le sérif désigne l’empattement situé à l’extrémité des caractères. Choisir une police de caractères sans sérif
est plus judicieux en termes d’accessibilité, car c’est plus facile à lire.

Différence entre sérif et sans sérif

C'est tout à fait possible d'utiliser n'importe quelle police sur son site, et ce sur la plupart des navigateurs.
Pour cela, il existe plusieurs méthodes, comme importer une police depuis le site de Google Fonts.
Comment fait-on pour intégrer une police de Google Fonts dans nos fichiers XHTML et CSS ?
Pour cela, rendez-vous sur Google Fonts https://fonts.google.com/ pour sélectionner une police, puis :

Page 37 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 1. Copiez les balises <link> dans le <head> </head> du fichier XHTML.
2. Utilisez la propriété font-family dans le fichier CSS pour déclarer que vous voulez utiliser cette
police.

Balises <link> à copier et à coller

dans le <head></head> du fichier
html

Propriété font-family à copier et

à coler dans le fichier CSS

Par exemple, pour la police Roboto, on vient coller dans le XHTML :

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Et on l'utilise dans le CSS en déclarant dans notre sélecteur :
font-family: 'Roboto', sans-serif;
Ici, on s'est contenté de suivre les étapes préconisées par Google Fonts. Mais il est également possible de
télécharger une police localement, et de la joindre à notre projet XHTML / CSS. Mais cette technique requiert
quelques étapes de plus, et n'est pas forcément nécessaire lorsque vous débutez. Néanmoins, vous trouverez
un exemple de ce genre de téléchargement de police au format spécifique et de son utilisation en
CSS juste ici : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face

9.3. Mettre du texte en italique avec la propriété CSS font-style

En CSS, on donne une valeur à font-style pour dire si on veut que du texte soit en italique ou non :
 italic : le texte sera mis en italique ;
 normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par
exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :

em
{
font-style: normal;
}

Différence entre du texte normal et du texte italique

9.4. Mettre du texte en gras avec la propriété CSS font-weight

Pour varier la graisse d'un texte, on utilise la propriété CSS font-weight à laquelle on associe une valeur, au
choix :
1. bold : le texte sera en gras ;
2. normal : le texte sera écrit normalement (par défaut) ;
3. thin : le texte est plus fin.
Mais il est également possible d'être plus précis et d'indiquer l'épaisseur du texte avec une valeur
numérique allant de 100 à 900, du moins épais au plus épais :

Page 38 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Les différentes graisses (ou épaisseurs)
Regardez ce que ça donne avec l’exemple suivant :
HTML :
<p class="thin">100-Thin</p>
<p class="extra-light">200-Extra light</p>
<p class="light">200-Light</p>
<p class="normal">400-Normal</p>
<p class="medium">500-Medium</p>
<p class="semi-bold">600-Semi bold</p>
<p class="bold">700-Bold</p>
<p class="extra-bold">800-Extra bold</p>
<p class="black">900-Black</p>

CSS :
.thin {
font-weight: 100;
}

.extra-light {
font-weight: 200;
}

.light {
font-weight: 300;
}

.normal {
font-weight: 400;
}

.medium {
font-weight: 500;
}

.semi-bold {
font-weight: 600;
}

.bold {
font-weight: 700;
}

.extra-bold {
font-weight: 800;
}

Page 39 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 .black {
font-weight: 900;
}
Pour appliquer les différents styles de texte (épaisseur et italique) pour les polices importées, il faut bien
s'assurer d'avoir importé les styles de polices correspondants. Ainsi, pour utiliser la police Roboto en
italique et bold, il faudra bien avoir importé dans votre code :

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,700&display=swap"
rel="stylesheet">
9.5. Souligner du texte avec la propriété CSS text-decoration
La propriété CSS text-decoration permet, entre autres, de souligner le texte, mais pas seulement. Voici
quelques-unes des différentes valeurs qu'elle peut prendre :
 underline : souligné ;
 line-through : barré ;
 none : normal (par défaut, sauf dans le cas des liens).
Ce CSS va vous permettre de tester les effets de text-decoration :

Les différentes valeurs de text-decoration

9.6. Alignez du texte avec la propriété CSS text-align

La propriété CSS text-align permet d'aligner du texte selon la valeur qu'on lui donne :
 left : le texte sera aligné à gauche (c'est le réglage par défaut) ;
 center : le texte sera centré ;
 right : le texte sera aligné à droite ;

Les 3 options d'alignements classiques

 justify : le texte sera “justifié”.

Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à
la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.

Jouez avec les différentes propriétés qu'on vient de voir grâce au code suivant :

HTML :

<p class="gauche">Texte aligné à gauche</p>

<p class="centre">Texte centré</p>
<p class="droite">Texte aligné à droite</p>

<br>
<p class="thin">100-Thin</p>
<p class="extra-light">200-Extra light</p>
<p class="light">200-Light</p>
<p class="normal">400-Normal</p>
<p class="medium">500-Medium</p>

Page 40 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
<p class="semi-bold">600-Semi bold</p>
<p class="bold">700-Bold</p>
<p class="extra-bold">800-Extra bold</p>
<p class="black">900-Black</p>
<br>
<p class="italic">Ceci est mon texte italique</p>
<p class="normal">Ceci est mon texte normal</p>
<br>
<p class="underline">Ceci est mon texte souligné</p>
<p class="line-through">Ceci est mon texte barré</p>
<p class="overline">Ceci est mon texte avec une ligne</p>
<p class="normal">Ceci est mon texte normal</p>

CSS :
.gauche {
text-align: left;
}

.centre {
text-align: center;
}

.droite {
text-align: right;
}

.thin {
font-weight: 100;
}

.extra-light {
font-weight: 200;
}

.light {
font-weight: 300;
}

.normal {
font-weight: 400;
}

.medium {
font-weight: 500;
}

.semi-bold {
font-weight: 600;
}

.bold {
font-weight: 700;
}
Page 41 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 .extra-bold {
font-weight: 800;
}

.black {
font-weight: 900;
}

.underline {
text-decoration: underline;
}

.line-through {
text-decoration: line-through;
}

.overline {
text-decoration: overline;
}

.normal {
text-decoration: none;
}

.italic {
font-style: italic;
}

body {
padding: 16px;
}

L'alignement ne fonctionne que sur des balises de type block : <p>, <div>, <h1>…
Aligner le texte d'une balise inline, comme <span>, <a>, <em>, <strong> n'est pas possible. Et c'est logique
quand on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu d'un paragraphe.

9.7. Exercice P2C2

Maintenant que vous avez appris comment mettre du texte en forme, vous allez pouvoir appliquer cela au
projet de Robbie Lens. Pour cela, vous allez :
 Importer les deux polices principales du projet avec Google Font : Montserrat et Manrope.
 Assigner les propriétés de polices suivantes :
o les titres h1 :
 3.5em
 en couleur #A5B4FC
 police Montserrat
o les paragraphes :
 1.1em
 police Manrope
o les listes :
 1em
 police Manrope
o les liens :

Page 42 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  enlever le soulignement
 1em
 police Manrope
 Remplacer les <span class="important"></span> par des éléments em tout en gardant le même style.

9.8. En résumé
 On modifie la taille du texte avec la propriété CSS font-size.
 On peut indiquer la taille en pixels, comme 16px ; ou encore en “em”, comme 1.3em.
 On indique la police du texte avec la propriété CSS font-family.
 De nombreuses propriétés de mise en forme du texte existent : font-style pour l'italique, font-
weight pour la mise en gras, text-decoration pour le soulignement.
 Le texte peut être aligné avec la propriété CSS text-align.

Page 43 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 10 Ajouter de la couleur et un fond
Dans ce chapitre nous allons parler de couleur. Avec la police de caractère, la couleur est un autre élément
permettant de définir l’identité de votre site web. Nous allons donc voir comment ajouter une touche de
couleur aux textes et à l’arrière-plan. On découvrira aussi comment ajouter une image de fond et comment
lui apporter de la couleur en ajoutant des dégradés.

10.1. Changez la couleur du texte avec la propriété CSS color

La propriété CSS qui permet de modifier la couleur du texte, c'est color.
Vous l'avez déjà utilisée en lui appliquant en valeur le nom d'une couleur en anglais :

h1 {
color: blue;
}
De nombreux noms de couleurs dont voici un site où trouver leurs mots clés :
https://developer.mozilla.org/fr/docs/Web/CSS/color_value#les_mots-cl%C3%A9s sont supportés par les
navigateurs mais il existe d'autres manières d'indiquer une couleur en CSS :
1. Sous forme hexadécimale (6 chiffres précédés d'un #). Exemple : color : #FFC8D3;
2. En notation RGB (pour Red Green Blue en anglais). Exemple : color: rgb(250,25,118);. Notez
qu'on peut ajouter la notion d'opacité (ou de transparence) avec la notation RGBA, où la dernière
valeur correspond à l'opacité dont la valeur est comprise entre 0 et 1. Exemple : color:
rgba(250,25,118, 0.5);
Si vous voulez trouver une couleur, ou bien convertir une valeur en utilisant une autre syntaxe, vous
trouverez des outils en ligne, comme Coolors https://coolors.co/ ou encore HTML Color Picker
https://www.w3schools.com/colors/colors_picker.asp .

10.2. Appliquer une couleur d'arrière-plan avec la propriété CSS background-color

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même
manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation
hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il vaut mieux l'appliquer à la balise <body>. Eh oui, <body>
correspond à l'ensemble de la page web. C'est donc en modifiant sa couleur de fond que l'on changera la
couleur d'arrière-plan de la page :

body {
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
Et on obtient :

On voit ici qu’on a demandé à ce que le texte de la balise <body> soit écrit en blanc, et tous les paragraphes
<p> et titres <h1> ont pris cette couleur. Comment ça se fait ?
La balise <body> contient, entre autres, les balises de paragraphe <p> et de titre <h1>. Si on applique à la
balise <body> une couleur de fond noire et une couleur de texte blanche, tous les titres et paragraphes
seront eux aussi en blanc sur fond noir.

Page 44 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur prendront le
même style. Cela s’appelle l’héritage : on dit que les balises qui se trouvent à l'intérieur d'une autre balise
“héritent” de ses propriétés. (L'héritage ne fonctionne pas uniquement pour la couleur, mais pour toutes les
propriétés CSS.)
C'est d'ailleurs de là que vient le nom “CSS”, qui signifie “Cascading Style Sheets”, c'est-à-dire “Feuilles de
style en cascade”. Les propriétés CSS sont héritées en cascade.
Remarque : Mais cela ne veut pas obligatoirement dire que TOUT le texte de votre page web sera forcément
écrit en blanc !
Si par la suite, vous voulez vos titres en violet par exemple, il faudra le préciser :

body {
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}

h1 {
color: purple;
}
Vous pouvez tester cela en jouant avec le code suivant :

HTML :

<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
<h2>Voilà mon sous-titre</h2>
</body>

CSS :

body {
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}

h1 {
color: purple;
}

10.3. Ajouter une image de fond avec la propriété CSS background-image

Une "image de fond" ne s'applique pas forcément à la page entière. On peut aussi mettre une image de fond
derrière des titres, ou des paragraphes uniquement.
10.3.1. Appliquer une image de fond derrière un élément XHTML
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit
renseigner l'adresse indiquant où se trouve l'image de fond. Elle peut être écrite en absolu (http://…) ou en
relatif (fond.png).
Attention lorsque vous écrivez une adresse en relatif dans le fichier CSS : l'adresse de l'image doit être
indiquée par rapport au fichier .css et non pas par rapport au fichier .html. Pour simplifier les choses, je
vous conseille de placer l'image de fond dans le même dossier que le fichier .css (ou dans un sous-dossier).
Voyons tout de suite à quoi ça ressemble !
On écrit dans le fichier HTML :

Page 45 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
<body>
<div class="banniere">
<h1>Mon blog</h1>
</div>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
</body>
Puis dans le fichier CSS :

body {
font-family: sans-serif;
margin: 0; /* Vous ne connaissez pas encore cette propriété mais elle permet de
s'assurer que nos éléments prennent bien toute la largeur de la page */
}

.banniere {
padding: 100px; /* Vous ne connaissez pas encore cette propriété mais elle permet
d'ajouter de l'espace dans notre élément*/
background-image: url('paysage.jpg');
}

h1 {
color: white;
text-align: center;
}
Et on obtient :

Une image en fond du titre de la page web

C'est bien beau tout ça, mais l'image apparaît floue : elle n'est pas aux bonnes dimensions. Pour corriger
cela, on va voir ensemble comment changer le comportement de l'image de fond.
10.3.2. Modifier le comportement d'une image de fond
Pour changer le comportement d'une image de fond, il existe plusieurs propriétés CSS :

1. La propriété CSS background-attachment associée à la valeur fixed permet de rendre l'image de

fond fixe lorsqu'on déroule la page web. Sa syntaxe est background-attachment: fixed;
2. La propriété CSS background-size associée à la valeur cover permet de redimensionner l'image afin
qu'elle s'adapte à la taille de l'élément qui la contient (elle garde ses proportions, en rognant la
largeur ou la hauteur en fonction de la taille de l'élément qui la contient). Sa syntaxe est
background-size: cover;
3. La propriété CSS background-position associée aux valeurs top, bottom, left, center ou right
permet d'indiquer où doit se trouver l'image de fond, par exemple : background-position: top
right; positionne l’image en haut à droite.
Chacune de ces 3 propriétés possède plusieurs valeurs possibles qu'on peut leur associer. Je vous invite à
aller tester en direct sur le site de Mozilla Developer les différents effets possibles des propriétés :

Page 46 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
1. background-attachment https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment ;
2. background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size ;
3. background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position .
De nombreux paramètrages existent en ce qui concerne les images de fond. Si vous voulez en savoir plus,
vous pouvez vous référer à la documentation de la propriété CSS background :
https://developer.mozilla.org/fr/docs/Web/CSS/background.

10.3.3. Combiner ces propriétés CSS avec la "super-propriété" background

Si vous utilisez beaucoup de propriétés en rapport avec le fond, vous pouvez utiliser une sorte de “super-
propriété” appelée background dont la valeur peut combiner plusieurs des propriétés :
 background-image ;
 background-repeat ;
 background-attachment ;
 background-size ;
 et background-position.
C'est la première “super-propriété” que je vous montre, il y en aura d'autres.
On peut donc tout simplement écrire :
.banniere
{
background: url("paysage.jpg") cover center;
}
Il faut savoir que :
 l'ordre des valeurs n'a pas d'importance : vous pouvez combiner les valeurs dans n'importe quel
ordre ;
 vous n'êtes pas obligé de mettre toutes les valeurs.
10.3.4. Créer des dégradés avec linear-gradient

Pour créer un dégradé, on a besoin de la propriété CSS background :

.banniere
{
background: linear-gradient(90deg, #8360c3, #2ebf91);
}
Si je devais lire en français cette ligne de CSS, voici ce que ça donnerait :
"J'applique un dégradé linéaire, à 90 degrés, en partant de la couleur #8360c3 pour arriver à la couleur
#2ebf91.
Ce qui nous permet d'obtenir un très beau dégradé :

Le dégradé va du violet au vert

Ici, on utilise linear-gradient mais il existe d'autres manières de créer des dégradés. Si vous voulez de
l'inspiration en termes de dégradés, rendez-vous sur UI Gradients https://uigradients.com/, et si vous
voulez construire vos propres dégradés, je vous conseille CSS Gradient https://cssgradient.io/.
10.3.5. Jouer sur la transparence avec la propriété CSS opacity

La propriété CSS opacity permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence).
 Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.

Page 47 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  Avec une valeur de 0, l'élément sera totalement transparent.
Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6 , votre élément sera
opaque à 60 %… et on verra donc à travers !
Jetez un œil à ce GIF auquel on applique 0.6 , puis 0.4 et enfin 0.2 :

L’opacité de l’image change en fonction des valeurs choisies.

Comme vous pouvez le voir, si vous appliquez la propriété opacity à un élément de la page, tout le contenu
de cet élément sera rendu transparent (même les images, les autres blocs à l'intérieur, etc.). Si vous voulez
juste rendre la couleur de fond transparente, utilisez plutôt la notation RGBA dont nous avons parlé un peu
plus haut.

10.4. Exercice P2C3

Maintenant que vous maîtrisez les couleurs et l'héritage en CSS, vous allez pouvoir en tirer parti pour le
projet de Robbie Lens ! Pour cela, vous devrez :
 changer les couleurs de fond pour que :
o la div dans laquelle on a les liens en haut des pages, et le pied de page, aient un fond blanc,
o le cœur de la page ait un fond correspondant à #1F2039 ;
 … et les couleurs de texte pour que :
o les liens en tête et pied de page soient de couleur #242424,
o les paragraphes, les listes et les titres H2 soient de la couleur #F9F8FF (sur fond bleu foncé).
Vous trouverez également des liens hypertextes qui ont été ajoutés : « Un projet ? Écrivez-moi » et « Voir mon
portfolio ». Vous devrez leur ajouter un dégradé qui passe de la couleur #8E86B5 à la couleur #ACAEED et les
mettre dans la police Montserrat, en blanc.
C'est normal si votre couleur de fond a une petite marge, nous corrigerons cela dans quelques chapitres.

10.5. En résumé

 On change la couleur du texte avec la propriété color et la couleur de fond avec la propriété
background-color.
 On peut indiquer une couleur en écrivant son nom en anglais, black par exemple, sous forme
hexadécimale, comme #FFC8D3, ou en notation RGB, comme rgb(250,25,118).
 On peut ajouter une image de fond avec la propriété background-image. On peut choisir de fixer
l'image de fond, ou encore de la positionner où on veut sur la page.
 On peut rendre une portion de la page transparente avec la propriété opacity ou avec la notation
RGBA (une extension de la notation RGB, où la quatrième valeur indique le niveau de transparence).

Page 48 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 11 Créer des bordures et des ombres
Poursuivons notre découverte de tout ce que le CSS peut nous offrir dans notre codage. Dans ce chapitre
nous allons nous intéresser aux bordures et aux effets d’ombrage. On pourra bien les appliquer sur des
textes que sur des formes ou des images. C’est une bonne occasion pour mettre à profit toutes nos
connaissances sur les couleurs.

11.1. Créer des bordures avec la propriété CSS border

Le CSS offre un large choix de bordures : border-width, border-color, border-style…

Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe
l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background dans le chapitre
précédent ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Avec la propriété border, on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :
1. La largeur que l'on définit avec une valeur en pixels (comme 2px).
2. La couleur que l'on indique avec un nom de couleur, une valeur hexadécimale, ou une valeur RGB.
3. Le type de bordure qui peut être solid (un trait simple), double (un double trait), dotted (un trait
en pointillés), dashed (un trait en tirets), ou autre. Vous avez un large panel d'options :

Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous
pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés :
1. border-top : bordure du haut.
2. border-bottom : bordure du bas.
3. border-left : bordure de gauche.
4. border-right : bordure de droite.
Il existe aussi des équivalents pour paramétrer chaque détail de la bordure si vous le désirez :

 border-top-width pour modifier l'épaisseur de la bordure du haut,

 border-top-color pour la couleur du haut, etc.
Ce sont aussi des super-propriétés, elles fonctionnent comme border mais elles ne s'appliquent donc qu'à
un seul côté.
On pourrait faire une compilation de nos éléments juste au-dessus.
On écrit dans le fichier HTML :

<p class="element">Élément</p>
Puis dans le CSS :

.element {
border-top: 3px #EB5353 dotted;
border-right: 3px #F9D923 double;
border-bottom: 3px #36AE7C dashed;
border-left: 3px #187498 solid;
}
Ce qui nous donnerait :

Page 49 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 L'élément a 4 styles de bordures différents
Bon ce n'est pas forcément du plus bel effet, mais c'était pour la démonstration !
Vous pouvez tester ces différentes propriétés et vous amuser à recréer l'élément ci-dessus avec le
code suivant :

HTML :
<div class="solid box">Solid</div>
<div class="double box">Double</div>
<div class="dotted box">Dotted</div>
<div class="dashed box">Dashed</div>

CSS :
.solid {
border: 1px #EB5353 solid;
}

.double {
border: 4px #187498 double;
}

.dashed {
border: 2px #36AE7C dashed;
}

.dotted {
border: 3px #F9D923 dotted;
}

body {
/* Vous ne connaissez pas encore ces propriétés : pas de panique, il s'agit juste de
propriétés permettant d'avoir nos carrés bien alignés */
display: flex;
flex-direction: row;
font-family: sans-serif;
gap: 10px;
}

.box {
/* Même chose ici */
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;

Page 50 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 }

On pourrait très bien avoir un élément qui n'aurait un bord que d'un seul côté. Pour cela, il suffit de ne
déclarer qu'une seule propriété. Dans l’exemple ci-dessous, on utilise uniquement la propriété border-left
:

.element {
font-size: 25px;
background-color: skyblue;
border-left: 5px #187498 solid;
padding: 100px;
}
Ce qui donne :

L'élément a une bordure à gauche

11.2. Arrondir les angles avec la propriété CSS border-radius

La propriété CSS border-radius permet d'arrondir les angles de n'importe quel élément. Il suffit d'indiquer
la taille de l'arrondi en pixels :

.element {
font-size: 25px;
background-color: skyblue;
border-radius: 10px;
padding: 100px;
}
Ce qui donne :

L'élément a des coins arrondis

Tout comme pour les bordures, il n'y a aucune obligation d'avoir les mêmes arrondis partout : on peut aussi
préciser la forme de l'arrondi pour chaque coin. D'un point de vue design, c'est très pratique lorsqu'on
souhaite coller deux formes qui ont des border radius, par exemple pour des "groupes de boutons". Vous
trouverez plus d’infos sur Bootstrap à l’adresse suivante :
https://getbootstrap.com/docs/4.0/components/button-group/ .
Dans ce cas, indiquez les quatre valeurs correspondant aux angles dans la propriété border-radius , dans
cet ordre (dans le sens des aiguilles d’une montre en partant du bord haut gauche) :
1. En haut à gauche.
2. En haut à droite.
Page 51 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 3. En bas à droite.
4. En bas à gauche.

.element {
font-size: 25px;
background-color: skyblue;
border-radius: 10px 30px 0px 90px;
padding: 100px;
}
Ce qui donne :

L'élément a des radius de différentes valeurs pour chaque angle

Il est même possible de créer des courbes elliptiques avec border-radius. Pour cela, il faut indiquer deux
valeurs séparées par une barre oblique (slash) : /. Mais le rendu est assez dur à anticiper. Il vaut mieux
utiliser des outils de visualisation comme Fancy Border Radius accessible à cette adresse :
https://9elements.github.io/fancy-border-radius/
Exemple :

Des courbes elliptiques sur un élément

Il ne reste plus qu'à cliquer sur "copy" pour reporter la valeur du border-radius générée automatiquement
(sans oublier le point-virgule ; à la fin de la ligne) dans notre code :

.element {
font-size: 25px;
background-color: skyblue;
border-radius: 30% 70% 70% 30% / 30% 58% 42% 70%;
padding: 100px;
}
Et voilà le résultat ! De quoi faire des éléments (boutons, encarts, blocs…) uniques sur votre site web :

Page 52 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 L'élément a des courbes elliptiques

11.3. Ajouter une ombre portée avec la propriété CSS box-shadow

Les ombres donnent des effets de profondeur intéressants sur une page web. C'est particulièrement utile
sur les boutons d'un site par exemple. Du fait de l'impression de relief, un bouton avec une ombre portée
indique visuellement aux visiteurs du site qu'il est "cliquable".
La propriété CSS box-shadow s'applique à tout le bloc, et prend quatre valeurs dans l'ordre suivant :
1. Le décalage horizontal de l'ombre.
2. Le décalage vertical de l'ombre.
3. L'adoucissement du dégradé.
4. La couleur de l'ombre.
L'adoucissement peut être :
 Faible (si on lui donne une valeur inférieure à celle du décalage),
 Normal (si on lui donne une valeur égale à celle du décalage)
 Ou élevé (si on lui donne une valeur supérieure à celle du décalage).
Par exemple :

.element {
font-size: 25px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 6px 6px 0px rgba(0, 0, 0);
padding: 100px;
}
Ce qui donne :

L'élément a une ombre portée à fort contraste

On obtient une ombre noire, portée horizontalement et verticalement, de 6 pixels, sans adoucissement. Ce
qui n'est pas forcément l'effet recherché… Ajoutons donc un adoucissement grâce au troisième paramètre
de la propriété box-shadow, tout en jouant sur l'opacité de la couleur avec RGBA :

.element {
font-size: 25px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
padding: 100px;
}
Ce qui donne :

Page 53 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 L’effet d'ombre est plus esthétique
Il n'est pas toujours simple de trouver l’effet d’ombre désiré à tâtons. Pour vous aider :
 vous pouvez utiliser l’outil Shadows Brumm https://shadows.brumm.af/ ;
 ou bien vous inspirer des exemples listés sur CSS Scan https://getcssscan.com/css-box-shadow-
examples .

11.4. Ajouter une ombre à un texte avec text-shadow

La propriété CSS text-shadow permet d'ajouter une ombre sur les lettres de votre texte. Effet vintage
garanti !
Les valeurs fonctionnent exactement de la même façon que box-shadow :
1. décalage horizontal,
2. décalage vertical,
3. adoucissement,
4. et couleur.
Voyez ce que ça donne dans le morceau de code juste en dessous :

h1 {
font-size: 50px;
text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
padding: 100px;
}
Et voyez ce que ça nous donne :

Le texte a une ombre portée

Je vous invite maintenant à vous entraîner à maitriser toutes les propriétés que l'on a vues dans ce
chapitre avec le code suivant :

HTML :

<div class="element1">Élément</div>
<div class="element2">Élément</div>
<div class="element3">Élément</div>
<div class="element4">Élément</div>
<div class="element5">Élément</div>
<div class="element6">Élément</div>
<div class="element7">Élément</div>
<div class="element8">Élément</div>

CSS :

.element1 {
font-size: 25px;
border-top: 3px #EB5353 dotted;

Page 54 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 border-right: 3px #F9D923 double;
border-bottom: 3px #36AE7C dashed;
border-left: 3px #187498 solid;
padding: 100px;
}

.element2 {
font-size: 25px;
background-color: skyblue;
border-left: 5px #187498 solid;
padding: 100px;
}

.element3 {
font-size: 25px;
background-color: skyblue;
border-radius: 10px;
padding: 100px;
}

.element4 {
font-size: 25px;
background-color: skyblue;
border-radius: 10px 30px 0px 90px;
padding: 100px;
}

.element5 {
font-size: 25px;
background-color: skyblue;
border-radius: 30% 70% 70% 30% / 30% 58% 42% 70%;
padding: 100px;
}

.element6 {
font-size: 25px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 6px 6px 0px rgba(0, 0, 0);
padding: 100px;
}

.element7 {
font-size: 25px;
background-color: skyblue;
border-radius: 10% ;
box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
padding: 100px;
}

.element8 {
font-size: 50px;

Page 55 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
padding: 100px;
}

body {
/* Vous ne connaissez pas encore ces propriétés : pas de panique, il s'agit juste de
propriétés permettant d'avoir nos carrés bien alignés */
display: flex;
flex-direction: row;
font-family: sans-serif;
gap: 100px;
}

.box {
/* Même chose ici */
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}

11.5. Exercice P2C4

C’est maintenant le moment de mettre en pratique ce que vous venez d’apprendre, dans le projet de Robbie
Lens. Pour cela, vous allez :
 ajouter des arrondis sur les liens «Un projet ? Écrivez-moi» et «Voir mon portfolio», d'une
valeur de 50px (le rendu n'est pas très beau, mais ne vous inquiétez pas, nous allons l'améliorer au
fil des chapitres) ;
 créer une div , sur la page À propos, qui englobe le paragraphe et la liste de compétences de Robbie
Lens ; lui ajouter une bordure à droite et en bas, de 1px d'épaisseur et de la couleur #A5B4FC.

11.6. En résumé

 On peut appliquer une bordure à un élément avec la super-propriété CSS border. Il faut indiquer la
largeur de la bordure, sa couleur et son type (simple, double, pointillés, tirets).
 On peut arrondir les bordures avec la propriété CSS border-radius.
 On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le décalage vertical
et horizontal de l'ombre, son niveau d'adoucissement et sa couleur.
Le texte peut lui aussi avoir une ombre avec text-shadow.

Page 56 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 12 Le modèle des boîtes
12.1. Différencier les balises de type block et de type inline
En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de ces deux catégories :
 Block : ce type de balise crée automatiquement un retour à la ligne avant et après ;
 inline : ce type se trouve obligatoirement à l'intérieur d'une balise block.
Il existe en fait plusieurs autres catégories très spécifiques, par exemple pour les cellules de tableau (type
table-cell) ou les puces (type list-item). Nous n'allons pas nous y intéresser pour le moment, car ces balises
sont minoritaires.
Pour bien visualiser le concept, voici un petit schéma :

Comme vous pouvez le voir, les blocs sont les uns en dessous des autres. On peut aussi les imbriquer les
uns à l'intérieur des autres : souvenez-vous, un bloc <main> contient par exemple des blocs <section>, qui
eux-mêmes peuvent contenir des <div>.
Quant à la balise <a></a> (qui est de type inline), elle se trouve à l'intérieur d'une balise block, et le texte
vient s'insérer sur la même ligne.

12.2. Faire bon usage des balises universelles <span> et <div>

J'en profite pour vous parler à nouveau des balises universelles. Vous les connaissez déjà car je vous les ai
présentées à plusieurs reprises. Ce sont des balises qui n'ont aucun sens particulier. Le principal intérêt de
ces balises est que l'on peut leur appliquer une class (ou un id) pour le CSS quand aucune autre balise ne
convient.
Il existe deux balises génériques et, comme par hasard, la seule différence entre les deux est que l'une
d'elles est inline et l'autre est block :
1. La balise <span> (qui est de type inline).
2. La balise <div> (qui est de type block).
N’abusez pas des balises universelles, même si elles sont utiles dans certains cas : beaucoup de
développeurs mettent des <div> et des <span> trop souvent, et oublient que d'autres balises plus adaptées
existent.
Par exemple :
 <span class="important"> : ici, il ne s'agit pas d'une bonne pratique, alors qu'il existe les balises
<strong> ou <em> qui servent à indiquer l'importance !
 <div class="titre"> : idem, cela ne convient pas, puisqu'il existe des balises faites spécialement
pour les titres ( <h1> , <h2> …).
Le résultat visuel est le même, mais les balises génériques n'apportent aucun sens à la page, et ne peuvent
pas être comprises par l'ordinateur. Utilisez toujours d'autres balises plus adaptées quand c'est possible.
Maintenant que vous comprenez la différence entre inline et block, nous allons apprendre à dimensionner
des éléments en CSS ! Nous allons ici travailler uniquement sur des balises de type block.
Pour commencer, intéressons-nous à la taille des blocs.

12.3. Dimensionner les éléments avec les propriétés CSS width et height

Contrairement à un inline, un block peut avoir une largeur et une hauteur précises grâce à ces deux
propriétés CSS :

1. width indique la largeur du bloc.

Page 57 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 2. Height désigne la hauteur du bloc.
On les exprime en pixels px ou en pourcentage %.
Par défaut, un bloc prend 100 % de la largeur disponible.
On peut le vérifier en appliquant à nos blocs des bordures ou une couleur de fond :

Les blocs prennent toute la largeur disponible

Maintenant, rajoutons un peu de CSS afin de modifier la largeur des paragraphes. Si on veut que tous les
paragraphes aient une largeur de 50 %, on écrira en CSS :

p {
width: 50%;
}
Le résultat est visible juste en dessous :

Le bloc paragraphe prend 50 % de la largeur disponible

Les pourcentages sont utiles pour créer un design qui s'adapte automatiquement à la résolution d'écran du
visiteur.
Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension précise en pixels, par
exemple pour reprendre un design très précis. Dans ce cas on écrira par exemple ce qui suit :

p {
width: 250px;
}
Les images sont un cas un peu particulier : elles se mettent les unes à la suite des autres, sans prendre
toute la largeur, mais on peut malgré tout leur donner une dimension exacte.

12.4. Définir des marges avec les propriétés CSS margin et padding
Tous les blocs possèdent des marges (intérieures et extérieures) :

Page 58 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Les marges intérieures et extérieures
En CSS, on peut modifier la taille des marges avec deux propriétés :
1. Margin désigne la taille de la marge extérieure
2. padding fait référence à la taille de la marge intérieure.
Pour bien comprendre la différence, faisons quelques tests.
Pour l'occasion, j'ai rédigé dans le fichier XHTML des paragraphes de texte en lorem ipsum (du faux texte).
Ensuite, dans le fichier CSS, j'ai donné au bloc p une largeur de 350px et j'ai ajouté une couleur jaune avec
la balise background-color pour qu'on visualise bien la différence entre les différentes marges :

p {
width: 350px;
background-color: #F1C864;
text-align: justify;
}
Voilà ce qu'on obtient avec ce code :

Les paragraphes sont séparés d'une marge par défaut

Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure (padding) dans le bloc du
paragraphe, (on le voit bien car il a un fond jaune et que les bordures sont collées au texte).
En revanche, il y a une marge extérieure (margin), on la voit bien car elle espace les paragraphes entre eux,
avec une marge blanche (couleur du fond de la page par défaut). C'est cette marge qui fait que deux
paragraphes ne sont pas collés, et qu'on a l'impression de “sauter une ligne”.

12.5. Ajouter une marge intérieure avec la propriété CSS padding

Pour ajouter aux paragraphes une marge intérieure (padding) de 16px par exemple, on écrit :

p {
width: 350px;
background-color: #F1C864;
text-align: justify;
padding: 16px;
}
On obtient alors :

Page 59 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Les paragraphes ont un padding de 16px

12.6. Ajouter une marge extérieure avec la propriété CSS margin

Maintenant, si on veut que nos paragraphes soient encore plus espacés entre eux, on rajoute la propriété
margin. Demandons par exemple 50px de marge entre deux paragraphes :

p {
width: 350px;
background-color: #F1C864;
text-align: justify;
padding: 16px;
margin: 50px;
}
On obtient :

Les paragraphes ont un margin de 50px et un padding de 16px

On peut remarquer qu’une marge s'est rajoutée tout autour aussi, pas seulement entre les deux
paragraphes.
La raison est toute simple : margin (comme padding d'ailleurs) s'applique aux quatre côtés du bloc.
Si vous voulez spécifier des marges différentes en haut, en bas, à gauche et à droite, il va falloir utiliser des
propriétés plus précises… Le principe est le même que pour la propriété border, vous allez voir !

12.7. Spécifier les propriétés margin et padding

Pour spécifier des marges différentes en haut, en bas, à gauche et à droite il faudra utiliser le vocabulaire
anglais suivant :
 top: haut ;
 bottom: bas ;
 left: gauche ;
 right: droite.

Voyez ce que cela donne dans le schéma ci-dessous :

Page 60 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Les différents types de marges intérieures et extérieures
Vous pouvez aussi utiliser seulement les propriétés raccourcies margin ou padding en précisant quatre
valeurs à la suite, dans le sens des aiguilles d'une montre (haut, droite, bas, gauche).
Exemple : margin: 2px 0 3px 1px;.
Ce qui signifie :
“ 2 pixels de marge en haut, 0 pixel de marge à droite (le px est facultatif dans ce cas), 3 pixels de marge en
bas et 1 pixel de marge à gauche”.

12.8. Centrer les blocs avec width et margin: auto;

Pour centrer des blocs, il faut respecter les règles suivantes :
1. donner une largeur au bloc avec la propriété width ;
2. indiquer margin: auto; (les marges extérieures seront alors automatiques, et permettront de
centrer le contenu.
Essayons cette technique sur nos paragraphes, en ajoutant simplement une ligne au CSS :

p {
width: 350px;
background-color: #F1C864;
text-align: justify;
padding: 16px;
margin: auto;
}
Et on obtient :

Les paragraphes sont centrés sur la page

Il n'est cependant pas possible de centrer verticalement un bloc avec cette technique. Seul le centrage
horizontal est permis.
Je vous invite maintenant à tester ce que vous venez de découvrir avec le code suivant :

HTML :

<h1>Démo sur les marges</h1>

<p>
Page 61 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

CSS :

body {
font-family: Arial;
color: black;
}

p {
background-color: #F1C864;
width: 350px;
text-align: justify;
padding: 16px;
margin: auto;
}
12.9. Exercice P3C2
Vous allez maintenant pouvoir vous faire la main sur le site de Robbie Lens, et mettre en pratique ce que
vous venez d'apprendre ! Dans le code de départ de l'exercice, vous trouverez un bout de CSS qui indique :

* {
margin: 0;
}
Cela sert à réinitialiser les marges par défaut des navigateurs.
À partir de là, vous allez :
 ajouter un padding au header et au footer de 20px en haut et en bas, et de 50px à gauche et à
droite ;
 ajouter une section autour du contenu de la page d'accueil ;
 ajouter une section autour du contenu de la page A-propos ;
 donner à vos sections (pour les futures sections à venir) un padding de 80px ;
 créer un padding de 50px pour carre-contenu ;
 centrer le contenu de la page A-propos ;
 aérer le contenu de la page A-propos : mettre de la marge au-dessus du sous-titre «Services» et de la
liste des compétences.

12.10. En résumé
 On distingue deux principaux types de balises en XHTML :
o les balises de type block comme <p> ou <h1> créent un retour à la ligne et occupent par
défaut toute la largeur disponible. Elles se suivent de haut en bas ;

Page 62 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 o les balises de type inline comme <a> ou <strong> délimitent du texte au milieu d'une ligne.
Elles se suivent de gauche à droite.
 On peut modifier la taille d'une balise de type block avec les propriétés CSS width (largeur) et
height (hauteur).
 Les éléments de la page disposent chacun de padding (marges intérieures) et de margin (marges
extérieures).
 On peut centrer le contenu d'un bloc dont la largeur est définie par width avec margin: auto;

Page 63 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 13 Faire la mise en page avec Flexbox
On a vu ensemble le modèle des boîtes. Il est temps maintenant de les organiser et les disposer comme on le
souhaite en utilisant la méthode Flexbox, une sorte de conteneur flexible.
Pour faire de la mise en page avec Flexbox il faut définir un conteneur et placer à l’intérieur plusieurs
éléments.

13.1. Comprendre la logique : un conteneur, des éléments

Pour faire de la mise en page avec Flexbox, il faut :
1. Définir un conteneur.
2. Et placer à l'intérieur plusieurs éléments.
Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le principe !
Sur une même page web, vous pouvez avoir plusieurs conteneurs (plusieurs cartons, si vous préférez). Vous
pouvez en créer autant que nécessaire pour obtenir la mise en page que vous voulez.
Commençons par étudier le fonctionnement d'un carton (euh pardon, d'un conteneur).
Un conteneur (container en anglais) est une balise qui peut renfermer d'autres balises, comme du texte ou
encore des images. Les conteneurs les plus célèbres sont les balises <div> et <span>.

<div class="container">
<div class="element element1">Élément 1</div>
<div class="element element2">Élément 2</div>
<div class="element element3">Élément 3</div>
</div>
Mais si on fait ça les éléments vont se mettre les uns en dessous des autres puisque ce sont tous des blocs.
Oui, tout à fait, c'est le comportement normal dont nous avons l'habitude. Découvrons donc maintenant
l'intérêt de Flexbox !

13.2. Alignez les éléments d'un conteneur avec display: flex;

Il suffit d'une seule propriété CSS, et tout change ! Cette propriété, c'est flex et on l'applique au conteneur :

.container {
display: flex;
}
... alors les blocs se placent par défaut côte à côte. Magique !

13.3. Donner une direction aux éléments avec la propriété flex-direction

Flexbox permet d'agencer ces éléments dans le sens que l'on veut. Avec flex-direction, on peut les
positionner verticalement ou encore les inverser. Cette propriété CSS peut prendre les valeurs suivantes :
 row : organisés sur une ligne (par défaut) ;
 column : organisés sur une colonne ;
 row-reverse : organisés sur une ligne, mais en ordre inversé ;
 column-reverse : organisés sur une colonne, mais en ordre inversé.
Ici, on fait simplement :

.container {
display: flex;
flex-direction: column;
}
Ce qui donne :

Page 64 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Les éléments du conteneur sont disposés en colonne
Dans cette disposition, c'est pareil comme au début sans Flexbox. Mais maintenant que nos éléments sont
flex, ils ont tout un tas d'autres propriétés utiles que nous allons voir juste après, on va y revenir.
Essayez aussi de tester l'ordre inversé, pour voir :

.container {
display: flex;
flex-direction: column-reverse;
}
Et voilà ce que ça donne :

Les éléments sont en colonne... dans l'ordre inverse !

Regardez bien la différence : les blocs sont maintenant dans l'ordre inverse ! Je n'ai pas du tout changé le
code HTML, qui reste le même depuis le début.

13.4. Retourner à la ligne avec la propriété flex-wrap

Par défaut, les blocs essaient de rester sur la même ligne s'ils n'ont pas la place, quitte à "s'écraser", et
provoquer parfois des anomalies dans la mise en page (certains éléments pouvant dépasser de leur

Page 65 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
conteneur). Si vous voulez, vous pouvez demander à ce que les blocs aillent à la ligne lorsqu'ils n'ont plus la
place, avec flex-wrap.
Voici les différentes valeurs de flex-wrap :
1. nowrap : pas de retour à la ligne (par défaut) ;
2. wrap : les éléments vont à la ligne lorsqu'il n'y a plus la place ;
3. wrap-reverse : les éléments vont à la ligne, lorsqu'il n'y a plus la place, en sens inverse.

.container {
display: flex;
flex-wrap: nowrap;
/* OU wrap;
OU wrap-reverse; */
}
Dans les illustrations suivantes, vous pouvez voir les différents comportements de nos blocs en fonction de
la valeur que l'on attribue à flex-wrap :
Avec flex-wrap: nowrap; :

Les éléments se serrent pour tenir sur la même ligne

Avec flex-wrap: wrap; :

Les éléments passent à la ligne s'ils ne rentrent pas tous sur la même ligne
Cette propriété sera particulièrement utile quand nous aurons besoin d'adapter nos pages aux plus petits
écrans. Nous verrons ça dans la prochaine partie de ce cours.
Avec flex-wrap: wrap-reverse; :

Les éléments passent à la ligne mais à l'envers

13.5. Aligner les éléments sur un axe principal et secondaire

Les éléments sont organisés par défaut de manière horizontale. Mais ils peuvent être organisés de manière
vertical. Selon le choix que vous faîtes, ça va définir ce qu'on appelle l'axe principal. Il y a aussi un axe
secondaire :
 si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical ;
 si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.
Nous allons découvrir maintenant comment aligner nos éléments sur l'axe principal et sur l'axe secondaire.
13.5.1. Aligner les éléments sur l'axe principal avec la propriété justify-content

Pour faire simple, partons sur des éléments organisés horizontalement (c'est le cas par défaut).

Page 66 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Pour changer leur alignement, on va utiliser justify-content, qui peut prendre ces valeurs :
 flex-start: alignés au début (par défaut) ;
 flex-end: alignés à la fin ;
 center: alignés au centre ;
 space-between: les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux) ;
 space-around: idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur
les extrémités.
On écrit alors :

.container {
display: flex;
justify-content: flex-start /* OU flex-end
OU center
OU space-between
OU space-around; */
}
Le mieux est encore de tester toutes les valeurs possibles pour voir ce que ça donne. Pour cela, je vous
invite à manipuler toutes les valeurs possibles de justify-content avec le code suivant :

HTML :

<h2>Start</h2>
<div class="container start">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>End</h2>
<div class="container end">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

Page 67 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
<h2>Center</h2>
<div class="container center">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Between</h2>
<div class="container spaceBetween">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Around</h2>
<div class="container spaceAround">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Stretch</h2>
<div class="container stretch">
<div class="element element1"></div>
<div class="element element2"></div>

Page 68 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

CSS :

.container {
display: flex;
width: 650px;
flex-wrap: wrap;
height: 400px;
border: solid 2px #000
}
.start {
justify-content: flex-start
}
.end {
justify-content:flex-end;
}

.center {
justify-content: center;
}

.spaceBetween {
justify-content: space-between;
}
.spaceAround {
justify-content: space-around;
}
.stretch {
justify-content: stretch;
}

.element {
width: 150px;
min-height: 100px;
}

.element1 {
background-color : orange;
}
.element2 {
background-color : blue;
}
Page 69 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 .element3 {
background-color : lightgreen;
}

Vous voyez comment les éléments s'alignent différemment selon les cas ? Avec une simple propriété, on peut
intelligemment agencer nos éléments comme on veut !
Maintenant, voici ce qu'il faut bien comprendre : ça marche aussi si vos éléments sont dans une
direction verticale. Dans ce cas, l'axe vertical devient l'axe principal, et justify-content s'applique aussi
:

.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 350px; /* Un peu de hauteur pour que les éléments aient la place de bouger */
}
Avec une direction verticale ("column"), le centrage fonctionne de la même façon, mais cette fois en hauteur.
Ajoutez flex-direction: column; dans le code suivant pour voir la différence :

HTML :
<h2>Start</h2>
<div class="container start">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>End</h2>
<div class="container end">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Center</h2>
Page 70 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
<div class="container center">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Between</h2>
<div class="container spaceBetween">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Around</h2>
<div class="container spaceAround">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Stretch</h2>
<div class="container stretch">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>

Page 71 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

CSS :
.container {
display: flex;
width: 650px;
flex-wrap: wrap;
height: 400px;
border: solid 2px #000
}
.start {
justify-content: flex-start
}
.end {
justify-content:flex-end;
}

.center {
justify-content: center;
}

.spaceBetween {
justify-content: space-between;
}
.spaceAround {
justify-content: space-around;
}
.stretch {
justify-content: stretch;
}

.element {
width: 150px;
min-height: 100px;
}

.element1 {
background-color : orange;
}
.element2 {
background-color : blue;
}
.element3 {

Page 72 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 background-color : lightgreen;
}
13.5.2. Alignez sur l'axe secondaire avec align-items

Si nos éléments sont placés dans une direction horizontale (ligne), l'axe secondaire est... vertical. Et
inversement : si nos éléments sont dans une direction verticale (colonne), l'axe secondaire est horizontal.
La propriété align-items permet de changer leur alignement sur l'axe secondaire, grâce aux valeurs :
 stretch: les éléments sont étirés sur tout l'axe (valeur par défaut) ;
 flex-start: alignés au début ;
 flex-end: alignés à la fin ;
 center: alignés au centre ;
 baseline: alignés sur la ligne de base (semblable à flex-start).
Pour ces exemples, nous allons partir du principe que nos éléments sont dans une direction horizontale
(mais n'hésitez pas à tester aussi dans la direction verticale !).

.container {
display: flex;
justify-content: center;
align-items: center;
}
Ajoutez align-items: center; dans le code suivant pour voir le résultat :

HTML :
<h2>Start</h2>
<div class="container start">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>End</h2>
<div class="container end">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
Page 73 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
</div>

<h2>Center</h2>
<div class="container center">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Between</h2>
<div class="container spaceBetween">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Around</h2>
<div class="container spaceAround">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Stretch</h2>
<div class="container stretch">

Page 74 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

CSS :
.container {
display: flex;
width: 650px;
flex-wrap: wrap;
height: 400px;
border: solid 2px #000
}
.start {
justify-content: flex-start
}
.end {
justify-content:flex-end;
}

.center {
justify-content: center;
}

.spaceBetween {
justify-content: space-between;
}
.spaceAround {
justify-content: space-around;
}
.stretch {
justify-content: stretch;
}

.element {
width: 150px;
min-height: 100px;
}

.element1 {
background-color : orange;
}
.element2 {

Page 75 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 background-color : blue;
}
.element3 {
background-color : lightgreen;
}

Le centrage vertical et horizontal peut d'ailleurs être obtenu encore plus facilement. Dites-vous que votre
conteneur est une Flexbox, et établissez des marges automatiques sur les éléments à l'intérieur. C'est tout !
Essayez :
.container {
display: flex;
}

.element {
margin: auto;
}

13.6. Répartir les blocs sur plusieurs lignes avec align-content

Si vous avez plusieurs lignes dans votre Flexbox, vous pouvez choisir comment celles-ci seront réparties
avec align-content.
Cette propriété n'a aucun effet s'il n'y a qu'une seule ligne dans la Flexbox.
Prenons donc un cas de figure où nous avons plusieurs lignes. J'autorise les éléments à aller à la ligne avec
flex-wrap.
Voyons voir comment les lignes se répartissent différemment avec la nouvelle propriété align-content que
je voulais vous présenter. Elle peut prendre ces valeurs :
 stretch (par défaut) : les éléments s'étirent pour occuper tout l'espace ;
 flex-start : les éléments sont placés au début ;
 flex-end : les éléments sont placés à la fin ;
 center : les éléments sont placés au centre ;
 space-between : les éléments sont séparés avec de l'espace entre eux ;
 space-around : idem, mais il y a aussi de l'espace au début et à la fin.
Amusez-vous avec le code suivant pour tester tout cela :

HTML :
<h2>Start</h2>
<div class="container start">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>End</h2>
<div class="container end">
Page 76 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Center</h2>
<div class="container center">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Between</h2>
<div class="container spaceBetween">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Space Around</h2>
<div class="container spaceAround">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>

Page 77 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

<h2>Stretch</h2>
<div class="container stretch">
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>
<div class="element element2"></div>
<div class="element element1"></div>
<div class="element element3"></div>
</div>

Et si vous voulez vous entraîner pour vous assurer que vous maîtrisez bien les propriétés de Flexbox, je
vous recommande le jeu Flexbox Froggy https://flexboxfroggy.com/#fr . Avec les différentes propriétés,
vous devrez replacer les grenouilles sur les nénuphars.

13.7. Exercice P3C3

Maintenant que vous maîtrisez les propriétés de Flexbox, nous allons en profiter pour mettre en forme les
pages du portfolio de Robbie Lens !
À partir de maintenant, la mise en page devient plus élaborée.
Des modifications ont été apportées au fichier de code pour que vous ayez davantage d'éléments :
 des images ont été ajoutées dans le dossier «images» ;
 des sections ont été ajoutées dans la page d'accueil ;
 le style du footer a été modifié pour avoir le logo en haut à gauche de la page, et les liens de
navigation à droite.
À partir de la base de code mis à votre disposition pour démarrer cet exercice, vous allez :
 utiliser flex pour avoir le logo en haut à gauche de la page, et les liens de navigation à droite dans
l’en-tête ;
 réagencer les éléments pour avoir le titre de la page d'accueil, le paragraphe, et le lien ayant la classe
«CTA» à gauche, et la photo à droite ;
 importer les images dans la page d'accueil, et créer une grille d'images avec deux rangées de 3
images chacune.
Vous trouverez dans la base de code, pour démarrer l'exercice, des exemples qui vous aideront à mettre en
place votre code.

13.8. En résumé

 Le principe de Flexbox est d'avoir un conteneur avec plusieurs éléments à l'intérieur. Avec display:
flex; sur le conteneur, les éléments à l'intérieur sont agencés en mode Flexbox (horizontalement,
par défaut).

Page 78 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  Flexbox peut gérer toutes les directions. Avec flex-direction, on peut indiquer si les éléments sont
agencés horizontalement (par défaut) ou verticalement. Cela définit ce qu'on appelle l'axe principal.
 L'alignement des éléments se fait sur l'axe principal avec justify-content et sur l'axe secondaire
avec align-items.
 Avec flex-wrap, on peut autoriser les éléments à revenir à la ligne s'ils n'ont plus d'espace.
 S'il y a plusieurs lignes, on peut indiquer comment les lignes doivent se répartir entre elles avec
align-content.

Page 79 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 14 Créer des formulaires
Jusque-là nos pages web servait uniquement à afficher des informations. On va maintenant pouvoir
demander aux utilisateurs d’interagir avec les pages web en fournissant des informations comme leur nom,
prénom, adresse email, etc. Ça c’est le rôle des formulaires. Et comme pour les tableaux il y a plusieurs
balises XHTML à retenir.

14.1. Créer un formulaire avec la balise en paires <form> </form>

Pour créer un formulaire, vous aurez besoin de la balise XHTML <form> </form>, elle permet d'indiquer le
début et la fin du formulaire.
Voici les deux attributs indispensables pour construire un formulaire fonctionnel :
1. L'attribut method indique par quel moyen les données vont être envoyées. Ne vous en préoccupez
pas pour le moment. Sachez juste que les méthodes les plus utilisées sont get et post.
2. L'attribut action indique l'adresse de la page ou du programme qui va traiter les informations.
Tout cela va nous permettre de créer la structure de base d’un formulaire en XHTML :

<p>Texte avant le formulaire</p>

<form method="get" action="">
<p>Texte à l'intérieur du formulaire</p>
</form>
<p>Texte après le formulaire</p>
Je donne la valeur get à l'attribut method ; et je laisse un champ vide : " " pour action.
Pourquoi est-ce qu'on laisse un champ vide dans l'attribut action ?
Si notre projet comportait également du code en *backend, c'est là qu'on indiquerait une URL qui pourrait
traiter notre formulaire. Mais ici, en laissant un champ vide, on indique à notre formulaire qu'on restera sur
la même URL, ce qui nous permettra plus tard d'inspecter ce qu'on obtient, assez simplement.
*En règle générale, un site internet est composé de deux parties :
1. une partie frontend, c’est la partie visible de notre site internet, celle qui s’affiche dans votre
navigateur grâce à HTML, CSS et JavaScript ;
2. une partie backend, qui se trouve hébergée et qui s’exécute sur un serveur web. Elle permet de faire
des tâches plus complexes, comme traiter un formulaire, envoyer un mail, sauvegarder des
informations dans une base de données, etc.
Voyons maintenant quelle balise XHTML utiliser pour saisir du texte dans un formulaire.

14.2. Insérer des champs de texte avec la balise HTML <input>

La balise XHTML <input> est une balise orpheline.

On la retrouvera plusieurs fois dans ce chapitre. Souvent, ce sera la valeur de son attribut, type, qui
changera selon le type de champ que l'on veut ajouter : texte monoligne, email, date, etc.

14.2.1. Ajouter une zone de texte monoligne avec <input type="text">

Une zone de texte monoligne est une zone de texte d’une seule ligne. On l'utilise pour des champs de texte
qui ne requièrent que quelques mots, comme un nom ou un prénom, par exemple.
Pour créer cette zone de texte, on ouvre avec la balise <input> et on précise la valeur de l'attribut
(type="text") pour indiquer qu'il s'agit d'une zone de texte d'une seule ligne :
<input type="text">
Ensuite, il faut donner un nom à votre zone de texte ; pour cela on utilise l'attribut name.
Ce nom n'apparaît pas sur la page, mais il est indispensable parce qu’il permettra plus tard d'identifier le
champ d'où viennent les informations.
Commençons par demander au visiteur de renseigner son prénom. La syntaxe est la suivante :
<input type="text" name="prenom">
Voici ce que cela donne pour un formulaire très basique avec uniquement notre champ de texte monoligne
qui demande son prénom au visiteur du site :

<form method="get" action="">

Page 80 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <input type="text" name="prenom">
</form>
Mais si on s’arrête là comment le visiteur saura qu'il faut renseigner son prénom si l'attribut name ne
s'affiche pas ? Lorsqu’un visiteur tombe sur un champ de texte à saisir, il ne sait pas toujours ce qu'il doit y
écrire. C'est justement le rôle du champ libellé !
14.2.2. Ajouter un champ de libellé avec la balise HTML <label> </label>

Un libellé est un champ de texte prérempli avec une indication pour guider le visiteur du site sur ce qu’il
doit écrire. On crée un champ de libellé avec la balise XHTML <label> </label> :

<form method="get" action="">

<label>Votre prénom</label> : <input type="text" name="prenom">
</form>
Mais cela ne suffit pas : il faut lier le label à la zone de texte.
Pour ce faire, on doit donner un nom à la zone de texte, non pas avec l'attribut name mais avec l'attribut id
(que l'on peut utiliser sur toutes les balises).
 L'attribut id est utilisé pour identifier l'élément XHTML afin d’y accéder et de le manipuler. Il est
donc unique pour cet élément.
 L'attribut name, lui, réfère à la variable du formulaire que l’élément concerne. Ici, il n’y a qu’un seul
élément qui pourra référer à la variable prenom ; name et id auront donc la même valeur. Mais
lorsque nous utiliserons des checkbox ou des boutons radio, plusieurs éléments correspondront à
la même variable. Mais nous verrons cela un peu plus tard, et vous comprendrez mieux.
Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l'id du champ.
Comme ceci :

<form method="get" action="">

<p>
<label for="prenom">Votre prénom</label> : <input type="text" name="prenom"
id="prenom">
</p>
</form>
Ce qui veut dire en français :
"Pour le champ de texte monoligne, nommé prenom, il y aura un libellé "Votre prénom" qui s'affichera".
On peut ajouter un certain nombre d'autres attributs à la balise <input> pour personnaliser son
fonctionnement :
 agrandir le champ avec size ;
 limiter le nombre de caractères que l'on peut saisir avec maxlength ;
 pré-remplir le champ avec une valeur par défaut à l'aide de value ;
 donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès
que le visiteur aura cliqué à l'intérieur du champ.
Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce qu'il faut
saisir; le champ fait 30 caractères de long, mais on ne peut écrire que 20 caractères maximum à l'intérieur :

<form method="get" action="">

<p>
<label for="prenom">Votre prénom :</label>
<input type="text" name="prenom" id="prenom" placeholder="Ex. : Mathieu" size="30"
maxlength="20">
</p>
</form>
Testez vous-même le résultat pour observer le comportement du champ. En attendant, voici le rendu du
champ dans son état initial (avant que le visiteur ne renseigne quoi que ce soit) :

Page 81 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
14.2.3. Ajouter une zone de texte multiligne avec <textarea> </textarea>

Une zone de texte multiligne est une zone de texte de plusieurs lignes. C’est utilisé dans le cas où le visiteur
d’un site aurait besoin d’écrire un paragraphe de texte dans un formulaire.

Pour créer une zone de texte multiligne, on utilise : <textarea> </textarea>.

Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser un label qui
explique de quoi il s'agit :

<form method="get" action="">

<p>
<label for="ameliorer">Des conseils pour améliorer mon site ?</label><br>
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>
</form>
Et voici le résultat en image :

Une zone de texte multiligne

Grâce à la poignée située en bas à droite de la zone de texte, le visiteur peut étirer le champ pour mieux
visualiser ce qu'il écrit (ce qui n'est pas possible avec un champ de texte monoligne) :

Une zone de texte multiligne agrandie avec la poignée

Mais on peut modifier la taille par défaut du <textarea>, et ce, de deux façons différentes :
1. En appliquant au <textarea> les propriétés CSS width et height.
2. En ajoutant à la balise <textarea> les attributs :
1. rows (indique le nombre de lignes qui peuvent être affichées) ;
2. et cols (indique le nombre de colonnes qui peuvent être affichées).
Vous pouvez pré-remplir le <textarea> avec une valeur par défaut. Dans ce cas, on n'utilise pas l'attribut
value : on écrit tout simplement le texte par défaut entre la balise ouvrante et la balise fermante !
Attention ! les balises libellé et zone de texte multiligne sont spécifiques : libellé n'est pas un champ de
saisie (le visiteur ne remplit pas un libellé, c'est juste une indication pour lui) ; et le textearea permet de
spécifier un champ étirable.
En dehors du champ de texte monoligne, il existe d'autres type de saisie. On utilisera alors la balise input
et l'attribut type (pour lequel on indiquera un type de champ en particulier).

14.3. Utiliser <input> pour des formats de saisie particuliers

Vous pouvez créer de nombreux types de champs de saisie :

Page 82 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Type de Code
champ

un e-mail <input type="email">

une URL <input type="url">

On peut demander à saisir une adresse absolue, commençant généralement par http://

un numéro de <input type="tel">

téléphone

un nombre <input type="number">

entier Le champ s'affiche en général avec des petites flèches pour changer la valeur.

un curseur <input type="range">

(aussi appelé On utilise range https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/range pour demander au
“slider”) visiteur une valeur comprise entre deux bornes :

Un champ de curseur

une date Différents types de champs de sélection de date existent, comme

<input type="date"> pour sélectionner une date :

Un champ de date et le code associé

Mais il existe des variantes :
 <input type="time"> pour l'heure ;
 <input type="week"> pour la semaine ;
 <input type="month" pour le mois ;
 <input type="datetime"> pour la date et l'heure (avec gestion du décalage horaire) ;
 <input type="datetime-local"> pour la date et l'heure (sans gestion du décalage
horaire).
Vérifiez bien quels navigateurs gèrent ce type de champ
https://caniuse.com/#feat=input-datetime, il n'est pas encore complètement reconnu.

une recherche <input type="search">

Page 83 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Un champ de recherche et le code associé

Pour les types de champs nombre, date et curseur, vous pouvez personnaliser le fonctionnement du champ
avec les attributs suivants :
 min : valeur minimale autorisée ;
 max : valeur maximale autorisée ;
 step : c'est un “pas” de déplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des
valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).

14.4. Laisser le visiteur choisir une option

HTML offre plusieurs manières de choisir une ou des option(s) dans un formulaire. Ce sont des éléments qui
demandent au visiteur de faire un choix parmi une liste de possibilités, comme :
1. Les cases à cocher (plusieurs choix possibles).
2. Les boutons radio (un seul choix possible).
3. Les listes déroulantes (un seul choix possible).
14.4.1. Insérez des cases à cocher avec <input type="checkbox">

On crée une case à cocher avec la balise <input> en spécifiant le type checkbox qui signifie "case à cocher"
en français :
<input type="checkbox" name="choix">
Rajoutez un <label> et le tour est joué :

<form method="get" action="">

<p>
Cochez les aliments que vous aimez manger :<br>
<input type="checkbox" name="frites" id="frites"> <label
for="frites">Frites</label><br>
<input type="checkbox" name="steak" id="steak"> <label for="steak">Steak</label><br>
<input type="checkbox" name="epinards" id="epinards"> <label
for="epinards">Épinards</label><br>
<input type="checkbox" name="huitres" id="huitres"> <label
for="huitres">Huitres</label>
</p>
</form>
Ce qui donne, une liste d'aliments (le visiteur a la possibilité d'en cocher plusieurs) :

Une liste à choix multiple

N'oubliez pas de donner un nom différent à chaque case à cocher, cela vous permettra d'identifier plus tard
lesquelles ont été cochées par le visiteur.
Vous pouvez faire en sorte qu'une case soit cochée par défaut, avec l'attribut checked : <input
type="checkbox" name="choix" checked="checked" >.

Page 84 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Notez qu’en XHTML il faut écrire checked="checked" même si c'est un peu redondant. Dans tous les cas,
la case sera cochée.
14.4.2. Insérez des boutons radio avec <input type="radio">

Les boutons radio permettent au visiteur de faire un choix (et un seul) parmi une liste de possibilités. Il y a
une petite difficulté supplémentaire par rapport aux cases à cocher : il faut organiser les boutons radio en
groupes.
Les options d'un même groupe possèdent le même nom, name, mais chaque option doit avoir une valeur
(value) différente.

La balise à utiliser est toujours <input>, avec cette fois la valeur radio pour l'attribut type :

<form method="get" action="">

<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br>
<input type="radio" name="age" value="moins15" id="moins15"> <label
for="moins15">Moins de 15 ans</label><br>
<input type="radio" name="age" value="medium15-25" id="medium15-25"> <label
for="medium15-25">15-25 ans</label><br>
<input type="radio" name="age" value="medium25-40" id="medium25-40"> <label
for="medium25-40">25-40 ans</label><br>
<input type="radio" name="age" value="plus40" id="plus40"> <label for="plus40">Plus
de 40 ans</label>
</p>
</form>
Ce qui donne :

Une liste à choix unique

Remarque : Le fait d’avoir donné le même nom pour chaque option de la liste permet au navigateur de
savoir de quel groupe votre sélection fait partie. Essayez d'enlever les attributs name, vous verrez qu'il
devient possible de sélectionner tous les éléments d'options. Or, ce n'est pas ce que l'on veut ; c'est pour
cela qu'on les lie entre eux en leur donnant un nom identique.
Vous noterez que cette fois on a choisi un id différent de name.
En effet, les valeurs de name étant identiques, on n'aurait pas pu différencier les id.
Si vous avez deux zones d'options différentes, il faut donner un name unique à chaque groupe :

<form method="get" action="">

<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br>
<input type="radio" name="age" value="moins15" id="moins15"> <label
for="moins15">Moins de 15 ans</label><br>
<input type="radio" name="age" value="medium15-25" id="medium15-25"> <label
for="medium15-25">15-25 ans</label><br>
<input type="radio" name="age" value="medium25-40" id="medium25-40"> <label
for="medium25-40">25-40 ans</label><br>
<input type="radio" name="age" value="plus40" id="plus40"> <label for="plus40">Plus
de 40 ans</label>
</p>
<p>
Page 85 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Sur quel continent habitez-vous ?<br>
<input type="radio" name="continent" value="europe" id="europe"> <label
for="europe">Europe</label><br>
<input type="radio" name="continent" value="afrique" id="afrique"> <label
for="afrique">Afrique</label><br>
<input type="radio" name="continent" value="asie" id="asie"> <label
for="asie">Asie</label><br>
<input type="radio" name="continent" value="amerique" id="amerique"> <label
for="amerique">Amérique</label><br>
<input type="radio" name="continent" value="oceanie" id="oceanie"> <label
for="oceanie">Océanie</label>
</p>
</form>
Ce qui donne :

Deux listes à la suite

14.4.3. Insérer une liste déroulante avec les balises <select> et <option>

Le fonctionnement est un peu différent :

1. On utilise la balise <select> </select> pour indiquer le début et la fin de la liste déroulante.
2. On ajoute l'attribut name à la balise pour donner un nom à la liste.
3. Puis, à l'intérieur du <select> </select>, on place plusieurs balises <option> </option> (une
par choix possible), pour donner à chacune d'elles un attribut value afin d'identifier ce que le
visiteur a choisi :

4. <form method="get" action="">

5. <p>
6. <label for="pays">Dans quel pays habitez-vous ?</label><br>
7. <select name="pays" id="pays">
8. <option value="espagne">Espagne</option>
9. <option value="royaume-uni">Royaume-Uni</option>
10. <option value="canada">Canada</option>
11. <option value="japon">Japon</option>
12. </select>
13. </p>
14. </form>
Si vous voulez qu'une option soit sélectionnée par défaut, utilisez l'attribut selected :

<option value="canada" selected>Canada</option>

À vous d'essayer pour voir ce que ça donne :

Page 86 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Une liste déroulante
Entraînez-vous à manipuler tous ces éléments d’option avec ce code :

HTML :
<form method="get" action="">
<p>
<label for="prenom">Votre prénom :</label>
<input type="text" name="prenom" id="prenom" placeholder="Ex. : Mathieu" size="30"
maxlength="20">
</p>
<p>
<label for="ameliorer">Des conseils pour améliorer mon site ?</label><br>
<textarea name="ameliorer" id="ameliorer"></textarea>
</p>

<p>
Cochez les aliments que vous aimez manger :<br>
<input type="checkbox" name="frites" id="frites"> <label
for="frites">Frites</label><br>
<input type="checkbox" name="steak" id="steak"> <label for="steak">Steak</label><br>
<input type="checkbox" name="epinards" id="epinards"> <label
for="epinards">Épinards</label><br>
<input type="checkbox" name="huitres" id="huitres"> <label
for="huitres">Huîtres</label>
</p>
<p>
Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br>
<input type="radio" name="age" value="moins15" id="moins15"> <label
for="moins15">Moins de 15 ans</label><br>
<input type="radio" name="age" value="medium15-25" id="medium15-25"> <label
for="medium15-25">15-25 ans</label><br>
<input type="radio" name="age" value="medium25-40" id="medium25-40"> <label
for="medium25-40">25-40 ans</label><br>
<input type="radio" name="age" value="plus40" id="plus40"> <label for="plus40">Plus de
40 ans</label>
</p>
<p>
<label for="pays">Dans quel pays habitez-vous ?</label><br>
<select name="pays" id="pays">
<option value="espagne">Espagne</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada" selected>Canada</option>
<option value="japon">Japon</option>
</select>
</p>
</form>

CSS :
* {

Page 87 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 font-family: Arial;
}
14.5. En résumé

 Un formulaire est englobé par la balise XHTML <form></form> à laquelle on ajoute les attributs
method et action.
 On utilise ensuite d'autres balises XHTML pour permettre au visiteur du site de saisir des
informations :
o la balise orpheline <input> pour un champ de saisie monoligne ;
o la balise en paire <textarea> </textarea> pour un champ de saisie multiligne ;
o la balise en paire <select> </select> suivi d'options avec la balise en paire <option>
</option> pour une liste déroulante.
 Le champ <input> peut également être configuré pour saisir d'autres types de données : e-mail,
URL, numéro de téléphone, date, etc.
 Un label peut être relié à n'importe quel input avec l'attribut for correspondant à l'attribut name
pour le champ utilisé.

Page 88 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
PARTIE III : RENDRE UNE PAGE WEB DYNAMIQUE AVEC JAVASCRIPT
Introduction
Il existe de nombreux langages de programmation aujourd’hui, et dans ce chapitre, vous allez apprendre les
bases d’un langage de programmation appelé JavaScript, qui est de loin le langage de programmation le
plus couramment utilisé dans les pages Web.
Le but de cette partie est de vous en apprendre de quoi commencer à utiliser ces scripts dans vos pages
Web et aussi voir comment ils fonctionnent. Vous devriez même être en mesure de personnaliser ces scripts
et d’écrire vos propres scripts de base en fonction de ce que vous apprendrez dans ces chapitres.
Comme vous le verrez, JavaScript donne aux développeurs Web un langage de programmation à utiliser
dans les pages Web qui leur permet d’effectuer des tâches telles que les suivantes :
 Lire des éléments de documents et écrire de nouveaux éléments et du texte dans des documents
 Manipuler ou déplacer du texte
 Effectuer des calculs mathématiques sur des données
 Réagir à des événements, tels qu’un utilisateur qui clique sur un bouton
 Récupérer la date et l’heure actuelles de l’ordinateur d’un utilisateur ou de la dernière modification
d’un document
 Déterminer la taille de l’écran, la version du navigateur ou la résolution de l’écran de l’utilisateur
 Effectuer des actions basées sur des conditions telles que l’alerte des utilisateurs s’ils saisissent des
informations incorrectes dans un formulaire
Le langage JavaScript, créé en 1995 par Brendan Eich (pour la Netscape Communication Corporation), est
un langage de programmation de scripts orienté objet. Si le terme Java est commun au langage du même
nom, le JavaScript est radicalement différent (bien qu’il y ait quelques similitudes).
On crée une instruction Javascript à l'intérieur des balises <script> </script>. Nous allons découvrir
comment dans le premier chapitre.

Chapitre 15 Comment intégrer un script dans vos pages XHTML

15.1 Position du code JavaScript dans une page XHTML

JavaScript peut être intégré dans une page ou placé dans un fichier de script externe (un peu comme CSS).
Mais pour fonctionner dans le navigateur, le navigateur doit avoir JavaScript activé. (Les principaux
navigateurs permettent aux utilisateurs de désactiver JavaScript, bien que très peu de gens le fassent.)
Vous ajoutez des scripts à votre page à l'intérieur de l'élément <script>. L'attribut type sur la balise
d'ouverture <script> indique en HTML quel langage de script sera trouvé à l'intérieur de l'élément, donc
pour JavaScript, vous utilisez la valeur text/JavaScript. Mais en XHTML cet attribut n’est pas
obligatoire. Mais dans ce cours nous allons le mettre afin de nous y habituer.
Remarque : Il existe plusieurs autres langages de script qui font un travail très similaire à JavaScript (tels que
VBScript ou Perl), mais JavaScript est le principal langage de programmation utilisé dans les navigateurs Web.
Exemple 1 : Ici, vous pouvez voir un script très simple qui écrira les mots "Mon premier JavaScript" dans la
page (P3C1_EX01.html) :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionnal//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitionnal.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="fr" lang="fr">

<body>
<h1>XHTML et Javascript</h1>
<p>
<script type="text/javascript" >
document.write("Mon premier JavaScript") ;
</script>
</p>
</body>

Page 89 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
</html>
Dans ce cas, nous utilisons la méthode write() pour ajouter une nouvelle ligne de texte dans la page Web (et
la page Web est représentée à l'aide de l'objet document). Le texte est ajouté dans la page exactement à
l’endroit où le script est écrit. La figure 3.1. suivante montre à quoi ressemblerait cette page simple.

Figure 3.1 : Résultat d’un JavaScript simple sur une page web
L'endroit où vous mettez votre JavaScript dans une page est très important. Si vous le mettez dans le corps
d'une page — comme dans cet exemple, il se déclenchera (ou s'exécutera) au chargement de la page. Parfois,
cependant, vous voudrez un script prêt à être utilisé dès que la page est chargée, ou vous pouvez utiliser le
même script dans plusieurs parties de la page, auquel cas il faut le placer à l'intérieur de l'élément <head>
sur la page (parce que les scripts dans l'en-tête se chargent avant l'affichage de la page). Les scripts qui
vivent dans l'en-tête d'une page sont déclenché (ou appelé) par un événement tel que la fin du chargement
de la page ou lorsqu'un visiteur appuie sur le bouton Soumettre sur un formulaire.
Vous pouvez également écrire du JavaScript dans des documents externes portant l'extension de fichier .js
(de la même manière que nous avons créé des feuilles de style externes). C'est une option particulièrement
intéressante car :
 Si votre script est utilisé par plus d'une page, vous n'avez pas besoin de répéter le script dans
chaque page qui l'utilise.
 Si vous souhaitez mettre à jour votre script, vous n'avez qu'à le modifier à un seul endroit.
 Cela rend la page XHTML plus propre et plus facile à lire.
Lorsque vous placez votre JavaScript dans un fichier externe, vous devez utiliser l'attribut src sur la balise
<script> ; la valeur de l'attribut src doit être une URL absolue ou relative pointant vers le fichier
contenant le JavaScript. Par exemple :
<script type="JavaScript" src="scripts/validation.js"></script>
Il y a donc trois endroits où vous pouvez mettre vos JavaScripts, et un seul document XHTML peut utiliser
tous les trois parce qu'il n'y a pas de limite au nombre de scripts qu'un document peut contenir :
 Dans le <head> d'une page : Ces scripts seront appelés lorsqu'un événement les déclenchera.
 Dans le <body> d'une page : ces scripts s'exécuteront au fur et à mesure du chargement de la page.
 Dans un fichier externe : si le lien est placé à l'intérieur de l'élément <head>, le script est traité de
la même manière que lorsque le script vit dans l'en-tête du document en attendant qu'un événement
le déclenche, alors que s'il est placé dans l'élément <body> il agira comme un script dans la section
body et s’exécutera au chargement de la page.
Parfois, vous verrez des exemples de JavaScript écrits dans un commentaire XHTML comme ceci :
<script type="text/javascript">
<!--
document.write("Mon premier JavaScript")
//-->
</script>
Cela a été fait parce que certains anciens navigateurs ne prennent pas en charge JavaScript, et donc le
commentaire leur cache le script. Tous les navigateurs prenant en charge JavaScript ignorent simplement
ces commentaires dans la balise <script>. Notez comment deux barres obliques (//) qui précèdent les
caractères de fermeture du commentaire XHTML. Il s'agit en fait d'un commentaire JavaScript qui empêche
le JavaScript d'essayer de traiter le caractère de fin de commentaire -->.
En XHTML, vous ne devez pas utiliser de caractères tels que les crochets angulaires ([ ])pour autre chose
que des balises. Si vous le faites, ils sont censés aller dans quelque chose appelé une section CDATA (qui
indique au navigateur que le contenu n'est pas un balisage et ne doit pas être traité comme un balisage).
Parce que JavaScript utilise les crochets angulaires, même si cela ne posera pas de problème dans les
principaux navigateurs, vous pouvez placer vos scripts dans un Section CDATA comme celle-ci pour une
précision technique (et pour s'assurer que votre page est validée) :
<script type="text/javascript">
//<![CDATA[
Page 90 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 ...
]]>
</script>
Enfin, si vous deviez écrire un site qui devrait fonctionner sur de très vieux navigateurs, une bonne
alternative pour vous soucier des navigateurs qui ne supportent pas les scripts est d'utiliser des scripts
externes car si le navigateur ne peut pas traiter la balise <script>, il n'essaiera même pas de charger le
document contenant le script.

15.2. Les commentaires en JavaScript

Vous pouvez ajouter des commentaires à votre code JavaScript de deux manières. La première voie, que
vous avez déjà vue, vous permet de commenter n'importe quoi sur une ligne après les marques de
commentaire (//). Ici, tout ce qui apparaît sur la même ligne après les deux caractères de barre oblique est
traité comme un commentaire :
<script type="text/javascript">
document.write("My first JavaScript") // ceci est un commentaire JavaScript
</script>
Vous pouvez également commenter plusieurs lignes en utilisant la syntaxe suivante, en écrivant le
commentaire entre les caractères d'ouverture /* et les caractères de fermeture */ comme ceci :
<script type="text/javascript">
document.write("My first JavaScript")
/* Toute cette section est commentée
afin qu'il ne soit pas traité comme faisant
partie du script. */
</script>
Ceci est similaire aux commentaires en CSS.
Remarque : Comme pour tout code, il est recommandé de commenter clairement votre code, même si vous êtes
la seule personne susceptible de l'utiliser, car ce qui semblait clair lorsque vous avez écrit un script peut ne pas
l'être lorsque vous y revenez plus tard.

15.3. La balise <noscript>

L'élément <noscript> offre un contenu alternatif pour les utilisateurs qui ont désactivé JavaScript sur leur
navigateur. Cette balise peut contenir tout code XHTML que l'auteur veut voir dans le navigateur si
l'utilisateur n'a pas JavaScript activé.
Pour être plus précis, les recommandations du W3C disent que le contenu de cet élément doit être affiché
uniquement lorsque le navigateur ne prend pas en charge le langage de script requis ; cependant, les
fabricants de navigateurs ont décidé que cela devrait également fonctionner lorsque les scripts sont
désactivés.

15.4. Exercice P3C1 : Création d'un JavaScript externe

Vous avez déjà vu un exemple basique d'un JavaScript qui écrit sur une page. Dans cet exrcice, vous allez
déplacer ce code vers un fichier externe. Le fichier externe va être utilisé pour écrire du texte sur la page.
1. Ouvrez votre éditeur et saisissez le code suivant :
document.write("Voici du texte d'un fichier externe.");
2. Enregistrez ce fichier sous le nom external.js.
3. Ouvrez une nouvelle page dans votre éditeur et ajoutez ce qui suit. Notez que l'élément <script> est vide
cette fois, mais porte l'attribut src dont la valeur est le fichier JavaScript (tout comme on le fait sur
l'élément <img>). Il peut s'agir d'une URL relative ou absolue.
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionnal//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitionnal.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="fr" lang="fr">

Page 91 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <head></head>
<body>
<p>
<script src="external.js" type="text/JavaScript">
</script>
<noscript>
Ceci ne s'affiche que si le navigateur a désactivé JavaScript.
</noscript>
</p>
</body>
</html>
4. Enregistrez cet exemple sous le nom EXO_P3C1.html et ouvrez-le dans votre navigateur. Vous devriez
voir quelque chose comme la figure 3.2 suivante :

Figure 3.2 : Résultat d’un JavaScript issu d’un fichier externe sur une page web
Vous pouvez utiliser cette approche pour inclure des JavaScripts externes dans le <head> ou le <body> d'un
document. Si vous les placez dans le <body> du document, comme dans cet exemple, ils sont exécutés
comme au chargement de la page - comme si le script était réellement dans la page à cet endroit précis. Si
vous les placez dans le <head>, alors ils se chargeront lors du chargement de la page et seront déclenchés
par un événement.
Retenez enfin que prendre l’habitude d’utiliser fichiers JavaScript externes pour les fonctions et les placer
dans l'élément <script> dans le <head> du document permet de réutiliser ces scripts sur différents sites que
vous développez et assure que vos documents XHTML se concentrent sur le contenu plutôt que d'être
jonchés de scripts.

15.5. En résumé
 Un document XHTML peut comporter plusieurs scripts. Les JavaScripts peuvent se mettre à trois
endroits différents dans un document XHTML :
o Dans le <head> d'une page : Ces scripts seront appelés lorsqu'un événement les
déclenchera.
o Dans le <body> d'une page : ces scripts s'exécuteront au fur et à mesure du chargement de
la page.
o Dans un fichier externe : si le lien est placé à l'intérieur de l'élément <head>, le script est
traité de la même manière que lorsque le script vit dans l'en-tête du document en attendant
qu'un événement le déclenche, alors que s'il est placé dans l'élément <body> il agira comme
un script dans la section body et s’exécutera au chargement de la page.
 En javaScript, il y a deux façons différentes de commenter les codes :
o Après les doubles slash (//) pour les commentaires sur une seule ligne ;
o Entre /* et */ pour les commentaires qui tiennent sur plusieurs lignes.
 On utilise l'élément <noscript> pour offrir un contenu alternatif pour les utilisateurs qui ont
désactivé JavaScript sur leur navigateur.

Page 92 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 16 Le modèle d'objet de document ou DOM
(Document Object Model en Anglais)

16.1. Le DOM, qu’est-ce que c’est ?

Comme je l'ai mentionné au début du chapitre, JavaScript en lui-même ne fait pas grand-chose de plus que
vous permettre d’effectuer des calculs ou travailler avec des chaînes de base. Afin de rendre un document
plus interactif, le script doit pouvoir accéder au contenu du document et savoir quand l'utilisateur interagit
avec lui. Le script le fait en interagissant avec le navigateur en utilisant les propriétés, les méthodes et les
événements définis dans l'interface appelée Document Object Model (DOM).
Le modèle d'objet de document, ou DOM, représente la page Web qui est chargée dans le navigateur à l'aide
d'une série d'objets. L'objet principal est l'objet document, qui à son tour contient plusieurs autres objets
enfants.
Le DOM explique quelles propriétés d'un document un script peut récupérer et lesquelles il peut modifier ; il
définit aussi certaines méthodes qui peuvent être appelées pour effectuer une action sur le document.
La figure 3-3 vous montre une illustration du modèle d'objet de document HTML de niveau 0 (comme vous
pouvez le constater, il y a différents niveaux du DOM).

Figure 3-3 : illustration du modèle d'objet de document (DOM) HTML de niveau 0

Comme vous pouvez le voir sur la Figure 3-3, l'objet document représente l'ensemble du document, puis
chacun des objets enfants représentent une collection de balises similaires dans ce document :
 La collection d'ancres (anchor) représente toutes les ancres d'un document vers lesquelles vous
pouvez créer un lien (balises <a> avec un attribut nom).
 La collection d'applet représente toutes les applets d'un document.
 La collection area représente toutes les images cliquables qui utilisent une balise <area> dans le
document.
 La collection de formulaires (form) contient toutes les balises <form> du document.
 La collection d'images (image) représente toutes les images d'un document.
 La collection de liens (link) représente tous les liens hypertexte d'une page.
La collection de formulaires a également des objets enfants pour représenter chacun des différents types de
contrôles de formulaire qui peut apparaître sur un formulaire : Button, CheckBox, FileUpload,
Hidden, Option, Password, Radio, Reset, Sélect, Submit, Text et TextArea.
Pour mieux comprendre comment accéder au document à l'aide du DOM, jetez un œil au document simple
ci-après, qui contient un formulaire et deux liens :
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionnal//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitionnal.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="fr" lang="fr">

Page 93 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 <head></head>
<body>
<h1>Inscription Utilisateur</h1>
<form name="frmLogin" action="login.aspx" method="post">
Utilisateur &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="txtUsername" size="12" />
<br />
Mot de passe <input type="password" name="pwdPassword" size="12" /> <br />
<input type="submit" value="Se Connecter" />
</form>
<p>Nouvel Utilisateur? <a href="register.aspx">Inscrivez-vous ici</a> |
<a href="lostPassword.aspx">Réinitialiser mot de passe</a>.</p>
</body>
</html>
Le résultat de ce script apparaît sur la figure 3-4 ci-après :

Figure 3-4
Le DOM permettrait à un script, comme le script ci-dessus, d'accéder :
 au contenu du formulaire dans le cadre de la collection de formulaires (form) ;
 aux deux liens dans le cadre de la collection de liens (link).

16.2. Accès aux valeurs à l'aide de la notation par points (.) ou Dot Notation en Anglais
Afin d'accéder aux différents objets du DOM, vous listez les objets dans l'arborescence illustrée à la Figure
3-3, en commençant par l'objet document, en descendant jusqu'à l'objet qui contient les données que vous
recherchez. Chaque objet est séparé par un point (.) ; par conséquent, cela s'appelle une notation par
points.
Par exemple, pour accéder au premier lien dans le document, vous devez accéder à l'objet link, qui est un
enfant de l'objet document, vous pouvez donc utiliser quelque chose comme ceci :
document.links[0].href
Il y a quatre parties dans cette déclaration, dont trois sont séparées par des points, pour accéder au premier
lien :
 Le mot document indique que j'accède à l'objet document.
 Le mot links correspond à la collection de liens (après tout, cet exemple consiste à récupérer la
valeur du premier lien dans le document).
 Le [0] indique que je veux le premier lien du document. Plutôt déroutant, les éléments d'une
collection sont numérotés à partir de 0 plutôt que 1, ce qui signifie le deuxième lien dans la
collection de liens est représenté par [1], le troisième par [2], etc.
 Enfin, j'ai indiqué que je souhaitais récupérer la propriété href pour ce lien.
Chaque objet a des propriétés différentes qui correspondent à ce type d'élément ; par exemple, les liens ont
des propriétés telles que la propriété href qui accède à la valeur de l'attribut href sur cet élément <a>. De
même, un objet <textarea> a des propriétés telles que cols, disabled, readOnly et rows, qui
correspondent aux attributs de cet élément.
Plutôt que d'utiliser les noms du type d'objet (tels que des formulaires et des liens), vous pouvez utiliser la
valeur des attributs name sur les éléments pour naviguer dans le document. Par exemple, la ligne suivante
demande la valeur de la case mot de passe : document.frmLogin.pwdPassword.value
Encore une fois, il y a quatre parties dans cette déclaration :

Page 94 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  L'objet document revient en premier car il représente la page entière (il s'agit de l'objet de niveau
supérieur).
 Le nom du formulaire, frmLogin.
 Il est suivi du nom du contrôle de formulaire, pwdPassword.
 Enfin, la propriété qui m'intéresse est la valeur de la boîte de mot de passe, et cette propriété est
appelée value.
Ces deux approches vous permettent de naviguer dans un document, de choisir les éléments et propriétés
des éléments qui vous intéressent. Ensuite, vous pouvez récupérer leurs valeurs, effectuer des calculs sur
eux, et fournir des valeurs alternatives.

16.3. L'objet document

Dans cette section, nous allons examiner de plus près l'objet document — c'est l'objet principal du DOM et
représente le document dans son ensemble (et vous permet donc d'accéder à d'autres éléments enfants).
Comme vous le savez déjà, un objet peut avoir des propriétés qui peuvent vous renseigner sur l'objet et des
méthodes pour effectuer une action sur cet objet.
Une fois que vous avez compris comment travailler avec un objet, il est beaucoup plus facile de travailler
avec toutes sortes d'objets — et vous rencontrerez de nombreux types d'objets différents lorsque vous
commencerez à programmer.
16.3.1. Propriétés de l'objet document
Dans le tableau suivant, vous pouvez voir les propriétés de l'objet document. Plusieurs de ces propriétés
correspondent aux attributs qui seraient portés par l'élément <body>, qui contient le document.
De nombreuses propriétés peuvent être définies ainsi que lues. Si vous pouvez définir une propriété, il s'agit
d'une propriété en lecture/écriture (parce que vous pouvez le lire ou le modifier), alors que celles que vous
ne pouvez que lire sont dites en lecture seule.
Vous pouvez voir quelles propriétés peuvent être lues et lesquelles peuvent être écrites dans la dernière
colonne du tableau qui suit.
Nom de la propriété Objectif (Accès) Lecture/écriture
Spécifie les couleurs des liens
alinkColor (comme l’attribut obsolète alink Lecture/écriture
sur la balise <body>).
Spécifie la couleur d'arrière-plan
bgcolor (comme l’attribut obsolète Lecture/écriture
bgcolor sur la balise <body>).
Couleur de premier plan/texte
fgcolor (comme l’attribut text obsolète de Lecture/écriture
la balise <body>).
La date à laquelle le document a
été modifié. (Ceci est
généralement envoyé par le
lastModified Lecture seule
serveur Web dans des choses
connues sous le nom d’ en-têtes
http que vous ne voyez pas).
Spécifie les couleurs des liens
linkColor (comme l’attribut link obsolète Lecture/écriture
de la balise <body>).
L'URL de la page d’origine d’où
sont venus les utilisateurs s'ils
referrer Lecture seule
ont cliqué sur un lien. C'est vide
s'il n'y a pas de référenceur.
Le titre de la page dans la balise Lecture seule (jusqu'à IE 5 et
Title
<title>. Netscape 6 et versions ultérieures)
La couleur des liens qui ont été
vlinkColor Lecture/écriture
cliqués (comme l’ attribut vlink

Page 95 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 obsolète de l'élément <body>).
Remarque : Les propriétés qui correspondent aux attributs obsolètes de l'élément <body> doivent
généralement être évité car CSS doit être utilisé pour styliser le texte, les liens et les arrière-plans.
Pour accéder à l'une des propriétés, vous devez utiliser à nouveau la notation par points, de sorte que vous
pouvez accéder au titre d'un document ainsi : document.title
Ou vous pouvez connaître la date à laquelle un document a été modifié pour la dernière fois comme suit :
document.lastModified
Notez que si le serveur ne supporte pas la propriété lastModified, IE affichera la date actuelle, tandis que
d'autres navigateurs afficheront souvent le 1er janvier 1970 (qui est la date à partir de laquelle la plupart
des ordinateurs calculent toutes les dates).
16.3.2. Méthodes de l'objet document
Les méthodes effectuent des actions et sont toujours écrites suivies d'une paire de parenthèses. A l'intérieur
des parenthèses de certaines méthodes, vous pouvez voir des éléments appelés paramètres ou arguments,
qui peuvent affecter l'action effectuée par la méthode.
Par exemple, dans le tableau qui suit, vous pouvez voir deux méthodes qui écrivent de nouveaux contenus
sur la page Web. Ces deux méthodes doivent savoir ce qui doit être écrit dans la page, elles prennent donc
une chaîne comme argument (une chaîne est une séquence de caractères pouvant inclure des lettres, des
chiffres, des espaces et ponctuation), et la chaîne est ce qui est écrit dans la page.
Nom de la méthode Objectif
Vous permet d'ajouter du texte ou des éléments
write(string)
dans un document
Identique à write(), mais ajoute une nouvelle ligne
à la fin de la sortie (comme si vous aviez appuyé sur
writeln(string)
la touche Entrée après avoir terminé ce que vous
aviez écrit)
Vous avez déjà vu la méthode write() de l'objet document dans l’exemple P3C1_EX01.html, qui montrait
comment il peut être utilisé pour écrire du contenu dans un document :
document.write('Ceci est un document XHTML');
Vous pouvez également mettre ce qu’on appelle une expression en tant que paramètre de la méthode
write(). Par exemple, ce qui suit écrira la chaîne de texte Dernière modification de la page suivie de la date
de dernière modification du document.
document.write('Dernière modification de la page le ' + document.lastModified);
Vous en saurez plus sur les expressions plus loin dans ce chapitre, mais dans ce cas, l'expression est
évaluée en (ou résulte en) une chaîne. Par exemple, vous pouvez voir quelque chose comme Dernière
modification de la page le 02/12/2023 16:00:01.
Maintenant que vous avez vu les propriétés et les méthodes de l'objet document, regardons les propriétés
et les méthodes de certains des autres objets, aussi.

16.4. La collection de formulaires (<form>)

La collection de formulaires contient des références correspondant à chacun des éléments <form> de la
page. Ça peut sembler un peu compliqué, mais vous pouvez probablement imaginer une page Web qui a
plus d'une balise <form> — un formulaire de connexion, un formulaire d'inscription pour les nouveaux
utilisateurs et un champ de recherche sur la même page — le DOM traite cela en ayant un objet de
formulaire séparé pour représenter chacun des formulaires individuels.
Imaginez que vous souhaitiez utiliser un script pouvant accéder à l'adresse de la page à laquelle le
formulaire de connexion envoie ses données. Dans le document XHTML, vous regarderiez l'attribut action
sur la balise <form> d'ouverture. Il existe une propriété action correspondante sur l'objet de formulaire
form du DOM, qui contient la valeur de cet attribut. Ainsi, vous auriez besoin d'accéder à l'objet de
formulaire qui représente le formulaire de connexion, puis de récupérer la valeur de la propriété appelée
action.
Si le formulaire de connexion est le premier formulaire du document, vous pouvez utiliser le numéro d'index
suivant pour sélectionner le formulaire approprié et accéder à la valeur de son attribut action (rappelez-

Page 96 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
vous que les numéros d'index commencent à 0 pour le premier formulaire, 1 pour le second formulaire, 2
pour le troisième, etc.) : document.forms[0].action
Alternativement, vous pouvez accéder directement à cet objet formulaire en utilisant son nom (ceci est
généralement considéré comme l’option préférée car si un autre formulaire était ajouté à la page, cela
pourrait casser le script) : document.frmLogin.action
Le formulaire que vous sélectionnez possède son propre objet avec des propriétés et des méthodes (chaque
propriété correspond aux attributs de l'élément <form> de votre page Web). Une fois que vous avez vu les
propriétés et les méthodes des formulaires, vous verrez alors les objets, propriétés et méthodes qui
correspondent aux différents types de contrôle de formulaire.
16.4.1. Propriétés des objets de formulaire (<form>)
Le tableau suivant répertorie les propriétés des objets de formulaire ; comme vous le verrez, la plupart
d'entre eux correspondent à des attributs de l'élément <form>.
Nom de la propriété Objectif (Accès) Lecture/écriture
Spécifie la valeur de l'attribut
action Lecture/écriture
action sur l’élément <form>.
Donne le nombre total de
length contrôles de formulaire qui sont Lecture seule
dans ce formulaire.
La valeur de l'attribut method de
method Lecture/écriture
l'élément <form> (get ou post).
La valeur de l'attribut name de
name Lecture seule
l'élément <form>.
La valeur de l'attribut target de
target Lecture/écriture
l'élément <form>.
16.4.2. Méthodes des objets de formulaire (<form>)
Le tableau suivant répertorie les méthodes des objets de formulaire.
Nom de la méthode Objectif
Réinitialise tous les éléments du formulaire à leurs
reset()
valeurs par défaut
submit() Soumet le formulaire
Remarque : Un élément <form> peut avoir un attribut appelé onsubmit dont la valeur est un script qui doit
s'exécuter lorsque l'utilisateur appuie manuellement sur le bouton Soumettre. Si JavaScript est utilisé pour
soumettre un formulaire, cet attribut est ignoré.

16.5. Éléments de formulaire

Lorsque vous accédez à un formulaire, vous souhaitez généralement accéder à un ou plusieurs de ses
éléments. Chaque élément <form> a un objet de collection d'éléments en tant que propriété, qui représente
tous les éléments de ce formulaire. Ceci fonctionne de manière similaire à la collection de formulaires ; il
vous permet d'accéder aux éléments que vous voulez par index (un index étant un nombre correspondant à
leur ordre dans le document qui commence par 0). Alternativement, vous pouvez utiliser leurs noms.
Voici quelques-unes des choses que vous pourriez vouloir faire avec les éléments d'un formulaire :
 Champs de texte : lire les données saisies par un utilisateur ou écrire un nouveau texte dans ces
éléments.
 Cases à cocher et boutons radio : tester s'ils sont cochés et les cocher ou les décocher.
 Boutons : les désactiver jusqu'à ce qu'un utilisateur ait sélectionné une option.
 Cases de sélection : Sélectionner une option ou voir quelle option l'utilisateur a sélectionnée.
16.5.1. Propriétés des éléments de formulaire
Le tableau suivant répertorie les propriétés correspondant aux éléments susceptibles d'apparaître sur un
formulaire.
Nom de la propriété S'applique à Objectif (Accès) Lecture/écriture
checked Cases à cocher et Renvoie true lorsqu'il est Lecture/écriture

Page 97 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 boutons radio coché ou false lorsqu'il
ne l'est pas.
Renvoie true lorsqu'il est
Tous sauf les éléments désactivé et que
disabled Lecture/écriture
masqués l'utilisateur ne peut pas
interagir avec
Renvoie une référence au
form Tous les éléments formulaire dont il fait Lecture seule
partie
Nombre d'options dans
length Cases de sélection Lecture seule
l'élément <select>
Accède à la valeur de
name Tous les éléments Lecture seule
l'attribut name de l'élément
Renvoie le numéro d'index
selectedIndex Cases de sélection de l'élément actuellement Lecture/écriture
sélectionné
Renvoie le type du contrôle
type Tous Lecture seule
de formulaire
Accède à l'attribut value
de l'élément ou du
Value Tous Lecture/écriture
contenu d'une saisie de
texte
Remarque : Si vous souhaitez que l'un des contrôles de formulaire soit désactivé jusqu'à ce que quelqu'un ait
effectué une action — par exemple, si vous souhaitez désactiver le bouton Soumettre jusqu'à ce que
l'utilisateur ait accepté les termes et conditions - vous devez désactiver le contrôle de formulaire dans le script
lors du chargement de la page, plutôt que de le désactiver dans le contrôle de formulaire lui-même en utilisant
XHTML au cas où l'utilisateur aurait désactivé JavaScript (si tel était le cas, ils ne pourraient pas activer le
bouton Soumettre). Vous en saurez plus sur ce sujet au prochain chapitre.
16.5.2. Méthodes des éléments de formulaire
Le tableau suivant répertorie les méthodes des éléments de formulaire.
Nom de la méthode Appliquée à (Accès) Lecture/écriture
Prend le focus de l’élément
blur() Tous sauf les éléments masqués. actuellement actif pour l’élément
suivant dans l'ordre de tabulation
Tous sauf les éléments de type Simule le clic de la souris sur
click()
text. l’élément
focus() Tous sauf les éléments masqués. Donne le focus à l'élément
Les éléments de type text sauf
select() Sélectionne le texte dans l'élément
ceux qui sont masqués.

16.6. Exercice P3C2 : Collecte de données de formulaire

Dans cet exercice, vous allez récupérer la valeur d'une zone de texte et l'écrire dans quelque chose appelé
une boîte d'alerte JavaScript. L'objectif principal de l'exercice est de vous montrer comment la valeur du
formulaire peut être récupéré, bien qu'il vous présente également un événement et la boîte d'alerte
JavaScript.
La boîte d'alerte est créée à l'aide d'une méthode appelée alert() qui fait partie du langage JavaScript (et
non le DOM). Les boîtes d'alerte étaient très courantes sur les sites Web, mais vous ne les voyez plus
autant. Cependant, dans des exemples comme celui-ci, ils sont utiles pour démontrer comment JavaScript
peut accéder aux documents.
Le formulaire simple ne contiendra qu'une seule entrée de texte et un bouton d'envoi. Lorsque vous
saisissez quelque chose dans la zone de texte et cliquez sur le bouton Soumettre, la valeur que vous avez
entrée dans la zone de texte apparaîtra dans la boîte d'alerte. Vous pouvez voir la page une fois que
l'utilisateur a cliqué sur le bouton Soumettre dans la Figure 3-5 ci-dessous.
Page 98 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Figure 3-5
Lorsque vous cliquez sur OK, la boîte d'alerte disparaît.
1. Créez un squelette de document pour une page Transitional XHTML et ajoutez un titre qui explique ce
que l'exemple démontre :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Accès aux données d'un formulaire</title>
</head>
<body>
<h1>Accès aux données d'un formulaire</h1>
</body>
</html>
2. Ajoutez un élément <form> au corps du document (<body>). Le formulaire doit contenir une entrée de
texte pour un nom d'utilisateur et un bouton d'envoi, comme ceci :
<body>
<h1>Accès aux données d'un formulaire</h1>
<form name="frmLogin">
Utilisateur <input type="text" name="txtUsername" size="12" /><br /><br />
<input type="submit" value="Cliquez ici" />
</form>
</body>
3. Ajoutez l'attribut onsubmit à l'élément <form> et donnez-lui la valeur suivante :
<form name="frmLogin" onsubmit="alert(document.frmLogin.txtUsername.value)">
Enregistrez le fichier sous le nom EXO_P3C2.html et ouvrez-le dans votre navigateur. Lorsque vous saisissez
quelque chose dans la zone de saisie de texte et cliquez sur Soumettre, vous devriez voir une boîte d'alerte
comme celle de la Figure 3-5, qui affiche la valeur que vous avez entrée dans la zone de texte.
Lorsque l'événement onsubmit se déclenche (ce qui se produit lorsque l'utilisateur clique sur le bouton
Soumettre), cette simple ligne de script est exécutée. Dans ce cas, la méthode alert() est appelée :
alert(document.frmLogin.txtUsername.value)
La méthode alert(string) vous permet d'écrire une chaîne dans la boîte d'alerte contextuelle. Comme la
méthode write () de l'objet document, que vous avez vu précédemment, la chaîne n'a pas besoin d'être le
texte réel vous souhaitez afficher. Dans cet exemple, plutôt que d'écrire la même chaîne dans la boîte
d'alerte à chaque fois que le script est exécuté, tout ce que l'utilisateur a saisi dans la zone de texte sera
écrit dans la zone d'alerte.
Vous pouvez voir qu'à l'intérieur de alert(), l'entrée de texte a été sélectionnée à l'aide de
document.frmLogin.txtUsername avec la propriété value de ce contrôle de formulaire. Ainsi, la valeur de
l'entrée de texte est écrite dans la boîte d'alerte.
Comme vous l'avez vu, la boîte alert() prend une chaîne comme paramètre (tout comme la méthode
write() que vous avez vu plus tôt), mais nous ne spécifions pas les mots exacts à écrire (nous indiquons
plutôt à la méthode de récupérer ce que l'utilisateur a saisi). Lorsque vous dites à une méthode (telle que la

Page 99 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
méthode alert() ou la méthode write()) exactement ce qu'il faut écrire, vous mettez la valeur entre
guillemets doubles, mais quand vous voulez que le script collecte les informations qu'il doit afficher, vous
n'utilisez pas les guillemets doubles.
Lorsque l'utilisateur clique sur le bouton Soumettre, l'événement onsubmit se déclenche, ce qui crée la boîte
d'alerte qui contient la valeur du texte saisi.

16.7. Collection d'images

La collection d'images fournit des références aux objets image, un représentant chaque image dans un
document. Encore une fois, ceux-ci peuvent être référencés par leur nom ou par leur numéro d'index dans
la collection. Ainsi, l'attribut src de la première image peut être trouvée en utilisant le numéro d'index
comme suit : document.images[0].src
ou en utilisant son nom ; par exemple, si l'image avait un attribut name dont la valeur était imgHome, vous
pourriez accédez-y en utilisant la syntaxe suivante : document.imgHome.src
Il n'y a pas de méthodes pour les objets image dans le DOM de niveau 0, bien qu'il y ait plusieurs
propriétés.
16.7.1. Propriétés de l’objet image
Le tableau suivant répertorie les propriétés de l'objet image.
Nom de la propriété Objectif (Accès) Lecture/écriture
L'attribut border de l’élément
border <img>, spécifiant la largeur de la Lecture/écriture
bordure en pixels.
Indique si une image a été
complete Lecture seule
chargée avec succès
L'attribut height de l'élément
height <img>, spécifiant la hauteur de Lecture/écriture
l'image en pixels.
L'attribut hspace de l'élément
<img>, spécifiant l'espace au-
hspace dessus et au-dessous d'une image Lecture/écriture
pour la séparer de ses éléments
environnants.
L'attribut lowsrc de l'élément
lowsrc <img> (indiquant une version de Lecture/écriture
résolution inférieure de l'image)
name L'attribut name de l'élément <img> Lecture/écriture
L'attribut src de l'élément <img>,
src Lecture/écriture
indiquant où le fichier est situé.
L'attribut vspace de l'élément
<img>, spécifiant l'écart à gauche
vspace et à droite d'une image pour la Lecture/écriture
séparer de ses éléments
environnants.
L'attribut width de l'élément
width <img>, spécifiant la largeur de Lecture/écriture
l'image en pixels.

16.8. Exercice P3C2 : Un survol d'image simple

Dans cet exercice, vous allez voir comment remplacer une image par une autre lorsque l'utilisateur survole r
l'image avec la souris. La plupart des développeurs utilisent désormais CSS pour créer des survols d'image
dans leur code, mais c'est un bon moyen de montrer comment accéder aux propriétés de l'image.
Dans cet exercice, vous allez voir deux images simples, toutes deux disant "cliquez ici". Lorsque la page se
charge, l'image sera en vert avec une écriture blanche, mais dès que l'utilisateur survole l'image, le script
s’exécutera et changera la propriété src de l'image. L'image sera alors rouge avec écriture blanche.
Page 100 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
1. Créez le squelette d'un document Transitional XHTML :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Survol d'image</title>
</head>
<body>
</body>
</html>
2. Ajoutez le lien et l'image suivants dans le corps (<body>) de votre document :
<p>Survolez l'image avec votre souris pour voir l'effet simple au Survol.
<br/>
<a href="">
<img src="images/click_green.gif" width="100" height="50" border="0"
alt="Bouton exemple" name="button" />
</a>
</p>
3. Ajoutez maintenant les attributs de gestionnaire d'événements onmouseover et onmouseout suivants à
l’élément <a> avec les valeurs spécifiées :
<a href=""
onmouseover="document.images.button.src='images/click_red.gif';"
onmouseout="document.images.button.src='images/click_green.gif'">
Lorsque l'utilisateur survole l'image avec la souris, l'événement onmouseover se déclenche et lorsque
l'utilisateur déplace la souris hors de l’image, l'événement onmouseout se déclenche. C'est pourquoi il existe
des attributs distincts qui correspondent à chacun de ces événements, et lorsque l'un de ces deux
événements se déclenche, le script s’exécute et la valeur de l'attribut correspondant est positionnée.
Le script dans les attributs des gestionnaires d'événements onmouseover et onmouseout indique au
navigateur de changer l'attribut src de l'image, et donc une image différente est affichée à l'utilisateur.
Le premier (onmouseover) indique ce qui doit se passer lorsque la souris est placée sur l’image ; le second
(onmouseout) indique ce qu'il faut faire lorsque la souris est retirée de l'image.
Lorsque l'utilisateur place la souris sur l’image, la propriété src de l'image à l'intérieur du lien — nommé en
utilisant la notation document.images.button — est modifié.
4. Enregistrez cet exemple sous le nom P3C2.html et ouvrez-le dans votre navigateur. Passez ensuite votre
souris sur l'image (sans cliquer dessus). Vous devriez voir quelque chose comme la figure 3-6 avec la souris
au-dessus de l'image et hors de l’image.

Figure 3-6

Page 101 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
L'élément <img> doit avoir un attribut name pour que l'image puisse être référencée de cette manière dans le
lien (sinon il faudrait utiliser son index dans la collection d'images). Il est généralement préférable d’utiliser
le nom dans des situations comme celle-ci, plutôt que l'index de cette image dans la collection d'images, car
si vous deviez ajouter une autre image dans le document avant celle-ci, tout le script devrait être retouché.
Notez que si aucun événement n'indique ce qui doit se passer lorsque l'utilisateur retire la souris de l'image,
il resterait rouge au lieu de redevenir vert. Un script de survol d'image est un bon exemple de modification
ou de définition de cette propriété src plutôt que de simplement la lire.

16.9. Différents types d'objets

Vous rencontrerez plusieurs types d'objets en JavaScript, chacun étant responsable d'un ensemble connexe
de fonctionnalités. Par exemple, l'objet document a des méthodes et des propriétés qui se rapportent à
l'objet document ; la collection de formulaires, qui fait partie de l'objet document, traite des informations
concernant l’élément <form> ; et ainsi de suite. Comme vous êtes sur le point de le voir, il peut y avoir
beaucoup d'objets différents, chacun traitant d’un ensemble différent de fonctionnalités et de propriétés.
Alors, voici quelques-uns des types d'objets que vous êtes susceptible de rencontrer :
 Objets DOM du W3C : ils ressemblent à ceux déjà traités dans ce chapitre, bien que dans les
récents navigateurs plusieurs objets supplémentaires sont mis à disposition pour vous permettre de
mieux contrôler un document.
 Objets intégrés : plusieurs objets font partie du langage JavaScript lui-même. Ceux-ci comprennent
l’objet date, qui traite des dates et des heures, et l'objet math, qui fournit des fonctions
mathématiques. Vous en apprendrez plus sur ces objets intégrés plus loin dans ce chapitre.
 Objets personnalisés : si vous commencez à écrire du JavaScript avancé, vous pourriez même
commencer à créer vos propres objets JavaScript contenant des fonctionnalités associées ; par
exemple, vous pourriez avoir un objet nommé validation que vous auriez écrit juste pour valider
vos formulaires.
Bien qu'il ne soit pas possible de couvrir la création d'objets personnalisés dans cette partie, vous en
apprendrez davantage sur les objets un peu plus loin.

16.10. En résumé
 Le DOM explique quelles propriétés d'un document un script peut récupérer et lesquelles il peut
modifier ; il définit aussi certaines méthodes qui peuvent être appelées pour effectuer une action sur
le document.
 L’objet de premier niveau du DOM est l’objet document. Il représente la page Web entière.
 En-dessous de l’objet document on retrouve tous les autres objets qui se trouvent sur la page. Et
chacun a ses objets fils.
 On accède à un objet à travers ses propriétés.
 Un objet dispose de méthodes qui lui permettent d’effectuer des actions. Certaines de ces actions
peuvent être déclenchées suite à des événements.

Page 102 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 17 Commencer à programmer avec JavaScript
Maintenant que vous avez vu comment JavaScript est capable d'accéder à un document dans le navigateur
Web en utilisant le DOM, il est temps d'examiner comment utiliser ces propriétés et méthodes dans les
scripts.
Comme je l'ai mentionné précédemment, un langage de programmation effectue principalement des calculs.
Voici donc les concepts clés que vous devez apprendre afin d'effectuer différents types de calculs :
 Une variable est utilisée pour stocker certaines informations ; c'est comme un peu de la mémoire
de l'ordinateur où vous pouvez stocker des nombres, des chaînes (qui sont une série de caractères)
ou des références à des objets. Vous pouvez ensuite effectuer des calculs pour modifier les données
contenues dans les variables de votre code.
 Les opérateurs exécutent des fonctions sur des variables. Il existe différents types d'opérateurs, par
exemple :
❑ Les opérateurs arithmétiques vous permettent d'effectuer des opérations telles que l'addition
(+) de nombres ou la soustraction (-) l'un de l'autre (à condition qu'il s'agisse de nombres).
❑ Les opérateurs de comparaison vous permettent de comparer deux chaînes et de voir si l'une
est identique à l’autre ou différent (par exemple, si x est égal à y ou si a est supérieur à b).
 Les fonctions sont des parties d'un script qui sont regroupées pour effectuer une tâche spécifique.
Par exemple, vous pourriez avoir une fonction qui calcule les remboursements de prêt, et quand
vous dites à cette fonction de calcul de prêt les informations dont elle a besoin (le capital à
emprunter, le nombre d'années d’échéances du prêt et le taux d'intérêt), la fonction pourra restituer
le paiement mensuel. Les fonctions sont des objets à part entière et sont très similaires aux
méthodes ; l'une des les principales différences sont que les méthodes appartiennent souvent déjà à
un objet, alors que les fonctions sont personnalisées.
 Les instructions conditionnelles vous permettent d'effectuer différentes actions en fonction d'une
condition. Par exemple, une condition peut être de savoir si une variable contenant l'heure actuelle
est supérieure à 12. Si la condition est vraie, le code pour écrire "Bon après-midi" peut être exécuté.
Alors que s'il est inférieur à 12, un bloc de code différent disant "Bonjour" pourrait être affiché.
 Des boucles peuvent être configurées pour qu'un bloc de code s'exécute un nombre de fois spécifié
ou jusqu'à ce qu'une condition soit rencontrée. Par exemple, vous pouvez utiliser une boucle pour
qu'un document écrive votre nom 100 fois.
 Il existe également plusieurs objets JavaScript intégrés qui ont des méthodes d'utilisation pratique.
Par exemple, de la même manière que l'objet document du DOM a des méthodes qui vous permettent
d’écrire dans le document, l'objet JavaScript intégré date peut vous indiquer la date, l'heure ou le
jour de la semaine.
La section suivante examine ces concepts clés plus en détail.

17.1. Les Variables JavaScript

Les variables sont utilisées pour stocker des données. Pour stocker des informations dans une variable,
vous pouvez donner un nom à la variable et placez un signe égal entre lui et la valeur que vous voulez qu'il
ait. Voici un exemple : userName = "Chuck Norris"
La variable s'appelle userName et la valeur est Chuck Norris. Si aucune valeur n'est donnée, alors sa
valeur est indéfinie (undefined).
Le script peut accéder à la valeur de la variable en utilisant son nom (dans ce cas userName). Il peut aussi
changer la valeur.
Vous pouvez créer une variable, mais ne rien y stocker en utilisant le mot-clé var ; ceci s’appelle déclarer
une variable (contrairement à d'autres langages, en JavaScript vous n'avez pas besoin de déclarer une
variable avant de pouvoir l'utiliser, bien que cela soit généralement considéré comme une bonne pratique).
Exemple : var userName
Il y a quelques règles dont vous devez vous souvenir concernant les variables en JavaScript :
 Ils doivent commencer par une lettre ou le caractère de soulignement.
 Les noms de variables sont sensibles à la casse.
 Évitez de donner le même nom à deux variables dans le même document car l'une d'entre elles
pourrait remplacer la valeur de l'autre, créant une erreur. Au cas où vous en ayez besoin, utilisez

Page 103 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 des caractères différents pour les distinguer (par exemple, username et UserName) car il s'agit d'une
source courante de confusion par la suite.
 Essayez d'utiliser des noms descriptifs pour vos variables. Cela rend votre code plus facile à
comprendre (et vous aidera à déboguer votre code en cas de problème).
17.1.1. Affectation d'une valeur à une variable
Lorsque vous voulez affecter une valeur à une variable, vous écrivez d'abord le nom de la variable, puis un
signe égal, et puis à droite la valeur que vous souhaitez affecter à la variable. Vous avez déjà vu plus haut la
déclaration et l’affectation d’une valeur à une variable. Voici donc un exemple d’affectation puis de
modification de valeur à une variable :
userName = "Chuck Norris"
userName = "Bruce Lee"
La variable userName vaut maintenant Bruce Lee.
17.1.2. Durée de vie d'une variable
Lorsque vous déclarez une variable dans une fonction, elle n'est accessible que dans cette fonction. (Vous
apprendrez plus sur les fonctions sous peu.) Une fois la fonction exécutée, vous ne pouvez plus appeler la
variable. Les variables dans les fonctions sont appelées variables locales.
Étant donné qu'une variable locale ne fonctionne qu'au sein d'une fonction, vous pouvez avoir différentes
fonctions qui contiennent des variables du même nom (car chacune n'est reconnue que par cette fonction).
Remarque : Si vous déclarez une variable à l'aide du mot-clé var dans une fonction, elle utilisera de la
mémoire uniquement lorsque la fonction est exécutée, et une fois la fonction terminée, elle n'occupera plus de
mémoire.
Si vous déclarez une variable en dehors d'une fonction, toutes les fonctions de votre page pourront y
accéder. La durée de vie de ces variables commence lorsqu'elles sont déclarées et se terminent lorsque la
page est fermée.
Les variables locales utilisent moins de mémoire et de ressources que les variables au niveau de la page car
elles ne nécessitent que la mémoire pendant le temps que la fonction s'exécute, plutôt que d'avoir à être
créée et mémorisée pour la vie de toute la page.

17.2. Les opérateurs JavaScript

L'opérateur lui-même est un mot-clé ou un symbole qui fait quelque chose à une valeur lorsqu'il est utilisé
dans une expression. Par exemple, l'opérateur arithmétique + additionne deux valeurs ensemble.
Le symbole est utilisé dans une expression avec une ou deux valeurs et effectue un calcul sur la valeur pour
générer un résultat. Par exemple, voici une expression qui utilise l'opérateur de multiplication :
aire = (largeur * longueur)
Une expression est comme une expression mathématique. Les valeurs sont appelées opérandes. Les
opérateurs qui nécessitent un seul opérande (ou valeur) sont parfois appelés opérateurs unaires, tandis
que ceux qui nécessitent deux valeurs sont parfois appelées opérateurs binaires.
Les différents types d'opérateurs JavaScript que vous verrez dans cette section sont :
 Les opérateurs arithmétiques
 Les opérateurs d'affectation
 Les opérateurs de comparaison
 Les opérateurs logiques
 Les opérateurs de chaîne
Voyons en détail chaque type d'opérateur.
17.2.1. Les opérateurs arithmétiques
Les opérateurs arithmétiques effectuent des opérations arithmétiques sur les opérandes. (Notez que dans les
exemples du tableau suivant, x = 10.)
Symbole Description Exemple (x = 10) Résultat
+ Addition x+5 15
- Soustraction x-2 8
* Multiplication x*3 30
Page 104 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 / Division x/2 5
% Modulo (reste de la division) x%3 1
++ Incrémentation (incrémente la variable de 1 — x++ 11
cette technique est souvent utilisée dans les
compteurs)
-- Décrémentation (décrémente la variable de 1) x-- 9
17.2.2. Les opérateurs d'affectation
L'opérateur d'affectation de base est le signe égal, mais cela ne veut pas dire qu'il vérifie si deux valeurs sont
égales. Il est plutôt utilisé pour attribuer une valeur à la variable à gauche du signe égal, comme nous
l’avons vu dans la section précédente, qui a introduit les variables.
L'opérateur d'affectation de base peut être combiné avec plusieurs autres opérateurs pour vous permettre
d'affecter une valeur à une variable et effectuer une opération en une seule étape. Par exemple, jetez un œil
à l’instruction qui suit où il y a un opérateur d'affectation et un opérateur arithmétique :
total = total – profit
Cela peut être réduit à l’instruction suivante :
total -= profit
Bien que cela puisse sembler peu, ce type de raccourci peut économiser beaucoup de code si vous avez
beaucoup de calculs comme celui-ci (voir tableau qui suit) à effectuer.
Symbole Exemple avec raccourci Équivalence sans raccourci
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
17.2.3. Les opérateurs de comparaison
Comme vous pouvez le voir dans le tableau qui suit, les opérateurs de comparaison comparent deux
opérandes puis renvoient true ou false selon que la comparaison est vraie ou non.
Notez que la comparaison pour vérifier si deux opérandes sont égaux est de deux signes égaux (un seul
signe égal serait un opérateur d'affectation).
Opérateur Description Exemple
1==2 retourne false
== Égal à
3==3 retourne true
1!=2 retourne true
!= Non égal à
3!=3 retourne false
1>2 retourne false
Plus grand que (ou strictement
> 3>3 retourne false
supérieur à)
3>2 retourne true
1<2 retourne true
Plus petit que (ou strictement
< 3<3 retourne false
inférieur à)
3<1 retourne false
1>=2 retourne false
Plus grand ou égal à (supérieur
>= 3>=2 retourne true
ou égal à)
3>=3 retourne true
1<=2 retourne true
Plus petit ou égal à (inférieur ou
<= 3<=3 retourne true
égal à)
3<=2 retourne false
17.2.4. Les opérateurs logiques ou booléens
Les opérateurs logiques ou booléens renvoient l'une des deux valeurs suivantes : true ou false. Ils sont
particulièrement utiles lorsque vous souhaitez évaluer plusieurs expressions à la fois.
Opérateur Nom Description Exemple (où x=1 et y=2)

Page 105 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 (x < 2 && y > 1) Renvoie true
Permet de vérifier si les deux conditions sont
&& Et (car les deux conditions sont
remplies
remplies)
(x < 2 ?? y < 2) Renvoie true
Permet de vérifier si l'une des deux conditions
?? Ou (parce que la première condition
est remplie
est remplie)
Permet de vérifier si quelque chose n'est pas le ! (x > y) Renvoie true (car x
! Non
cas n'est pas supérieur à y)
Les deux opérandes d'un opérateur logique ou booléen prennent la valeur true ou false. Par exemple, si x=1
et y=2, alors x<2 est vrai et y>1 est vrai. Donc l'expression suivante : (x<2 && y>1) renvoie true parce que
les deux opérandes sont évalués à true (vous pouvez voir plus d'exemples dans la colonne de droite de ce
tableau).
17.2.5. L’opérateur de chaîne (utilisation de + avec des chaînes de caractères)
Vous pouvez également ajouter du texte aux chaînes à l'aide de l'opérateur +. Par exemple, ici l'opérateur +
est utilisé pour ajouter ensemble deux variables qui sont des chaînes de caractères :
prenom = "Bruce "
nomDeFamille = "Lee"
nom = prenom + nomDeFamille
La valeur de la variable nom serait maintenant Bruce Lee. Le processus d'addition de deux chaînes
ensemble est connue sous le nom de concaténation.
Vous pouvez également comparer des chaînes à l'aide des opérateurs de comparaison que vous venez de
voir. Par exemple, vous pourriez vérifier si un utilisateur a entré une valeur spécifique dans une zone de
texte.

17.3. Les fonctions JavaScript

Une fonction est composée d'un code associé qui exécute une tâche particulière. Par exemple, une fonction
peut être écrit pour calculer la surface en fonction de la largeur et de la hauteur. La fonction peut alors être
appelée ailleurs dans le script, ou lorsqu'un événement se déclenche.
Les fonctions sont soit écrites dans l'élément <head> soit dans un fichier externe lié depuis l'intérieur de
l’élément <head>, ce qui signifie qu'ils peuvent être réutilisés à plusieurs endroits dans la page.
17.3.1. Comment définir une fonction
La création ou la définition d'une fonction comporte trois étapes :
 Définissez-lui un nom.
 Indiquez toutes les valeurs qui pourraient être requises ; ceux-ci sont connus comme des arguments.
 Ajoutez des instructions au corps de la fonction.
Par exemple, si vous souhaitez créer une fonction pour calculer l'aire d'un rectangle, vous pouvez nommer
la fonction calculAire() (notez qu'un nom de fonction doit être suivi de parenthèses). Pour calculer la
surface, vous devez connaître la largeur et la hauteur du rectangle, donc celles-ci seraient transmises
comme arguments (les arguments sont les informations dont la fonction a besoin pour faire son travail). A
l'intérieur du corps de la fonction (la partie entre les accolades) sont les déclarations, qui indiquent que la
surface est égale à la largeur multipliée par la hauteur (les deux ont été passés à la fonction). La surface est
alors retournée par la fonction.
function calculAire(largeur, longueur) {
aire = largeur * longueur
return aire
}
Si une fonction n'a pas d'arguments, elle devrait toujours avoir des parenthèses après son nom — par
exemple, vous pourriez avoir une fonction qui s'exécutera sans aucune information supplémentaire passée
en argument, telle que logOut().
17.3.2. Comment appeler une fonction

Page 106 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
La fonction calculAire() ne fait rien toute seule dans l'en-tête d'un document ; elle doit être appelée. Dans
cet exemple, vous pouvez appeler la fonction à partir d'un formulaire simple à l'aide de l'événement
onclick, de sorte que lorsque l'utilisateur clique sur le bouton Soumettre, la surface est calculée et
affichée dans une boîte d'alerte.
Ici, vous pouvez voir que le formulaire contient deux zones de texte pour la largeur et la hauteur, et celles-ci
sont transmises comme arguments à la fonction comme ceci (P3C3_EX01.html) :
<form name="frmArea" action="">
Entrez la largeur et la hauteur de votre rectangle pour calculer sa surface:<br />
Largeur: <input type="text" name="txtWidth" size="5" /><br />
Longueur: <input type="text" name="txtHeight" size="5" /><br />
<input type="button" value="Calculer aire"
onclick="alert(calculAire(document.frmArea.txtWidth.value,
document.frmArea.txtHeight.value))" />
</form>
Examinez de plus près ce qui se passe lorsque l'événement onclick se déclenche. Tout d'abord, une alerte
JavaScript est déclenchée, puis la fonction calculAire() est appelée à l'intérieur de l'alerte, de sorte que la
surface du rectangle est la valeur qui est écrite dans la boîte d'alerte. À l'intérieur des parenthèses où la
fonction calculAire() est appelée, les deux paramètres passés sont les valeurs de la zone de texte de la
largeur (document.frmArea.txtWidth.value) et de la zone de texte de la hauteur
(document.frmArea.txtWidth.value) à l'aide de la notation avec le point que vous avez apprise plus tôt
dans le chapitre sur le DOM.
17.3.3. La valeur de retour
Les fonctions qui renvoient un résultat doivent utiliser l'instruction return. Cette instruction spécifie la
valeur qui doit être renvoyée à l'endroit où la fonction a été appelée. La fonction calculAire(), par
exemple, a renvoyé l’aire du rectangle :
function calculAire(largeur, longueur) {
aire = largeur * longueur
return aire
}
Ce qui est retourné dépend du code à l'intérieur de la fonction ; par exemple, notre fonction renverra l’aire
du rectangle. En revanche, si vous disposiez d'un formulaire permettant aux utilisateurs de saisir une
adresse e-mail pour s’inscrire à une newsletter, vous pouvez utiliser une fonction pour vérifier si cette
personne a entré une adresse e-mail valide avant de soumettre le formulaire. Dans ce cas, la fonction peut
simplement renvoyer des valeurs vraies ou fausses (true ou false).
Ce qui se passe lorsque la valeur est renvoyée dépend de la façon dont la fonction a été appelée. Avec notre
fonction de calcul de surface, nous pourrions afficher la surface à l'utilisateur avec un peu plus de code
JavaScript. Si nous devrions vérifier si une adresse e-mail était dans un format valide avant de souscrire
cette adresse e-mail à un newsletter, la valeur de retour déterminerait si le formulaire a été soumis ou non.

17.4. Les expressions conditionnelles

Les instructions conditionnelles vous permettent d'effectuer différentes actions en fonction des différentes
instructions. Voici trois types d'instructions conditionnelles que vous découvrirez ici :
 Les instructions if, qui sont utilisées lorsque vous voulez que le script s'exécute si une condition est
vraie.
 Les instructions if...else, qui sont utilisées lorsque vous souhaitez exécuter un ensemble de code
si une condition est vraie et un autre si elle est fausse.
 Les instructions switch, qui sont utilisées lorsque vous souhaitez sélectionner un bloc de code
parmi plusieurs en fonction d'une situation.
17.4.1. Les instructions if
Les instructions if permettent au code d'être exécuté lorsque la condition spécifiée est remplie ; si la
condition est vraie alors le code entre les accolades est exécuté. Voici, en JavaScript, la syntaxe d'une
instruction if :

Page 107 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
if (condition)
{
//code à exécuter si la condition est vraie
}

Par exemple, vous pouvez commencer votre page d'accueil par le texte "Bonjour" si l'heure est en matinée.
Vous pouvez y parvenir en utilisant le script suivant (P3C3_EX02.html) :
<script type="text/JavaScript">
date = new Date();
time = date.getHours();
if (time < 12) {
document.write('Bonjour!');
}
</script>
Si vous n'exécutez qu'une seule instruction (comme c’est le cas dans cet exemple), les accolades ne sont pas
strictement nécessaires, donc le code suivant ferait exactement le même travail (bien qu'il soit de bonne
pratique de les inclure de toute façon comme nous l'avons fait précédemment).
<script type="text/JavaScript">
date = new Date();
time = date.getHours();
if (time < 12)
document.write('Bonjour!');
</script>
Cet exemple crée d'abord un objet date (que vous découvrirez plus loin dans le chapitre) puis appelle la
méthode getHours() de l'objet date pour trouver le temps en heures (en utilisant l'horloge de 24 heures).
Si le temps en heures est inférieur à 12, alors le script écrit Bonjour ! sur la page (s'il est supérieur à 12,
vous verrez une page blanche car rien n'y est écrit).
17.4.2. Les instructions if… else
Lorsque vous avez deux situations possibles et que vous souhaitez réagir différemment pour chacune, vous
pouvez utiliser un if... else. Cela signifie : « Si les conditions spécifiées sont remplies, exécutez le
premier bloc de code ; sinon exécutez le deuxième bloc. La syntaxe est la suivante :
if (condition)
{
//code à exécuter si la condition est vraie
}
else
{
//code à exécuter si la condition est fausse
}

En revenant à l'exemple précédent, vous pouvez écrire Bonjour ! si l'heure est avant midi, et Bonsoir ! si
c'est après midi (P3C3_EX03.html)
<script type="text/JavaScript">
date = new Date();
time = date.getHours();
if (time < 12) {
document.write('Bonjour!');
}
else {
document.write('Bonsoir!');
}
</script>

Page 108 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Comme vous pouvez l'imaginer, il existe de nombreuses possibilités d'utilisation des instructions
conditionnelles.
17.4.3. Les instructions switch
Une instruction switch vous permet de traiter plusieurs résultats possibles d'une condition. Vous avez une
seule expression, qui est généralement une variable. Celle-ci est évaluée immédiatement. La valeur de
l'expression est ensuite comparée aux valeurs de chaque cas de la structure. S'il y a correspondance, le bloc
de code sera exécuté.
Voici la syntaxe d'une instruction switch :
switch (expression)
{
case option1:
//code à exécuter si expression correspond à ce qui est écrit dans option1
break;
case option2:
//code à exécuter si expression correspond à ce qui est écrit dans option2
break;
case option3:
//code à exécuter si expression correspond à ce qui est écrit dans option3
break;
default:
/*code à exécuter si expression est différent à ce qui est écrit dans
option1, option2, et option3*/
}

Vous utilisez l’instruction break pour empêcher le code de s'exécuter automatiquement dans le cas suivant.
Par exemple, vous pouvez vérifier quel type d'animal un utilisateur a entré dans une zone de texte, et vous
voulez écrire différentes choses à l'écran selon le type d'animal dans la zone de saisie de texte. Voici un
formulaire qui apparaît sur la page. Lorsque l'utilisateur a saisi un animal et cliqué sur le bouton, la
fonction checkAnimal() contenue dans l'entête du document est appelée (P3C3_EX04.html) :
<p>Entrez le nom de votre animal de dessin animé favori:</p>
<form name="frmAnimal">
<input type="text" name="txtAnimal" /><br />
<input type="button" value="Check animal" onclick="checkAnimal()" />
</form>
Voici la fonction qui contient l'instruction switch :
function checkAnimal() {
switch (document.frmAnimal.txtAnimal.value){
case "lièvre":
alert("Attention, c'est Elmer Fudd!")
break;
case "coyote":
alert("Pas d'équivalent' pour le road runner - meep meep!")
break;
case "souris":
alert("Attention Jerry, voici Tom!")
break;
default : alert("Êtes-vous sûr d'avoir choisi un animal dans un dessin animé?");
}
}
Notez que si l'utilisateur saisit du texte dans une casse différente, il ne correspondra pas aux options du
switch. Étant donné que JavaScript est sensible à la casse, si la casse de la lettre ne correspond pas à la
valeur de la casse dans l'instruction switch, ce ne sera pas une correspondance. Vous pouvez résoudre ce

Page 109 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
problème en convertissant le texte en minuscules avant de le vérifier à l'aide de la méthode toLowerCase()
de l'objet JavaScript string intégré, que vous rencontrerez plus tard dans le chapitre.

17.5. Les boucles

Les instructions en boucle sont utilisées pour exécuter le même bloc de code un certain nombre de fois (ce
qui est très pratique car les tâches répétitives sont une chose à laquelle les ordinateurs sont
particulièrement bien adaptés) :
 Une boucle while exécute le même bloc de code pendant ou jusqu'à ce qu'une condition soit vraie.
 Une boucle do while s'exécute une fois avant que la condition ne soit vérifiée. Si la condition est
vraie, elle continuera à s'exécuter jusqu'à ce que la condition soit fausse. (La différence entre une
boucle do et do while est que do while s'exécute une fois, que la condition soit remplie ou non.)
 Une boucle for exécute le même bloc de code un nombre de fois spécifié (par exemple, cinq fois).
17.5.1. La boucle while
Dans une boucle while, un bloc de code est exécuté si une condition est vraie et tant que cette condition
reste vraie. La syntaxe est la suivante :
while (condition)
{
//code à exécuter
}

Dans l'exemple suivant, vous pouvez voir une boucle while qui affiche la table de multiplication par 3 de 1
jusqu’à 10.
Cela fonctionne sur la base d'un compteur appelé i ; chaque fois que le script while boucle, le compteur
incrémente d'un (cela utilise l'opérateur arithmétique ++, comme vous pouvez le voir sur la ligne qui dit
i++). Ainsi, la première fois que le script s’exécute, le compteur vaut 1, et la boucle écrit la ligne 1x3 = 3 ;
la prochaine fois qu'il boucle le compteur vaut 2, donc la boucle écrit 2x3 = 6. Cela continue jusqu'à ce que
la condition — que i ne soit plus inférieur à 11 — soit vraie (P3C3_EX05.html) :
<script type="text/JavaScript">
i = 1;
while (i < 11) {
document.write(i + " x 3 = " + (i * 3) + "<br />" );
i ++;
}
</script>
Vous pouvez voir le résultat de cet exemple dans la Figure suivante.

Avant de passer au type de boucle suivant (la boucle do ... while), il convient de noter qu'il peut arriver
qu’une boucle while ne s'exécute jamais (car la condition peut ne pas être vraie lorsqu'elle est appelée).
17.5.1. La boucle do … while
Une boucle do ... while exécute un bloc de code une fois, puis vérifie une condition. Tant que la
condition est vraie, elle continue à boucler. Ainsi, quelle que soit la condition, la boucle s'exécute au moins
une fois (comme vous pouvez voir la condition est après les instructions). Voici la syntaxe :
do
Page 110 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
{
//code à exécuter
}
while (condition)

Par exemple, voici à nouveau l'exemple avec la table de multiplication par 3. Le compteur est réglé avec une
valeur initiale de 12, qui est supérieur à ce qui est requis dans la condition, vous verrez donc la somme
12x3 = 36 une fois, mais rien après cela, car en ce qui concerne la condition, elle a été remplie
(P3C3_EX06.html) :
<script type="text/JavaScript">
i = 12;
do {
document.write(i + " x 3 = " + (i * 3) + "<br />" );
i ++;
} while (i < 11)
</script>

Maintenant, si vous changez la valeur du compteur initial en 1, vous verrez que le script parcourt la table de
multiplication comme dans le dernier exemple jusqu'à ce qu'il arrive à 11.
17.5.2. La boucle for
L'instruction for exécute un bloc de code un nombre de fois spécifié. Vous l'utilisez quand vous voulez
spécifier combien de fois vous voulez que le code soit exécuté (plutôt que de s'exécuter pendant qu'une
certaine condition soit vrai ou fausse). Il convient de noter ici que le nombre de fois que la boucle for
s'exécute peut être spécifié par une autre partie du code. Tout d'abord, voici la syntaxe (qui prend toujours
trois arguments) :
for (a; b; c)
{
//Code à exécuter
}

Maintenant, vous devez regarder ce que représentent a, b et c :

 a est évalué avant l'exécution de la boucle et n'est évalué qu'une seule fois. Il est idéal pour attribuer
une valeur à une variable ; par exemple, vous pouvez l'utiliser pour définir un compteur sur 0 en
utilisant i=0.
 b doit être une condition indiquant si la boucle doit être exécutée à nouveau ; s'il retourne vrai la
boucle s'exécute à nouveau. Par exemple, vous pouvez l'utiliser pour vérifier si le compteur est
inférieur à 11.
 c est évalué après l'exécution de la boucle et peut contenir plusieurs expressions séparées par une
virgule (par exemple, i++, j++;). Par exemple, vous pouvez l'utiliser pour incrémenter le compteur.
Donc, si vous revenez à l'exemple de la table de multiplication par 3, elle s'écrira comme suit avec une
boucle for (P3C3_EX07.html):
<script type="text/JavaScript">
for (i=0; i<11; i++) {
document.write(i + " x 3 = " + (i * 3) + "<br />" );
}
</script>
Examinons l'instruction for en petits morceaux :
 i=0 Le compteur est initialisé à la valeur 0.
 i<11 La boucle doit s'exécuter si la valeur du compteur est inférieure à 11.
 i++ Le compteur est incrémenté de 1 à chaque exécution de la boucle.
L'affectation de la variable compteur, la condition et l'incrémentation du compteur apparaissent toutes dans
les parenthèses après le mot clé for et sont séparés par des ;.

Page 111 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Vous pouvez également affecter plusieurs variables à la fois dans la partie correspondant à la lettre a dans
ce cas vous séparez-les avec une virgule, par exemple, i = 0, j = 5;. Il convient également de noter que
vous pouvez compter à rebours avec des boucles ainsi que vers le haut.
17.5.3. Les Boucles infinies et l’instruction break
Notez que, si vous avez une expression qui est toujours évaluée à true dans n'importe quelle boucle, vous
vous retrouvez avec ce qu'on appelle une boucle infinie. Celles-ci peuvent monopoliser les ressources
système et peuvent même planter l'ordinateur, bien que certains navigateurs essaient de détecter des
boucles infinies puis d'arrêter la boucle.
Vous pouvez cependant ajouter une instruction break pour arrêter une boucle infinie ; ici, la valeur d’arrêt
est définie sur 100 (P3C3_EX08.html) :
for (i=0; /* pas de condition ici */; i++) {
document.write(i + " x 3 = " + (i * 3) + "<br />" );
if (i==100){
break;
}
}
Lorsque le script arrive à une instruction break, il s'arrête simplement de s'exécuter. Cela empêche
efficacement une boucle de s’exécuter trop de fois.

17.6. Les événements

Tous les navigateurs sont censés prendre en charge un ensemble d'événements appelés événements
intrinsèques, tels que l'événement onload, qui se produit lorsqu'une page a fini de se charger, onclick
lorsqu'un utilisateur clique sur un élément, et onsubmit lorsqu'un formulaire est soumis. Ces événements
peuvent être utilisés pour déclencher un script.
Vous avez déjà vu des gestionnaires d'événements utilisés comme attributs sur des éléments XHTML, tels
que onclick sur un élément <a> et l'attribut onsubmit sur l'élément <form>. La valeur de l'attribut est le
script qui doit être exécuté lorsque l'événement se produit sur cet élément (parfois cela pourra être une
fonction dans le <head> du document).
Deux types d'événements peuvent être utilisés pour déclencher des scripts :
 Les événements de fenêtre, qui se produisent lorsque quelque chose arrive à une fenêtre. Par
exemple, une page se charge ou se décharge (est remplacée par une autre page ou fermée) ou le
focus est déplacé vers ou loin d'une fenêtre ou cadre.
 Les événements utilisateur, qui se produisent lorsque l'utilisateur interagit avec des éléments de la
page à l'aide d'une souris (ou autre dispositif de pointage) ou un clavier, comme placer la souris sur
un élément, cliquer sur un élément, ou déplacer la souris hors d'un élément.
Par exemple, les événements onmouseover et onmouseout peuvent être utilisés pour modifier l'attribut src
d'une image et créer un survol d'image simple, comme vous l'avez vu plus tôt dans le chapitre :
<a href=""
onmouseover="document.images.link.src='images/click_red.gif';"
onmouseout="document.images.link.src='images/click_green.gif'">
<img src="images/click_green.gif" width="100" height="50" border="0"
name="link">
</a>
Le tableau qui suit fournit un récapitulatif des événements les plus courants que vous êtes susceptible de
rencontrer.
Evénement Objectif de l'événement S'applique à
Le chargement du document est terminé (s'il est
<body>
onload utilisé dans un jeu de cadres, tous les cadres ont fini
<frameset>
de se charger).
Le document est déchargé ou supprimé d'une fenêtre <body>
onunload
ou frameset. <frameset>
onclick Le bouton de la souris (ou autre dispositif de La plupart des éléments

Page 112 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 pointage) a cliqué sur l'élément.
Le bouton de la souris (ou autre dispositif de
ondblclick La plupart des éléments
pointage) a double-cliqué sur l'élément.
Le bouton de la souris (ou autre dispositif de
onmousedown La plupart des éléments
pointage) est enfoncé (mais pas relâché) sur l'élément.
Le bouton de la souris (ou autre dispositif de
onmouseup La plupart des éléments
pointage) a été relâché sur l'élément.
Le curseur de la souris (ou autre dispositif de
onmouseover La plupart des éléments
pointage) a été déplacé sur l'élément.
Le curseur de la souris (ou autre dispositif de
onmousemove La plupart des éléments
pointage) a été déplacé au-dessus de l'élément.
Le curseur de la souris (ou autre dispositif de
onmouseout La plupart des éléments
pointage) a été retiré de l'élément.
Onkeypress Une touche est enfoncée et relâchée. La plupart des éléments
Onkeydown Une touche est maintenue enfoncée. La plupart des éléments
Onkeyup Une touche est relâchée. La plupart des éléments
L'élément reçoit le focus soit par la souris (ou autre <a> <area>
périphérique de pointage) en cliquant dessus, en <button> <input>
Onfocus
donnant un ordre de tabulation (focus) sur cet <label> <select>
élément, ou un code donnant le focus à l'élément. <textarea>
<a> <area>
<button> <input>
Onblur L'élément perd le focus.
<label> <select>
<textarea>
Onsubmit Un formulaire est soumis. <form>
Onreset Un formulaire est réinitialisé. <form>
L'utilisateur sélectionne du texte dans un champ de <input>
Onselect
texte. <textarea>
Un contrôle perd le focus d'entrée et sa valeur a été <input> <select>
onchange
modifiée depuis qu'il a reçu le focus. <textarea>
Vous verrez des exemples de ces événements utilisés tout au long de ce chapitre et du suivant. Vous pouvez
également vérifier quels éléments prennent en charge quelles méthodes dans ces chapitres ; presque chaque
élément peut être associé à au moins un événement.

17.7. Les objets intégrés

Vous avez entendu parler de l'objet document au début de ce chapitre et il est maintenant temps de voir
quelques-uns des objets intégrés au langage JavaScript. Vous verrez les méthodes qui vous permettent
d'effectuer les actions sur les données et les propriétés qui vous disent quelque chose sur les données.
17.7.1. L’objet string
L'objet string vous permet de traiter des chaînes de caractères. Avant de pouvoir utiliser un objet intégré,
vous devez créer une instance de cet objet. Vous créez une instance de l'objet string en l'affectant à une
variable comme ceci : myString = new String('Voici du texte en gras')
L'objet string contient maintenant les mots "Voici du texte en gras" et ceci est stocké dans une
variable appelée myString. Une fois que vous avez cet objet dans une variable, vous pouvez écrire la chaîne
dans le document ou effectuer actions sur elle. Par exemple, la méthode suivante écrit la chaîne comme si
elle se trouvait dans un élément <b> : document.write(myString.bold())
Remarque : Notez que si vous visualisez le code source de cet élément, il ne contiendra pas réellement
l'élément <b> ; plutôt, vous verriez le JavaScript, de sorte qu'un utilisateur qui n'a pas activé JavaScript ne
verrait pas ces mots du tout.
Vous pouvez vérifier la longueur de cette chaîne comme ceci ; le résultat sera le nombre de caractères
incluant espaces et ponctuation (dans ce cas 50) :
MyString = new String("Combien y a-t-il de caractères dans cette phrase ?")
alert(myString.length)
Page 113 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Avant de pouvoir utiliser l'objet chaîne, n'oubliez pas que vous devez d'abord le créer, puis lui attribuer une
valeur.
A. Propriétés
Le tableau suivant montre la propriété principale de l'objet string et son objectif.
Propriété Objectif de la propriété
length Renvoie le nombre de caractères d'une chaîne.
B. Méthodes
Le tableau suivant répertorie les méthodes de l'objet chaîne et leurs objectifs.
Méthode Objectif de la méthode
Crée un élément d'ancrage (un élément <a> avec un attribut name ou id
anchor(name)
plutôt qu'un attribut href).
big() Affiche le texte comme s'il se trouvait dans un élément <big>.
bold() Affiche le texte comme dans un élément <bold>.
Renvoie le caractère à une position spécifiée (par exemple, si vous avez une
charAt(index) chaîne qui dit "banane" et votre méthode lit charAt(2), alors vous vous
retrouverez avec la lettre n — rappelez-vous que les index commencent à 0).
fixed() Affiche le texte comme s'il se trouvait dans un élément <tt>.
Affiche le texte comme s'il se trouvait dans un élément <font> avec un
fontcolor(color)
attribut color.
Affiche le texte comme s'il se trouvait dans un élément <font> avec un
fontsize(fontsize)
attribut size.
Renvoie la position de la première occurrence d'un caractère spécifié (ou
d’un ensemble de caractères) à l'intérieur d'une autre chaîne.
Par exemple, si vous avez le mot "banane" comme chaîne, et vous voulez
trouver la première occurrence de la lettre n dans "banane" vous utilisez
indexOf(searchValue, indexOf(n).
[fromindex]) Si vous fournissez une valeur pour l'argument fromIndex, la recherche
commencera à cette position. Par exemple, vous voudrez peut-être
commencer après le quatrième caractère, auquel cas vous pouvez utiliser
indexOf (n,3).
La méthode renvoie -1 si la chaîne recherchée n'est pas retrouvée.
italics() Affiche le texte comme s'il se trouvait dans un élément <i>.
lastIndexOf(searchValue,
Identique à la méthode indexOf(), mais s'exécute de droite à gauche.
[fromIndex])
link(targetURL) Crée un lien dans le document.
small() Affiche le texte comme s'il se trouvait dans un élément <small>.
strike() Affiche le texte comme s'il se trouvait dans un élément <strike>.
sub() Affiche le texte comme s'il se trouvait dans un élément <sub>.
Renvoie les caractères spécifiés. 14,7 renvoie 7 caractères, à partir du 14ème
substr(start, [length])
caractère (les index commencent à 0).
Renvoie les caractères spécifiés entre le début et la fin des points d'index.
substring(startPosition,
7,14 renvoie tous les caractères de la 7ème position jusqu'à la 14ème mais
endPosition)
sans compter le 14e (car on commence à 0).
sup() Affiche le texte comme dans un élément <sup>.
toLowerCase() Convertit une chaîne en minuscules.
toUpperCase() Convertit une chaîne en majuscule.

Exercice P3C3 : Utilisation de l'objet string

Dans cet exemple, vous allez récupérer une partie d'une chaîne et la transformer en lettres majuscules. La
chaîne de caractère (au début de l'exemple) contiendra les mots "Apprendre les Objets Intégrés est
facile" ; puis le code extrait simplement les mots "Objets Intégrés" de la chaîne, et enfin il les
transforme en caractères majuscules.
Page 114 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
1. Créez un squelette de document XHTML, comme ceci :
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Object String</title>
</head>
<body>
</body>
</html>
2. Étant donné que le code de cet exemple ne sera exécuté qu'à un seul endroit, le script peut être ajouté à
l'intérieur du corps du document, ajoutez donc l'élément <script> et à l'intérieur écrivez le code suivant :
<script type="text/JavaScript">
myString = new String('Apprendre les Objets Intégrés est facile')
myString = myString.substring(14, 29)
myString = myString.toUpperCase()
document.write(myString)
</script>
Regardons cela d'un peu plus près. Vous devez d'abord créer une instance de l'objet string, qui est affecté à
la variable myString :
myString = new String('Apprendre les objets intégrés est facile')
Tel qu'il a été créé, l'objet string a été conçu pour contenir les mots 'Apprendre les Objets Intégrés
est facile. Mais, l'idée de cet exercice est simplement de sélectionner les mots "objets intégrés" afin
que vous utilisiez la méthode substring() pour extraire ces mots. La syntaxe est la suivante :
substring(startPosition, endPosition)
Vous sélectionnez donc l'objet string (qui se trouve dans la variable myString) et faites de sa valeur la
nouvelle sous-chaîne que vous voulez (ceci veut dire réassigner la valeur de la variable avec la sous-chaîne
que vous voulez) :
myString = myString.substring(14, 29)
Cela sélectionne la chaîne du 14e au 29e caractère - car on commence à partir de l’index 0.
Ensuite, vous devez convertir la chaîne en majuscule en utilisant la méthode toUpperCase() :
myString = myString.toUpperCase()
Et enfin, vous pouvez l'écrire dans le document comme ceci :
document.write(myString)
3. Enregistrez ce fichier sous le nom EXO_P3C3.html et lorsque vous l'ouvrez dans le navigateur, vous
devriez voir le texte illustré à la Figure 3-9.

Figure 3-9
Le résultat semble assez simple, mais si l'on considère que la chaîne d'origine était 'Apprendre les
Objets Intégrés est facile, ils ont maintenant un aspect sensiblement différent.
17.7.2. L’objet date
L'objet date vous aide à travailler avec les dates et les heures. Vous créez un nouvel objet date en utilisant
le constructeur de date comme ceci : new Date()

Page 115 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Vous pouvez créer un objet date défini sur une date ou une heure spécifique, en lui passant l'un des quatre
paramètres suivants :
 milliseconds : cette valeur doit être le nombre de millisecondes depuis le 01/01/1970.
 dateString : peut être n'importe quelle date dans un format reconnu par la méthode parse().
 yr_num, mo_num, day_num : Représente l'année, le mois et le jour.
 yr_num, mo_num, day_num, hr_num, min_num, seconds_num, ms_num : Représente les années,
jours, heures, minutes, secondes et millisecondes.
Voici quelques exemples :
Le premier utilise les millisecondes et affichera Tue Apr 07 1970 02:06:40 GMT+0100 (heure normale
d’Afrique de l’Ouest) :
var birthDate = new Date(8298400000)
document.write(birthDate)
Le second utilise une dateString et affichera Wed Apr 16 1975 00:00:00 GMT+0100 (heure normale
d’Afrique de l’Ouest) :
var birthDate = new Date("April 16, 1975")
document.write(birthDate)
Le troisième utilise yr_num, mo_num, and day_num, et affichera Wed May 28 1975 00:00:00 GMT+0100
(heure normale d’Afrique de l’Ouest) :
var birthDate = new Date(1975, 4, 28)
document.write(birthDate)
Il y a quelques points à surveiller :
La première chose déroutante que vous pourriez remarquer ici est que le chiffre 4 correspond au mois de
Mai! Cela fait que janvier occupe l’indice 0. De même, lorsque vous travaillez avec des jours, dimanche est
traité comme occupant l’indice 0.
Vous constaterez peut-être que vous obtenez le fuseau horaire du lieu où vous êtes basé. Tous les objets
date travaillent en UTC, même si votre ordinateur peut afficher une heure qui est compatible avec votre
fuseau horaire.
Bien que vous puissiez ajouter ou soustraire des dates, votre résultat se terminera en millisecondes. Par
exemple, si je voulais connaître le nombre de jours jusqu'à la fin de l'année, je pourrais utiliser quelque
chose comme ceci :
var today = new Date()
var newYear = new Date(2023,11,31)
var daysRemaining = (newYear - today)
document.write(daysRemaining)
Le problème est que vous vous retrouvez avec un résultat très long car exprimé en millisecondes. Avec 86
400 000 millisecondes par jour, vous devez diviser les jours restants par le nombre de millisecondes dans la
journée (86400000) pour trouver le nombre de jours (P3C3_EX09.html) :
var today = new Date()
var newYear = new Date(2023,11,31)
var daysRemaining = (newYear - today)
daysRemaining = daysRemaining/86400000
document.write(daysRemaining)
Lorsque vous utilisez l'objet date, vous devez garder à l'esprit que le résultat de l'ordinateur d'un utilisateur
peut très bien être inexacte et le fait que différents utilisateurs peuvent se trouver dans différents fuseaux
horaires.
Le tableau suivant montre certaines méthodes couramment utilisées de l'objet date.
Méthode Objectif de la méthode
date() Renvoie un objet Date
getDate() Renvoie la date d'un objet Date (de 1 à 31)
getDay() Renvoie le jour d'un objet Date (de 0 à 6 ; 0=dimanche, 1=lundi, et ainsi de suite)
getMonth() Renvoie le mois d'un objet Date (de 0 à 11 ; 0=Janvier, 1=Février, et ainsi de suite)
getFullYear() Renvoie l'année d'un objet Date (quatre chiffres)

Page 116 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
getYear() Renvoie l'année d'un objet Date en utilisant seulement deux chiffres (de 0 à 99)
getHours() Renvoie les heures d'un objet Date (de 0 à 23)
getMinutes() Renvoie les minutes d'un objet Date (de 0 à 59)
getSeconds() Renvoie les secondes d'un objet Date (de 0 à 59)
getTime() Renvoie le nombre de millisecondes depuis minuit le 01/01/1970
getTimezoneOffset() Renvoie le décalage horaire entre l'ordinateur de l'utilisateur et l'heure GMT
Renvoie une chaîne contenant le nombre de millisecondes écoulées depuis le 01
parse()
janvier 1970 00:00:00
setDate() Définit la date du mois dans l'objet Date (de 1 à 31)
setFullYear() Définit l'année dans l'objet Date (quatre chiffres)
setHours() Définit les heures dans l'objet Date (de 0 à 23)
setMinutes() Définit les minutes dans l'objet Date (de 0 à 59)
Définit les mois dans l'objet Date (de 0 à 11 ; 0=janvier,
setMonth()
1=Février)
setSeconds() Définit les secondes dans l'objet Date (de 0 à 59)
setTime() Définit les millisecondes après le 01/01/1970
setYear() Définit l'année dans l'objet Date (00 à 99)
toGMTString() Convertit l'objet Date en une chaîne, définie sur le fuseau horaire GMT
Convertit l'objet Date en une chaîne, définie sur le fuseau horaire actuel de
toLocaleString()
l'utilisateur
toString() Convertit l'objet Date en chaîne de caractères
De nombreuses méthodes du tableau qui suit ont ensuite été ajoutées offrant un support pour le temps
universel (UTC), au format Jour Mois Date, hh,mm,ss UTC Année.
Méthode Objectif de la méthode
getUTCDate() Renvoie la date d'un objet Date en temps universel (UTC)
getUTCDay() Renvoie le jour d'un objet Date en temps universel
getUTCMonth() Renvoie le mois d'un objet Date en temps universel
getUTCFullYear() Renvoie l'année à quatre chiffres d'un objet Date en temps universel
getUTCHours() Renvoie l'heure d'un objet Date en temps universel
getUTCMinutes() Renvoie les minutes d'un objet Date en temps universel
getUTCSeconds() Renvoie les secondes d'un objet Date en temps universel
getUTCMilliseconds() Renvoie les millisecondes d'un objet Date en temps universel
setUTCDate() Définit la date dans l'objet Date en temps universel (de 1 à 31)
Définit le jour dans l'objet Date en temps universel (de 0 à 6 ; dimanche=0,
setUTCDay()
lundi=1, etc.)
Définit le mois dans l'objet Date en temps universel (de 0 à 11 ; 0=janvier,
setUTCMonth()
1=février)
setUTCFullYear() Définit l'année dans l'objet Date en temps universel (quatre chiffres)
setUTCHour() Définit l'heure dans l'objet Date en temps universel (de 0 à 23)
setUTCMinutes() Définit les minutes dans l'objet Date en temps universel (de 0 à 59)
setUTCSeconds() Définit les secondes de l'objet Date en temps universel (de 0 à 59)
setUTCMilliseconds() Définit les millisecondes dans l'objet Date en temps universel (de 0 à 999)
17.7.3. L’objet math
L'objet math aide à travailler avec des nombres. Il a des propriétés pour les constantes mathématiques et
des méthodes représentant des fonctions mathématiques telles que les fonctions Tangente et Sinus.
Par exemple, ce qui suit définit une variable appelée numberPI pour contenir la constante pi, puis l'affiche à
l'écran (P3C3_EX10.html):
nombrePI = Math.PI
document.write (nombrePI)
L'exemple suivant arrondit pi au nombre entier le plus proche et l’affiche à l'écran (toujours dans l’exemple
P3C3_EX10.html) :
Page 117 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
nombrePI = Math.PI
nombrePI = Math.round(nombrePI)
document.write (nombrePI)
A. Propriétés
Le tableau suivant répertorie les propriétés de l'objet math.
Propriété Objectif de la propriété
E Renvoie la base d'un logarithme naturel.
LN2 Renvoie le logarithme naturel de 2
LN10 Renvoie le logarithme naturel de 10
LOG2E Renvoie le logarithme en base 2 de E
LOG10E Renvoie le logarithme en base 10 de E
PI Renvoie pi
SQRT1_2 Renvoie 1 divisé par la racine carrée de 2
SQRT2 Renvoie la racine carrée de 2
B. Méthodes
Le tableau suivant répertorie les méthodes de l'objet math.
Méthode Objectif de la méthode
abs(x) Renvoie la valeur absolue de x
acos(x) Renvoie l'arc cosinus de x
asin(x) Renvoie l'arc sinus de x
atan(x) Renvoie l'arc tangente de x
atan2(y,x) Renvoie l'angle de l'axe des x à un point
ceil(x) Renvoie l'entier le plus proche supérieur ou égal à x
cos(x) Renvoie le cosinus de x
exp(x) Renvoie l’exponentielle de x
floor(x) Renvoie l'entier le plus proche inférieur ou égal à x
log(x) Renvoie le logarithme naturel de x
max(x,y) Renvoie le nombre avec la valeur la plus élevée entre x et y
min(x,y) Renvoie le nombre avec la plus petite valeur entre x et y
pow(x,y) Renvoie la valeur du nombre x élevé à la puissance y
random() Renvoie un nombre aléatoire entre 0 et 1
round(x) Arrondit x à l'entier le plus proche
sin(x) Renvoie le sinus de x
sqrt(x) Renvoie la racine carrée de x
tan(x) Renvoie la tangente de x
17.7.4. L’objet array (tableau)
Un array est comme une variable spéciale. C'est spécial parce qu'il peut contenir plus d'une valeur, et ces
valeurs peuvent être consultés individuellement. Les arrays sont particulièrement utiles lorsque vous
souhaitez stocker un groupe de valeurs dans la même variable plutôt que d'avoir des variables distinctes
pour chaque valeur. Vous voudrez peut-être le faire parce que toutes les valeurs correspondent à un
élément particulier, ou juste pour la commodité d'avoir plusieurs valeurs dans la même variable plutôt que
dans des variables nommées différemment ; ou c'est peut-être parce que vous ne savez pas combien
d'éléments vont être stockés (par exemple, vous pouvez stocker les articles de votre panier de courses dans
un array). Vous voyez souvent des arrays utilisés en avec des boucles, où la boucle est utilisée pour
ajouter des informations dans un array ou les lire à partir d’un array.
Vous devez utiliser un constructeur avec un objet array, vous pouvez donc créer un array en spécifiant
soit son nom et le nombre de valeurs qu'il contiendra ou en ajoutant toutes les données directement dans
l’objet array. Par exemple, voici un array créé avec trois éléments ; il contient les noms d'instruments de
musique : instruments = new Array("guitare", "batterie", "piano")
Les éléments de l’array peuvent être référencés par un nombre qui reflète l'ordre dans lequel ils sont stockés
dans le tableau. Le nombre est un index, il commence donc à 0. Par exemple, vous pouvez vous référer à la
guitare comme instruments[0], la batterie comme instruments[1], etc.

Page 118 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Un array doit savoir combien d'éléments vous souhaitez y stocker, mais vous n'avez pas besoin de fournir
les valeurs de chaque élément du tableau lors de sa création ; vous pouvez simplement indiquer combien
d'articles vous voulez être capable de stocker (Attention ! cette valeur ne commence pas à 0. Donc dans
l’exemple qui suit, notre array créera trois éléments et non quatre) : instruments = new Array(3)
Ce nombre est stocké dans la propriété length de l'objet tableau et le contenu n'est pas réellement encore
attribué. Si vous souhaitez augmenter la taille d'un array, vous pouvez simplement attribuer une nouvelle
valeur à la propriété length supérieure à la valeur actuelle du length.
Voici un exemple qui crée un tableau avec cinq éléments, puis affiche le nombre d'éléments dans le tableau
utilisant la propriété length :
fruit = new Array("pomme", "banane", "orange", "mangue", "citron")
document.write(fruit. length)
Voici un exemple de la méthode toString(), qui convertit le tableau en chaîne.
document.write('Nous avons' + fruit.toString())
Garder les informations connexes dans une seule variable a tendance à être plus facile que d'avoir cinq
variables, telles que fruit1, fruit2, fruit3, fruit4 et fruit5. L'utilisation d'un tableau comme celui-ci
prend également moins de mémoire que stocker cinq variables distinctes, et dans les situations où vous
pourriez avoir un nombre variable de fruits, cela permet à la variable de croître et diminuer en fonction de
vos besoins (plutôt que de créer dix variables, dont la moitié peut être vide).
Méthodes
Le tableau qui suit répertorie les méthodes d'un array :
Méthode Objectif de la méthode
concat() Joint (ou concatène) deux tableaux ou plus pour en créer un nouveau
Joint tous les éléments d'un tableau séparés par le caractère spécifié comme
join(separator)
séparateur (la valeur par défaut est une virgule)
reverse() Renvoie le tableau avec les éléments dans l'ordre inverse
slice() Renvoie une partie sélectionnée du tableau (si vous n'en avez pas besoin de tout)
sort() Renvoie un tableau trié, trié par ordre alphabétique ou numérique
17.7.5. L’objet window (fenêtre)
Chaque fenêtre et cadre de navigateur a un objet window correspondant qui est créé avec chaque instance
d'un élément <body> ou <frameset>.
Par exemple, vous pouvez modifier le texte qui apparaît dans la barre d'état du navigateur à l'aide de la
propriété status de l'objet window. Pour ce faire, vous devez d'abord ajouter une fonction dans le <head>
qui va être déclenchée lorsque la page se charge, puis vous utilisez cette fonction pour indiquer ce qui doit
apparaître dans la barre d'état comme suit :
<script type="text/javascript">
function statusBarText()
{
window.status = "Tu m'as vu ici ?"
}
</script>
Vous appelez ensuite cette fonction à partir de l'événement onload de l'élément <body>, comme ceci :
<body onload="statusBarText()">
A. Propriétés
Le tableau qui suit répertorie les propriétés de l'objet window.
Propriété Objectif de la propriété
Un booléen déterminant si une fenêtre a été fermée. Si c'est le cas, la valeur retourné
closed
est true.
Définit le message par défaut affiché dans la barre d'état d'une fenêtre de navigateur
defaultStatus
(généralement en bas de la page à gauche).
document L'objet document contenu dans cette fenêtre.
Un tableau contenant des références à tous les cadres enfants nommés dans la
frames
fenêtre.

Page 119 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Un objet d'historique qui contient les détails et les URL visités à partir de cette fenêtre
history (principalement pour une utilisation dans la création de boutons Précédent et Suivant
comme ceux du navigateur).
location L'objet de localisation (location object) ; l'URL de la fenêtre en cours.
name Le nom de la fenêtre.
Paramétrable à tout moment pour définir un message temporaire affiché dans la barre
d'état du navigateur ; par exemple, vous pouvez modifier le message dans la barre
status
d'état lorsqu'un utilisateur survole un lien en l'utilisant avec un événement
onmouseover sur ce lien.
La barre d'état a une propriété qui indique si la barre d'état est visible. La valeur est
statusbar
un booléen true ou false — par exemple, window.statusbar[.visible=false].
La barre d'outils a une propriété qui indique si la barre de défilement est visible ou
non. Sa valeur est un booléen true ou false — par exemple,
toolbar
window.toolbar[.visible=false]. Cela ne peut être défini que lorsque vous créez
la nouvelle fenêtre.
Une référence pour la fenêtre du navigateur la plus haute si plusieurs fenêtres sont
top
ouvertes sur le bureau.
window La fenêtre ou le cadre actuel.
B. Méthodes
Le tableau qui suit répertorie les méthodes de l'objet window.
Méthode Objectif de la méthode
alert() Affiche une boîte d'alerte contenant un message et un bouton OK.
back() Même effet que le bouton Précédent du navigateur.
blur() Supprime le focus de la fenêtre actuelle.
Ferme la fenêtre en cours ou une autre fenêtre si une référence à une autre
close()
fenêtre est fournie.
Ouvre une boîte de dialogue demandant aux utilisateurs de confirmer qu'ils
veulent effectuer une action avec les boutons OK ou Annuler comme
confirm()
options.
Ils renvoient respectivement true et false.
focus() Donne le focus à la fenêtre spécifiée et l'amène au-dessus des autres.
forward() Équivaut à cliquer sur le bouton Suivant du navigateur.
home() Amène les utilisateurs à la page d'accueil désignée de leur navigateur.
moveBy(horizontalPixels, Déplace la fenêtre du nombre de pixels spécifié rapport aux coordonnées
verticalPixels) fournies.
moveTo(Xpostion, Déplace la fenêtre en haut à gauche par rapport aux coordonnées x et y
Yposition) fournies.
open(URL, name Ouvre une nouvelle fenêtre de navigateur (cette méthode est couverte plus
[,features]) en détail dans le chapitre suivant).
Imprime le contenu de la fenêtre en cours (ou fait apparaître la boîte de
print()
dialogue d'impression du navigateur).
prompt() Crée une boîte de dialogue permettant à l'utilisateur d'entrer une donnée.
stop() Même effet que de cliquer sur le bouton Arrêter dans le navigateur.

17.8. Écrire du JavaScript

Vous devez être conscient de quelques points lorsque vous commencez à écrire du JavaScript :
JavaScript est sensible à la casse, donc une variable appelée myVariable est différente d'une variable
appelée MYVARIABLE, et les deux sont différents d'une variable appelée myvariable.
Lorsque vous rencontrez des symboles tels que (, {, [, " et ', ils doivent avoir un symbole de fermeture
pour correspondance : ', ", ], } et ). (Notez comment la première parenthèse ouverte est la dernière à être
fermée, raison pour laquelle les symboles de fermeture sont dans l'ordre inverse ici.)

Page 120 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Comme XHTML, JavaScript ignore les espaces supplémentaires, vous pouvez donc ajouter un espace blanc
à votre script pour le rendre plus lisible. Les deux lignes suivantes sont équivalentes, même s'il y a plus
d'espaces dans la deuxième ligne :
maVariable="une valeur"
maVariable = "une valeur"
 Si vous avez une grande chaîne de caractères, vous pouvez la décomposer avec une barre oblique
inverse (backslash), comme vous pouvez le voir ici :
document.write("Mon premier \
Exemple JavaScript")
 Mais vous ne devez rien décomposer d'autre que des chaînes de caractères. Ce qui suit serait donc
faux :
document.write \
("Mon premier exemple JavaScript")
 Vous pouvez insérer des caractères spéciaux tels que ", ', ; et &, qui sont réservés (car ils ont une
signification spéciale en JavaScript), en utilisant une barre oblique inverse devant eux comme ceci :
document.write("Je veux utiliser une marque \"guillemet\" \& une esperluette.")
Cela écrit la ligne suivante dans le navigateur :
Je veux utiliser un "guillemet" & une esperluette.
 Si vous avez déjà utilisé un langage de programmation complet tel que C++ ou Java, vous savez
qu'ils nécessitent un point-virgule à la fin de chaque ligne. Ceci est facultatif en JavaScript, sauf si
vous souhaitez mettre plus d'une instruction sur une ligne.
17.8.1. Un mot sur les types de données
Vous devriez maintenant comprendre que vous pouvez faire différentes choses avec différents types de
données. Par exemple, vous pouvez additionner des nombres mais vous ne pouvez pas additionner
mathématiquement la lettre A à la lettre B. Certaines formes de données exigent que vous soyez capable de
traiter des nombres avec des décimales (nombres à virgules flottantes) ; la monnaie est un exemple courant.
D'autres types de données ont des limitations inhérentes ; par exemple, si je traite des dates et des heures,
je veux pouvoir ajouter des heures à certains types de données sans avoir 25h30 comme heure (même si
j'aimerais souvent pouvoir ajouter plus d'heures à une journée).
Les données (lettres, nombres entiers, nombres décimaux, dates) sont connus pour avoir différents types de
données ; ceux-ci permettent aux programmes de gérer les différents types de données de différentes
manières. Par exemple, si vous utilisez l'opérateur + avec une chaîne, il concatène deux chaînes, alors que
s'il est utilisé avec des nombres, il additionne les deux nombres. Certains langages de programmation
exigent que vous indiquiez spécifiquement quel type de données une variable va contenir et vous obligent à
être en mesure d’effectuer des conversions entre les types. Alors que JavaScript prend en charge différents
types de données, comme vous allez le voir, il gère la conversion entre les types lui-même, vous n'avez donc
pas à vous soucier de dire à JavaScript qu'un certain type de données est une date ou une chaîne (une
chaîne étant un ensemble de caractères pouvant inclure des lettres et des chiffres).
Il existe trois types de données simples en JavaScript :
 Number (Nombre) : utilisé pour effectuer des opérations arithmétiques (addition, soustraction,
multiplication et division). Tout nombre entier ou nombre décimal qui n'apparaît pas entre
guillemets est considéré comme un nombre.
 String (Chaîne) : utilisée pour gérer le texte. Il s'agit d'un ensemble de caractères (y compris des
chiffres, des espaces et des signes de ponctuation) entre guillemets.
 Boolean (Booléen) : une valeur booléenne n'a que deux valeurs possibles : true et false. Ces
données vous permettent d’effectuer des opérations logiques et vérifier si quelque chose est vrai ou
faux.
Vous pouvez également rencontrer deux autres types de données :
 Null : indique qu'une valeur n'existe pas. Ceci est écrit en utilisant le mot-clé null. C'est une valeur
importante car elle indique explicitement qu'aucune valeur n'a été donnée. Cela peut signifier une
chose différente d'une chaîne qui ne contient qu'un espace ou un zéro.
 Non défini : indique une situation où la valeur n'a pas été définie précédemment dans le code et
utilise le mot clé JavaScript undefined. Vous vous souvenez peut-être que si vous déclarez une
Page 121 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 variable mais ne lui donnez pas de valeur, la variable est dite indéfinie (vous êtes particulièrement
susceptible de voir ceci quand quelque chose ne va pas dans votre code).
17.8.2. Mots clés
Vous avez peut-être remarqué qu'il existe plusieurs mots-clés en JavaScript qui exécutent des fonctions,
telles que break, for, if et while, qui ont tous une signification particulière ; par conséquent, ces mots ne
doivent pas être utilisés dans les noms de variable, de fonction, de méthode ou d'objet. Voici une liste des
mots-clés que vous devriez éviter d'utiliser (certains d'entre eux ne sont pas encore utilisés, mais sont
réservés pour une utilisation future) :
abstract boolean break byte case catch char class const continue default do double else
extends false final finally float for function goto if implements import in instanceof
int interface long native new null package private protected public return short static
super switch synchronized this throw throws transient true try var void while with

17.9. En résumé

 Ce chapitre vous a présenté de nombreux nouveaux concepts : objets, méthodes, propriétés,

événements, tableaux, fonctions, interfaces, modèles d'objet, types de données et mots-clés. Bien
qu'il y ait beaucoup à assimiler d'un coup, lorsque vous aurez examiné certains des exemples du
chapitre suivant, cela devrait être beaucoup plus clair. Après cela, vous pouvez relire ce chapitre et
vous devriez être en mesure de comprendre les exemples de ce qui peut être réalisé avec JavaScript.
 Vous avez commencé par examiner comment accéder aux informations d'un document à l'aide du
modèle d'objet de document (ce chapitre s'est concentré sur le DOM de niveau 0).
 Une fois que vous avez compris comment obtenir des informations à partir d'un document, vous
pouvez utiliser JavaScript pour effectuer des calculs sur les données du document. JavaScript
effectue principalement des calculs à l'aide de fonctionnalités telles que les suivantes :
o Variables (qui stockent des informations en mémoire)
o Opérateurs (tels que les opérateurs arithmétiques et de comparaison)
o Fonctions (qui résident dans le <head> d'un document et contiennent du code appelé par un
événement)
o Déclarations conditionnelles (pour gérer les choix d'actions en fonction de différentes
circonstances)
o Boucles (pour répéter des instructions jusqu'à ce qu'une condition soit remplie).
 Comme vous le verrez dans le prochain chapitre, ces concepts simples peuvent être réunis pour
créer des résultats assez puissants. En particulier, lorsque vous verrez certains des scripts de
validation qui vérifieront les données de formulaire saisies par les utilisateurs, vous verrez du
JavaScript assez avancé et vous aurez une bonne idée de la façon dont les blocs de construction de
base peuvent créer des structures complexes.
 Enfin, vous avez examiné un certain nombre d'autres objets rendus disponibles via JavaScript ; vous
avez rencontré les objets string, date, math, array et window. Chaque objet contient des
fonctionnalités associées ; chacun a des propriétés qui vous renseignent sur l'objet (telles que la
date, l'heure, la taille de la fenêtre ou la longueur de la chaîne) et des méthodes qui vous permettent
de faire des choses avec ces données stockées dans l'objet.
 J'espère que vous commencez à comprendre comment JavaScript peut vous aider à ajouter de
l'interactivité à vos pages, mais vous verrez vraiment comment il le fait dans le chapitre suivant
lorsque vous vous plongerez dans des exemples de bibliothèques JavaScript et examinerez des
exemples qui vraiment vous permettront d’utiliser JavaScript.

17.10. Exercices

Exercice 17.10.1. Créez un script pour écrire la table de multiplication du nombre 5 de 1 à 20 à l'aide d'une
boucle while.
Exercice 17.10.2. Modifiez P3C3_EX03.html afin qu'il puisse dire l'une des trois choses suivantes :
❑ "Bonjour" aux visiteurs venant sur la page avant 12h. (en utilisant une instruction if).
❑ "Bon après-midi" aux visiteurs venant sur la page entre 12h et 18h. — à nouveau en utilisant une
instruction if. (Astuce : vous devrez peut-être utiliser un opérateur logique.)
Page 122 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 ❑ "Bonsoir" aux visiteurs qui arrivent sur la page après 18h jusqu'à minuit (à nouveau en utilisant
une instruction if).

Page 123 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 Chapitre 18 Travailler avec JavaScript
Vous avez appris les concepts clés du langage JavaScript au chapitre précédent ; dans ce chapitre, vous
allez voir comment ces concepts se rejoignent dans des scripts fonctionnels. En regardant plusieurs
exemples, vous apprendrez différentes façons dont JavaScript peut interagir avec vos pages Web, des codes
utiles et pratiques vous aideront à écrire vos propres JavaScripts et quelques raccourcis pour créer des
pages interactives. Le chapitre est grosso modo divisé en deux sections :
 Création de vos propres scripts de base : la première section se concentre sur la manière d'écrire
vos propres scripts de base. La plupart de ces exemples fonctionnent avec des éléments de
formulaire.
 Utilisation de bibliothèques JavaScript pré-écrites : la deuxième section se concentre sur un
certain nombre de scripts qui ont déjà été écrits et vous montre comment ajouter des éléments
puissants et complexes en termes de fonctionnalités à votre site avec seulement quelques lignes de
code.
À la fin de ce chapitre, non seulement vous en saurez beaucoup sur l'utilisation de JavaScript dans vos
pages, mais vous aurez également vu de nombreux outils et techniques utiles que vous pouvez utiliser dans
vos propres pages.

18.1. Conseils pratiques pour écrire des scripts

Avant de commencer à regarder les exemples, j'aimerais partager quelques conseils pratiques sur le
développement des JavaScripts qui devraient vous faire gagner du temps.
18.1.1. Quelqu'un a-t-il déjà écrit ce script ?
Il existe déjà des milliers de JavaScripts gratuits sur le Web, donc avant de commencer à écrire un script à
partir de zéro, cela vaut la peine de chercher pour voir si quelqu'un a déjà fait tout le travail acharné pour
vous. Voici quelques sites qui vous aideront à démarrer (et n'oubliez pas que vous pouvez effectuer une
recherche à l'aide d'un moteur de recherche tel que Google également) :
 www.HotScripts.com
 www.JavaScriptKit.com
 www.webreference.com/programming/javascript/
 http://JavaScript.Internet.com
Bien sûr, pour certaines tâches, vous devrez écrire votre propre script, mais vous pouvez toujours constater
que quelqu'un a écrit un script qui fait quelque chose de similaire (et pourrait apprendre quelque chose
juste en regardant comment il a abordé le problème).
Vous en saurez plus sur ce sujet vers la fin du chapitre lorsque vous étudierez l'utilisation des Bibliothèques
JavaScript.
18.1.2. Fonctions réutilisables
En plus de réutiliser les scripts et les dossiers d'autres personnes, vous pouvez également écrire du code
que vous pouvez réutiliser vous-même. Par exemple, vous pouvez créer plusieurs sites qui utilisent un
formulaire similaire permettant aux internautes de contacter les propriétaires du site. Sur chaque
formulaire de contact, plusieurs champs peuvent être obligatoires et vous pouvez décider d'écrire un script
pour s'assurer que les gens remplissent les champs obligatoires. Plutôt que d'écrire un nouveau script pour
chaque site, vous pouvez créer un script que vous pouvez utiliser sur n'importe quel formulaire de contact
que vous écrivez.
Donc, vous devriez viser à rendre votre code aussi réutilisable que possible, plutôt que d'écrire un script qui
ne fera que travailler avec une seule page. Vous en verrez bientôt des exemples.
18.1.3. Utilisez des fichiers JavaScript externes
Chaque fois que vous allez utiliser un script dans plus d'une page, c'est une bonne idée de le placer dans un
fichier JavaScript externe (une technique que vous avez apprise au début du chapitre 3 précédent). Par
exemple, si vous souhaitez créer un formulaire d'inscription à la newsletter sur chaque page de votre site,
vous pouvez utiliser un script pour vérifier que le texte saisi dans la zone d'adresse e-mail est dans un
format d'e-mail valide. Plutôt que d'inclure ce script sur chaque page, si le script réside dans un fichier
JavaScript externe :
 Vous n'avez pas à copier et coller le même code dans plusieurs fichiers.
Page 124 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
  La taille du fichier des pages est plus petite parce que le JavaScript est dans un fichier qui est inclus
sur chaque page plutôt que répété sur plusieurs pages.
 Si vous avez besoin de changer quelque chose dans le script, vous ne devez changer qu'un seul
script, pas chaque page qui l'utilise.
18.1.4. Placez les scripts dans un dossier de scripts
Lorsque vous utilisez des scripts externes, vous devez créer un dossier de scripts spécial, comme vous le
feriez avec un dossier images. Cela permet d'améliorer l'organisation de votre site et la structure de votre
répertoire. Chaque fois que vous devez regarder ou modifier un script, vous savez exactement où il se
trouvera.
Vous devez également utiliser des noms intuitifs pour vos fichiers de script afin de pouvoir les trouver
rapidement et facilement.

18.2. Validation du formulaire

La validation de formulaire est l'une des tâches les plus courantes effectuées à l'aide de JavaScript. Vous
avez probablement été confronté à des formulaires sur le Web qui vous ont présenté un message sur une
fenêtre surgissante lorsque vous n'avez pas entré de valeur dans un champ qui en nécessite un, ou lorsque
vous avez entré le mauvais type de valeur ; c'est parce que le formulaire a été validé. Autrement dit, un
script a vérifié si le texte que vous avez entré ou les choix que vous avez faits correspondent à certaines
règles que le programmeur a écrites dans la page. Par exemple, si l'on s'attend à ce que vous entriez une
adresse e-mail, ces règles de validation peuvent vérifier ce que vous avez entré pour s'assurer qu'il contient
un @ et au moins un point ou un point. Ce type de règles permet de s'assurer que les données fournies par
les utilisateurs satisfont aux exigences de la demande avant d'être soumises.
18.2.1. Quand valider
La validation peut se produire à deux endroits : dans le navigateur à l'aide de JavaScript et sur le serveur à
l'aide de l'un des plusieurs langages comme ASP.NET ou PHP. En fait, les applications qui collectent des
informations importantes à l'aide d’un formulaire (comme les commandes de commerce électronique) sont
généralement validées à la fois dans le navigateur et sur le serveur. Vous pouvez vous demander pourquoi
les formulaires sont validés dans le navigateur s'ils ne seront revérifiés que lorsqu'ils atteindront le serveur ;
la raison en est qu'il aide l'utilisateur à saisir les données correctes requises pour le travail sans que le
formulaire soit envoyé au serveur, traité, puis renvoyé en cas d'erreur. Cela a deux avantages clés :
 C'est plus rapide pour l'utilisateur car le formulaire n'a pas besoin d'être envoyé au serveur, traité et
retourné à l'utilisateur avec un message d'erreur pertinent.
 Cela économise la charge sur le serveur car certaines erreurs seront détectées avant la soumission
du formulaire.
Il est très important de valider sur le serveur car vous ne pouvez pas garantir que l'utilisateur dispose de
JavaScript activé dans son navigateur, et si un utilisateur a entré une valeur erronée dans une base de
données ou un autre programme, il pourrait empêcher l'ensemble de l'application de fonctionner
correctement. (Il est également possible pour les pirates de contourner JavaScript s'ils ont l'intention
d'envoyer des informations incorrectes.)
18.2.2. Ce que vous pouvez vérifier
Lorsqu'il s'agit de valider un formulaire, vous ne pouvez pas toujours vérifier si les utilisateurs vous ont
donné les bonnes informations, mais vous pouvez vérifier s'ils vous ont fourni des informations dans le bon
format. Par exemple, vous ne pouvez pas vous assurer que l'utilisateur a entré son numéro de téléphone
correct ; l'utilisateur pourrait entrer le numéro de téléphone de quelqu'un, mais vous pouvez vérifier qu'il
s'agit d'un chiffre plutôt que de lettres ou d'autres caractères, et vous pouvez vérifier que le numéro contient
un nombre minimum de chiffres.
Un autre exemple, vous ne pouvez pas vous assurer que quelqu'un a entré une vraie adresse e-mail plutôt
qu'une fausse adresse, mais vous pouvez vérifier que tout ce qui a été saisi respecte la structure générale
d'une adresse e-mail (y compris un @ et un point, et qu'il comporte au moins sept caractères). La validation
de formulaire JavaScript est donc un cas de minimisation des possibilités d'erreurs de l'utilisateur en
validant les contrôles de formulaire.
Lorsqu'il s'agit de champs de formulaire permettant à l'utilisateur d'indiquer son choix parmi une sélection
d'options (comme sous forme de cases à cocher, de listes déroulantes et de boutons radio), vous pouvez

Page 125 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
utiliser JavaScript pour vérifier qu'un utilisateur a sélectionné l'une des options (par exemple, pour vérifier
qu'un utilisateur a vérifié les termes et conditions d’utilisation de vos services).
18.2.3. Comment vérifier un formulaire
Il existe plusieurs façons de vérifier un formulaire. Habituellement, lorsque l'utilisateur appuie sur le
bouton d'envoi sur un formulaire, il déclenche le gestionnaire d'événements onsubmit sur l'élément <form>,
qui à son tour appelle une fonction de validation stockée soit dans un script séparé, soit dans l'en-tête du
document. La fonction doit alors retourner true pour que le formulaire soit envoyé, ou, si une erreur est
rencontrée, la fonction retourne false et le formulaire de l'utilisateur ne sera pas envoyé – en ce moment, le
formulaire doit indiquer à l'utilisateur là où il y a un problème avec les informations que ce dernier a
saisies.
Remarque : Si vous utilisez une fonction de validation appelée par le gestionnaire d'événements onsubmit,
mais que le navigateur de l'utilisateur ne prend pas en charge JavaScript, le formulaire sera toujours soumis
mais sans que les contrôles de validation soient effectués.
Dans les fonctions de validation que vous rencontrerez dans ce chapitre, la première tâche consistera à
définir une variable pouvant être retournée pour dire si le script a trouvé des erreurs ou non. Au début, la
valeur de cette variable est définie sur true (indiquant que le formulaire peut être envoyé car aucun
problème n’a été détecté) ; Après, lorsque le script vérifie les valeurs que l'utilisateur a entré, si la fonction
trouve une erreur la valeur de cette variable peut être changée en false pour empêcher le formulaire d'être
soumis.
Certains formulaires vérifient également les valeurs lorsque l'utilisateur passe d'un champ de formulaire à
l'autre, auquel cas les valeurs que l'utilisateur a saisies sont transmises à une fonction qui vérifie ce
contrôle de formulaire spécifique à l'aide de l'événement onblur (qui se déclenche lorsque ce contrôle de
formulaire perd le focus).
A. Vérification des champs de texte
Vous avez probablement vu des formulaires sur des sites Web qui vous demandent de fournir un nom
d'utilisateur et un mot de passe, puis de ressaisir le mot de passe pour vous assurer que vous n'avez pas
fait d'erreur de frappe. Cela pourrait ressembler à la figure suivante.

Examinons le code de ce formulaire et comment il appelle le JavaScript qui validera ce que l'utilisateur est
entré (P3C4_EX01.html).
<form name="frmRegister" method="post" action="register.aspx"
onsubmit="return validate(this);">
<div>
<label for="txtUserName">
Utilisateur:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
<input type="text" name="txtUserName" id="txtUserName" size="12" />
</div>
<div>
<label for="txtPassword">Mot de passe:&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="password" name="txtPassword" id="txtPassword" size="12" />
</div>
<div>
<label for="txtPassword2">Confirmez mdp:</label>
<input type="password" name="txtPassword2" id="txtPassword2" size="12"/>

Page 126 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 </div>
<div>
<input type="submit" value="Se connecter" />
</div>
</form>
La balise d'ouverture <form> a un attribut onsubmit ; lorsque l'utilisateur appuie sur le bouton d'envoi du
formulaire, le script spécifié dans cet attribut sera exécuté.
<form name="frmRegister" method="post" action="register.aspx"
onsubmit="return validate(this);">
Dans ce cas, lorsque l'utilisateur appuie sur le bouton d'envoi, une fonction appelée validate() s'exécute.
Avant le nom de la fonction on retrouve mot-clé return ; cela indique que la fonction validate() renverra
une valeur true ou false (pour que le formulaire soit soumis, la fonction doit retourner true ; si elle
renvoie false le formulaire ne sera pas soumis).
La fonction validate() que nous écrivons prendra un paramètre ; il indique à la fonction le formulaire que
vous voulez traiter. Ainsi, à l'intérieur des parenthèses de la fonction validate(), vous pouvez voir le mot
this, qui indique qu'il s'agit du formulaire que vous souhaitez valider (par opposition à tout autre
formulaire qui pourrait apparaitre sur la page).
Avec un formulaire de connexion comme celui-ci, vous voudrez peut-être vérifier quelques éléments :
 Que le nom d'utilisateur est d'une longueur minimale
 Que le mot de passe est d'une longueur minimale
 Que les deux mots de passe correspondent
Dans cette section, vous allez examiner deux manières différentes d'aborder la fonction validate() :
 Création d'une seule fonction pour vérifier le formulaire
 Création de fonctions réutilisables appelées par cette fonction
Dans les deux cas, la fonction validate() vivra dans l'élément <head> et commencera par définir une
variable appelée returnValue à true ; si aucune erreur n'est trouvée, ce sera la valeur que la fonction
retournera, ce qui permettra l'envoi du formulaire. Si une erreur est rencontrée, la variable prendra la
valeur false, et le formulaire ne sera pas envoyé.
Approche à fonction unique
La première approche que nous allons examiner pour valider ce formulaire est d'écrire un script de
validation spécialement pour ce formulaire, où toutes les règles sont implémentées à l'intérieur d'une seule
fonction (P3C4_EX01.html).
La fonction s'appellera validate() et elle s'attendra à ce qu'on lui dise avec quelle formulaire elle travaille
en tant que paramètre de la fonction : function validate(form) { … }
C'est pourquoi l'attribut onsubmit de l'élément <form> a utilisé le mot-clé this lors de l'appel à la fonction,
indiquant qu'il s'agit du formulaire actuel qu'elle doit traiter.
Dans le script, vous souhaitez collecter les valeurs que l'utilisateur a saisies dans les contrôles de texte et
les stocker dans des variables. Vous identifiez les contrôles de formulaire dans la page un par un, en
utilisant la notation par points que vous avez vue dans le dernier chapitre. Vous collectez ensuite la valeur
que l'utilisateur a saisie dans ce contrôle à l'aide de la propriété value :
function validate(form) {
var returnValue = true;
var username = form.txtUserName.value;
var password1 = form.txtPassword.value;
var password2 = form.txtPassword2.value;
Comme nous avons indiqué à la fonction le formulaire avec laquelle nous travaillons, la notation par points
peut commencer par le formulaire plutôt que document.frmRegister ; les deux lignes suivantes feraient
exactement la même chose :
var username = document.frmRegister.txtUserName.value;
var username = form.txtUserName.value;
Vous pouvez maintenant commencer à vérifier si les données saisies par l'utilisateur répondent aux critères
dont vous avez besoin pour que le formulaire soit soumis. Vous pouvez d'abord vérifier si le nom

Page 127 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
d'utilisateur comporte au moins six caractères. La valeur saisie par l'utilisateur dans le contrôle du
formulaire de nom d'utilisateur est déjà stockée dans une variable appelée username, et comme il s'agit
d'une chaîne (un ensemble de lettres ou de chiffres), vous pouvez utiliser la propriété length pour vérifier la
longueur de cette chaîne.
Si le nom d'utilisateur n'est pas assez long, vous devrez prendre des mesures, vous placerez donc votre test
de validation dans une condition if. Ce qui suit indique que si la longueur de la variable est inférieure à six
caractères, le code entre accolades sera exécuté :
if (username.length < 6) {
"le nom d'utilisateur contient moins de 6 caractères, alors faites quelque chose"
}

Dans ce cas, s'il contient moins de six caractères, vous ferez trois choses :
 Affecter la valeur false à la variable returnValue, afin que le formulaire ne soit pas soumis.
 Dire à l'utilisateur ce qui s'est passé afin qu'il puisse corriger l'erreur. Pour cet exemple, nous allons
utiliser la fonction JavaScript alert() pour créer une boîte d'alerte (comme celles que vous avez
rencontrées dans le dernier chapitre) contenant un message pour l'utilisateur.
 Renvoyer le focus à cet élément (à l'aide de la méthode JavaScript focus()) sur le formulaire afin
que l'utilisateur puisse modifier ce qu'il a mis dans ce formulaire.
Ici, vous pouvez voir l'instruction if avec toutes ces actions :
if(username.length < 6) {
returnValue = false;
alert("Votre nom utilisateur doit avoir au minimum\n6 caractères.\n
Veuillez reessayer svp.");
frmRegister.txtUserName.focus();
}
La boîte d'alerte était autrefois un moyen très populaire d'afficher les erreurs des utilisateurs sur leurs
formulaires (car il s'agit d'un moyen très simple de rétroaction). De nos jours, il est plus courant d'écrire un
message d'erreur dans la page elle-même ; cependant, c'est plus compliqué, donc vous verrez comment faire
cela plus tard dans le chapitre.
Remarque : Vous avez peut-être remarqué \n au milieu du message d'erreur ; cela crée un saut de ligne en
JavaScript.
Ensuite, vous voulez vérifier la longueur du premier mot de passe. Pour ce faire, vous pouvez utiliser la
même approche. Mais si le mot de passe n'est pas assez long, vous viderez les deux contrôles de mot de
passe et donnerez le focus à la première zone de saisie de mot de passe :
if (password1.length < 6) {
returnValue = false;
alert("Votre mot de passe doit avoir au moins\n6 caractères.\n
Veuillez reessayer svp.") ;
frmRegister.txtPassword.value = "" ;
frmRegister.txtPassword2.value = “” ;
frmRegister.txtPassword.focus();
}

Supposons que le code est arrivé aussi loin et que le nom d'utilisateur et le premier mot de passe sont
suffisamment longs. Maintenant, vous devez vérifier si la valeur de la première case de mot de passe est la
même que la seconde, comme indiqué ici.
N'oubliez pas que l'opérateur != utilisé dans cette condition signifie "pas égal", donc l'instruction de la
condition if s’exécutera si la valeur de password1 n'est pas égale à celle de password2.
if (password1.value != password2.value) {
returnValue = false;
alert("Vos mots de passe ne sont pas identiques.\n
Veuillez reessayer svp.") ;
Page 128 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 frmRegister.txtPassword.value = "" ;
frmRegister.txtPassword2.value = "" ;
frmRegister.txtPassword.focus();
}

Vous pouvez voir ici que lorsque l'utilisateur a saisi des mots de passe qui ne correspondent pas,
l'utilisateur reçoit une boîte d’alerte avec un message d'erreur signalant que les entrées de mot de passe ne
correspondent pas. De plus, le contenu des deux zones de saisie de mot de passe sont effacées et le focus
est renvoyé à la première zone de mot de passe.
Parce qu'une entrée de mot de passe affichera des points ou des astérisques plutôt que des caractères,
lorsqu'un utilisateur fait une erreur avec une saisie de mot de passe, il ne pourra pas voir où se trouve
l'erreur. C'est pourquoi il faut effacer les zones de saisie de mot de passe lorsqu'un utilisateur s'y est
trompé.
La seule chose qu'il reste à faire dans cette fonction est de renvoyer la valeur de la variable returnValue —
qui doit être true si toutes les conditions sont remplies ou false sinon.
return returnValue;
}
Voici la fonction dans son intégralité (P3C4_EX01.html) :
function validate(form) {
var returnValue = true;
var username = form.txtUserName.value;
var password1 = form.txtPassword.value;
var password2 = form.txtPassword2.value;
if(username.length < 6) {
returnValue = false;
alert("Votre mot de passe doit avoir au moins\n6 caractères.\n
Veuillez reessayer svp.");
document.frmRegister.txtUserName.focus();
}
if (password1.length < 6) {
returnValue = false;
alert("Votre mot de passe doit avoir au moins\n6 caractères.\n
Veuillez reessayer svp.");
document.frmRegister.txtPassword.value = "";
document.frmRegister.txtPassword2.value = "";
document.frmRegister.txtPassword.focus();
}
if (password1 != password2) {
returnValue = false;
alert("Vos mots de passe ne sont pas identiques.\n
Veuillez reessayer svp.");
document.frmRegister.txtPassword.value = "";
document.frmRegister.txtPassword2.value = "";
document.frmRegister.txtPassword.focus();
}
return returnValue;
}
Dans la Figure ci-dessous, vous pouvez voir le résultat si le mot de passe de l'utilisateur n'est pas assez
long.

Page 129 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Cet exemple devrait vous avoir donné une bonne idée de la façon de vérifier ce qu'un utilisateur a saisi dans
un formulaire contre un ensemble de règles.
Approche des fonctions réutilisables
Bien que l'exemple que vous venez de voir fonctionne correctement, vous pouvez économiser du temps et
des efforts en écrivant du code que vous pouvez réutiliser. Par exemple, de nombreux programmeurs ont un
seul fichier JavaScript qui contiendra un ensemble de fonctions de validation de formulaires qu'ils peuvent
utiliser pour n'importe quel formulaire qu'ils écrivent. Ces fonctions peuvent vérifier des choses comme ce
qui suit :
 Si l'utilisateur a saisi un texte plus long que la longueur minimale requise comme démontré avec le
nom d'utilisateur et le mot de passe dans le dernier exemple
 Si le texte saisi par l'utilisateur se compose uniquement de chiffres (pas d'autres caractères) — ce
qui peut être utile pour les numéros de téléphone ou pour demander aux clients la quantité de
marchandises qu'ils souhaitent dans une boutique de e-commerce
 Si, lorsque vous demandez une adresse e-mail, l'utilisateur a entré cette adresse dans le meilleur
format.
Bien que l'exemple que vous venez de voir fonctionne correctement, vous pouvez économiser du temps et
des efforts en écrivant du code que vous pouvez réutiliser. Par exemple, de nombreux programmeurs ont un
seul fichier JavaScript qui contiendra un ensemble de fonctions de validation de formulaires qu'ils peuvent
utiliser sur n'importe quel formulaire qu'ils écrivent. Ces fonctions peuvent vérifier des choses comme ce qui
suit :
 Si l'utilisateur a saisi un texte plus long que la longueur minimale requise comme démontré avec le
nom d'utilisateur et le mot de passe dans le dernier exemple
 Si le texte saisi par l'utilisateur se compose uniquement de chiffres (pas d'autres caractères) — ce
qui peut être utile pour les numéros de téléphone ou pour demander aux clients la quantité de
marchandises qu'ils souhaitent dans une boutique e-commerce
 Si, lorsque vous demandez une adresse e-mail, l'utilisateur a entré cette adresse dans le bon format
Les fichiers JavaScript contenant des fonctions pouvant être réutilisées sont souvent appelés bibliothèques
JavaScript. Allons examiner à nouveau le même formulaire, mais développer une approche de validation qui
utilise cette approche.
En utilisant la deuxième approche, nous devons encore écrire une fonction validate() pour chaque
formulaire, mais la fonction est beaucoup plus courte que le dernier que vous avez vu. Son travail consiste à
transmettre des valeurs du formulaire aux fonctions de la bibliothèque de validation JavaScript qui effectue
le véritable travail de validation. Donc, cette fois, notre fonction validate() appellera deux autres
fonctions dans la bibliothèque JavaScript :
 validateConfirmPassword() vérifiera que les deux champs de mot de passe correspondent.
 validateMinimumLength() s'assurera que l'utilisateur a entré un nombre minimum de caractères
pour le champ de formulaire.
Vous examinerez ces fonctions dans un instant, mais examinons d'abord la fonction validate() qui les
appelle (qui vit dans la même page que le formulaire); son travail consiste à transmettre des valeurs du
formulaire à la bibliothèque de fonctions. S'il y a une erreur, il empêchera alors la soumission du

Page 130 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
formulaire, et indiquera à l'utilisateur le message d'erreur. Avant de regarder chaque ligne de la fonction
individuellement, voici la fonction entière :
function validate(form) {
var returnValue = "";
returnValue += validateConfirmPassword(form.txtPassword, form.txtPassword2, 'Vos mots de
passe ne correspondent pas');
returnValue += validateMinimumLength(form.txtPassword, 6, 'Votre mot de passe doit avoir
au moins 6 caractères');
returnValue += validateMinimumLength(form.txtUserName, 6, "Votre nom d''utilisateur doit
avoir au moins 6 caractères");
if (returnValue != "") {
return false;
}
return true;
}

Regardons cela de plus près ; il commence par le nom de la fonction. La fonction prend un paramètre, le
formulaire qu'il doit valider, qui est donné entre parenthèses.
function validate(form) {
Ensuite, une variable appelée returnValue est déclarée ; cette fois, plutôt que d'être initialisée à true, elle
est initialisée à une chaîne vide en utilisant des guillemets vides : var returnValue = "";
Vous effectuez ensuite trois appels à des fonctions, chacune vérifiant un aspect différent du formulaire.
Nous allons regarder chacune d'lles à son tour en un instant. Si ces fonctions rencontrent un problème
(parce que l'utilisateur n'a pas entré ce que vous vouliez), les fonctions renverront une erreur. Vous vous
souvenez peut-être du dernier chapitre que += ajoute une valeur à une variable existante, donc si la fonction
renvoie une erreur, le message d'erreur est ajouté à la variable returnValue ; s'il n'y a pas d'erreur, rien ne
sera ajouté à la variable.
D'abord, vous pouvez voir que nous appelons la fonction validateConfirmPassword(). Nous lui passons
les deux contrôles de mots de passe que nous voulons qu'elle vérifie en utilisant la notation par points, ainsi
que le message d'erreur que nous voulons afficher si les champs ne correspondent pas.
returnValue += validateConfirmPassword(form.txtPassword, form.txtPassword2, 'Vos mots de
passe ne correspondent pas');
Parce que la fonction validateConfirmPassword() renverra le message d'erreur si les mots de passe ne ne
correspondent pas, nous saurons s'il y a un problème car l'attribut returnValue contiendra ce message
d’erreur ; il ne sera plus vide.
Nous appelons ensuite la fonction validateMinimumLength() pour vérifier la longueur du premier contrôle
de mot de passe. Ici nous lui passons en paramètre dans le contrôle du formulaire à vérifier, le nombre
minimum de caractères que l'utilisateur peut saisir pour ce contrôle de formulaire et le message d'erreur
indiquant si le contrôle de formulaire n'a pas cette longueur.
returnValue += validateMinimumLength(form.txtPassword, 6, 'Votre mot de passe doit avoir au
moins 6 caractères');
Nous vérifions ensuite que le nom d'utilisateur saisi comporte plus de six caractères. Pour ce faire, nous
appelons la fonction validerMinimumLength() une deuxième fois. Ici, vous pouvez déjà commencer à voir
les avantages de la réutilisation du code ; plutôt que de répéter à nouveau la fonction entière, nous utilisons
la même fonction que nous venons d'utiliser une deuxième fois, mais cette fois nous lui disons de vérifier un
contrôle de formulaire différent et d'afficher un message d’erreur différente en cas de problème.
returnValue += validateMinimumLength(form.txtUserName, 6, "Votre nom d'utilisateur doit
avoir au moins 6 caractères");
Après avoir vérifié ces trois aspects du formulaire, en cas de problème returnValue ne sera plus vide.
L'instruction if suivante indique que si returnValue n'est pas vide, la fonction validate() doit retourner
false pour dire que le formulaire ne doit pas être soumis. Sinon, s'il est vide, on peut retourner true, qui
permettra de soumettre le formulaire.
if (returnValue != "") {
Page 131 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
 return false;
}
return true;
Vous remarquerez peut-être que nous commençons par les règles qui s'appliquent aux derniers éléments du
formulaire, et ensuite aux règles qui s'appliquent aux premiers contrôles de formulaire. Nous faisons cela
parce que, lorsqu'il y a une erreur, nous voulons remettre le focus sur le champ de formulaire avec l'erreur
(comme nous l'avons fait dans le premier exemple). S'il y a plus d'une erreur, nous voulons que l'utilisateur
commence en haut du formulaire et corrige tous les erreurs, nous voulons donc que la dernière erreur
traitée par le script soit la première que l'utilisateur verra.
Comme vous le verrez dans un instant, lorsque ces fonctions trouvent une erreur, non seulement elles se
concentrent sur cet élément de formulaire, ils écrivent également le message d'erreur dans la page, ce qui
signifie que nous devons changer le formulaire dans la page XHTML légèrement. Regardons à nouveau le
formulaire ; cette fois, il y a des éléments <span> vides après les contrôles du formulaire. Ceux-ci
contiendront tous les messages d'erreur renvoyés. Lors de la conception de votre formulaire, il est important
de laisser suffisamment d'espace dans la page pour ces messages d'erreur. Il est également très important
qu'il n’y ait pas d'espace entre la fermeture de la balise <input /> et le début de la balise <span> ; sinon, le
formulaire ne fonctionnera pas.
<form name="frmRegister" method="post" action="register.aspx"
onsubmit="return validate(this);">
<div>
<label for="txtUserName">Utilisateur:</label>
<input type="text" id="txtUserName" size="12" /><span
class="message"></span>
</div>
<div>
<label for="txtPassword">Mot de passe: </label>
<input type="password" id="txtPassword" size="12" /><span
class="message"></span>
</div>
<div>
<label for="txtPassword2">Confirmer mdp:</label>
<input type="password" id="txtPassword2" size="12" /><span
class="message"></span>
</div>
<div>
<input type="submit" value="Se connecter" />
</div>
</form>
Voyons maintenant la fonction qui va vérifier qu'un utilisateur a entré un nombre minimum de caractères
dans un champ de formulaire spécifié.
function validateMinimumLength (control, length, errormessage) {
var error="";
document.getElementById(control.id).nextSibling.innerHTML="";
if (control.value.length < length) {
error = errormessage;
document.getElementById(control.id).nextSibling.innerHTML=errormessage;
document.getElementById(control.id).focus();
}
return error;
}
Nous passons trois choses dans la fonction afin qu'elle puisse effectuer son calcul :
 Le contrôle de formulaire que nous voulons vérifier
 La longueur du texte que nous nous attendons à ce que l'utilisateur ait saisi
 Un message d'erreur que nous montrerons à l'utilisateur si le contrôle n'est pas assez long
Page 132 sur 140
XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
function validateMinimumLength (control, length, errormessage) {
Vous pouvez voir entre parenthèses les mots control, length et errormessage. A l'intérieur de la fonction,
nous pouvons utiliser ces mots pour faire référence aux valeurs transmises à la fonction lorsqu'elle a été
appelée. Par exemple, regardez sur cette ligne :
if (control.value.length < length) {
Nous avons une instruction if vérifiant si la longueur du contrôle passé dans le paramètre control est
inférieure au nombre minimum de caractères que nous autorisons (length).
Si l'utilisateur n'a pas entré suffisamment de caractères, nous définissons la valeur d'une variable appelée
error (qui était déclaré dans la deuxième ligne de la fonction) pour contenir le message d'erreur.
error = errormessage;
Nous écrivons ensuite le message d'erreur dans l'élément supplémentaire <span> que nous avons ajouté
après chaque contrôle de formulaire pour afficher le problème.
document.getElementById(control.id).nextSibling.innerHTML=errormessage;
Il se passe beaucoup de choses dans cette ligne, alors décomposons-la :
control.id vous donne la valeur de l'attribut id du contrôle de formulaire avec lequel vous êtes en train de
travailler.
document.getElementById(control.id) vous donne le contrôle de formulaire avec lequel vous travaillez
(la méthode getElementById() renvoie un élément dont l’attribut id est donné, et vous venez de voir
comment obtenir la valeur de l'attribut id pour le contrôle de formulaire avec lequel vous travaillez en
utilisant contrôle.id).
nextSibling renvoie l'élément suivant après ce contrôle de formulaire, qui est l'élément <span> suivant qui
contiendra le message d'erreur.
innerHTML=errormessage ajoute le message d'erreur à l'intérieur de cet élément <span>.
S'il y a un problème, nous donnons également le focus au contrôle du formulaire contenant le problème :
document.getElementById(control.id).focus();
Nous renvoyons ensuite l'erreur à la fonction validate() dans la page contenant le formulaire (afin qu'elle
puisse empêcher la soumission du formulaire). Avant de voir comment nous transmettons l'erreur, vous
avez peut-être remarqué cette ligne de code, qui apparaît avant l'instruction if qui vérifie la longueur de la
valeur entrée dans le champ de formulaire :
document.getElementById(control.id).nextSibling.innerHTML=””;
Son but est de s'assurer que l'élément <span> à côté du contrôle de formulaire est vide. Nous devons le faire
parce que, une fois qu'un formulaire a été soumis et que des erreurs ont été repérées, l'utilisateur peut
soumettre à nouveau le formulaire — auquel cas nous devons effacer tous les messages d'erreur, puis
vérifier à nouveau le contrôle du formulaire, et seulement si le problème persiste, affichez à nouveau le
message d'erreur.
Comme vous pouvez l'imaginer, si vous créez beaucoup de sites, avec de nombreux formulaires, la
possibilité de réutiliser les fonctions de validation vous évite d'avoir à coder chaque formulaire encore et
encore.
La figure suivante montre le message d'erreur généré lorsque l'utilisateur n'a pas saisi de mot de passe avec
la bonne taille et que les 2 mots de passe ne correspondent pas.

18.3. La méthode replace()

Page 133 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Maintenant que vous avez vu des exemples de validation de champs de texte à l'aide d'une seule fonction et
à l'aide de fonctions réutilisables, il est temps d'examiner d'autres façons de travailler avec des entrées de
texte.
La méthode JavaScript replace() est souvent pratique avec les saisies de texte car elle vous permet de
remplacer certains caractères par d'autres caractères. La manière la plus simple d'utiliser la méthode
replace() consiste à utiliser la syntaxe suivante :
string.replace(oldSubString, newSubString);
Par exemple, imaginez que vous ayez une variable appelée message. La ligne suivante regarderait cette
variable et remplacerait les instances des lettres "mauvais" par les lettres "bon":
message.replace('mauvais', 'bon');
Ajoutons ceci dans un formulaire pour que vous puissiez le voir fonctionner ; nous avons un <textarea>
qui contient la phrase "Je pense que ce serait une mauvaise idée de faire un badge." Lorsque
l'utilisateur cliquera sur le bouton, nous remplacerons le mot "mauvaise" avec le mot "bonne". Plutôt que
de créer une fonction pour le démontrer, nous pouvons simplement mettre le script que nous voulons
exécuter dans l'événement onclick du bouton (P3C4_EX02.html).
<form name="myForm">
Message: <textarea name="myTextArea" id="myTextArea" cols="40" rows="10">
Je pense que ce serait une mauvaise idée de faire un badge.</textarea>
<input type="button" value="Remplacer le mot mauvaise"
onclick="document.myForm.myTextArea.value =
document.myForm.myTextArea.value.replace('mauvaise', 'bonne');" />
</form>
Si vous regardez la valeur de l'attribut onclick, il prend tout ce qui se trouvait dans la zone de texte et
remplace toute occurrence du mot "mauvaise" avec le mot "bonne". La figure suivante vous montre à quoi
cela pourrait ressembler après que l'utilisateur ait appuyé une fois sur le bouton.

Il y a quelque chose d'intéressant à noter ici. La fonction replace() remplace la première instance de la
mauvaise chaîne. Si vous appuyiez à nouveau sur le bouton, vous verriez un autre problème : le mot
"badge" deviendrait en « goodge ». Nous pouvons résoudre ces deux problèmes en utilisant quelque chose
connu sous le nom d'expression régulière dans la fonction replace().

Page 134 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024
Fiche résumée de ce cours

Page 135 sur 140

XHTML, CSS, JAVASCRIPT – © Février 2023 – Mise à jour : 24 Avril 2024