Télématique et Réseaux II -1-

République Démocratique du Congo

ENSEIGNEMENT SUPÉRIEUR ET UNIVERSITAIRE
INSTITUT SUPÉRIEUR DE COMMERCE DE GOMA
ISC-GOMA

[Link]

PROGRAMMATION WEB 1
Notes de cours

Destinées aux étudiants de troisième année de licence en

Informatique de Gestion

Par : CT Janvier SINDAMBIWE, Doctorant

Support appartenant à l’étudiant(e) : ……………………

…………………………………………………………………..

Décembre 2024

Par le CT Janvier TWIZERE, Tél : +243 97 66 20 545

Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -1-

Objectifs du Cours
En troisième année de licence, le cours de Programmation Web1 poursuit les objectifs ci-après :
- Exploiter le cadre conceptuel du Web ;
- Concevoir les pages Web ;
- Mettre en page les pages Web ;
- Mettre en forme le site Web ;
- Exécuter le code PHP de base.

Bibliographie Sélective
1. Matthieu Nebra, Apprenez à créer votre site web avec HTML5 et CSS3, 2013, 248 pages.
2. Christophe Porteneuve, Bien développer pour le Web 2.0, Bonnes pratiques 2è édition, EYROLLES, Paris,
2008, 673 pages.
3. Mathieu Nebra, Réussir son site web avec HTML et CSS, 2è édition, EYROLLES, Paris, 2008, 316 pages.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -2-

INTRODUCTION

La communication internationale fait intervenir le Web qui permet aux internautes de

larguer des requêtes partout dans le monde via le serveur qui les analyse afin de réserver et
d’acheminer les réponses appropriées aux requêtes larguées.
Le Web utilise des langages et syntaxes officiels (HTML, XHTML, XML, CSS…) qui
reposent sur des standards publiés par des organisations de normalisation telles que le W3C. Timothy
Berners-Lee est le co-inventeur du Web, qu'il met au point au début des années 1990 avec son
collègue Robert Cailliaud.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -3-

CHAP.I. FONDAMENTAUX DU WEB

1.1. HISTORIQUE
Le World Wide Web (WWW) a été créé en 1989 par l’ingénieur anglais du CERN Tim
Berners-Lee. Le web a été basiquement conçu pour partager automatiquement des informations entre
les scientifiques, universités et instituts du monde entier.
Avant l’introduction de HTML et HTTP, d’autres protocoles tels que FTP et Gopher étaient
utilisés pour obtenir des fichiers depuis un serveur. Ces protocoles offraient une organisation
hiérarchique de répertoires dans lesquels l’utilisateur naviguait et choisissait les fichiers à
télécharger. Les documents étaient principalement des fichiers texte sans mise en page et des fichiers
encodés par un traitement de texte.
Aujourd’hui, le Web est accessible via le protocole HTTP (HyperText Transfer Protocol) et
les URL (Uniform Resource Locator) càd Localisateur uniforme de ressource. Les fichiers
hébergés sur le site web reposent sur du HTML (HyperText Markup Language) càd langage de
balisage d’hypertextes (texte dont certains mots sont mis en relief) et d'autres langages
complémentaires. Le protocole HTTP permet au client (généralement via un navigateur web)
d'accéder à des ressources par un URL. HTML et de structurer les données ou lier les ressources
entre elles, notamment avec des liens hypertexte.

1.2. PAGE WEB

La page web est l'unité de consultation du World Wide Web. Ce terme a une signification
pratique ; il n'a pas de définition technique formelle. Elle est conçue pour être consultée à l'aide d'un
navigateur web. Elle a une adresse web. Techniquement, une page web est souvent constituée d'un
document en Hypertext Markup Language (HTML) et d'images. Cependant, tout type de ressources
ou d'assemblage de ressources, textuelles, visuelles, sonores, logicielles, peuvent constituer une page
web.
1.2.1. Création
Pour créer une page Web, un éditeur de texte ou un éditeur HTML spécialisé est nécessaire.
Il faut ensuite enregistrer la page Web créée sur un serveur Web (hébergeur).
Le design d’une page Web est personnel. Il est possible d’utiliser des modèles préfabriqués.
Les modèles de Web page permettent au webmaster de se concentrer sur le contenu du site sans avoir
à se préoccuper des problèmes esthétiques. Beaucoup de personnes utilisent les services gratuits de
Google, Yahoo ou Geocities pour créer et publier leur propre page Web. L’inconvénient de ces
services gratuits de création de page Web est que, généralement, ils sont limités en taille et souvent
incluent de la publicité dans les pages créées.
Une autre façon de créer une page Web est de télécharger et d’utiliser des programmes gratuits
tels qu'un wiki, un système de gestion de contenu, ou un forum Internet. Ces systèmes permettent de
créer rapidement et facilement des pages Web qui sont généralement des sites Web dynamiques.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -4-
1.2.2. Mise en page
Le langage HTML permet aux navigateurs Web d'adapter le rendu de chaque page aux
conditions locales de consultation : dimensions de la fenêtre, fontes de caractères disponibles,
préférences du visiteur. Entre un téléphone portable et une station de travail en passant par l'ordinateur
personnel, ces conditions varient considérablement.
On appelle « design fluide » les méthodes de design qui permettent aux pages de s'adapter
aux conditions de consultation. Inversement, on appelle « design fixe » la méthode qui consiste à
figer la taille de chaque élément de la page et à n'obtenir un rendu idéal que dans une fenêtre de
dimensions précises, avec une taille de fonte précise.

1.2.3. Consultation
Une page web se consulte soit en entrant directement son adresse Web dans un navigateur
Web, soit en suivant un hyperlien se trouvant dans une autre page. Les navigateurs les plus utilisés
affichent la page sur moniteur d'ordinateur, dans une fenêtre, et permettent de l'imprimer. Cependant,
le langage HTML, à la base de la plupart des pages Web, a été conçu pour permettre la consultation
avec des dispositifs variés : écrans de toute taille, terminal en mode texte, imprimante, dispositif
braille, synthétiseur vocal. Le terme page est donc généralement réducteur, de par son potentiel
d'interactivité avec l'utilisateur.

1.2.4. Bases techniques

Techniquement, une page Web est constituée d'une ou plusieurs ressources distinctes du
World Wide Web. La principale ressource est généralement un document écrit dans le langage
informatique HTML ou sa variante XHTML. HTML permet de contenir du texte, et de définir
l'adresse Web et la disposition dans la page, d'autres ressources comme : des images, des vidéos, des
animations, du sons, des applets et des documents inclus. Ceci permet d'intégrer dans une page des
ressources provenant de n'importe quel serveur Web. Parfois le chargement d'une des ressources
échoue, et la page doit être consultée sans être complète.

1.3. ADRESSE WEB

L’adresse web est l'une des trois inventions à la base du World Wide Web, et selon ses
inventeurs, la plus fondamentale. Le grand public les connaît sous la forme de libellés d'une dizaine
de caractères, commençant souvent par « www », et qui identifient une page web ; par exemple
[Link]. L'adresse techniquement correcte doit en fait commencer par un nom de protocole ;
pour cet exemple, cela donne [Link] Les adresses web sont la base des hyperliens du
Web.
Dans le langage technique, on ne parle pas d'adresse web mais d'URI (pour Uniform Resource
Identifier, soit identifiant uniforme de ressource), d'URL (pour Uniform Resource Locator, soit
repère uniforme de ressource, un type d'URI), ou plus rarement d'URN (Uniform Resource Name,
soit nom uniforme de ressource, un autre type d'URI). Il s'agit de trois standards d'Internet qui
spécifient la syntaxe et la sémantique des adresses Web

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -5-
Il ne faut pas confondre les adresses web avec les adresses électroniques ni les adresses IP. La
dénomination adresse Internet peut désigner une adresse web, mais elle est en fait totalement
ambiguë.

1.4. SITE WEB

1.4.1. Définition
Un site web, ou simplement site, est un ensemble de pages web et de ressources liées et
accessible par une adresse web. Un site est hébergé sur un serveur web accessible via le réseau
mondial internet ou un intranet local. L'ensemble des sites web constituent le World Wide Web.
On parle parfois de "site internet" au lieu de "site web". On devrait parler de website à
destination d'internet, mais par abus de langage, l'expression site internet reste souvent utilisée. Les
websites ne sont pas forcément accessibles sur Internet. Par exemple, les intranet peuvent contenir un
ou plusieurs sites web non accessibles via internet.

1.4.2. Classification des sites Web

On distingue deux types de sites : les sites statiques et les sites dynamiques.
a. Sites statiques
Ces sites ont le mécanisme de fonctionnement le plus simple : les URL correspondent à un
fichier renvoyé par le serveur web. Le contenu des pages d'un site statique ne dépend donc pas de
variables telles que la date ou de bases de données. Pour changer le contenu d'une page, il est
nécessaire de changer le contenu du fichier.
En outre, les visiteurs peuvent seulement voir le contenu du site mais pas y participer. Pour
les réaliser, seuls les langages dits de d'interface utilisateur (frontend) sont nécessaires, c'est-à-dire
HTML, CSS et JavaScript (en théorie, il est toutefois possible d'utiliser uniquement le HTML).
• Le HTML permet d'écrire le contenu de sa page ;
• Le CSS permet de la décorer ;
• JavaScript permet d'ajouter du dynamisme, mais uniquement du côté du navigateur (par exemple
des animations graphiques).
b. Sites dynamiques
Ces sites offrent un contenu qui peut évoluer dans le temps. Des programmes tournent du côté
des serveurs, à l'arrière-plan, (backend) pour générer les pages du site. Ces programmes peuvent se
servir de bases de données ou autres sources de données pour composer les pages qui seront affichées
dans le navigateur.
Ce dynamisme apporte des fonctionnalités que ne peuvent offrir les sites dits statiques. Par
exemple les visiteurs peuvent y participer (commentaires sur un blog, changement du contenu des
pages d'un wiki...). Ils ont donc pratiquement supplanté les sites statiques au début des années 2000.
Pour les réaliser, on a également besoin de HTML, de CSS et de JavaScript, mais les
programmes qui tournent du côté serveur utilisent d'autres langages qui peuvent créer dynamiquement
les pages, en analysant les requêtes des visiteurs pour ensuite fabriquer une réponse adaptée.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -6-
Il existe plusieurs langages pour créer ces pages : PHP, Java, C#, Ruby, voire d'autres comme
C++, Python et Visual Basic via l'interface CGI.

1.4.3. Structure des pages

Un site web est un ensemble de pages qui peuvent être consultées en suivant des hyperliens à
l'intérieur du site. L'adresse web d'un site correspond en fait à l'URL d'une page web, prévue pour
être la première consultée : la page d'accueil. La consultation des pages d'un site s'appelle une
« visite », car les hyperliens devraient permettre de consulter toutes les pages du site sans le quitter
(sans devoir consulter une page web hors du site). Une visite peut commencer par n'importe quelle
page, particulièrement lorsque son URL est donnée par un moteur de recherche. Techniquement, rien
ne distingue la page d'accueil d'une autre page.

1.4.4. Autres concepts web

a. Serveur Web : Un serveur web est un ordinateur qui peut accueillir plusieurs sites.
b. Page d’accueil : Il s’agit de la page d’entrée d’un site web.
c. Moteur de recherche : Site qui permet de lancer sur le web, une recherche sur un ou plusieurs
mots clés.
d. Éditeurs web : Applications dédiées à l’écriture du code et qui facilitent le formatage des données
pour la conception des pages web.
e. Navigateur : Est un logiciel conçu pour consulter le World Wide Web. Techniquement, c'est au
minimum un client HTTP.

1.5. BASES DU HTML

1.5.1. FONCTIONNEMENT DES SITES WEB

Avec un navigateur, vous pouvez consulter n'importe quel site web.

[Link]. Création d’un site web

Il s'agit de langages informatiques qui permettent de créer des sites web. Ils sont à la base
même du Web. Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991.
HTML et CSS sont deux « langues » qu'il faut savoir parler pour créer des sites web. C'est le
navigateur web qui fera la traduction entre ces langages informatiques et ce que vous verrez s'afficher
à l'écran.

[Link]. Rôles de HTML et CSS

Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il
comprend. Et c'est là que les choses se corsent, parce qu'il va falloir apprendre deux langages qui se
complètent car ils ont des rôles différents :

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -7-
• HTML (HyperText Markup Language) : Il a fait son apparition dès 1991 lors du lancement du
Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui
doit être affiché sur la page : du texte, des liens, des images…
• CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer
l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).
Ce langage est venu compléter le HTML en 1996.
Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très
beau : l'information apparaîtra « brute ». C'est pour cela que le langage CSS vient toujours le
compléter.
Le HTML définit le contenu tandis que le CSS permet de définir la présentation : couleurs,
image de fond, marges, taille du texte…
Comme vous vous en doutez, le CSS a besoin d'une page HTML pour fonctionner. C'est pour
cela que nous allons d'abord apprendre les bases du HTML avant de nous occuper de la décoration
en CSS.

[Link]. Différentes versions de HTML et CSS

XML traduit en « Langage à balises étendu », ou « Langage à balises extensible » est en
quelque sorte un langage HTML amélioré permettant de définir de nouvelles balises. Il s'agit
effectivement d'un langage permettant de mettre en forme des documents grâce à des balises
(markup).
XML est un format de description des données et non de leur représentation, comme c'est le
cas avec HTML. La mise en page des données est assurée par un langage de mise en page, le XSL
(eXtensible StyleSheet Language).
Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première
version de HTML (HTML 1.0) il n'était même pas possible d'afficher des images.
Voici un très bref historique de ces langages pour votre culture générale.
A. Versions de HTML
• HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
• HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec l'apparition
du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML.
Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première
version a été créée par un seul homme).
• HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités
au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des
images, etc.
• HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML
4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui découpent
une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -8-
formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles
de style, notre fameux CSS.
• HTML 5 : c'est la dernière version. Encore assez peu répandue, elle fait beaucoup parler d'elle
car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des
vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires,
etc. C'est cette version que nous allons découvrir ensemble.
B. Versions de CSS
• CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage
qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères,
etc.
• CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de
nombreuses options. On peut désormais utiliser des techniques de positionnement très précises,
qui nous permettent d'afficher des éléments où on le souhaite sur la page.
• CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement attendues
comme les bordures arrondies, les dégradés, les ombres, etc.

1.5.2. ÉDITEUR DE TEXTE

Il existe effectivement de nombreux logiciels dédiés à la création de sites web dont Bloc-notes
(figure suivante).

On peut tout à fait créer un site web uniquement avec Bloc-notes, le logiciel d'édition de texte
intégré par défaut à Windows. Il y a cependant des logiciels plus puissants aujourd'hui et personne
n'utilise vraiment Bloc-notes.
On peut classer ces logiciels de création de site web en deux catégories :
• Les WYSIWYG (What You See Is What You Get = Ce Que Vous Voyez Est Ce Que Vous Obtenez)
: ce sont des programmes qui se veulent très faciles d'emploi, ils permettent de créer des sites web
sans apprendre de langage particulier. Parmi les plus connus d'entre eux : Mozilla Composer,
Microsoft Expression Web, Dreamweaver… et même Word. Leur principal défaut est la qualité
souvent assez mauvaise du code HTML et CSS qui est automatiquement généré par ces outils. Un
bon créateur de site web doit tôt ou tard connaître HTML et CSS.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours -9-
• Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de code. On peut en général les
utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se révèlent être de puissants
alliés pour les créateurs de sites web !
Voici quelques conseils, selon que vous êtes sous Windows, Mac OS X ou Linux.

[Link]. Sous Windows

L’un des éditeurs de texte les plus utilisés est Notepad++. Ce logiciel est simple, en français
et gratuit. Voici à quoi il ressemble lorsque vous le lancez (figure suivante).

Il faut faire la manipulation suivante : allez dans le menu Langage > H > HTML. Cela
permettra au logiciel de savoir que l'on va taper du HTML. Il existe d'autres éditeurs disponibles sous
Windows. Si Notepad++ ne vous convient pas, vous pouvez essayer : jEdit, PSpad, ConTEXT, … et
bien d'autres si vous recherchez « Éditeur de texte » sur le Web.

[Link]. Sous Mac OS X

Vous pouvez essayer l'un des logiciels suivants : jEdit, Smultron, TextWrangler.

[Link]. Sous Linux

Les éditeurs de texte sont légion sous Linux. Certains d'entre eux sont installés par défaut,
d'autres peuvent être téléchargés facilement via le centre de téléchargement (sous Ubuntu notamment)
ou au moyen de commandes comme apt-get et aptitude. V oici quelques logiciels que vous pouvez
tester : gEdit, Kate, vim, Emacs, jEdit.

1.5.3. NAVIGATEUR

[Link]. Rôle du navigateur

Le navigateur est le programme qui nous permet de voir les sites web. Comme expliqué plus
tôt, le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran.
Si le code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle
du navigateur est donc essentiel.
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 10 -
Le principal problème, vous vous en rendrez vite compte, c'est que les différents navigateurs
n'affichent pas le même site exactement de la même façon. Il faudra vous y faire et prendre l'habitude
de vérifier régulièrement que votre site fonctionne correctement sur la plupart des navigateurs.
Il existe de nombreux navigateurs différents. Voici les principaux à connaître : Google
Chrome, Mozilla Firefox, Edge (Anciennement Internet Explorer), Safari, Opera.

[Link]. Différences entre navigateurs

Comme dit plus tôt, les navigateurs n'affichent pas toujours un même site web exactement de
la même façon. Cela est dû au fait que les navigateurs ne connaissent pas toujours les dernières
fonctionnalités de HTML et CSS.
Chaque version prend en charge de nouvelles fonctionnalités à condition que sa mise à jour
soit régulière.

[Link]. Navigateurs sur mobile

En plus des navigateurs précités, voici quelques Smartphones avec leurs navigateurs :
• iPhone : sur l'iPhone d'Apple, le navigateur utilisé est Safari Mobile. Il s'agit d'une version light
et néanmoins très complète de Safari pour ordinateur.
• Android : les portables sous Android bénéficient du navigateur Chrome Mobile. Là encore, il
s'agit d'une version adaptée aux mobiles.
• Windows Phone : sous Windows Phone, on retrouve… Internet Explorer Mobile ! Le principe
est le même que pour les précédents navigateurs : il s'agit d'une version dédiée aux mobiles.
• Blackberry : les Blackberry font exception car ils ont leur propre navigateur (il n'existe pas
d'équivalent sur ordinateur).
Néanmoins, les versions les plus récentes de ce navigateur se basent sur un noyau commun à
Safari et Chrome (il s'agit du moteur de rendu Webkit). Par conséquent, l'affichage est en général
proche de celui proposé par Safari et Chrome. Il est conseillé de tester son site sur ces appareils.

1.5.4. CRÉATION D’UNE PAGE WEB AVEC L'ÉDITEUR

Après que vous ayez installé tous les logiciels, vous devriez maintenant avoir un éditeur de
texte (comme Notepad++, VS Code, Sublime) pour créer votre site et plusieurs navigateurs pour le
tester (Mozilla Firefox, Google Chrome, Edge…). Vous pouvez écrire ce que vous voulez dans
l’éditeur ; le but est d'écrire quelque chose.

Pour enregistrer le fichier :

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 11 -
• Sélectionner la commande Enregistrer du menu Fichier.
• Dans la boîte de dialogue qui apparaît, indiquez l’emplacement (dossier) pour conserver le fichier
• Donnez au fichier le nom que vous voulez et l’extension .html.
L'icône qui représente le fichier dépend de votre navigateur web par défaut. Voici par exemple
les icônes qui apparaissent lorsque votre navigateur principal est Firefox ou Internet Explorer (figures
suivantes).

Icône en Internet Icône en Google Grome

Explorer

Faites simplement un double-clic sur le fichier et votre navigateur affiche le texte que vous
avez écrit comme dans la fenêtre suivante :

En fait, pour créer une page web, il ne suffit pas de taper simplement du texte comme on vient
de le faire. En plus de ce texte, il faut aussi écrire ce qu'on appelle des balises, qui vont donner des
instructions à l'ordinateur comme « aller à la ligne », « afficher une image », etc.

1.5.5. BALISES ET LEURS ATTRIBUTS

Il ne suffit pas d'écrire « simplement » du texte dans l’éditeur, il faut aussi donner des
instructions à l’ordinateur. En HTML, on utilise pour cela des balises.

[Link]. Balises
Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à
l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des
symboles < et >, comme ceci : <balise>
On distingue deux types de balises : les balises en paires et les balises orphelines.
a) Les balises appariées ou en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent en
HTML:
<titre>Ceci est un titre</titre>
La balise ouvrante <balise> dit au navigateur : « L’élément commence ici.» tandis que la
balise fermante </balise> dit au navigateur : « L’élément se termine là. »
b) Les balises orphelines ou isolées
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 12 -
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par
exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire
à l'ordinateur « Insère une image ici ». En HTML une balise orpheline s'écrit comme ceci :
<image />

[Link]. Attributs
Les attributs sont les options des balises. Ils viennent les compléter pour donner des
informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus
souvent une valeur, comme ceci :
<balise attribut="valeur">
Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à grand-chose. On
pourrait rajouter un attribut qui indique le nom de l'image à afficher :
<image nom="[Link]" />
L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier [Link].
Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante
et pas dans la balise fermante. Par exemple :
<citation auteur="Neil Armstrong" date="21/07/1969">C'est un petit pas pour l'homme, mais un
bond de géant pour l'humanité.</citation>
Ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969.

1.5.6. STRUCTURE DE BASE D’UNE PAGE HTML5

Reprenons notre éditeur Notepad++ et écrivons-y ce code correspondant à la structure de base
d'une page web en HTML5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
N.B. Le fait qu’il y ait des espaces au début de certaines lignes pour décaler les balises en vue de
rendre uniquement lisible le code source s’appelle « Indentation ».

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 13 -

Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Les balises doivent
être fermées dans le sens inverse de leur ouverture.
Ci-dessous, nous expliquons les balises utilisées dans le code précédent :
a) Le doctype < !DOCTYPE html>
La toute première ligne s’appelle le doctype. Elle est indispensable car c’est elle qui indique
qu’il s’agit bien d’une page web HTML. Ce n'est pas vraiment une balise comme les autres (elle
commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui
confirme la règle.
b) La balise < html> ----- < / html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous
pouvez le voir, la balise fermante </html> se trouve tout à la fin du code.
c) L'en-tête <head> et le corps <body>
Une page web est constituée de deux parties :
• L'en-tête <head> : cette section un peu courte donne quelques informations générales très
importantes sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc.
Ces informations ne sont pas affichées sur la page mais sont à destination de l’ordinateur.
• Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons
ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre
code.
Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par contre
aux deux balises contenues dans l'en-tête.
d) L'encodage (charset)
Code : HTML
<meta charset="utf-8" />

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 14 -
Cette balise indique l'encodage utilisé dans votre fichier .html. Sans rentrer dans les détails,
l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les
caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
Il y a plusieurs techniques d'encodage portant des noms bizarres et utilisées en fonction des
langues : ISO-8859-1, OEM 775, Windows-1253… Une seule, cependant, devrait être utilisée
aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun
problème pratiquement tous les symboles de toutes les langues de notre planète. C'est pour cela qu’il
est indiqué utf-8 dans cette balise.
e) Le titre principal de la page
<title>
C'est le titre de votre page, probablement l'élément le plus important. Toute page doit avoir
un titre qui décrit ce qu'elle contient. Il est conseillé de garder le titre assez court (moins de 100
caractères en général). Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans
l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez
que le titre s'affiche dans l'onglet.
f) Commentaires
Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché, il
n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page. Cela vous permettra de vous
rappeler comment fonctionne votre page si vous revenez sur votre code source après un long moment
d'absence. Voici la balise utilisée pour insérer un commentaire n’importe où dans le code.
<!-- Ceci est un commentaire -->
N.B. Pour voir le code HTML de la page une fois mise en ligne, il suffit de cliquer-droit sur la page
puis, dans le menu contextuel qui s’affiche, sélectionner la commande « Code source de la page ».

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 15 -

CHAP. II. ORGANISATION DU TEXTE

Nous allons maintenant découvrir de nombreuses balises HTML dont certaines existent depuis
la 1ère version de HTML et d’autres plus récemment introduites dans HTML5.

2.1. PARAGRAPHES
La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de
paragraphes. Le langage HTML propose justement la balise <p> pour délimiter les paragraphes.
Ex. <p>Bonjour le monde !</p> : Début du paragraphe <p> et </p> Fin du paragraphe.

2.2. SAUT DE LIGNE

En HTML, la touche Entrée ne crée pas une nouvelle ligne comme vous en avez l'habitude.
On fait les sauts de ligne en HTML avec la balise <br /> placée à l'intérieur d'un paragraphe.
<p>Bienvenue sur mon site !<br /> Cette balise orpheline permet un saut de ligne. </p>

2.3. TITRES
Lorsque le contenu de la page va s'étoffer avec de nombreux paragraphes, il va devenir
difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles.
En HTML, on est verni, on a le droit d'utiliser six balises différentes pour indiquer les
niveaux :
• <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la
page au début de celle-ci.
• <h2> </h2> : signifie « titre important ».
• <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un « sous-titre »).
• <h4> </h4> : titre encore moins important.
• <h5> </h5> : titre pas important.
• <h6> </h6> : titre pas important du tout.
Code : HTML
<html>
<head>
<meta charset="utf-8" />
<title>Niveaux de titres</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>
Grâce au langage CSS, vous pourrez dire « Je veux que mes titres importants soient centrés,
rouges et soulignés ». Pour le moment, en HTML, nous ne faisons que structurer notre page. Nous
rédigeons le contenu avant de nous amuser à le mettre en forme.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 16 -
2.4. MISE EN VALEUR
Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous
aimeriez les faire ressortir. HTML vous propose différentes balises de mise en valeur du texte de
votre page.
a) La balise <em>
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>. Son
utilisation est très simple : encadrez les mots à mettre en valeur avec ces balises. Reprenons l’exemple
précédent en mettant certains mots en valeur :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>MISE EN VALEUR</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !<br /> Je mets les mots suivants <em>en valeur</em> comme vous le
remarquez</p>
</body>
</html>
Comme vous pouvez le voir, utiliser la balise <em> a pour conséquence de mettre le texte en
italique mais ne reste pas la balise qui met un texte en italique. En fait, c'est le navigateur qui choisit
comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette
information, il change l'apparence du texte en utilisant l'italique.
b) La balise <strong>
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie « fort », ou «
important » si vous préférez. Elle s'utilise exactement de la même manière que <em>.
La balise <strong> ne signifie pas « mettre en gras » mais « important ». On pourra décider
plus tard, en CSS, d'afficher les mots « importants » d'une autre façon que le gras si on le souhaite.
2.5. MARQUAGE DU TEXTE
La balise <mark> permet de faire ressortir visuellement une portion de texte. L'extrait n'est
pas forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte. Cela
peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site par exemple.

2.6. LISTES
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations. Les listes utilisent une combinaison d’au moins deux éléments :
• Un élément de balisage qui dit au navigateur que ce qui suit est une liste ;
• Des éléments de balisage qui disent au navigateur que ce qui suit est un élément de la liste.
Nous allons découvrir ici trois types de listes :

2.6.1. Listes à puces ou non ordonnées

C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a pas
de « premier » ni de « dernier »). Créer une liste non ordonnée est très simple. Il suffit d'utiliser la
balise <ul> que l'on referme un peu plus loin avec </ul>. Ainsi on va écrire chacun des éléments de
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 17 -
la liste entre deux balises <li></li>. Chacune de ces balises doit se trouver entre <ul> et </ul>. Vous
allez comprendre de suite avec cet exemple (Dans la plupart de cas, le code que nous présenterons
est à saisir dans le corps <body> code </body>):
Code : HTML
<ul>
<li>ISC-Goma</li>
<li>ISIG</li>
<li>ISSNT</li>
</ul>
Voici alors ce qui ressort de ce code ajouté de la balise <mark> :

2.6.2. Listes numérotées ou ordonnées

Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer
<ul></ul> par <ol></ol>. À l'intérieur de la liste, on ne change rien : on utilise toujours des balises
<li></li> pour délimiter les éléments.
Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple
(résultat à la figure suivante) :
Code : HTML
<h1>Jours de la semaine</h1>
<ol>
<li>Dimanche</li>
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
<li>Jeudi</li>
<li>Vendredi</li>
<li>Samedi</li>
</ol>
Ce code nous amène à cette page :

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 18 -

2.6.3. Liste de définitions

Elle regroupe des termes et des définitions dans une seule liste et s’appuient sur trois
éléments :
• <dl> : Contient les définitions de la liste ;
• <dt> : Définit un terme de la liste ;
• <dd>: Définit une définition pour un terme.
Pour créer une liste de définitions comprenant deux éléments, vous devez utiliser les éléments
suivants :
<dl>
<dt>premier terme</dt>
<dd> définition du premier terme</dd>
<dt>deuxième terme</dt>
<dd> définition du deuxième terme</dd>
<dd> définition du deuxième terme</dd>
</dl>

2.7. CRÉATION DES LIENS

Un lien est un texte sur lequel on peut cliquer pour se rendre sur une autre page. On peut
faire un lien d'une page [Link] vers une page [Link], mais on peut aussi faire un lien vers un autre
site (par exemple, [Link] Dans les deux cas, nous allons voir que le
fonctionnement est le même.

2.7.1. Lien vers un autre site

Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon différente (par
défaut, en bleu et soulignés) et un curseur en forme de main apparaît lorsqu'on pointe dessus. Pour
faire un lien, la balise que nous allons utiliser est très simple à retenir : <a>. Il faut cependant lui
ajouter un attribut, href, pour indiquer vers quelle page le lien doit conduire.
Par exemple, le code ci-dessous est un lien qui amène vers le site iscgoma, situé à l'adresse
[Link] Nous allons placer ce lien au sein d'un paragraphe. Voici donc comment
reproduire l'exemple de la figure précédente en y insérant un lien :
Code : HTML
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 19 -
<p>Pour faire l’inscription en ligne à l’ISC-GOMA, <a href="[Link] cliquez ici </a> !<br />C'est
une institution de l’Etat !</p>

2.7.2. Lien vers une autre page du même site

Si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du lien le
nom du fichier vers lequel on veut amener. Par ex. :
<a href="[Link]">. On dit que c'est un lien relatif.
Voici le code HTML que nous allons utiliser dans nos fichiers [Link] et [Link].
<p>Bonjour. Souhaitez-vous consulter <a href="[Link]">la page 2</a> ?</p>

2.7.3. Deux pages situées dans des dossiers différents

Les choses se corsent un petit peu si les pages sont situées dans des dossiers différents.
Idéalement, elles ne devraient pas être trop loin l'une de l'autre (dans un sous-dossier par exemple).
Dans ce cas de figure, le lien doit être rédigé comme ceci :
Code : HTML
<a href="contenu/[Link]">
Pour ce cas, la page nommée [Link] se trouve dans le dossier contenu. En cas de
plusieurs sous-dossiers, il faut toujours indiquer le chemin d’accès. Par exemple :
Code : HTML
<a href="contenu/autredossier/[Link]">
Si le fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il
faut écrire deux points comme ceci :
Code : HTML
<a href="../[Link]">

2.7.4. Un lien vers une ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML
lorsqu'elles sont très longues. En effet, il peut alors être utile de faire un lien amenant plus bas dans
la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère.
C’est peut être n'importe quelle balise, un titre par exemple.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 20 -
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien
vers cette ancre. Par exemple :
Code : HTML
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra
un dièse (#) suivi du nom de l'ancre.
Exemple : Code HTML
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à
condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent
automatiquement). Voici un exemple de page comportant beaucoup de textes et utilisant les ancres :
Code : HTML
<h1>Mes langages préférés</h1>
<p>Aller directement à la partie traitant de :<br />
<a href="#html">En savoir plus sur html</a><br />
<a href="#css"> En savoir plus sur css</a><br />
<a href="#javascript"> En savoir plus sur javascript</a><br /></p>
<h2 id="html">Historique de HTML avec détails possibles</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="css">Historique de CSS avc details possibles</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="javascript">Historique de Javascript avec détails possibles</h2>
<p>... (beaucoup de texte) ...</p>

2.7.5. Un lien qui affiche une infobulle au survol

Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet
attribut est facultatif. La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait
cliqué sur le lien.
Code : HTML
<p>Bonjour. Souhaitez-vous visiter le <a href="[Link] title="Réservé aux débutants">Site du
Zéro</a> ?</p>

2.7.6. Un lien qui ouvre une nouvelle fenêtre

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on
rajoutera target="_blank" à la balise <a> :
Code : HTML
<p>Bonjour. Souhaitez-vous visiter le <a href="[Link] target="_blank">Site
du Zéro</a> ?<br /> Le site s'affichera dans une autre fenêtre.</p>

2.7.7. Lien pour envoyer un e-mail

Si vous voulez qu’un visiteur puisse vous envoyer un e-mail, vous pouvez utiliser des liens de
type mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de
l'attribut href comme ceci :
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 21 -
Code : HTML
<p><a href="[Link] un e-mail !</a></p>
Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous
contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre
adresse e-mail.

2.7.8. Lien pour télécharger un fichier

Beaucoup d'entre vous se demandent comment cela se passe pour le téléchargement d'un
fichier… En fait, il faut procéder exactement comme si vous faisiez un lien vers une page web, mais
en indiquant cette fois le nom du fichier à télécharger.
Par exemple, supposez que vous vouliez faire télécharger [Link]. Placez simplement
ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce
fichier :
Code : HTML
<p><a href="[Link]">Télécharger le fichier</a></p>
Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la procédure de
téléchargement lorsqu'on cliquera sur le lien.

2.8. IMAGES
Il existe différents formats d'image que l'on peut utiliser sur des sites web, et on ne doit pas
les choisir au hasard. En effet, les images sont parfois volumineuses à télécharger, ce qui ralentit le
temps de chargement de la page.
Quand vous avez une image, vous avez la possibilité de l'enregistrer dans plusieurs « formats
» différents. Le poids (en Ko, voire en Mo) de l'image sera plus ou moins élevé selon le format choisi
et la qualité de l'image va changer. Par exemple, le logiciel de dessin Paint vous propose de choisir
entre plusieurs formats lorsque vous enregistrez une image :
• Le format JPEG (Joint Photographic Expert Group) très répandu sur le Web, est conçu pour
réduire le poids des photos (c'est-à-dire la taille du fichier associé), qui peuvent comporter plus
de 16 millions de couleurs différentes.
• Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format est adapté à
la plupart des graphiques. Le PNG a deux gros avantages : il peut être rendu transparent et il
n'altère pas la qualité de l'image. Il y a la version PNG 8 bits : 256 couleurs et la version PNG 24
bits : 16 millions de couleurs (autant qu'une image JPEG).
• Le format GIF est assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par
habitude). Aujourd'hui, le PNG est globalement bien meilleur que le GIF : les images sont
généralement plus légères et la transparence est de meilleure qualité. Je vous recommande donc
d'utiliser le PNG autant que possible.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions
de couleurs). Néanmoins, le GIF conserve un certain avantage que le PNG n'a pas : il peut être animé.
N.B. Les formats non cités ici sont à bannir car ils ne sont pas compressés, donc trop gros.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 22 -
La balise <img /> est utilisée pour insérer une image. Elle doit être accompagnée de deux
attributs obligatoires :
- src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un
chemin absolu (ex. : [Link] soit mettre le chemin relatif (ce qu'on fait le
plus souvent). Ainsi, si votre image est dans un sous-dossier images, vous devrez taper :
src="images/[Link]"
- alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte court qui décrit ce que
contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée
(cela arrive), ou dans les navigateurs de personnes handicapées (non-voyants) qui ne peuvent
malheureusement pas « voir » l'image. Cela aide aussi les robots des moteurs de recherche pour
les recherches d'images. Pour la fleur, on mettrait par exemple : alt="Une fleur".
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>). Voici
un exemple d'insertion d'image :
Code : HTML
<p>Ceci est une montagne située au Nord Kivu :<br /> <img src="images/[Link]" alt="Photo de montagne" />
</p>
Bref, l'insertion d'image est quelque chose de très facile pour peu qu'on sache indiquer où se
trouve l'image, comme on avait appris à le faire avec les liens.
La plus grosse « difficulté » (si on peut l’appeler ainsi) consiste à choisir le bon format
d'image. Ici, c'est une photo donc c'est évidemment le format JPEG qu'on utilise.
L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de
title.
Code : HTML
<p>Ceci est une montagne située au Nord Kivu :<br /> <img src="images/[Link]" alt="Photo de montagne"
title="Bon massif" /> </p>
Rmq : Evitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 23 -

[Link]. MISE EN FORME AVEC CSS

3.1. MISE EN PLACE DU CSS
Maintenant nous allons découvrir le CSS pour mettre en forme votre page web.

3.1.1. Rôle du CSS

CSS (Cascading Style Sheets) permet de choisir la couleur de votre texte, sélectionner la
police utilisée sur votre site, définir la taille du texte, les bordures, le fond… Et aussi, c'est lui qui
permet de faire la mise en page de votre site. Vous pourrez dire : « je veux que mon menu soit à gauche et
occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc. »
Le contenu de notre site rédigé grâce au HTML est brut de décoffrage. Le CSS vient compléter
ce code pour mettre en forme tout cela et donner au contenu l'apparence que l'on souhaite.
Avant le CSS (né en 1996), il y avait en effet des balises HTML dédiées à la mise en forme.

3.1.2. CSS et les navigateurs

Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS
et comprendre comment afficher la page.
Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS. Il existe un certain
nombre de fonctionnalités de CSS qui ne marchent pas forcément sur les navigateurs les plus vieux.
Aucun navigateur ne connaît parfaitement toutes les fonctionnalités CSS de toute façon. Au pire, si
le navigateur ne connaît pas une propriété CSS, il l'ignore et ne met pas en forme, mais cela ne fait
pas planter votre page : celle-ci sera donc toujours lisible.

3.1.3. Code CSS

Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :
A. Dans un fichier .css (méthode la plus recommandée)
Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple
Notepad++) puis l’enregistrer au format .css. Ensuite, dans le fichier HTML, insérer la ligne suivante
dans le <Head>.<link rel="stylesheet" href="[Link]" /> : c'est elle qui indique que ce fichier
HTML est associé à un fichier appelé [Link] et chargé de la mise en forme.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
<title>Premiers tests du CSS</title>
</head>
<body>
</body>
</html>
B. Dans l'en-tête du fichier HTML
Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à
insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête : <head>.
<!DOCTYPE html>
<html>
<head>
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 24 -
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<p>Bienvenue à notre site !</p>
</body>
</html>
C. Directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).
Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à
n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :
<p style="color: blue;">Bienvenue à notre site !</p>

3.2. APPLICATIONS DE STYLES

Dans un code CSS, on trouve trois éléments différents :
• Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple,
si je veux modifier l'apparence de tous les paragraphes <p>, je dois écrire p.
• Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a par
exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet
d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS.
• Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la
propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille
on veut, etc.
Code : CSS
balise1
{
propriete1: valeur1;
propriete2: valeur2;
}
balise2
{
propriete1: valeur1;
}
NOTE : Comme vous le voyez, on écrit le nom de la balise (par exemple h1) et on ouvre des accolades pour, à l’intérieur, mettre les propriétés et
valeurs que l'on souhaite. On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole «
deux-points » ( : ) puis de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ).
Il est possible d’appliquer un style à plusieurs balises. Par exemple :
Code : CSS
h1, em
{
color: blue;
}
Ceci signifie : «le texte des <h1> et <em> seront écrits en bleu ». Vous pouvez indiquer autant de
balises à la suite que vous le désirez.
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 25 -
3.2.1. Insertion des commentaires
Pour faire un commentaire, il faut taper /* suivi de votre commentaire puis */ pour terminer
votre commentaire.

3.2.2. Class et Id
Pour que certains paragraphes seulement soient écrits d'une manière différente, on peut utiliser
les attributs spéciaux qui fonctionnent sur toutes les balises : class et id. Les deux attributs sont
quasiment identiques. Il y a seulement une petite différence. Pour le moment, et pour faire simple, on
ne va s'intéresser qu'à l'attribut class.
Class est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que
paragraphe, image, etc.
Code : HTML
<h1 class=""> </h1>
<p class=""> </p>
<img class="" />
En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du
moment que le nom commence par une lettre.

Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p class="introduction">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.Patientez encore un peu !</p>
</body>
</html>
Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction. Vous allez
pouvoir réutiliser ce nom dans le fichier CSS pour dire : « Je veux que seules les balises qui ont
comme nom 'introduction' soient affichées en bleu ».
Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme
ci-dessous :
Code : CSS
.introduction
{
color: blue;
}
Id fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé
qu'une fois dans le code. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour
réaliser des ancres). En pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans
la page, comme par exemple le logo :
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 26 -
Code : HTML
<img src="images/[Link]" alt="Logo du site" id="logo" />
Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra
faire précéder le nom de l'id par un dièse (#) :
Code : CSS
#logo
{
/* Indiquez les propriétés CSS ici */
}

3.2.3. Balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui, à
l'origine, ne sont pas entourés par des balises.
En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre
que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le paragraphe
suivant :
Code : HTML
<p>Nous vous souhaitons la bienvenue à notre site !</p>
Cela serait facile à faire s'il y avait une balise autour de « bienvenue » mais, malheureusement
il n'y en a pas.
En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière
(elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais
significative !) entre ces deux balises :
• <span>---</span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein
d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et
<em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle
dont nous allons nous servir pour colorer « bienvenue ».
• <div>---</div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>,
<h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un
nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est
une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus
tard.
Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de «
bienvenue », on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !
Code : HTML
<p> Nous vous souhaitons la <span class =" salutation "> « bienvenue » </span> à notre site ! </p>
Code : CSS
.salutation
{
color: blue;
}

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 27 -
3.2.4. Sélecteurs avancés
En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler
(on dit « sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs.
Vous en avez déjà utilisé quelques-uns un peu plus tôt dans ce chapitre, résumons-les pour
commencer.
Les sélecteurs (p, h1, em, class, id) que nous avons vus précédemment, sont de loin les plus
couramment utilisés. Il faut les connaître par cœur. Il existe des dizaines d'autres façons de cibler des
balises en CSS. Nous n'allons pas toutes les voir car il y en a beaucoup et certaines sont complexes,
mais voici déjà de quoi vous permettre d'être plus efficaces en CSS.
a) * (sélecteur universel) : sélectionne toutes les balises sans exception.
Code : CSS
*
{
}
b) AB : une balise contenue dans l’autre
Code : CSS
h3 em
{
}
Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de
virgule entre les deux noms de balises.
c) A + B : une balise qui en suit une autre
Code : CSS
h3 + p
{
}
Sélectionne la première balise <p> située après un titre <h3>.
d) A[attribut] : une balise qui possède un attribut
Code : CSS
a[title]
{
}
Sélectionne tous les liens <a> qui possèdent un attribut title.
e) A[attribut="valeur"] : une balise, un attribut et une valeur exacte
Code : CSS
a[title="Cliquez ici"]
{
}
Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
f) A[attribut*="Valeur"] : une balise, un attribut et une valeur
Code : CSS
a[title*="ici"]
{
}
Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 28 -
3.3. FORMATAGE DU TEXTE
Le « formatage du texte » n'a rien à voir avec la destruction de toutes les données présentes
sur votre disque dur. Cela signifie simplement que l'on va modifier l'apparence du texte (on dit qu'on
le « met en forme »).
Pas de surprise particulière : nous sommes toujours dans le CSS et nous allons réutiliser ce
que nous venons d'apprendre dans le chapitre précédent. Nous allons donc travailler directement au
sein du fichier .css que nous avons créé.
Ici nous allons découvrir de nombreuses propriétés CSS : nous allons voir comment modifier
la taille du texte, changer la police, aligner le texte…

3.3.1. Taille
Pour modifier la taille du texte, on utilise la propriété CSS font-size. Deux types de taille sont
proposés :
a) 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 d'indiquer une taille trop petite pour certains lecteurs. Pour indiquer une
taille absolue, on utilise généralement les pixels.
Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
Code : CSS
p
{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 40px; /* Titres de 40 pixels */
}
b) Taille relative (en pourcentage, « em » ou « ex ») : Cette technique souple s'adapte plus facilement
aux préférences de taille des visiteurs. C'est la méthode recommandée car le texte s'adapte alors plus
facilement aux préférences de tous les visiteurs. La valeur relative peut être indiquée par les mots
anglais suivants :
• xx-small : minuscule ;
• x-small : très petit ;
• small : petit ;
• medium : moyen ;
• large : grand ;
• x-large : très grand ;
• xx-large : euh… gigantesque.
Code : CSS
p
{
font-size: small ;
}
h1
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 29 -
{
font-size: large ;
}
Cette technique a un défaut : il n'y a que sept tailles disponibles (car il n'y a que sept noms).
Heureusement, il existe d'autres moyens.
De préférence, indiquer la taille en « em » :
• Si vous écrivez 1em, le texte a une taille normale.
• Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à 1, comme 1.3em.
• Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme 0.8em.
Exemple :
Code : CSS
p
{
font-size: 0.8em;
}
h1
{
font-size: 1.3em;
}
D'autres unités sont disponibles. Vous pouvez essayer le « ex » (qui fonctionne sur le même
principe que le em mais qui est plus petit de base) et le pourcentage (80%, 130%…).

3.3.2. Police
En effet, il se pose un problème : pour qu'une police s'affiche correctement, il faut que tous
les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur prendra une
police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous
attendiez.
La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire télécharger
automatiquement une police au navigateur.
A. Modification de la police
La propriété CSS qui permet d'indiquer la police à utiliser est font-family. Seulement, pour
éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en général plusieurs
noms de Police, séparés par des virgules :
Code : CSS
p
{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
Cela signifie que le navigateur essaiera d’abord d’utiliser : «Impact ou, si elle n'y est pas,
Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a marché, il mettra une police standard
(sans-serif) ».
En général, il est bien d'indiquer un choix de trois ou quatre polices (+ serif ou sans-serif) afin
de s'assurer qu'au moins l'une d'entre elles aura été trouvée sur l'ordinateur du visiteur.
N.B. Si le nom de la police comporte des espaces, il faut l'entourer de guillemets comme c’est fait
pour « Arial Black».
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 30 -
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :
• Arial ;
• Arial Black ;
• Comic Sans MS ;
• Courier New ;
• Georgia ;
• Impact ;
• Times New Roman ;
• Trebuchet MS ;
• Verdana.
B. Style de police
Il existe en CSS une série de propriétés classiques de mise en forme du texte. Nous allons
découvrir ici comment afficher le texte en gras, italique, souligné… et au passage nous verrons qu'il
est même possible d'aller jusqu'à le faire clignoter !
1°) Mise en italique
En CSS, pour mettre en italique, on utilise font-style qui peut prendre trois valeurs :
• italic : le texte sera mis en italique.
• oblique : le texte sera passé en oblique (les lettres sont penchées, le résultat est légèrement
différent de l'italique proprement dit).
• normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par
exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :

Code : CSS
em
{
font-style: normal;
}
Ainsi, dans l'exemple suivant, nous nous servons de font-style pour mettre en italique tous
mes titres <h2> :
Code : CSS
h2
{
font-style: italic;
}
2°) Mise en gras
La propriété CSS pour mettre en gras est font-weight et prend les valeurs suivantes :
• bold : le texte sera en gras ;
• normal : le texte sera écrit normalement (par défaut).
Voici par exemple comment écrire les titres en gras :
Code: CSS
h1
{

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 31 -
font-weight: bold;
}
3°) Soulignement et autres décorations
La propriété CSS associée porte bien son nom : 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 fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome,
notamment).
• none : normal (par défaut).
Ce code CSS va vous permettre de tester les effets de text-decoration :
h1
{
text-decoration: blink;
}
.souligne
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus
{
text-decoration: overline;
}

3.3.3. Alignement du texte

Le langage CSS nous permet de faire tous les alignements connus : à gauche, centré, à droite
et justifié.
C'est tout simple. 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é ». Justifier le texte permet de faire en sorte qu'il prenne toute la
largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par
exemple, sont toujours justifiés.
Code : CSS
h1
{
text-align: center;
}

3.3.4. Flottants
Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un «
habillage ».
La propriété y relative est float (« flottant » en anglais) appliquée à une balise. Cette propriété
peut prendre deux valeurs très simples :
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 32 -
• left : l'élément flottera à gauche.
• right : l'élément flottera à droite.
Pour faire flotter une image, par exemple, nous devons taper dans un premier temps, dans un
paragraphe :
Code : HTML
<p><img src="[Link]" class="imageflottante" alt="Image flottante" /> Ceci est un texte normal de paragraphe, écrit
à la suite de l'image et qui l'habillera car l'image est flottante. </p>
Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de faire flotter l'image à
gauche :
Code : CSS
.imageflottante
{
float: left;
}
Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous du
flottant et non plus à côté ». C'est la propriété clear, qui peut prendre ces trois valeurs :
• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float: right;.
Pour simplifier, on va utiliser tout le temps le clear: both, qui marche après un flottant à
gauche et après un flottant à droite (cela fonctionne donc à tous les coups). Pour illustrer son
fonctionnement, on va prendre ce code :
Code : HTML
<p><img src="[Link]" class="imageflottante" alt="Image flottante" /></p>
<p>Ce texte est écrit à côté de l'image flottante. </p>
<p class="dessous">Ce texte est écrit sous l'image flottante. </p>
Et ce code CSS :
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}

3.3.5. Couleur de fond

A. Méthodes de choix de couleur
La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son
nom (in english, of course). Le seul défaut de cette méthode est qu'il n'existe que seize couleurs dites
« standard ». D'autres couleurs officieuses existent mais qui ne fonctionneront pas forcément de la
même manière sur tous les navigateurs.

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 33 -

a) Notation hexadécimale
Seize couleurs, c’est un peu limité alors qu’il y a de millions de couleurs. Heureusement, il
existe en CSS plusieurs façons de choisir une couleur parmi toutes celles qui existent. La première
montrée est la notation hexadécimale. Elle est couramment utilisée sur le Web mais il existe aussi
une autre méthode que nous verrons plus loin.
Un nom de couleur en hexadécimal, cela ressemble à : #FF5A28. Pour faire simple, c'est une
combinaison de lettres et de chiffres qui indiquent une couleur. On doit toujours commencer par écrire
un dièse (#), suivi de six lettres ou chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux. Les deux premiers indiquent une quantité
de rouge, les deux suivants une quantité de vert et les deux derniers une quantité de bleu. En
mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir
la couleur qu'on veut.
Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche. Mais
maintenant, ne me demandez pas quelle est la combinaison qui produit de l'orange couleur « coucher
de soleil », je n'en sais strictement rien.
Voici par exemple comment on fait pour appliquer aux paragraphes la couleur blanche en
hexadécimal :
Code : CSS
p
{
color: #FFFFFF;
}
b) Méthode RGB

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 34 -
En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en «RGB». Comme
avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de rouge, de vert
et de bleu.
Là, vous allez voir que c'est beaucoup plus pratique et qu'avec un logiciel de dessin tout simple
comme Paint, vous pouvez trouver la couleur que vous désirez. Voici la marche à suivre :
1. Lancez le logiciel Paint depuis le menu Démarrer.
2. Rendez-vous dans la section Modifier les couleurs.
3. Une fenêtre s'ouvre. Dans la zone qui apparaît à droite, faites bouger les curseurs pour sélectionner
la couleur qui vous intéresse. Supposons que vous soyez pris d'une envie folle d'écrire vos titres <h1>
en rose bonbon. Sélectionnez la couleur dans la fenêtre, comme à la figure suivante.

4. Relevez les quantités de Rouge-Vert-Bleu correspondantes, indiquées en bas à droite de la fenêtre

(ici 240-96-204). Recopiez ces valeurs dans cet ordre dans le fichier CSS, comme dans le code ci-
dessous :
Code : CSS
p
{
color: rgb(240,96,204);
}
B. Définition de la couleur
Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle
s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une
couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>.
C'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page.
Exemple :
Code : CSS
body
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
C. Héritage

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 35 -
En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur
prendront le même style. C'est en fait simple à comprendre et intuitif. La balise <body>, vous le savez,
contient entre autres les balises de paragraphe <p> et de titre <h1>.
Si j'applique une couleur de fond noire et une couleur de texte blanche à la balise <body>,
tous mes titres et paragraphes auront eux aussi un arrière-plan de couleur noire et un texte de couleur
blanche… C'est ce phénomène qu'on appelle l'héritage : on dit que les balises qui se trouvent à
l'intérieur d'une autre balise « héritent » de ses propriétés.
Pour définir une autre valeur de l’attribut, il faut alors attribuer une autre valeur à la balise
concernée comme dans l’exemple suivant :
Code : CSS
body
{
background-color: black;
color: white;
}
mark
{
/* La couleur de fond prend le pas sur celle de toute la page */
background-color: red;
color: black;
}
Sur le texte de la balise <mark>, c'est la couleur de fond rouge qui s'applique. En effet, même
si le fond de la page est noir, c'est la propriété CSS de l'élément le plus précis qui a la priorité.
D. Images de fond
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur,
on doit renseigner url("nom_de_l_image.png"). Par exemple :
Code : CSS
body
{
background-image: url("[Link]");
}
E. Options disponibles pour l'image de fond
On peut compléter la propriété background-image que nous venons de voir par plusieurs autres
propriétés qui permettent de changer le comportement de l'image de fond.
background-attachment : fixer le fond
La propriété CSS background-attachment permet de « fixer » le fond. L'effet obtenu est
intéressant car on voit alors le texte « glisser » par-dessus le fond. Deux valeurs sont disponibles :
• fixed : l'image de fond reste fixe ;
• scroll : l'image de fond défile avec le texte (par défaut).
Code : CSS
body
{
background-image: url("[Link]");
background-attachment: fixed; /* Le fond restera fixe */
}
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 36 -
3.4. BORDURES ET OMBRES
Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses
propriétés CSS vous permettent de modifier l'apparence de vos bordures : border-width, border-color,
border-style… La super-propriété border qui regroupe l'ensemble de ces propriétés.
Pour border, on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :
- La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px).
- La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de
couleur (black, red,…), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198,
212, 37)).
- Le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait, ou des
pointillés, ou encore des tirets, etc. Voici les différentes valeurs disponibles :
o none : pas de bordure (par défaut) ;
o solid : un trait simple ;
o dotted : pointillés ;
o dashed : tirets ;
o double : bordure double ;
o groove : en relief ;
o ridge : autre effet relief ;
o inset : effet 3D global enfoncé ;
o outset : effet 3D global surélevé.
Ainsi, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels autour de mes titres, je vais
écrire :
Code : CSS
h1
{
border: 3px blue dashed;
}
Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou
droite), vous pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés :
• border-top : bordure du haut ;
• border-bottom : bordure du bas ;
• border-left : bordure de gauche ;
• border-right : bordure de droite.
Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira :

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 37 -
Code : CSS
p
{
border-left: 2px solid black;
border-right: 2px solid black;
}
La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe
quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels :
Code : CSS
p
{
border-radius: 10px;
}
On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs :
Code : CSS
p
{
border-radius: 10px 5px 10px 5px;
}
Les valeurs correspondent aux angles suivants dans cet ordre :
1. en haut à gauche ;
2. en haut à droite ;
3. en bas à droite ;
4. en bas à gauche.
Enfin, il est possible d'affiner l'arrondi de nos angles en créant des courbes elliptiques). Dans
ce cas, il faut indiquer deux valeurs séparées par une barre oblique (slash, caractère /). Le mieux est
certainement de tester pour voir l'effet :
Code : CSS
p
{
border-radius: 20px / 10px;
}

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 38 -

CHAP. IV. MISE EN PAGE DU SITE

4.1. INTRODUCTION
Nous approchons de plus en plus du but. Si nos pages web ne ressemblent pas encore tout à
fait aux sites web que nous connaissons, c'est qu'il nous manque les connaissances nécessaires pour
faire la mise en page.
En général, une page web est constituée d'un en-tête (tout en haut), de menus de navigation
(en haut ou sur les côtés), de différentes sections au centre… et d'un pied de page (tout en bas).
Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML dédiées à la
structuration du site. Ces balises ont été introduites par HTML5 (elles n'existaient pas avant) et vont
nous permettre de dire : « Ceci est mon en-tête », « Ceci est mon menu de navigation », etc.

4.2. BALISES STRUCTURANTES

Nous allons présenter ci-dessous les nouvelles balises introduites par HTML5 pour structurer
nos pages. Vous allez voir, cela ne va pas beaucoup changer l'apparence de notre site pour le moment,
mais il sera bien construit et prêt à être mis en forme ensuite.
<header> : l’entête
La plupart des sites web possèdent en général un en-tête, appelé « header » en anglais. On y
trouve le plus souvent un logo, une bannière, le slogan de votre site… Vous devrez placer ces
informations à l'intérieur de la balise <header> :
Code : HTML
<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>
<footer> : le pied de page
À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y
trouve des informations comme des liens de contact, le nom de l’auteur, les mentions légales, etc.
Code : HTML
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>
<nav> : principaux liens de navigation
La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez
par exemple le menu principal de votre site. Généralement, le menu est réalisé sous forme de liste à
puces à l'intérieur de la balise <nav> :
Code : HTML
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Cours</a></li>
<li><a href="[Link]">Ouvrages</a></li>
<li><a href="[Link]">A propos de l'Auteur</a></li>
<li><a href="[Link] Inscription</a></li>
</ul>
</nav>
<section> : une section de page
-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 39 -
La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle englobe
généralement une portion du contenu au centre de la page.
Code : HTML
<section>
<h1>Ma section de page</h1>
<p>La section regroupe les contenus selon leur thématique</p>
</section>
<aside> : informations complémentaires
La balise <aside> est conçue pour contenir des informations complémentaires au document
que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une
obligation).
Code : HTML
<aside>
<!-- Placez ici des informations complémentaires -->
</aside>
Il peut y avoir plusieurs blocs <aside> dans la page. Sur Wikipédia, par exemple, il est courant
de voir à droite un bloc d'informations complémentaires à l'article que l'on visualise. Ainsi, sur la
page présentant la planète Saturne, on trouve dans ce bloc les caractéristiques de la planète
(dimensions, masse, etc.).
<article> : un article indépendant
La balise <article> sert à englober une portion généralement autonome de la page. C'est une
partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités
(articles de journaux ou de blogs).
Code : HTML
<article>
<h1>Mon article</h1>
<p>Englobe une portion de la page</p>
</article>

4.3. MARGES
Il faut savoir que tous les blocs possèdent des marges (exprimées en pixels). Il existe deux
types de marges :
• les marges intérieures (espace entre le texte et la bordure) définies par la propriété padding ;
• les marges extérieures (espace entre la bordure et le bloc suivant) définies par la propriété margin.
Pour bien voir les marges, appliquez les valeurs suivantes aux paragraphes :
Code : CSS
p
{
width: 350px;
border: 1px solid black;
text-align: justify;
padding : 12px ; /* Marge intérieure de 12 pixels */
margin: 50px; /* Marge extérieure de 50px */
}
Voici la liste des propriétés pour margin :
• margin-top : marge extérieure en haut ;

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 40 -
• margin-bottom : marge extérieure en bas ;
• margin-left : marge extérieure à gauche ;
• margin-right : marge extérieure à droite.
Et la liste pour padding :
• padding-top : marge intérieure en haut ;
• padding-bottom : marge intérieure en bas ;
• padding-left : marge intérieure à gauche ;
• padding-right : marge intérieure à droite.
N.B. La propriété overflow permet à ce que le texte ne dépasse pas des limites du paragraphe. Il va
falloir lui affecter comme valeur overflow : auto ; pour que le navigateur décide lui-même.

4.3. POSITIONNEMENT EN CSS

Nous allons essayer de placer le menu à gauche et le reste du texte à droite. Pour cela, nous
allons faire flotter le menu à gauche et laisser le reste du texte se placer à sa droite.
Nous voulons que le menu occupe 150 pixels de large. Nous allons aussi rajouter une marge extérieure
gauche de 170px à notre section (pour mieux le séparer du menu), une bordure noire autour du menu et une
bordure bleue autour du corps (à la balise <section>) pour bien les distinguer.
Code : CSS
nav
{
float: left;
width: 150px;
border: 1px solid black;
}
section
{
margin-left: 170px;
border: 1px solid blue;
}

EXEMPLE D’UNE PAGE WEB CONÇUE AVEC HTML5, MISE EN FORME AVEC CSS3 PUIS
AFFICHÉE PAR GOOGLE CHROME
Cet exemple porte sur la conception d’une page web contenant un aperçu général du site. Il reprend la
plupart de balises HTML5 et des propriétés CSS3 que nous avons parcourues dans la deuxième partie de ce
support. Nous signalons, par ailleurs, que ce n’est pas tout. Les étudiants peuvent encore aller plus loin. Les

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 41 -
codes ont été pris de l’éditeur Notepad++ par des captures d’écran pour que le lecteur se rende compte qu’il y
a indentation.
CODE : HTML

CODE : CSS

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 42 -

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 43 -

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]
Programmation Web1/Notes de cours - 44 -

TABLE DES MATIÈRES

Objectifs du Cours......................................................................................................................................... - 1 -

Bibliographie Sélective ................................................................................................................................. - 1 -

INTRODUCTION......................................................................................................................................... - 2 -

CHAP.I. FONDAMENTAUX WEB............................................................................................................. - 3 -

1.1. HISTORIQUE .................................................................................................................................... - 3 -

1.2. PAGE WEB........................................................................................................................................ - 3 -
1.3. ADRESSE WEB ................................................................................................................................ - 4 -
1.4. SITE WEB.......................................................................................................................................... - 5 -
1.5. BASES DU HTML............................................................................................................................. - 6 -

CHAP. II. ORGANISATION DU TEXTE ................................................................................................. - 15 -

2.1. PARAGRAPHES ............................................................................................................................. - 15 -

2.2. SAUT DE LIGNE ............................................................................................................................ - 15 -
2.3. TITRES............................................................................................................................................. - 15 -
2.4. MISE EN VALEUR ......................................................................................................................... - 16 -
2.5. MARQUAGE DU TEXTE............................................................................................................... - 16 -
2.6. LISTES ............................................................................................................................................. - 16 -
2.7. CRÉATION DES LIENS ................................................................................................................. - 18 -
2.8. IMAGES........................................................................................................................................... - 21 -

[Link]. MISE EN FORME AVEC CSS................................................................................................. - 23 -

3.1. MISE EN PLACE DU CSS.............................................................................................................. - 23 -

3.2. APPLICATIONS DE STYLES........................................................................................................ - 24 -
3.3. FORMATAGE DU TEXTE............................................................................................................. - 28 -
3.4. BORDURES ET OMBRES.............................................................................................................. - 36 -

[Link]. MISE EN PAGE DU SITE........................................................................................................ - 38 -

4.1. INTRODUCTION ............................................................................................................................ - 38 -

4.2. BALISES STRUCTURANTES ....................................................................................................... - 38 -
4.3. MARGES ......................................................................................................................................... - 39 -
4.3. POSITIONNEMENT EN CSS......................................................................................................... - 40 -

TABLE DES MATIÈRES........................................................................................................................... - 44 -

-----------------------------------------------
Notes rassemblées par : CT Janvier SINDAMBIWE, Doctorant
Email : ngoga10janvier@[Link]