Faculté des Sciences informatiques

Bac I

Notes de cours de Programmation Web I

MIANGALA Anaclet

2024-2025

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 1
2025 : Version brouillon
Contenu du cours

Chapitre I : Généralités sur le développement web

Chapitre II : Description d’une page web

Chapitre III : Les Formulaires

Chapitre IV : Les Styles

Chapitre V : Applications

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 1
2025 : Version brouillon
0. Introduction

L’internet est fait de nombreux réseaux distincts interconnectés, appartenant à

des organisations ainsi que des fournisseurs des services (FSI : « Fournisseur d’Accès
à l’Internet » Microcom par exemple ou ISP : « Internet Service Provider » Yahoo,
Google par exemple).

Les services proposés sur internet sont entre autre :

 Les courriers électroniques ;

 Les conférences et sales des discussions ;
 La facilité d’accéder à des ordinateurs distants ;
 La facilité d’envoyer ou de recevoir des fichiers ;
 Etc.

Le début de l’internet remonte à la fin des années 1960, et au début des années
1970. Alors qu’il était au stade de projet expérimental du ministère de la défense
américain nommé ARPANET (Advanced Research Project Agency Network), pour
tenter de mettre en place des réseaux capables de survivre à une description partielle,
due, selon le contexte géopolitique, à une attaque nucléaire.

Tout au long du processus de développement de cette technologie, les militaires

ont forgé des liens très étroits avec des grandes entreprises et les universités. Une des
conséquences est que la responsabilité de la continuité de la recherche a été
transférée à la Nationale Science Fondation (NSF).

Le terme le plus en vogue et que les médias en particulier ont adapté est celui
de « l’autoroute de l’information ». Il s’agit d’une métaphore destinée à représenter le
futur réseau mondial qui assurera la connexion, l’accès à l’information et des services
en ligne pour les utilisateurs du monde entier.

Bref, l’internet est une collection à échelle mondiale des réseaux informatiques
interconnectés.

Le Web, c’est ce que les anglophones appellent « World Wide Web (WWW) », et
les francophones « la toile mondiale ». C’est un moyen simple de cliquer pour
explorer le volume gigantesque des pages d’informations situées sur internet.

Il est aussi une des possibilités offerte le réseau internet, de naviguer entre les
documents reliés par des liens hypertextes. Sur le web, les informations se présentent

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 2
2025 : Version brouillon
dans des pages web que celles-ci affichent sous-forme d’une suite de textes, de
graphiques, d’images, de sons et de vidéos.

Une page web peut contenir outre, des liens hypertextes vers d’autres pages
web ; ce qui permet aux utilisateurs de naviguer parmi les informations d’une
manière résolument non séquentielle.

Le principe de web repose sur l’utilisation d’hyperliens pour naviguer entre les
documents grâce à un logiciel appelé « Navigateur ou Brouser ».

Une page web est un simple fichier texte, écrit dans un langage de description
(HTML), permettant de décrire la mise en page des documents et d’inclure des
éléments graphiques ou bien des liens vers d’autres documents à l’aide des balises.

Un site web, aussi appelé « site internet » est un ensemble des fichiers html
stockés sur un ordinateur connecté en permanence à internet et hébergeant les pages
web (serveur web).

Un site web est habituellement architecturé autour d’une page centrale appelée
« Page d’accueil » et proposant des liens vers un ensemble d’autres pages hébergées
sur le même serveur ; et parfois des liens externes ; c’est-à-dire des pages hébergées
par d’autres serveurs.

La création d’un site web est un projet à parts entières comprenant trois phases :

 Conception : représentant la formalisation de l’idée ;

 Réalisation : correspondant au développement du site web ;
 Hébergement : se rapportant à la mise en ligne du site de manière pérennante.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 3
2025 : Version brouillon
Chapitre I : Développement web

Le développement web désigne de manière générale les tâches associées au

développement des sites web destinés à être hébergés via intranet ou internet.

Le processus de développement web comprend, entre autre, la conception des sites

web, le développement de contenu web, l’élaboration des scripts (coté client ou coté
serveur) et la configuration de la sécurité du réseau.

Le développement web est le codage ou la programmation qui permet de faire

fonctionner un site web, selon les exigences du propriétaire. Il traite principalement
de l’aspect non conceptuel de la création des sites web, qui comprend le codage et
l’écriture du balisage.

Le développement web va de la création des pages en textes bruts à des

applications web complexes, des applications des réseaux sociaux et des applications
commerciales électroniques.

1.1. La fonction d’un développeur web

Un développeur web ou programmeur web est une personne qui prend un projet
web, qui a été pensé et réfléchi par un client ou une équipe de conception, et le
transforme en site web. Ils le font en écrivant des lignes de code compliqués. Pour les
écrire, ils utilisent différents langages avec une spécificité et une utilité pour chacun
d’entre eux.

Les développeurs web ont un travail assez difficile, car ils doivent prendre une
langue que nous comprenons, comme l’anglais, et la traduire dans une langue qu’un
ordinateur comprend, comme python ou html.

Comme vous pouvez l’imaginer, cela va prendre beaucoup de temps et d’efforts

pour apprendre différents langage de programmation ainsi que leurs utilisations.
Différents types de développeurs se spécialisent dans différents domaines, ce qui
signifie que les grands projets web sont généralement une collaboration entre
plusieurs développeurs différents.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 4
2025 : Version brouillon
1.2. Types de développement web

Les trois principaux types de développeurs sont : Front-end, Back-end, et Ful-

stack.

Le terme front-end et back-end sont utilisés dans le métier des programmeurs pour
décrire les couches d’un site web.

a) Les développeurs front-end : ils s’occupent de la partie d’un site web que les gens
voient et avec laquelle ils interagissent.

b) Les développeurs back-end : Sons responsables eux, du code en arrière-plan. Ce

code va servir à contrôler la façon dont un site web va se charger et s’exécuter.

c) Les développeurs full-Stack : Ils font un peu de tout.

1.2.1. Développement Front-End

Historiquement les pages web se contentaient d’afficher un contenu statistique et

de proposer des liens vers d’autres pages. Des éléments dynamiques sont ensuite
progressivement apparus : animations, formulaires avec vérification de saisie, < Si
bien, qu’aujourd’hui, de nombreuses pages web sont des véritables interfaces
utilisateurs, comparables aux logiciels classiques sur le système. On appelle ce genre
des pages « des applications web » (exécutées par un navigateur web), à distinguer
des applications natives (exécutées par le système d’exploitation).

Un développeur front-end va prendre en charge la conception du site web et écrire

le code nécessaire pour l’implémenter sur le web. Il se doit de maitriser au moins
trois langages qui sont : html, CSS et Java Script. Il a aussi des responsabilités dans le
référencement naturel (SEO), la conception graphique et l’édition des images et
photos du site. Mais aussi les différents tests (utilisabilité et accessibilité) ainsi que la
performance du site web et sa compatibilité avec les différents navigateurs et formats
d’affichage (mobil, desktop), autrement-dit « responsive design ».

 Les différents langages utilisés en développement web front-end

a) html : permet d’intégrer du contenu à site web tout en le divisant en titres,

paragraphes et tableaux. C’est un langage essentiel. Il indique au site web, quel
contenu afficher et, dans une certaine mesure, comment l’afficher.

Des commandes telles que « liens », « images » ou « vidéos » indiquent à votre

navigateur quoi afficher, d’où obtenir le contenu et comment l’afficher.
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 5
2025 : Version brouillon
b) CSS : Il est utilisé en conjonction avec html. Alors que html indique à la page web
« quel contenu affiché », CSS indique à la page web « comment afficher le
contenu ». C’est un langage de « style ». il va notamment permettre le
changement des couleurs, de police, le positionnement des éléments ainsi que le
changement des tailles du texte.

c) Java Script : Va quant à lui, rendre votre site web réactif, interactif et attrayant
pour vos visiteurs. Un développeur « Java Script » va travailler sur des extraits
des codes Java Script qui, souvent seront intégrés aux codes sources html d’un
site web. Bien qu’il ait toujours été un langage front-end, Java Script devient
également de plus en plus populaire pour le développement principal.

Le langage des applications web est sans conteste le « Java Script ». C’est un
langage assez controversé mais qui a tout de même des avantages indéniables,
surtout depuis les récentes normes (ES2015<) : flexibilité, expressivité, performance,
intégration dans le navigateur,<

Cependant, Java Script permet facilement de faire des erreurs qui se produiront à
l’exécution finale de l’application, les fameuses rutines errors. Pour éviter ces erreurs,
on utilise souvent des outils comme des analyseurs statiques, des debugger ou tests
unitaires. Une autre solution consiste à utiliser des Framework (Angular, React,<),
des bibliothèques (imitables, Redux,<) voire des langages dérivés (TypeScript,<)
qui réduisent les sources d’erreurs possibles.

En fait, une bonne partie des solutions proposées pour rendre le développement
en Java Script plus robuste existe déjà naturellement dans des langages fonctionnels
comme Haskell : immuabilité, typage statique fort,<

Certains développeurs se sont donc inspirés des langages fonctionnels pour proposer
des technologies web front-end garantissant l’absence d’erreurs au rutine.

L’idée de ces technologies et de fournir un écosystème complet (langage

fonctionnel, compilateur, bibliothèque,<) adaptés au web et produisant du code Java
Script exécutable par un navigateur. Parmi ces technologies, on trouve ELM et
PureScript, qui proposent des langages inspirés d’Haskell.

Plusieurs autres outils de développement web front-end très pratiques car

permettant de gagner énormément de temps et d’accélérer le processus de
développement, facilitant grandement le codage, la visualisation et la maintenance
du code sont disponibles, comme : Copen, BootStrap, React JS,<
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 6
2025 : Version brouillon
1.2.2. Développement Bac-end

Alors que les développeurs front-end sont responsables de la programmation coté

client, les développeurs back-end doivent s’occuper du coté serveur.

Cela signifie qu’ils doivent créer les codes et les programmes qui allument le serveur
du site web, les bases de données et toutes les applications que contient le site
internet. Ils utilisent un large éventail des langages différents du coté serveur afin de
construire des programmes compliqués.

Parmi les langages les plus utilisés, citons : PHP, Python, Java et Ruby, tandis que le
SQL est couramment utilisé pour gérer et analyser les données dans les bases de
données des sites web.

La vitesse d’un site web étant une considération majeure lorsqu’il s’agit
d’optimisation pour le moteur de recherche (SEO), elle est un facteur important lors
du développement du back-end.

Les différents langages utilisés en développement web « back-end »

a) PHP : a dominé les définitions de ce qu’est le développement web. Connu comme

le langage de l’internet, il est actuellement utilisé sous une forme ou une autre sur
plus de 80 % des sites web existants. Le PHP est très populaire auprès des
développeurs. Notamment sur des sites web construits sur des plates-formes
comme WordPress. PHP joue un rôle particulièrement important en matière de
développement WordPress.

b) Python : est un langage de programmation orienté-objet de haut niveau utilisé

principalement pour le développement des sites web et d’applications. C’est un
langage de programmation à usage général, ce qui est une autre façon de dire qu’il
peut être utilisé pour presque tout. Plus important encore, il s’agit d’un langage
interprété, ce qui signifie que le code écrit n’est pas réellement traduit dans un
format lisible par ordinateur au moment de l’exécution.

Le cas d’utilisation le plus basic de python, est un langage de script et

d’automatisation. Il est également utilisé pour automatiser les interactions avec le
navigateur web ou les interfaces graphiques des applications.

c) Java : Est un vieux langage qui est populaire pour toute une série d’utilisation des
programmations différentes. Du point de vue du développement web, java est

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 7
2025 : Version brouillon
 utilisé pour créer les applications web réactives et évolutives qui sont utilisées
pour la conception rapide des sites web.

d) Ruby : est le plus utilisé pour créer les applications web. Cependant, c’est un
langage à usage général similaire à python, il a donc de nombreuses autres
applications comme l’analyse de données, le prototypage et la preuve des
concepts. Le langage Ruby fera gagner du temps à des efforts, ce qui accélèrera
l’achèvement du projet sans sacrifier ses fonctionnalités.

Tous ces langages vont permettre de réaliser et d’assurer une évolutivité et

disponibilité du réseau ainsi que la gestion des bases de données, leurs sauvegardes,
leurs transformations et leurs cyber-sécurité.

1.3. Différence entre « web design » et « web développement »

Le web design et le développement web sont deux choses différentes, mais bien
sûr, cela dépend de la façon dont vous définissez « design-développement ». Il faut
des connaissances différentes pour comprendre ce qu’est un concepteur de site web
et ce qu’est un développeur de site web. Ces professions sont différentes et elles ont
les rôles suivants :

 Le web Designer est la personne qui est responsable de la création du concept du

site web. Il peut décider que le site doit avoir une certaine couleur, un certain
contenu et des pages spécifiques. C’est un espère en « infographie », et dispose
des grandes compétences techniques pour réaliser des logos et vidéos. Il indique
au développeur où ces éléments doivent être placés sur la page web. Cependant,
il ne participe pas à la construction du sib web ou du code sous-jacent.
 Le développeur web prend les concepts de « designer » et crée le code. Il utilise
les différentes technologies et les ressources vues précédemment pour
transformer et concevoir une idée en site web, et les mettre à la disposition des
personnes comme vous.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 8
2025 : Version brouillon
Chapitre II : Description d’une page web

Le langage HTML (HyperText Markup Language) est au Web ce que la portée

musicale est à l’orchestre. L’un ne pourrait exister sans l’autre. Les musiciens, quelle
que soit leur nationalité, ne pourraient interpréter l’œuvre du compositeur sans cette
notation commune, pour jouer de « concert », sans fausses notes et en rythme.

Tout le monde a déjà entendu parler de HTML. Tous les internautes ont déjà vu
cette extension dans la barre d’adresses de leur navigateur. Pourtant, très peu savent
ce qui se cache réellement derrière ces quatre lettres mystérieuses qui leur permettent
d’accéder à leurs sites et services favoris.

En tant que concepteur, designer ou intégrateur web, on croit le maîtriser puis l’on
découvre de nouvelles applications chaque jour, de nouvelles subtilités et astuces qui
en font un sujet passionnant, voire monstrueux lorsqu’il s’agit de contenter tous les
navigateurs sachant l’interpréter avec plus ou moins de virtuosité.

2.1. Définitions

a) HTML : est un langage simple utilisé pour créer des documents hypertextes pour
le web.

b) XHTML (Extensible Hypertexte Marckup Language, en français : langage de balisage

hypertexte extensible) : est une recommandation du W3C (WWW consortium). Il
‘agit d’une version de html respectant la syntaxe XML (Extensible Marckup
Language), et de laquelle sont exclues toutes les imprécisions que l’on rencontre
généralement dans des pages web.

C’est un langage dit de marquage ou de structuration dont le rôle est de formaliser

l’écriture d’un document avec des balises de formatage.

Les balises permettent d’indiquer la façon dont doit être présenté le document et le
lien qu’il établit avec d’autres documents. Ces balises seront bien sûr invisibles au
moment de l’affichage du document dans le navigateur. Les balises sont limités par
les signes < et >.

2.2. Html 5.2

Conformément à son objectif de produire une révision de html à peu près chaque
année, le W3C a récemment publié la spécification de html 5.2. Il s’agit de la
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 9
2025 : Version brouillon
deuxième révision de html 5, après la recommandation html 5.1. « au cours de la
dernière année, il y a eu un nettoyage important de la spécification », explique
l’organisme de standardisation du web sur son site officiel. « Nous avons introduit
des nouvelles fonctionnalités et supprimer des éléments qui ne font plus partie de la
plate-forme web moderne ou qui n’ont jamais atteint une interopérabilité étendue.
Comme toujours, nous avons également corrigé des bogues dans la spécification
pour nous assurer qu’elles s’adaptent à la réalité changeante du web ».

Parmi les principales fonctionnalités introduites dans html 5.2, on note :

 l’API « paymentRequest » : qui permet de faciliter le commerce sur web, en

réduisant le risque de faire une erreur ou d’être pris par un opérateur peu
scrupuleux. Elle va permettre aux commerçants d’utiliser une ou plusieurs
méthodes de paiement avec une intégration minimale. Les navigateurs vont
servir d’intermédiaires entre les parties d’une transaction. Le W3C introduit
l’attribut « allowpaymentrequest » de « iframe », pour intégration avec l’API
« payment request ».
 « content security policy (CSP) » : Il y a aussi des nouvelles fonctionnalités de
sécurité, telles que les « content security policy (CSP) », qui protège les
utilisateurs plus efficacement. La CSP définit par exemple un mécanisme par
lequel les développeurs web peuvent contrôler les ressources qu’une page
particulière peut récupérer ou exécuter, ainsi qu’un certain nombre de stratégies
de sécurité. Dans html 5.2, de nouveaux travaux incorporés à ARIA (Accessible
Riche Internet Applications) aide encore les développeurs à offrir aux personnes
ayant un handicap une bonne expérience utilisateur de leurs applications. Parmi
les autres nouveautés,
 « Dialog » : on peut encore noter un élément « Dialog » et intégration avec le
système de module Java Script de ECMA-262. La définition de l’élément « main »
a été aussi mis à jour pour prendre en charge les modèles de conception
responsive moderne, et l’élément « style » peut être utilisé à l’intérieur de
l’élément « body ». De nombreuses contraintes sur les codes ont été assouplies,
tandis que, là cela était nécessaire pour l’interopérabilité ou la sécurité, quelques-
unes ont été soigneusement renforcés.
 Il est aussi important de mentionner que html 5.2 rend le vénérable Système de
Plugin obsolète. Dans les W3C, de nouvelles technologies ou capacités telles que
la réalité virtuelle ou l’interaction vocale sont maintenant développés dans le
cadre de la plateforme web. Cela permet un meilleur contrôle des failles de

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 10
2025 : Version brouillon
 sécurité potentielles, réduit souvent le coût du développement et permet de
mettre davantage l’accent sur les services que les utilisateurs souhaitent créer
plutôt que sur la plateforme sur laquelle ils se trouvent.
 Au nombre de fonctionnalités supprimées, on retiendra aussi les éléments
keygen, menus et menuItem, l’attribut « inputMode » pour les éléments
« Inputs » textuels et les attributs dropZone, mais aussi la méthode
« showmodaldialog ».

Avec la publication de html 5.2 entant que recommandation W3C, la première

version de travail de html 5.3 a aussi été rendu publique. L’objectif est de produire
une nouvelle recommandation html.

2.3. Document html minimal

<!DOCTYPE html> < !—Défini le type de document-->

<html lang="fr" < !—Début avec la langue par défaut-->
<head> <!--Entête de la page-->
<meta charset="utf-8"> <!-- Codage par défaut-->
<title>Titre du document</title
<script src= "[Link]"><!--Script java externe-->
</script>
<link rel=stylesheet hrerf=[Link]><!--Lien vers les
styles externes-->
</head>
<body>
<!--Corps de la page-->
</body>
</html>

2.3.1. Commentaire :

- < !DOCTYPE html> : C’est la précision du type de document qui va suivre. On

permet ainsi au navigateur de savoir quel langage devra interpréter.
- L’attribut lang dans la balise <html> : précise la langue utilisée pour le contenu
de la page, lorsqu’il est placé sur la racine <html>. Une langue bien indiquée sera
utile ainsi aux synthèses vocales.
- L’attribut charset de la balise <meta> : c’est le choix de l’UTF-8 qui est désormais
préconisé par le W3C pour tous les protocoles échangeant du texte sur internet.
- La balise <link> avec les attributs rel=stylesheet et href=[Link] : une balise
<link> placée dans l’entête permet de mettre en relation la page avec d’autres
documents externes, une feuille de style CSS par exemple comme il en est le cas
ici.
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 11
2025 : Version brouillon
- L’élément <script> : l’élément <script> permet d’ajouter des scripts java par
exemple, qui vont s’exécuter dans le navigateur.

2.3.2. Structure graphique de la page

2.4. Liste des principales balises html 5

Le tableau ci-dessous présente les principales balises utilisées.

Balise Description Remarque Attributs

Nom Description
1. < !--<--->Pour un commentaire
2. < !DOCTYP L’inclusion du DOCTYPE
E> dans un document html
assure que le navigateur
interprétera la version
html ainsi déclarée. En
html 5 le DOCTYPE à
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 12
2025 : Version brouillon
 déclarer est : < !DOCTYPE
html>.
3. <a> Utilisée pour les Attributs spécifiques
hyperliens. L’attribut name
n’existe plus pour les liens. href
target
rel
media
hreflang
type
4. <abbr> Pour une abréviation. Son
attribut « title » ne doit être
utilisé que pour l’extension
de l’abréviation et rien
d’autre.
Exemple une nouvelle version d'<abbr title="Hypertext Marckup Language">
Html</abbr> une sortie de ...
5. <acronym> Non utilisé

6. <adress> Généralement utilisée dans

les conteneurs.
Exemple <adress>Ecrit par Jeanne <a
href="[Link]
moi</a></adress>
7. <footer> Cette balise est utilisée à la
place de la balise <p>, les
informations nécessaires
pour contacter là les
auteurs du document cité.
Cela peut être son nom ou
un label suivi de son
adresse e-mail par exemple
ou adresse postale.
8. <applet> Non utilisé

9. <area> Définit une zone ou Attributs spécifiques

plusieurs zones pour une
carte image. Cette balise alt
s’utilise toujours avec la
coords
balise <map>.
shape
href
target
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 13
2025 : Version brouillon
 rel
media
hreflang
type
10. <article> utilisée pour du contenu
ayant son propre sens
indépendamment du reste
des autres éléments de la
page, ce contenu est
distribuable et réutilisable.
Cela peut-être un billet de
forum, un article de
journal, un gadget, un
commentaire
d’utilisateur,< La balise
<article> peut avoir son
propre header et footer.
Confusion possible avec la
balise <section> qui
regroupe des éléments de
thématiques identiques.
11. <aside> Balise de structure Confusion
supposant avoir un titre de : la sidebar
type <h1>. Cette balise d’une page
permet de regrouper des n’a pas
informations non pour
essentielles relatives au site obligation
web. Lorsque la balise d’être dans
<aside> se trouve dans un une balise
article, son contenu se <aside>
réfère à l’article lui-même
et non au site web (par
exemple des notes de
pages, un glossaire ou tout
élément relatif à l’article).
12. <audio> Pour lire un fichier audio.
Exemple <audio width="400" height="400" controls>
<source src= "E:\MUSIQUES\52 Makolo Ya
Masiya.mp3">
</audio>
13. <b> Utilisée dans un
paragraphe pour une
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 14
2025 : Version brouillon
 partie de texte en gras,
sémantiquement faible, on
lui préférera la balise
<strong> pour donner de
l’importance au texte.
14. <base> Cette balise permet de L’utilisatio
définir l’URL de base. n de cette
balise est
parfois
controvers
ée.
15. <basefont> Non utilisé.
16. <bdo> Utilisée pour la direction L’attribut
d’un texte. « dir » a
une valeur
sémantiqu
e pour
cette balise
17. <bdi> Utilisée pour la direction L’attribut
d’un texte. « dir » a
une valeur
sémantiqu
e
différente
pour cette
balise.
18. <big> Non utilisée
19. <blockquot Pour une longue citation Confusion
e> venant d’une source possible
externe, l’adresse de la avec la
source peut être indiquée
balise <q>
dans l’attribut « cite ».
Dans le cas d’un forum de
discussion ou d’un blog,
un utilisateur peut utiliser
cette base pour citer le
commentaire d’un autre
utilisateur. Nous
n’utiliserons pas cette
balise pour un dialogue.
20. <body> Partie principale du
document html
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 15
2025 : Version brouillon
21. <br> Utilisée dans un
paragraphe, cette balise
permet de créer un saut de
ligne.
22. <button> Pour un bouton. Il peut
être utilisé comme
commande.
23. <canvas> Pour créer un graphique
avec la possibilité de
l’animer avec du Java
Script.
24. <caption> Pour le titre d’un tableau.
En html 5, l’attribut
« summary » de la balise
<table> n’est plus valide et
ne doit pas être utilisé.
25. <center> Non utilisé.
26. <cite> Utilisée pour le titre d’une accesskey
œuvre, d’un document ou class
d’un évènement. Cette contentedit
balise peut être utilisée able
conjointement avec la contextmen
balise <q>. cette balise ne u
dir
peut être utilisée pour une
personne. draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

Exemple <p>Mon livre préféré est <cite> Base de données

orientées objet </cite>de Gardarin et Georges</p>
27. <code> Pour déclarer du code Confusion
informatique. On peut possible
l’utiliser à l’intérieur de la avec la
balise <pre> pour du texte balise
pré-formaté. On <samp>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 16
2025 : Version brouillon
 recommande d’utiliser une
classe avec le nom du
langage informatique cité
dans cette balise. On peut
ajouter une classe pour
décrire le type de langage
utilisé dans la balise.
Exemple <code class="langage-javascript">teardown:function(){
if([Link]){
// Actions
}
}
</code>
28. <col> Utilisée pour créer des Attributs spécifiques
colonnes dans un tableau.
Span
29. <colgroup> Utilisée pour créer des Attribut spécifique
groupes des colonnes dans
span
un tableau.

30. <command Utilisée comme un bouton, L’attribut Attributs spécifiques

> un radiobutton, ou un title a une type
checkbox. Elle ne peut être valeur label
visible qu’à l’intérieur de sémantiqu icon
la balise <menu>, dans le e
disabled
cas contraire, elle ne sera différente
checked
pas visible et utilisée pour cette
radiogroup
comme raccourci clavier. balise.

31. <datalist> Pour une liste déroulante.

32. <dd> Pour la description d’une

définition, elle s’utilise
avec la balise <dl>.

33. <del> Utilisée pour indiquer Confusion Attributs spécifiques

qu’une partie de texte est possible
cite
supprimée, mais conservée avec la
datatime

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 17
2025 : Version brouillon
 pour en garder la trace, on balise <s>
l’utilisera en CSS. On peut qui
utiliser cette balise indique
conjointement avec la qu’un texte
balise <ins> pour indiquer n’est pas
le nouveau texte qui est à correct ou
prendre en compte. non
pertinent.

<details> Pour apporter des détails Attributs spécifiques

sur widget, il peut être
utilisé pour cacher/afficher open
des informations
complémentaires. Il peut
être le conteneur de la
balise <summary>.
Exemple <details><summary>Cours de programmation web 2020-
2021.</summary><p>Réservé aux étudiants G3 Info
(...)</p></details
34. <dfn> Représente les termes
d’une définition, on
l’utilise dans un
paragraphe ou une liste
des définitions. On peut
utiliser cette balise
conjointement avec <abbr>.
Dans la même section, il
est possible de créer un
lien pointant sur cette
définition, utile pour la
création d’info bull par
exemple.
Exemple <p>L' <dfn> ISO</dfn> est un organisme international de
standardisation</p>

35. <dir> Non utilisée

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 18
2025 : Version brouillon
36. <div> Balise sans valeur
sémantique réelle, elle sert
de conteneur pour une
mise en forme en CSS.
Cette balise doit être
utilisée en dernier recours,
lorsqu’une autre balise ne
peut convenir.

37. <dl> Pour une liste des cette balise

définitions. ne peut
être
utilisée
pour créer
des
dialogues,
les balises
<p> restant
appropriée
s.
38. <dt> Pour déclarer une
définition, elle s’utilise
avec la balise <dl>.
39. <em> Utilisée dans un
paragraphe pour mettre
une partie de texte en
emphase.
40. <embed> Utilisée pour du contenu Attributs spécifiques
externe et interactif ou
pour un plug-in. Src
Type
Width
Height
Exemple <embed src= "E:\MUSIQUES\52 Makolo Ya Masiya.mp3"/>

41. <fieldset> Pour regrouper des Attributs spécifiques

éléments d’un formulaire.
Disabled
Form
name

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 19
2025 : Version brouillon
42. <figcaption Utilisée dans le conteneur
> <figure>, avant ou après le
contenu, cette balise
permet d’écrire une
légende ou une
description.
Exemple <figure><figcaption>Jeanne, Photo de profil</figcaption><img
src="E:\MES PHOTOS\L2 COLLATION\[Link]" width= "250"
height= "420"/></figure>
43. <figure> Utilisée pour regrouper un Cette
ou plusieurs médias balise ne
(illustrations, diagrammes, doit être
exemples des codes, utilisée dès
photos, <) attachés au qu’il y a
document sans pour une image
autant ensuivre le flux. Les dans un
images s’y trouvant n’ont article, on
pas obligation d’être peut aussi
insérées dans une balise la
<p> et dans le cas d’une confondre
liste d’images, on peut avec la
omettre les listes à puces. balise
On utilisera la balise <aside>.
<figcaption> pour décrire
les médias utilisés.
Exemple <figure><p>Photo de profil de Marie-Jeanne</p><img src
="E:\MES PHOTOS\L2 COLLATION\[Link]" width= "250"
height= "420"/></figure>
44. <font> Non utilisé
45. <footer> Regroupe des informations
de bas de page dans une
section ou un article. Cette
balise permet d’ajouter des
liens de navigation sans
utilisation de la balise
<nav>.
Exemple <section><article><p>Voici un article
....</p></article><footer><p>Réalisateur du site
web</p></footer></section>
46. <form> Pour un formulaire. Attributs spécifiques

accept-
charset
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 20
2025 : Version brouillon
 action
autocom
plete
enctype
method
name
novalidate
target
47. <frame> Non utilisé
48. <frameset> Non utilisée
49. <h1> à <h6> Utilisées pour la
hiérarchisation des titres
50. <head> Pour les informations
d’entête du document hmtl
51. <header> Pour l’entête d’une section
et/ou d’une page, cette
balise est utile pour une
introduction et/ou des
éléments de navigation.
Elle peut être utilisée dans
la balise <section> et dans
la balise <article>.
Exemples <header><h1>Procès-verbal de délibération</h1><p>Le PV de
délibération sera rendu publique par le comité de
gestion.</p></header>

<header><h1>PV de délibération </h1><nav><ul><li><a

href="#">G1. Info</a></li><li><a href="#">G2. Info
</a></li><li><a href="#"> G3.
Info</a></li></ul></nav></header>
52. <hr> Permet de créer une ligne
de séparation.
53. <html> Déclaration document
html. On lui ajoute
l’attribut « lang » pour
déclarer la langue utilisée.
54. <i> Utilisée dans un
paragraphe pour indiquer
qu’une partie du texte est
différent du reste. Il ne faut
pas utiliser cette balise
lorsque

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 21
2025 : Version brouillon
 <b>,<cite>,<em>,<q>,<small
> ou <strong> peuvent être
utilisées.
55. <iframe> Pour créer une sous- Attributs spécifiques
fenêtre.
src
srcdoc
name
sand
box
seam
less
width
height
56. <img> Pour déclarer une image Attributs spécifiques

alt
src
usemap
isemap
width
height
57. <input> Pour un champ de texte Attributs spécifiques

accept
alt
autocompl
ete
autofocus
checked
dirname
disabled
form
formaction
formenctype

formmeth
od
formnoval
idate

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 22
2025 : Version brouillon
 formtarget
height
list
max
maxlength
min
multiple
name
patern
placehold
er
readonly
required
size
src
step
type
value
width

58. <ins> Pour insérer un nouveau Attributs spécifiques

texte dans un document
révisé. On peut utiliser cite
cette balise avec <del> qui datetime
permet d’indiquer qu’une
portion de texte n’est plus
valable.
59. <keygen> L’élément <keygen> Attributs spécifiques
représente un contrôle de
générateur de clé stockée autofocus
dans keystore locale. challenge
disabled
form
keytype
name
60. <kbd> Lorsque le texte est utilisé
pour définir des actions au
clavier.
61. <label> Etiquette utilisée comme Attributs spécifiques

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 23
2025 : Version brouillon
 titre d’une commande. form
for
62. <legend> Titre du fieldset auquel il
se rapporte.

63. <li> Item d’une liste ordonnée Attributs spécifiques

ou puce. reversed
start
type

64. <link> Permet de lier une source L’attribut Attributs spécifiques

externe à la page html. title a une
valeur href
sémantiqu rel
e media
différente. hreflang
type
sizes
65. <main> Pour déclarer les contenus
importants d’une page
html, cette balise ne peut
donc être utilisée qu’une
fois par page. Ce qui veut
dire que le header
principal ainsi que le
footer principal sont des
parties différentes. Les
balises <article>, <aside>,
<footer>, <header> ou
<nav> ne peuvent pas
contenir la balise <main>,
par contre, on peut mettre
ces balises à l’intérieur de
<main>, là, il n’y a pas de
soucis.
Exemple <!DOCTYPE html>
<html>
<head>
<title> Exemple de main avec html 5.2</title>
</head>
<body>
<header>
<h1> Mon site web</h1>
</header>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 24
2025 : Version brouillon
 <main>
<article>
<section>...</section>
<section>...</section>
</article>
</main>
<footer>...</footer>
</body>
</html>
66. <map> Utilisée pour créer une
carte d’images avec des
zones réactives. L’attribut
« name » est
obligatoirement requis.
67. <mark> Pour marquer du texte, par
exemple surligner un
résultat de recherche. On
utilisera cette balise en
CSS.
68. <menu> Pour une liste des Confusion Attributs spécifiques
commandes. possible
avec la type
balise label
<nav>
69. <meta> Permet d’ajouter des métas Attributs spécifiques
à la page html.
name
http-
equiv
content
charset
70. <meter> Pour les mesures. Attributs spécifiques

value
min
max
low
high
optimum
form
71. <nav> Pour regrouper des liens
qu’il soit internes à la page
ou pour des pages liés. Il
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 25
2025 : Version brouillon
 est recommandé, mais non
obligatoire d’utiliser les
listes à puces pour lister les
liens.
Exemple <nav>
<a href="[Link]">Accueil</a>
<a href="[Link]">Les cours prevus</a>
<a href="[Link]">Notes importantes</a>
<a href="[Link]">Nous contacter</a>
</nav>

Ou :
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Les cours prevus</a></li>
<li><a href="[Link]">Notes importantes</a></li>
<li><a href="[Link]">Nous contacter</a></li>
</ul>
</nav>
72. <noframes> Non utilisée
73. <noscript> Utilisée pour indiquer un
message dans le cas où
Java Script serait désactivé.
74. <object> Pour déclarer un objet. Attributs spécifiques

data
type
name
usemap
form
width
height
75. <ol> Utilisée pour les listes Attributs spécifiques
ordonnées.
reversed
start
type
76. Optgroup Pour grouper des Attributs spécifiques
informations dans une liste
déroulante. disabled
label

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 26
2025 : Version brouillon
77. <option> Pour déclarer un item dans Attributs spécifiques
une liste déroulante. Peut
être utilisée comme disabled
« commands ». label
selected
value

78. <output> Représente le résultat d’un Attributs spécifiques

calcul
for
form
name
79. <p> Définit un paragraphe
contenant une ou plusieurs
phrases. Cette balise ne
doit pas être utilisée si une
autre balise est mieux
indiquée.
80. <param> Pour paramétrer un objet. Attributs spécifiques

name
value
81. <pre> Permet d’écrire un texte
pré-formaté. L’utilisation
de la balise <p> n’est pas
obligatoire. Peut être lui-
même le conteneur de la
balise <code>
Exemple <p>Le texte dans une balise <pre> est affiché avec une
largeur fixe. Les sauts des lignes et les espaces sont
respectés. Attention à ne pas mettre l'attribut "white-
space:normal" dans le CSS, sinon, les sauts des lignes ne
seront pas actifs. </pre></p>
82. <progess> Pour une barre de Attributs spécifiques
progression
value
max
form

83. <q> Utilisée pour une citation Confusion

courte provenant d’une possible
source externe. Si l’on avec la
connait l’url de la source balise
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 27
2025 : Version brouillon
 de la citation, on pourra <blockquote>
l’indiquer grâce à l’attribut
« cite ». dans tous les
autres cas, on utilise les
guillemets sans balise
spécifique. On peut aussi
utiliser la balise <cite>
pour citer un auteur.
Exemple <p>Dans la page du rapport trimestriel <cite> augmenter vos
ventes </cite> On nous dit que <q cite="[Link]
x/[Link]">pour être efficaces, nous devons regrouper nos
compétences</q></p>
84. <rp> Utilisée en annotations
ruby pour définir ce qui est
à montrer au navigateur ne
supportant pas les
éléments ruby.
85. <rt> Pour expliquer les
annotations en ruby.
86. <ruby> Utiliser pour des
annotations en ruby.
87. <s> Utilisée pour identifier une
Confusion
partie de texte qui n’est possible
pas correcte ou non avec la
pertinente. balise <del>
qui permet
d’indiquer
qu’un texte
doit être
remplacé ou
supprimé.
88. <samp> Utilisée dans un Confusion
paragraphe pour écrire un possible
échantillon des codes. avec la
balise code.
89. <script> Pour ajouter un script Attributs spécifiques
internet ou externe.
src
async
defer
type
charset

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 28
2025 : Version brouillon
90. <section> Utilisée pour regrouper
des éléments différents,
mais partageant la même.
Cette balise est la plus
souvent utilisée avec un
<header>.
91. <select> Pour une liste déroulante. Attributs spécifiques

autofoc
us
disabled
form
multiple
name
required
size
92. <small> La balise <small> est Elle a été
utilisée comme contenu redéfinie,
relatif mais non essentiel. elle ne sert
On l’utilisera pour déclarer plus à
un copyright de minimiser
disclaimers, de mise en un texte.
garde, <
93. <source> Utilisée dans les balises Attributs spécifiques
<video> et <audio> pour
indiquer l’url et le type de src Définit l’URL, où le
média. contenu vidéo est
hébergé
type Définit le format de
fichier
media
94. <span> Utilisée pour mettre en
style une portion de texte
qui se différencie des
autres. Cette balise ne doit
pas être utilisée si une
autre balise de formatage
de texte convient mieux.
95. <strike Non utilisée, la balise <dl>
remplace cette balise.
96. <strong> Utilisée dans un

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 29
2025 : Version brouillon
 paragraphe pour mettre un
texte en gras.
97. <style> Permet de définir un style L’attribut
dans le document html. title a une
valeur
sémantique
différente
pour cette
balise.
98. <sub> Déclare un indice, petit
caractère placé en bas et à
droite d’autre caractère.
99. <summary> Généralement utilisée à
l’intérieur du conteneur
<detail>, elle permet de
décrire le sommaire, la
légende ou le titre d’un
élément.
100. <sup> Permet de déclarer un
exposant, petit caractère
placé en haut et à droite
d’un autre caractère.
101. <table> Pour un tableau. L’attribut Attributs spécifiques
« summary
» utilisé en border
accessibilité
n’est plus
valide et ne
doit pas être
utilisé. La
balise
<caption>
devient
indispensab
le.
102. <tbody> Utilisée pour le corps du
tableau
103. <td> Pour déclarer une cellule
dans un tableau
104. <textarea> Pour un champ de saisie Attributs spécifiques

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 30
2025 : Version brouillon
 autofoc
us
cols
dirname
disabled
form
maxleng
th
name
placehol
der
readonl
y
required
rows
wrap
105. <tfoot> Pour les pieds de page
d’un tableau.
106. <th> Pour déclarer une cellule
dans l’entête d’un tableau.
107. <thead> Utilisée pour l’entête d’un
tableau.
108. <time> Pour déclarer une date ou Attributs spécifiques
une heure.
datetime
pubdate
109. <title> Pour le titre de la page
html en cours de lecture
110. <tr> Pour déclarer un champ
dans un tableau.
111. <track> Barre pour indiquer une Attributs spécifiques
portion de temps.
kind
src
srclang
label
default
112. <tt> Non utilisée
113. <u> Non utilisée, cette balise
créait une confusion avec

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 31
2025 : Version brouillon
 la balise <a> au niveau de
style.
114. <ul> Pour créer une liste à puce.
115. <var> Pour déclarer une variable
116. <video> Pour lire une vidéo. Un point Attributs spécifiques
important
est que src Définit l’URL, où le
l’élément contenu vidéo est
<video> est hébergé
pris en poster Sélectionne une
charge par image à afficher
tous les comme affiche pour
navigateurs la vidéo jusqu’à ce
modernes. que la lecture
Par contre, commence
la balise preload Indique que la
<video> vidéo doit être
supporte 3 chargée à
types de l’ouverture de la
fichiers : page
MP4 autopla Spécifie que la vidéo
(video/mp4) y commencera à jouer
, WebM dès qu’elle sera
(video/web prête
m) et Ogg mediagr
(video/ogg) oup
loop Spécifie que la vidéo
va recommencer à
chaque fois qu’elle
est terminée
muted Permet de couper le
son de la vidéo
controls Doit être spécifié ou
aucun élément
Visual n’apparaitra
pour contrôler la
lecture du contenu
width Définit la largeur de
l’affichage
height Définit la hauteur
de l’affichage

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 32
2025 : Version brouillon
 Exemple <video src="E:\VIDEOS\AUTRES VIDEOS\MES VIDEOS\M4V00029.MP4"
type="video/mp4" width="400" height="400" controls
poster="[Link]">
</video>

Ou:
<video width="400" height="400" controls autoplay>
<source src="E:\VIDEOS\AUTRES VIDEOS\MES
VIDEOS\M4V00029.MP4" type="video/mp4">
</video>
117. <wbr> Balise non fermante à
utiliser à l’intérieur d’un
mot long pour forcer un
retour à la ligne.
118. <xmp> Non utilisée.

2.4.1. Règles d’écriture d’un document xhtml

Pour créer un document XHTML, il suffit de respecter les règles de XML avec
quelques additions :

 Le document doit commencer par une déclaration DOCTYPE ;

 Un élément racine, doit contenir la totalité du document. La balise d’ouverture :

<html> doit se trouver avant tout autre élément, mais après la déclaration.

 Toutes les balises XHTML peuvent-être employées ; mais leurs noms doivent-
être saisis en minuscule ;

 Les balises XHTML fonctionnent par paire (par deux) en minuscule, afin d’agir
sur les éléments qu’elles encadrent. La première est appelée « balise
d’ouverture » et la seconde « balise de fermeture ». La balise de fermeture est
précédée du caractère slash (/) ;

 Toutes les balises d’éléments vides doivent se terminer par le caractère slash (/) ;

 Il est possible d’ajouter des éléments d’information ou commentaire dans une

page web, sans que ceux-ci soient affichés à l’écran ; grâce à la balise : < !—
commentaire ---> ; ou encore les informations concernant l’auteur du document
(adresse, téléphone, e-mail, etc.) grâce à la balise <adress>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 33
2025 : Version brouillon
  Certaines balises peuvent admettre des attributs définis chacun par un nom et
pouvant avoir une valeur. L’attribut étant un élément présent dans la balise
courante et permettant de définir des propriétés supplémentaires de la balise.

o Par exemple <meta charset = «4 »>

 Les valeurs des attributs doivent être entre guillemets ;

 Par convention, l’extension donnée à un fichier html est : .htm ou .html

o .asp : pour une page générée dynamiquement en ASP ;

o .cgi : pour uner page générée dynamiquement par le CGI ;

o .php ou .php3 ou encore .php4 : pour une page générée dynamiquement en

PHP.

2.4.2. Les balises portant sur les styles des caractères

Les balises suivantes s’appliquent aux styles des caractères des textes pour le
contenu d’une page (cette liste n’est pas exhaustive) :

<s>, <b> ou <strong> <i> ou <em>, <sup> <sub>, <br/>

2.4.3. Les listes

Pour présenter une certaine arborescence dans un sommaire par exemple, il est
souvent pratique d’utiliser une liste. On peut ainsi faire la différence entre les listes
numérotées et les listes à puces ;

a) Les listes à puces : <ul>

La balise <ul> avec son attribut type pouvant prendre les valeurs disc, circle,
square, permet de créer une liste à puces. Chaque élément de la liste est placé dans la
balise <li>

b) Les liste numérotées : <ol>

La balise <ol> avec son attribut type pouvant prendre les valeurs 1,2 ou a,b ou
A,B ou i, ii ou I, II, < permet de créer une liste numérotée (avec des chiffres ou des
lettres). Chaque élément de la liste est placé dans la balise <li>. Par exemple, le code
suivant crée une liste numérotée que voici :

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 34
2025 : Version brouillon
2.4.4. Les titres

Les titres permettent d’organiser le contenu en rubrique et en sous –rubriques

comme on peut le faire dans un document structuré. Le navigateur affiche le titre en
gras et en grand suivant chaque niveau.

La balise <h1> met en forme le titre de niveau 1 : grande taille, gras, espaces au-dessus
et en dessous.

Les balises <h2>correspondent à des sous-titres : taille un peu moins grande, un peu
moins d’espacement autour.

2.4.5. Les tableaux

En XHTML, un tableau est délimité par les balises <table> ... </table>.
Initialement, les bordures du tableau sont invisibles, donc il faut ajouter dans la
balise <table> l’attribut border pour indiquer l’épaisseur de la bordure en pixels.

Également inclus dans la balise <table>, les attributs cellspacing et cellpadding

permettent de préciser en pixels, respectivement l’espacement entre cellules (traits
d’encadrement simples si 0) et les marges intérieures des cellules.

Le tableau se construit ligne par ligne, avec les balises <tr> ... <tr>comme table
row en anglais, c’est-à-dire rangée du tableau.

Les cellules du tableau sont définies à l’intérieur de chaque ligne, grâce aux
balises <td> ... </td> ou <th> ... </th>comme table data, soit donnée du tableau.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 35
2025 : Version brouillon
 Lorsqu’il s’agit d’une cellule de titre, il est possible d’utiliser à la place les
balises <th> ...</th>comme table header ou en-tête du tableau : le texte est alors mis en
gras et centré.

2.4.6. Les images

En XHTML, insérer une image revient à placer un lien vers le fichier qui la
contient, avec la balise <img ... />. Elle contient obligatoirement l’attribut src qui
indique le nom du fichier image à afficher.

Exemple :

<img src="mon_image.gif" alt="Notre photo" height="200" width= "200"/>

NB: Si l’attribut src ne contient qu’un nom de fichier, cela signifie que ce fichier
image se trouve dans le même dossier que la page web qui l’utilise. Si cette image se
trouvait dans le sous-dossier Images_site, il est nécééssaire d’indiquer l’emplacement :

<img src="Images_site\mon_image.gif" alt="Notre photo" height="200"

width= "200"/>

2.4.7. Les fichiers audio et vidéo

Les balilses suivantes permettent de gérer les fichiers multimédia (les audios et les
vidéos) :

 <embed . . . > : Audio et vidéo

 <audio . . . > : Seulement les fichiers audio

 <video . . . > : Seulement les fichiers vidéos

2.4.8. Les Liens hypertextes : <a … >

Les liens permettent de naviguer entre les pages web (ou de naviguer dans une
page). Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors
la nouvelle page.
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 36
2025 : Version brouillon
 Il existe trois types de liens :

- Les liens internes à un site ;

- Les liens internes à une page (ancre) ;
- Les liens externes.

La balise <a …>...</a> permet d’écrire un lien hypertexte : le curseur prend la

forme d’une main au passage de la souris sur ce lien, et un clic permet d’afficher la
page qui est référencée dans cette balise.

L’attribut href (hypertext reference) est obligatoire, puisqu’il indique l’adresse de la

page à afficher lors d’un clic sur ce lien.

 Lien interne à la page (Lien hypertexte vers un endroit de la page)

Pour mettre en place un lien vers un endroit précis de la page courante, il suffit
d’ajouter un identifiant en attribut de la balise destination, par exemple id="ici", ce qui
permet de l’atteindre directement grâce au lien <a href="#ici" ...>...</a>.

2.4.9. Les couleurs

Le tableau ci-dessous définit les codes associés aux différentes couleurs :

Couleur Code Nom reconu couleur

Blanc #FFFFFF White
Bleu #0000FF Blue
Jaune #FFFF00 Yellow
Rouge #FF0000 Red
Vert clair #00FF00 lime
Noir #000000 Black
GNS clair #C0C0C0
Argent #c0c0c0 Silver
Gris #808080 Gray
Marron #800000 Maroon
Vert foncé Green
Vert olive #808000 Olive
Bleu marine #000080 Navy
Lilas #ff00ff fuschia
Violet #800080 Purple
Aqua
Cyan foncé #008080 Teal

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 37
2025 : Version brouillon
N.B. : L’attribut bgcolor associé à la balise body permet de définir la couleur de
l’arrière-plan d’une page : <body bgcolor= « nom de la couleur »>

L’attribut background associé à la balise body définit l’image de l’arrière-plan

du document, exemple : body background= « [Link] »>

2.5. Les contextes de navigations (<iframe> : l’élément de cadre intégré)

L’élément html <iframe> (inlineframe) représente un contexte de navigation

imbriqué qui permet en fait d’obtenir une page html intégrée dans la page courante.
Les inlineframes permettent d’héberger de façon élégante des contenus
supplémentaires dans un document HTML. Dans les meilleurs cas, les visiteurs du
site internet n’ont pas conscience du fait que des contenus supplémentaires leur sont
affichés.

Parmi les exemples d’iframes, on peut citer les vidéos YouTube, les cartes de
Google Maps, les plug-ins des réseaux sociaux ou les applications spécifiques, mais
aussi des documents HTML peuvent également être intégrés à l’aide d’iframes.

Chaque contexte de navigation possède son propre historique et son propre

document actif. Le contexte de navigation qui contient le contenu intégré est appelé
« contexte de navigation parent ». le contexte de navigation le plus élevé (qui n’a pas
de contexte parent) correspond généralement à la fenêtre du navigateur.

Chaque contexte de navigation créé par un élément <iframe> représente un

document à part entière et cela peut donc augmenter les ressources nécessaires à
l’utilisation de la page. Aussi, bien qu’en théorie on puisse ajouter autant d’<iframe>
que possible sur autant de niveaux d’imbrication qui évoluent, on gardera en esprit
que cela peut nuire aux performances.

2.5.1. Structure des inlineframes

Les inlineframes sont créés dans le code html à l’aide de la balise <iframe> :

<iframe...>...</iframe>

2.5.2. Attributs

Il est nécessaire de renseigner certains de ces attributs (src, width, height, name,
sandbox,…) pour remplir correctement la balise.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 38
2025 : Version brouillon
- allow : l’attribut « allow » permet de définir une politique de fonctionnalité pout
l’<iframe>. Cette politique définit les fonctionnalités disponibles au sein de
l’<iframe> selon l’origine de la requête (l’accès au micro, à la caméra, aux
informations de batterie, etc.).
- allowfullscreen : Cet attribut, lorsqu’il vaut « true », indique que l’iframe intégré
peut être passé en plein écran via la méthode « [Link]() ». Cet
attribut est considéré comme historique et a été redéfini avec
allow= « fullscreen ».
- allowpaymentrequest : cet attribut, lorsqu’il vaut « true », permet à l’iframe
intégrée d’appeler l’API « Payment Request. Il est considéré comme historique et
a été redéfini avec (allow= « payment »).
- csp : cet attribut définit la politique de sécurité du contenu que le document
intégré doit respecter.
- height : cet attribut définit la hauteur du cadre en pixels. La valeur par défaut est
150.
- loading : cet attribut indique la façon dont le navigateur devrait charger l’iframe :
 eager : l’iframe doit être chargée immédiatement même si elle n’est pas
dans la zone d’affichage (viewport) visible. C’est la valeur par defaut.
 lazy : le chargement de l’iframe est retardé jusqu’à ce que celle-ci
atteigne une distance donnée du viewport, définie par le navigateur.
- name : un nom pour le contexte de navigation (iframe). Ce nom peut être utilisé
comme la valeur de l’attribut target (cible) d’un élément <a> ou <form> ou
comme valeur de l’attribut formtarget d’un élément <input>.
- referrerpolicy : une chaine de caractères qui indique le référent (referrer) à utiliser
lors de la récupération de la source :
 no-referrer : signifie que l’entête referrer ne sera pas envoyé.
 no-referrer-when-downgrade : signifie qu’aucun entête Referrer ne sera
envoyé lorsqu’on navigue vers une origine qui n’utilise pas HTTPS.
C’est le comportement par défaut de l’agent utilisateur.
 origin : signifie que le référent sera l’origine de la page (c’est-à-dire son
schéma, son hôte et le port utilisé).
 origin-when-cross-origin : signifie que les navigations vers d’autres
origines seront limitées aux schémas, hôtes et ports. Les navigations sur
la même origine incluront le chemin explicite du référent.
 same-origin : un référent sera envoyé pour les mêmes origines, mais les
requêtes multi-origines ne contiendront pas d’informations des
référents.
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 39
2025 : Version brouillon
  strict-origin : celle l’origine du document est envoyée comme référent
lorsque le protocole de sécurité est le même (HTTPS-HTTPS). L’origine
n’est pas envoyée lorsque la destination est moins sécurisée ( HTTPS-
HTTP).
 strict-origin-when-cross-origin : l’URL complète est envoyée pour des
requêtes de même origine, celle l’origine est envoyée lorsque le
protocole de sécurité est le même (HTTPS-HTTPS) et aucun entête n’est
envoyé pour une destination moins sécurisée (HTTPS-HTTP).
 unsafe-url : signifie que le référent inclura l’origine et le chemin (mais
pas les fragments, le mot de passe ou le nom utilisateur). Cette valeur
n’est pas sûr car elle peut entrainer des fuites d’origines ou de chemins
provenant des ressources sécurisées avec TLS vers des origines non
sécurisées.
- sandbox: cet attribut permet d’appliquer des restrictions sur le contenu qui peut
apparaitre dans l’iframe. Si cet attribut vaut la chaine de caractère vide, toutes les
restrictions sont appliquées, sinon, on peut utiliser une liste de mots clé séparés
par des espaces pour définir des restrictions précises. Les mots clé qui peuvent
être utilisés sont :
 allow-downloads-without-user-activation : permet aux téléchargements
d’avoir lieu sans un signe de l’utilisateur.
 allow-downloads : permet aux téléchargements d’avoir lieu après une
action de la part de l’utilisateur.
 allow-forms : le contexte de navigation intégré peut envoyer des
formulaires. Si ce mot clé n’est pas utilisé, cette opération n’est pas
autorisée.
 allow-modals : le contexte de navigation peut ouvrir des fenêtres
modales.
 allow-orientation-lock : le contexte de navigation peut désactiver les
verrouillages de l’orientation de l’écran.
 allow-pointer-lock : le contexte de navigation peut utiliser l’API pointer
lock.
 allow-popups : le contexte de navigation peut déclencher des fenêtres
contextuelles. Si ce mot clé n’est pas utilisé, la fonctionnalité échouera
sans message d’erreur.
 allow-popups-to-escape-sandbox : ce mot clé permet à un document isolé
dans un bac à sable (sandboxed) d’ouvrir des nouvelles fenêtres sans
avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 40
2025 : Version brouillon
 par exemple à une publicité tiers d’être correctement mise dans un bac à
sable sans appliquer les mêmes restrictions sur la page initiale.
 allow-presentation : ce mot clé permet à une iframe de démarrer une
session de présentation (en US).
 allow-same-origin : ce mot clé permet au document isolé de supporter les
tests de same-origin-policy en désactivant le remplacement de l’origine
de l’iframe par une origine unique.
 allow-script : le contexte de navigation peut exécuter des scripts (mais ne
peut pas créer des fenêtres contextuelles). Si ce mot clé n’est pas utilisé,
cette opération n’est pas autorisée.
 allow-storage-access-by-user-activation: ce mot clé permet au contexte de
navigation embarqué de demander l’accès aux fonctionnalités de
stockage du document parent.
 allow-top-navigation : le contexte de navigation peut charger du contenu
depuis le contexte de navigation de plus haut niveau. Si ce mot clé est
absent, cette opération n’est pas autorisée.
 allow-top-navigation-by-user-activation : le contexte de navigation peut
charger du contenu depuis le contexte de haut niveau uniquement si
l’action provident de l’utilisateur. Si ce mot est absent, cette opération
n’est pas autorisée. Lorsque le document intégrée possède la même
origine que la page principale, il est fortement déconseillé d’employer
« allow-script » et « allow-same-origin » simultanement, car cela permet
de retirer l’attribut sandbox via un programme, c’est donc aussi sûr que
de ne pas utiliser l’attribut sandbox. La mise en bac à sable (sandboxing)
est d’une aide minime si un attaquant peut faire en sorte qu’un contenu
potentiellement hostile soit affiché dans le navigateur de l’utilisateur en
dehors d’une iframe sous sandbox. Aussi, il est recommandé de diffuser
le contenu depuis un domaine dédié séparé, afin de limiter des
éventuels dommages. L’attribut sandbox n’est pas pris en charge par
« Internet Explorer 9 » et les versions inférieures.
- src: l’URL de la page qu’on souhaite intégrée.
- srcdoc: le contenu de la page qu’on souhaite intégré dans le contexte de
navigation et qui surcharge celui indiqué par src.
- width: cet attribut indique la largeur de l’iframe en pixels. Par défaut, width
vaut 300.

2.5.3. Attributs dépréciés

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 41
2025 : Version brouillon
 Outre ces attributs toujours d’actualité, il existe en pratique d’autres attributs qui
ne sont plus supportés depuis html5. Pour ces fonctionnalités, il est nécessaire
d’utiliser des solutions CSS. Il s’agit de :

- align : cet attribut obsolète permettait de définir l’alignement de l’iframe par

rapport à son contexte englobant.
- frameborder : lorsqu’il vaut 1 (la valeur par défaut), cet attribut indique au
navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu’il
vaut 0, aucune bordure n’est dessinée. Plutôt que cet attribut, on utilisera la
propriété CSS « border » pour dessiner la bordure autour d’une iframe.
- logdesc : une URL vers une description détaillée du cadre, en raison d’un
mauvais usage, cet attribut n’est pas utile pour le navigateur non visuel.
- marginheight : l’espace, exprimé en pixels, entre le contenu du cadre et ces
marges haute et basse.
- marginwidth : l’espace, exprimé en pixels, entre le contenu du cadre et ses
marges gauche et droite.
- scrolling : un attribut à valeur contrainte qui indique si le navigateur doit
afficher une barre de défilement (ou tout autre de moyen de défilement) pour le
cadre :
 auto : la barre de défilement est uniquement affichée lorsque c’est
nécessaire.
 yes: la barre de défilement est toujours affichée.
 no: aucune barre de défilement n’est affichée.

Le contenu de l’iframe ainsi qu’une partie de la mise en page peuvent donc être
paramétrés exclusivement à l’aide de ces attributs. Les parenthèses de la balise ne
comportent en principe aucun contenu. En pratique, cet emplacement est utilisé pour
indiquer un texte alternatif. Ce contenu est lu lorsqu’un navigateur est dans
l’incapacité d’afficher une iframe. Toutefois, cela ne devrait plus se produire de nos
jours. Cette technologie est en effet supportée par les dernières versions de tous les
navigateurs courants.

2.5.4. Exemple :

<iframe width="400" height="700" title="Contenu hors

page" src="[Link]
le de charger la page demandée.</p></iframe>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 42
2025 : Version brouillon
Chapitre III : Les formulaires

Pour permettre à l'utilisateur de communiquer des informations à partir d'une

page web, on utilise principalement des formulaires HTML. Les informatisations
contenues dans ces formulaires, une fois soumises (lorsque l'utilisateur valide le
formulaire), peuvent être traitées par le serveur (en PHP et MySQL par exemple).
Mais il est aussi possible de traiter ces informations en JavaScript, c'est-à-dire
directement dans le navigateur web, principalement pour vérifier que les
informations fournies correspondent à ce qui est demandé. On parle alors de
vérification ou de validation des données des formulaires.
Les pages Web construites en HTML permettent de présenter et de diffuser de
l’information en provenance d’un serveur Web vers un navigateur client. Un «
dialogue » client-serveur s’instaure lorsque le client peut à son tour envoyer des
informations au serveur, notamment par le biais de formulaires :

- Recueil d’informations à l’aide de contrôles dans un formulaire HTML,

- Envoi des informations au serveur,
- Traitement des informations par le serveur (à l’aide d’un langage adapté tels que
PHP ou Perl),
- Renvoi éventuel d’informations HTML au client (réponse, accusé de réception,
demande de précision<).

Une page peut comprendre un à plusieurs formulaires dans sa section <body>.

Avec les formulaires, Html vous ouvre les portes de l'interactivité et vous permet
de recevoir des informations provenant directement de votre lecteur et
éventuellement de lui répondre directement.

Mais encore fallait-il trouver le moyen de renvoyer cette information! En effet,

lorsque vous surfez, vous demandez à votre provider (serveur connecté au Web) de
vous envoyer la page se trouvant à l'adresse (URL) indiquée. Et vous consultez la
page, sur votre ordinateur, en mode read only soit en lecture seule.

Les balises <form></form> prennent des attributs qui déterminent la façon dont le
formulaire sera traité du côté du serveur (par exemple en PHP).

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 43
2025 : Version brouillon
 Un formulaire se déclare, pour ce faire, de la manière suivante :

<form …>

</form>

3.1. Les éléments <input/>

L’élément html <input> est utilisé pour créer un contrôle interactif dans un
formulaire web. <input /> est le plus utilisé. Les saisies possibles et le comportement
de l’élément <input> dépend fortement de la valeur indiquée dans son attribut
« type ».

 Les différents types de champs <input/>

La façon dont un élément <input/> fonctionne dépend grandement de la valeur de

son attribut type. Ainsi, pour chacun de ces types, on aura une page de référence
dédiée. Par défaut, lorsque l’attribut « type » n’est pas présent, il aura la valeur
« implicite » (text). Les types de champs disponibles sont :

3.1.1. type= "text"

Définit un champ texte sur une ligne. Les sauts de ligne sont automatiquement
retirés.

La zone de texte est l'élément le plus commun. On s'en sert pour recueillir une entrée
au clavier de la part de l’internaute.

<form>
<input type="text" name="Prenom" size="25" maxlength="25"
value="Votre nom SVP!">
</form>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 44
2025 : Version brouillon
Commentaire:

 type="text" : définit une zone de texte ;

 name="nom" : identificateur de la zone ;
 value="valeur" : contenu par défaut de la zone ;
 size : fixe la largeur de la zone de texte à l’écran
 maxlength :fixe le nombre maximal de caractères permis.

3.1.2. type= " password"

Définit un champ de saisie de mot de passe.

La zone de mot de passe constitue une variante de la boîte texte. Toutefois, elle
sert principalement à recueillir un mot de passe de la part de l'utilisateur. Les
caractères tapés sont représentés par des astérisques.

<form>
<input type="password" name="motdepasse" size="20"
maxlength="20"/>
</form>

3.1.3. type= "button"

Définit un bouton d’action, un bouton sans comportement défini.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 45
2025 : Version brouillon
<input type="button" name="Bouton" value="Bouton"/>

3.1.4. type=”radio”

Définit un bouton radio. Les boutons radio présentent une liste de choix à l'utilisateur. Ce
dernier ne peut effectuer qu'un seul choix dans la liste. Par exemple, le groupe « Sexe » :

<form...>
<input type="radio" name="Masculin" value="M"
checked/>Masculin<br/>

<input type="radio" name="Féminin" value="F"/>Féminin

</form>

3.1.5. type= "checkbox"

Définit une case à cocher.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 46
2025 : Version brouillon
 Les cases à cocher présentent une liste de choix à l'utilisateur. Celui-ci peut alors
effectuer un ou plusieurs choix. Une case à cocher permet de sélectionner ou
désélectionner une ou plusieurs valeur (s). Par exemple, dans un restaurant, un client
peut préférer un ou plusieurs repas :

<form ...>
<tr><td>Vos préférences</td><td>
<input type="checkbox" name="option1" value="Du riz"
checked/>Du riz<br/>
<input type="checkbox" name=" option2" value="Du riz +
haricot" />Du riz + haricot<br/>
<input type="checkbox" name=" option3" value="Foufou +
poissons" />Foufou + poissons<br/>
<input type="checkbox" name=" option4" value="Pondu + riz"
/>Pondu + riz<br/>
</from>

3.1.6. type= "color"

Définit un contrôle qui permet de définir une couleur.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 47
2025 : Version brouillon
<form action="#" method="POST">
<input type="color" name="couleur" value="Boite de couleurs"/>
</form>

3.1.7. type=”date”

Définit un contrôle permettant de sélectionner une date composée d’un jour, d’un
mois et d’une année.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 48
2025 : Version brouillon
<form action="#" method="POST">
<input type="date" name="dt""/>
</form>

3.1.8. type=”datetime-local”

Définit un contrôle permettant de sélectionner une date et une heure sans fuseau
horaire.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 49
2025 : Version brouillon
<form action="#" method="POST">
<input type="datetime-local" name="dtlocal" value="Date et
temps"/>
</form>

3.1.9. type=”email”

Définit un champ qui permet de saisir une adresse électronique (e-mail). A

l’absence de @, la valeur saisie sera considérée comme incorrecte.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 50
2025 : Version brouillon
<form action="#" method="POST">
<input type="email" name="email" multiple
placeholder="Complétez votre e-mail SVP"/>
</form>

3.1.10. type=”file”

Définit un contrôle qui permet de sélectionner un fichier. L’attribut « accept »

définit les types de fichier qui peuvent être sélectionnés.

<form action="#" method="POST">

<input type="file" name="fichier"/>
</form>

3.1.11. type=”hidden”

Définit un contrôle qui ne s’affiche pas, mais dont la valeur est envoyé au serveur.

<form …>
<input type="hidden" name="hid" value="vide"/>
</form>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 51
2025 : Version brouillon
3.1.12. type=”month”

Définit un contrôle qui permet de sélectionner un mois et une année sans fuseau
horaire.

<form action="#" method="POST">

<input type="month" name="mois"/>
</form>

3.1.13. type= "number"

Définit un champ qui permet de saisir un nombre suivant le système {0,1,2,<,9}.

<form action="#" method="POST">

<input type="number" name="nombre"/>
</form>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 52
2025 : Version brouillon
3.1.14. type=”range”

Définit un contrôle qui permet de saisir un nombre dont la valeur exacte n’est pas
importante.

<form action="#" method="POST">

<input type="range" name="nrange"/>
</form>

3.1.15. type= "search"

Définit un champ texte sur une ligne pour des termes de recherche. Les sauts de
ligne sont automatiquement retirés.

<form action="#" method="POST">

<input type="search" name="recherche"/>
</form>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 53
2025 : Version brouillon
3.1.16. type= "tel"

Définit un champ de saisie de numéro de téléphone.

<form action="#" method="POST">

<input type="tel" name="telephone"/>
</form>

3.1.17. type= "time"

Définit un contrôle de sélection/saisie de l’heure.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 54
2025 : Version brouillon
<form action="#" method="POST">
<input type="time" name="temps"/>
</form>

3.1.18. type= "url"

Définit un champ permettant de saisir une url.

<form action="#" method="POST">

<input type="url" name="url"/>
</form>
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 55
2025 : Version brouillon
3.1.19. type= "week"

Définit un contrôle permettant de saisir/sélectionner une date représentée par un

numéro de semaine et une année sans indication de fuseau horaire.

<form action="#" method="POST">

<input type="week" name="semaine"/>
</form>

3.1.20. Les boutons de soumission et d’initialisation

 type= « submit» : soumission

 type= «reset» : réinitialisation

Un formulaire est transmis au serveur lorsque l'utilisateur clique sur le bouton de

« soumission » à l'aide de la souris. On peut lui accompagner du bouton
d’ « initialisation », permettant ainsi à l'utilisateur d'effacer toutes les entrées du
formulaire d'un seul coup.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 56
2025 : Version brouillon
<form…>
<input type="submit" value="Soumettre" name=”Soumettre”/>
<input type="reset" value="Recommencer" name=”Recommencer”/>
</form>

3.1.21. type= " image"

Définit un bouton graphique d’envoi du formulaire. L’attribut «src » doit être

renseigné avec la source de l’image et l’attribut «alt » peut être renseigné avec le texte
alternatif. Les attributs « width » et « height » doivent aussi être renseignés pour
définir la taille de l’image en pixels.

<form action="#" method="POST">

<input type="image" name="image" alt="Cliquez ici pour enregistrer"
src ="C:\Users\Ir. ANACLET\Pictures\Image_save.JPG" width= "70"
height= "70"/>
</form>
MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 57
2025 : Version brouillon
 Les attributs universels

Les éléments <input/> peuvent bien utiliser les attributs universels :

- autocomplete : une chaine de caractères qui indique le type d’auto

complétion. (autocomplete="on"/autocomplete="off"). Prise en charge de
l’historique du navigateur.
- Autofocus : un attribut booléen qui passe le focus sur le champ lorsque le
formulaire est affiché. (autofocus="autofocus"), à l’ouverture de la page,
cela donne le focus au champ
- disabled : un attribut booléen qui indique si le champ doit être désactivé.
- form : l’identifiant du formulaire (la valeur de l’attribut id de l’élément
<form>) auquel le champ est rattaché. Si cet attribut est absent, le champ
sera rattaché au formulaire le plus proche qui le contient. Il permet de
placer un champ en dehors du formulaire, en associant au formulaire par
ID
- list : l’identifiant (valeur de l’attribut id) d’un élément <datalist> qui fournit
une liste des suggestions.
- name : le nom d’un champ qui sera rattaché à la donnée envoyée via le
formulaire.
- readonly : un attribut booléen qui indique si le champ peut être édité ou
non.
- tabindex : une valeur numérique qui indique à l’internaute l’ordre selon
lequel naviguer au clavier grâce à la touche tabulation.
- type : nature du champ (zone de texte, bouton, nombre ,<).
- value : valeur initial du champ.
- required : un attribut booléen qui indique que le champ doit être renseigné
avant de pouvoir envoyer le formulaire (champ obligatoire). L'attribut
required permet de vérifier que l’utilisateur a bien rempli un champ
obligatoire. Lorsque qu'un champ a l'attribut required, le navigateur vérifie
après validation que ce champ est rempli, s'il ne l'est pas, il n'envoie pas le
formulaire et affiche un message. (required="required"), le champ doit être
non-vide pour que le formulaire soit validé
- placeholder : texte qui s’affiche sur un champ pour indiquer son rôle et qui
devra disparaitre une fois que l’internaute démarre la saisie. Par exemple,
placeholder="Numéro téléphone SVP !". Affiche une valeur
indicative (Numéro téléphone SVP !) dans le champ.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 58
2025 : Version brouillon
 - pattern : Pour aller plus loin dans l'auto-vérification des formulaires par le
navigateur, il est possible de vérifier que le contenu des informations
données par l’utilisateur correspond à un motif prédéfini. Cette auto-
vérification utilise l'attribut pattern qui doit contenir une expression
régulière à ce sujet. Par exemple, pattern="[A-Za-z0-9]". Expression
régulière du format du champ. Les autres cas d’auto vérification sont
donnés dans le tableau ci-dessous :

- min, max, step : concerne number, range, date, datetime, datetime-local, month,
week, time.

Exemple : Considérons une zone de texte destinée à recevoir le prénom d’une

personne sachant qu’il est obligatoire et qu’il ne peut contenir des chiffres, avec un
texte indicateur « Saisissez ici votre âge ».

<form action="#" method="POST">

<label>Prénom</label>
<input type="text" name="prenom" placeholder="Saisissez ici
votre prénom" pattern="[A-Za-z]+" required/>
</form>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 59
2025 : Version brouillon
3.2. Les listes

Les listes constituent un ensemble d'items organisés séquentiellement.

On distingue ici deux types de listes : une liste dans laquelle l’internaute ne peut
effectuer qu’un seul choix (liste déroulante) et une liste dans laquelle l’utilisateur
peut effectuer plus d’un choix.

3.2.1. Liste déroulante

Une liste déroulante permet à l'utilisateur de faire un choix parmi une liste d'items.
Considérons un candidat qui veut prendre inscription dans l’une des facultés de l’université,
donc, liste des facultés :

a.1. La balise <select …>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 60
2025 : Version brouillon
<form action="#" method="POST">
<select name="Faculte">
<option value="Sciences informatiques">Sciences
informatiques</option>
<option value="Sciences économiques">Sciences
économiques</option>
<option value="Droit">Droit</option>
<option value="Santé publique">Santé
publique</option>
</select>
</form>

a.2. La balise <datalist id=…>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 61
2025 : Version brouillon
<form action="#" method="POST">
<input type="text" list="faculte">
<datalist id="faculte">
<option value="Sciences informatiques">
<option value="Sciences économiques">
<option value="Droit">
<option value="Santé publique">
</datalist>
</form>

3.2.2. Liste à plusieurs choix

La différence est qu’ici, l’internaute a la possibilité d’effectuer plus d’un choix

dans la liste. A cet effet, il suffit de renseigner la propriété multiple comme c’est le
cas ici-bas, si la liste représente l’ensemble de médias (presse écrite) préférés en
RDC :

<form…>
<select name="Media" multiple>
<option value="[Link]">[Link]</option>
<option value="[Link]">[Link]</option>
<option value="[Link]">[Link]</option>
<option value="[Link]">[Link]</option>
<option value="[Link]">[Link]</option>
<option value="[Link]">[Link]</option>
</from>

3.3. Regroupement de champ du formulaire par thématique

La balise <fieldset> permet de grouper de champs par thématique. La balise

<legende> définit alors la légende (le thème) pour un fieldset.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 62
2025 : Version brouillon
 Par exemple la figure ci-dessous :

<h1>Les GroupBox, précisement (fieldset)</h1>

<!--Groupe Identité-->
<fieldset>
<legend>Identité</legend>
<table border="0">
<tr><td><label for="idPrenom">Prénom :</label></td>
<td><input type="text" name="prenom" /></td>
</tr>
<tr><td><label for="idNom">Nom :</label></td>
<td><input type="text" name="prenom" /></td>
</tr>
<tr><td><label for="idPostnom">Post nom
:</label></td>
<td><input type="text" name="postnom" /></td>
</tr>
</table>
</fieldset>
<!--Groupe Sexe-->
<fieldset>
<legend>Sexe</legend>
<input type="radio" name="Masculin" value="M" checked
/>label for="idM">Masculin :</label>
<input type="radio" name="Feminin" value="F"/><label
for="idF">Féminin </label>
</fieldset>

3.4. Les événements

Les balises HTML sont associées à des évènements auxquels elles peuvent réagir.
Ainsi, la balise <body> possède deux évènements intrinsèques souvent utilisés,
« onload et onunload ».

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 63
2025 : Version brouillon
 A l’intérieur de ces balises, il est donc possible d’associer du code JavaScript qui
sera exécuté lorsque l’évènement sera déclenché, soit par l’utilisateur (envoi d’un
formulaire par exemple), soit par le navigateur lui-même (chargement d’une page
par exemple).

Combiné à l’utilisation des feuilles de style, les évènements et JavaScript

permettent également d’obtenir des combinaisons graphiques intéressantes. Les
évènements accessibles pour chaque balise HTML sont décrits dans la spécification
HTML 4.0.

Voici une liste des principaux évènements intrinsèques :

N° Nom Description

1 onAbort Quand l’internaute arrête le chargement d’une image

2 onBlur Quand un objet HTML n’a plus le focus
3 onChange Quand un objet HTML a été modifié et qu’il n’a plus
le focus
4 onClick Quand l’internaute clique sur un objet HTML
5 onDbClick Quand l’internaute double clique sur un objet HTML
6 onError Quand le chargement de la page ou d’une image a
entrainé une erreur
7 onFocus Quand un objet HTML a le focus (cliquer dans
un champ par exemple)
8 onKeyDown Quand l’internaute appuie sur une touche de
son clavier
9 onKeyPress Quand une touche du clavier est enfoncée
(combinaison de onKeyDown et onKeyUp)
10 onKeyUp Quand l’internaute "lâche son doigt" d’une touche alors
enfoncée
11 onLoad Quand le chargement de la page est fini
12 onMouseDown Quand l’internaute appuie sur un bouton de la Souris
13 onMouseMove Quand l’internaute déplace sa souris
14 onMouseOut Quand l’internaute enlève sa souris sans
cliquer d’un objet HTML
15 onMouseOver Quand l’internaute met sa souris sans cliquer
sur un objet HTML
16 onMouseUp Quand l’internaute "lâche son doigt" d’un bouton de sa

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 64
2025 : Version brouillon
 souris alors enfoncé
17 onMove Quand une fenêtre ou une frame est déplacée
18 onReset Quand un formulaire est remis à zéro (avec un bouton
[Reset])
19 onResize Quand l’internaute redimensionne sa fenêtre de
navigateur
20 onScroll Quand la position de la barre de défilement est
modifiée
21 onSelect Quand l’internaute sélectionne du texte dans un objet
HTML
22 onSubmit Quand le formulaire est envoyé, quand l’internaute
clique sur un bouton [Envoyer]
23 onUnLoad Quand une page est quittée

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 65
2025 : Version brouillon
Chapitre IV : Les feuilles de styles (CSS3)

Créées pour prendre en charge tous les aspects graphiques et les rendus sur les
différents médias (écran, mais aussi imprimante, synthèse vocale, assistant
personnel, etc.), les feuilles de styles ajoutent la couche graphique au document web
et à sa structure. Cette partie aborde leur syntaxe et utilisation pratique allant de la
typographie aux différentes méthodes de positionnement.

4.1. Principes d’une bonne écriture XHTML/CSS

L’essentiel est de séparer le contenu (codé en XHTML) de la mise en forme

(feuilles de style CSS). Cette méthode présente plusieurs avantages, notamment la
clarté du code et la possibilité de définir des styles communs à plusieurs pages.

Voici quelques exemples de mise en forme à l’aide de balises qui donnent du sens
au texte. Ils utilisent le principe des balises, que nous n’avons pas encore détaillé
(c’est l’objet du chapitre qui suit). Cependant c’est une première approche
intéressante, avant de se jeter dans le grand bain du XHTML et des CSS !

 Titre de page

Au lieu d’écrire le titre dans un paragraphe normal <p> et de l’affubler d’une

tonne de mises en forme (grande taille, gras, espacement au-dessus et en dessous),
codez-le plutôt comme « titre de niveau 1 » avec la balise <h1> et, si besoin est,
complétez sa mise en forme à l’aide d’une règle de style CSS :

 Dans le code XHTML : <h1>Ici un titre</h1>

 Et dans la feuille de style : h1 { ...mise en forme...}

 Mise en gras ou en italique

Pour mettre des mots en gras ou en italique, il existait en HTML les balises <b>
(gras) et <i> (italique) qui sont obsolètes en XHTML : remplacez-les respectivement
par <strong> et <em>.

L’affichage sera identique avec les anciennes et les nouvelles balises, alors
pourquoi ce changement ? Il correspond au raisonnement suivant :

 Les nouvelles balises <strong> et <em> indiquent une mise en relief plus ou
moins prononcée sans dire par quel moyen elle s’effectuera, notamment

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 66
2025 : Version brouillon
 sans imposer le gras ou l’italique comme le font les anciennes <b> (« gras »
se dit bold en anglais) et <i>.
 Ainsi par exemple, le concepteur de la page peut effectuer cette mise en
forme par un changement de couleur du texte, sans recourir au gras ni à
l’italique. Ce choix serait en contradiction avec le nom des anciennes
balises, il ne l’est pas avec celui des nouvelles.

 Liste de liens hypertexte (menu)

Pour écrire un menu, évitez d’avoir recours à une succession de balises <p>.
Préférez-leur une structure de liste en délimitant l’ensemble par la balise <ul> (liste
non numérotée), et chaque ligne par une balise <li>. Nous reviendrons bientôt sur
l’utilisation de ces balises.

Ainsi, cette partie se différenciera du texte et constituera un ensemble homogène,

avec une fonction bien précise : celle d’un menu. Par contre, si la suite de la page
contient des paragraphes <p> incluant aussi des liens hypertexte, ceux-ci seront bien
repérés comme représentant le texte de la page. À noter Menu en début de page

Puisque nous parlons de menu, il faut signaler que sa place de choix dans le code
se trouve au début de la page. Celle-ci sera alors mieux comprise par les navigateurs
qui lisent la page en mode texte, d’où une accessibilité améliorée pour les personnes
handicapées et un meilleur référencement par les moteurs de recherche.

4.2. Intérêts du CCS

Rappelons que les normes du Web incitent désormais webmasters et concepteurs

de sites web à séparer clairement leurs contenus (HTML) de la mise en forme (CSS).
Cette distinction a un intérêt principal, la conception des pages web s’en trouve
vraiment facilitée :

 Cette dissociation des fonctions évite encore de pénaliser les anciens navigateurs
(les documents y demeurant lisibles), les navigateurs en mode texte (ciblant les
aveugles ou les utilisateurs en mode texte), et les programmes utilisant d’autres
médias (assistants personnels, WAP, ordinateurs avec synthétiseur vocal,
navigateurs braille, etc.) ;
 Quel webmaster n’a jamais dû modifier tout son site, page après page, pour
répéter fastidieusement la même manipulation élémentaire (par exemple,
changer la couleur des titres) ? CSS simplifie cette opération : avec cette nouvelle
technique, une seule feuille de styles, stockée dans un fichier, assure la gestion
graphique de l’intégralité d’un site, qu’il compte trois pages ou plusieurs
centaines. Toute intervention dans ce fichier sera immédiatement répercutée
partout ;

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 67
2025 : Version brouillon
 En outre, cette feuille CSS étant conservée dans la mémoire cache de l’ordinateur
du navigateur après la première connexion, toutes les pages du site s’afficheront
plus rapidement que si les indications de présentation étaient répétées sur
chacune d’entre elles.

4.3. La syntaxe de base des CSS

Selecteur
{
Propriété 1 : valeur ;
Propriété 2 : valeur ;
…
Propriété n : valeur ;
}

Exemple :
h1
{
font-family:Arial;
font-size:20px;
color:green;
text-align:center;
}

Cette règle colorera en vert le contenu texte (ici titre de niveau 1) des balises <h1>
contenues dans les pages auxquelles ce fichier CSS sera lié. Elle centrera aussi les
titres, la taille sera 20 pixels et la police arial.

4.4. Appliquer les styles

Comment appliquer le style CSS au document HTML qui en dépend ? Il existe

pour cela trois méthodes, mais celle de la feuille de styles présente de nombreux
avantages.

Les trois méthodes sont notamment : les styles en ligne (styles insérés dans la balise à
travers la propriété style), les styles du document (styles insérés dans le document
dans la balise <head> à travers la balise style) et les styles externes (styles définis dans
un fichier CSS à part).

1°) Les styles en ligne

Ici on insère directement(ou localement) dans le code html, le style sur une balise à
l’aide de l’attribut style. Voici un exemple :

La syntaxe est la suivante :

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 68
2025 : Version brouillon
<balise style= " propriété 1 : valeur ; propriété 2 : valeur ;
… ; propriété n : valeur ; "/>

Exemple :
<h1 style="font-family:times new roman; font-size:22px;
color:red;"> Programmation web</h1><br/>

Cette ligne affecte au texte ‚Programmation web‛ la police times new roman, la
taille 22 et la couleur rouge.

Remarque : Cette technique ne respecte pas la philosophie des normes xhtml/css(séparer le

contenue et le design).

2°) Les styles du document

On peut d’abord placer des styles CSS dans l’en-tête HTML (contenu de
l’élément<head></head>). Placé entre les balises <style> </style>, le style s’appliquera
à tous les éléments sélectionnés.

On fera ceci par exemple :

<head>
…
<style>
h1
{
font-family:Arial;
font-size:20px;
color:blue;
}
</style>
</head>

NB : Dans cette technique, qui sépare correctement contenu et mise en forme,

malheureusement, la portée de ce style se limite au document HTML du
fichier. Dans l’idéal, le design général du site s’appliquera automatiquement,
sans devoir être explicité dans chaque document HTML. Pour aboutir à cet
effet, nous placerons les règles CSS dans un fichier distinct.

3°) Les styles externes

Il s’agit de stocker les ressources dans des fichiers distincts : documents HTML et
feuilles de styles CSS. Ces dernières renfermeront toutes les règles nécessaires à la
mise en page et au design des fichiers HTML. Il suffira alors de modifier le fichier

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 69
2025 : Version brouillon
CSS séparé pour changer l’allure de toutes les pages HTML du site. Ce fichier CSS,
appelé feuille de styles, portera l’extension .css et ne contiendra que des règles CSS
(aucun code HTML n’y sera autorisé, pas même la balise <style> vue dans la méthode
précédente). Le langage CSS, fait pour écrire des règles, ne peut contenir d’autres
langages. Il convient ensuite de relier ce fichier aux contenus sur lesquels il est censé
porter.

Pour ce faire, il s’agit dans un premier temps de créer un fichier (CSS) contenant la
définition des styles à appliquer aux différentes pages et dans un deuxième temps,
de créer dans chaque fichier XHTML un raccourci (lien) vers le fichier de style CSS.

La formalisation de l’idée précédente est alors ici :

a) Code CSS : [Link]

h1
{
font-family:Arial;
font-size:20px;
color:green;
text-align:center;
}
li
{
font:1em Lucida Calligraphy;
}
a
{
font-family: times new roman;
font-size:1em;
font-weight:bold;
color:red;
}

b) Code XHTML : Exemple3

<html>
<head>
<title> Exemples des css </title>
<link rel="stylesheet" type="text/css"
href="[Link]"/>
</head>
<body>
<h1> Programmation web</h1><br/>
<ol>
<li>Xhtml</li>
<li>css</li>
<li>java script</li>

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 70
2025 : Version brouillon
 <li>php</li>
<li>MySQL</li>
</ol>
<h1> Langages de programmation proceduraux</h1>
<ul>
<li> Java </li>
<li> VB Net </li>
<li> C & C++ </li>
<li> C Sharp </li>
<li> NetBeans </li>
</ul>
<a href="EX2_STYLE_DU_DOCUMENT.html">Revenir à
la page d'accueil</a>
</body>
</html>

<link> est une balise HTML qui n’est pas uniquement dévolue aux feuilles de
styles. Quand elle désigne une feuille de styles CSS, elle s’accompagne des propriétés
et valeurs suivantes : rel="stylesheet", type="text/css ", < voire title dans le cas de
feuilles de styles persistantes et alternatives.

Par exemple :

<link rel="stylesheet" type="text/css" href="[Link]"/>

4.5. Les sélecteurs de styles

Dans les exemples ci-dessus on utilise comme sélecteur la balise <h1>. Cette règle
affectera donc toutes les balises <h1> dans les pages HTML concernées. Cet effet n’est
pas toujours désirable : on souhaite parfois n’intervenir que sur certaines balises d’un
type donné (par exemple, en colorant en rouge certains liens hypertextes mais pas
tous). Pour cela, le langage CSS accepte différentes formes de sélecteurs :

les sélecteurs de balises (utilisés jusqu’ici) ;

les sélecteurs de classes (une classe est un nom donné à un ensemble d’éléments
HTML à distinguer) ;
les sélecteurs d’identifiants (un identifiant ou id est le nom attribué à un
élément unique dans le document HTML) ; • les pseudo-classes et les pseudo-
éléments (variantes pour certaines fonctionnalités, par exemple les liens).

4.5.1. Les balises

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 71
2025 : Version brouillon
 Toute balise HTML peut intervenir dans un sélecteur. Ainsi, on pourra supprimer
tous les interlignes entre paragraphes en attribuant à la balise <p> des marges haute
et basse nulles :

p
{
margin-top: 0;
margin-bottom: 0;
}

4.5.2. Les classes

Une classe est un nom que l’on choisit librement (en se limitant aux caractères
alphanumériques classiques) et dont on baptise les éléments concernés. Un sélecteur
de classe reprend son nom en le préfixant d’un point (par exemple : .ma_classe,
.structu, etc.). Pour attribuer un comportement différent à certains éléments, il suffit
de leur appliquer une classe. On affichera en vert les liens hypertextes du document
à l’exception de certains liens particuliers que l’on souhaite voir apparaître en rouge
en reprenant la technique suivante.

Une première règle précise le comportement par défaut à adopter pour toutes les
balises <a> :
Code CSS Code html
a { <a href="…">lien normal</a>
color: green;
} <a href="…"
.sommaire { class="sommaire">lien
color: red; rouge</a>
}

4.5.3. Les identificateurs

Un identificateur (identifiant, ou id) est lui aussi un nom choisi librement (en se
limitant aux caractères alphanumériques classiques). Il se distingue de la classe en ce
qu’il ne peut porter qu’au plus sur un objet du document. Les sélecteurs CSS s’y
réfèrent par l’emploi d’un caractère dièse (#) suivi de son nom (exemples : #exemple,
#structams, #myna, etc.)

#special { #special {
background-color : navy ; background-color : navy ;
color :white ; color :white ;
} }

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 72
2025 : Version brouillon
4.5.4. Les pseudo-classes et les pseudo-éléments

Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations

qui ne sont pas réalisables en HTML. CSS crée en effet des éléments spécifiques à
certaines actions (comme le survol d’un lien) ou à certaines arborescences (comme le
premier paragraphe d’un bloc). Ces techniques permettent de styler un contenu
n’apparaissant même pas dans le code du document. Un exemple courant est
l’utilisation de la pseudo-classe : hover, qui prend effet lorsque le pointeur de la
souris survole l’élément concerné. Ainsi, la règle suivante

a:hover { Cette règle affectera tous les liens de la page

text-decoration: none; lors de leur survol par le pointeur de la souris. :
} <a href=".">texte du lien</a>
Avec cette instruction, les liens hypertextes –
soulignés par défaut – apparaîtront sans
ornement lorsque le pointeur de la souris les
survolera.

Remarque :

Compatibilité internet explorer et la pseudo-classe :hover

La pseudo-classe :hover permet d’affecter un style particulier lorsque l’élément désigné est survolé.
A priori, cette pseudo-classe n’est pas réservée à l’élément de lien <a> mais peut être appliquée à
tous les éléments ; ainsi est-il possible de modifier la couleur d’arrière-plan d’un bloc entier lors du
survol à l’aide de la souris.
Cependant, jusqu’à sa version 6, Internet Explorer ne prend en charge :hover que lorsqu’elle est
appliquée à l’élément <a>. IE7 corrige cette lacune et étend son application à tous les
éléments.
Les pseudo-éléments :first-letter et :first-line (qu’Internet Explorer ne reconnaît qu’à partir de sa
version 6) agissent sur la première lettre ou la première ligne d’un paragraphe, indépendamment de
la balise qui structure sinon ce contenu.

4.6. Syntaxes de regroupements

Certaines règles permettent de faciliter et d’alléger considérablement la

production de code CSS. Observer ces principes simples vous fournira des feuilles de
styles aérées, bien plus compréhensibles.

4.6.1. Regroupement des sélecteurs

La première construction syntaxique utile permet de regrouper des sélecteurs. Au

lieu de répéter la même règle pour plusieurs éléments, on pourra factoriser leurs
sélecteurs en les séparant par des virgules :

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 73
2025 : Version brouillon
 .texte {
margin-left: 0;
}
.texte, p, h1, h2
p {
{
margin-left: 0; Equivalent à margin-left: 0;
} }
h1 {
margin-left: 0;
}
h2 {
margin-left: 0;
}

Cette dernière déclaration annulera la marge gauche de tous les éléments de classe
.texte, de tous les paragraphes et de tous les titres de premier et de deuxième niveau.

4.6.2. Regroupement des propriétés

Certaines propriétés génériques prévoient une version raccourcie, permettant

l’application de plusieurs valeurs en une seule déclaration. Ainsi, la propriété font
rassemble les valeurs des propriétés font-style, font-size, font-family, font-weight et
line-height. C’est ainsi que l’on pourra réduire la règle :

Equivalent à
p { p {
font-family: Arial, sans- font : italic bold
serif; 120%/140% Arial, sans-
font-style: italic; serif;
font-weight: bold; }
font-size: 120%;
line-height: 140%;
}

D’autres propriétés raccourcies pourront s’avérer bien utiles :

 border pour border-width, border-style, border-color.

 background pour background-image, background-color, background-position,
background-repeat, background-attachment.

4.7. Quelques balises, propriétés et manipulations à retenir

4.7.1. Formatage du texte

Il ici question de voir comment modifier la taille du texte, changer la police,

aligner le texte...

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 74
2025 : Version brouillon
1°) La taille

Pour modifier la taille du texte, on utilise la propriété CSS font-size. Mais

comment indiquer la taille du texte ? Plusieurs techniques sont proposées :

 Indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette

méthode est très précise mais il est conseillé de ne l'utiliser que si c'est
absolument nécessaire, car on risque parfois d'indiquer une taille trop petite pour
certains lecteurs.
 Indiquer une taille relative : en pourcentage, "em" ou "ex", cette technique a
l'avantage d'être plus souple. Elle s'adapte plus facilement aux préférences de
taille des visiteurs.

2°) Une taille absolue

Pour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un
texte de 16 pixels de hauteur, vous devez écrire( en CSS) : font-size: 16px;

Exemple avec CSS :

p{
font-size: 12px; /* Paragraphes de 12 pixels */
}
h2
{
font-size: 20px; /* Titres de 20 pixels */
}
NB : Les tailles en centimètres ou millimètres sont aussi disponibles. On remplace
juste "px" par "cm" ou "mm". Ces unités sont cependant moins bien adaptées
aux écrans.

3°) Soulignement du texte

text-decoration. : Elle permet entre autres de souligner le texte, mais pas seulement.
Voici les différentes valeurs qu'elle peut prendre :

 underline : souligné.
 line-through : barré.
 overline : ligne au-dessus.
 blink : clignotant. Ne marche pas sur tous les navigateurs (Internet Explorer et
Google Chrome notamment).
 none : normal (par défaut).

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 75
2025 : Version brouillon
Exemple d’utilisation avec css :

h1
{
text-decoration: blink;
}
.souligne
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus
{
text-decoration: overline;
}
4°) L'alignement

Le langage CSS nous permet de faire tous les alignements que l'on connaît : à
gauche, centré, à droite et justifié. On utilise la propriété text-align, et on indique
l'alignement désiré :

 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.
 justify : le texte sera "justifié".

Exemple d’utilisation avec CSS :

h1
{
text-align: center;
}
p{
text-align: justify;
}
.signature
{
text-align: right;
}

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 76
2025 : Version brouillon
Remarque : Il est impossible de modifier l'alignement du texte d'une balise inline
(comme <span>, <a>, <em>, <strong>...). L'alignement ne fonctionne que
sur des balises de type block (<p>, <div>, <h1>, <h2>, ...), et c'est un peu
logique quand on y pense : on ne peut pas modifier l'alignement de
quelques mots au milieu d'un paragraphe ! C'est donc en général le
paragraphe entier qu'il vous faudra aligner.

4.7.2. Images de fond

Dans les exemples qui suivent, je vais modifier l'image de fond de la page.
Cependant, tout comme pour la couleur de fond, n'oubliez pas que l'image de fond
ne s'applique pas forcément à la page entière. On peut aussi mettre une image de
fond aux titres, paragraphes, etc.

La propriété permettant d'indiquer une image de fond est background-image.

Comme valeur, on doit lui donner url("nom_de_l_image.png"). Par exemple:

body
{
background-image: url("[Link]");
}

4.7.3. La transparence

Le CSS nous permet de jouer très facilement avec les niveaux de transparence des
éléments. La propriété opacity, très simple, 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. Avec une valeur de 0, l'élément sera totalement transparent.

Il faut donc choisir une valeur comprise entre 0 et 1. Par exemple avec 0.6, votre
élément sera opaque à 60%... et on verra donc à travers !

Voici comment on peut l'utiliser :

p{
opacity: 0.6;
}

Exemple d’utilisation :

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 77
2025 : Version brouillon
 body
{
background: url('[Link]');
}
p
{
background-color: black;
color: white;
opacity: 0.3;
}

4.7.4. Transformation des éléments

Il existe en CSS une propriété très puissante : display. Elle est capable de
transformer n'importe quel élément de votre page d'un type vers un autre. Avec
cette propriété, il est par exemple possible de transformer mes liens (originellement
de type inline) sous forme de blocs :

a{
display: block;
}

A ce moment-là, les liens vont se positionner les uns en-dessous des autres (comme
des blocs normaux) et il devient possible de modifier leurs dimensions ! Voici
quelques-unes des principales valeurs que peut prendre la propriété display en CSS
(il y en a encore d'autres) :

On peut donc décider de masquer complètement un élément de la page avec cette

propriété. Par exemple, si je veux masquer les éléments qui ont la classe "secret", je
vais écrire :

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 78
2025 : Version brouillon
 .secret
{
display: none;
}

4.7.5. Le positionnement inline-block

Les manipulations que demande le positionnement flottant se révèlent parfois un

peu délicates sur des sites complexes.
Dès qu'il y a un peu plus qu'un simple menu à mettre en page, on risque d'avoir à
recourir à des clear: both; qui complexifient rapidement le code de la page. Si le
positionnement flottant reste, de loin, le mode de positionnement le plus utilisé sur le
Web à l'heure actuelle, d'autres techniques existent et bien peu de webmasters le
savent. L'une d'elles, étonnamment puissante, est passée sous les yeux des
concepteurs de sites web alors qu'elle existe depuis CSS 2.1, c'est-à-dire depuis plus
de 10 ans !
Elle consiste à transformer vos éléments en inline-block avec la propriété display.

Nous allons transformer en inline-block les deux éléments que nous voulons placer
côte à côte : le menu de navigation et la section du centre de la page.

nav
{
display: inline-block;
width: 150px;
border: 1px solid black;
}
section
{
display: inline-block;
border: 1px solid blue;
}

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 79
2025 : Version brouillon
Références

 Andy BUDD avec Cameron Moll et Simon COLLISON, Maîtrise des CSS, 2eme éd.,

Pearson, Paris,

 Christian Wenz, Javascript, L’essentiel du code et des commandes, Pearson,

Pearson, Paris, 2009.

 Cyril PIERRE de Geyer et Guillaume PONÇON, PHP & SQL, Eyrolles, Paris, 2017.

 Emmanuel GUTIERREZ, JavaScript, Des fondamentaux aux concepts avancés,

ENI,

 Francis DRAILLARD, Premiers pas en CSS et XHTML, 2e éd., Eyrolles, Paris,

 Mat MARQUIS, Javascript pour les Web designers, Eyrolles, Paris, 2017.

 Raphael GOETTER, CSS3, 4éme éd., Eyrolles, Paris, 2017.

 Raphaël GOETTER, CSS avancés Vers HTML 5 et CSS 3, Eyrolles, Parsis, 2011.

MIANGALA Anaclet, Notes de cours de Programmation web I, Bac I., Informatique, 2024- 80
2025 : Version brouillon