COURS DE

DEVELOPPEMENT WEB
Destiné aux Etudiants de BAC I .
Sciences Informatiques
Université Technologique M’siri I
Assuré Par: Ass. Ir. Elie MUSOYA
 OBJECTIFS DU COURS
 Objectif Général du cours
Ce cours vise à apprendre à l’Etudiant,
les terminologies lié au développements Web.

Ass. Ir. Elie MUSOYA

2
 OBJECTIFS DU COURS
Objectifs Spécifiques
A l’issue de ce cours, l’étudiant devra être
capable de:
 À la fin de ce cours, vous serez capable de :

 utiliser du code HTML,XHTML ;

 structurer une page web;

 utiliser du code CSS ;

 mettre en forme une page web en CSS ;

 organiser les éléments d’une page web grâce au

CSS ;
 modifier l'agencement d'une page HTML avec CSS ;

 intégrer des formulaires dans une page web ;

 adapter une page pour les petites résolutions en

Ass. Ir. Elie MUSOYA

HTML, XHTML et CSS 3

 PLAN DU COURS
INTRODUCTION GENERALE
 Présentation du cours
 Pré requis
 Notes bibliographiques

CHAP I: HTML & XHTML GÉNÉRALITÉS

I.1. Structure d'une page HTML , XHTML
I.2. Les attributs
I.3. Commentaires
I.4. Les caractères spéciaux
I.5. Les couleurs

Ass. Ir. Elie MUSOYA

4
 PLAN DU COURS
CHAP II HTML , XHTML ET LIENS
II.1. Les liens hypertextes
II.2. Liens sur objets
II.4. Liens sur fichier
CHAP III HTML, , XHTML & CADRE-CONTENUS
III.1. Tableau
III.2. .Les cadres
III.3. Les balises conteneurs ( dit de blocs)
CHAP IV CSS & NOTION DE STYLE
IV.1. Introduction
IV.2. Présentation du langage CSS
IV.3. Intégration du code CSS
IV.4. Syntaxe, Héritage et combinaisons de
sélecteurs
Ass Ir. Elie MUSOYA 5
 En savoir plus

Ce cours est base sur Reussir son site web

avec XHTML ´ et CSS
◮ Les balises XHTML sur : http
://[Link]/tuto3-4874-1-liste-
[Link]
◮ Les proprietés de CSS sur : http
://[Link]/tuto-3-1938-1-liste-
[Link]
◮ Les transparents du cours : http
://[Link]/pub/devred/cours
[Link]
Elie MUSOYA 6
 Langage
◮ Différence entre ce que l’on voit (le site
web) et ce que le ´ webmaster a écrit (le
code source ).
◮ Il faut utiliser un langage compréhensible
par la machine. ´
◮ En fait plusieurs langages.
◮ Dans ce cours, nous allons séparer : le
fond du site et la ´ forme du site. Nous
commencerons donc par deux langages en
parallèle.

Elie MUSOYA 7
 HTML,XHTML et CSS
 ◮ Le fond :
◦ XHTML (eXtensible Hyper Text Markup Langage).
◦ Hyper Text MarkUp Language HTML
◦ Langage de base du web.
◦ ◮ La forme :
 CSS (Cascade Style Sheets).
 Rôle décorer le site web. Mise en page, police, taille
du texte, couleur etc.
 Un petit tour sur http ://[Link]/

Elie MUSOYA 8
 Un site web
Sert a communiquer. `
◮ Page intra : (pour une communauté)
◮ Page inter : (vendre, faire de la pub, se
faire connaître)
◮ D’ou l’importance du visuel (information
facile à trouver ` etc.).
◮ Quel est le but d’un site web ?
◮ Il faut choisir ses balises en fonction du
but du site.

Elie MUSOYA 9
 Le navigateur
◮ Différence entre ce que l’on voit (le site web)
et ce que le webmaster à écrit (le code
source ).
◮ Pour voir le site web, Pour surfer sur le net.
◮ Il va transformer le code source en document
plus lisible pour l’être humain.
◮ C’est comme un traducteur. On dit que c’est
un interpréteur.
◮ Il faut donc tester son site sur plusieurs
navigateurs.
◮ Exemple de navigateurs : Internet Explorer,
Mozilla Firefox, Opera, Safari etc.
Elie MUSOYA 10
 Les editeurs de texte
 2 catégories :
◮ Les WYSIWYG.
◮ Les éditeurs de texte

◮ Traitement de texte différent éditeur de texte.

◮ Traitement de texte concus pour mettre en
forme un texte.
◮ Editeur de texte va permettre de travailler le
fond.
◮ Exemple d’editeurs de texte : NotePad++,
JEdit, Quanta , etc.

Elie MUSOYA 11
 Les pages web
Une page web peut contenir : du texte, des
images, des tableaux, des formulaires, etc.
Le code source est basé sur des éléments ´
repérés par des balises.

Elie MUSOYA 12
 Chapitre I GENERALITES
1. Introduction:
Première chose importante à savoir sur HTML
est la signification de ces quatre initiales :
Hyper Text MarkUp Language , HTML est un
langage de description (et non pas un
langage de programmation),et le XHTML:
(eXtensible Hyper Text Markup Langage qui
va nous permettre de décrire l'aspect d'un
document, d'y inclure des informations
variées (textes, images, sons, animations
etc.) et d'établir des relations cohérentes
entre ces informations grâce aux liens
hypertextes.
Ass Ir. Elie MUSOYA 13
 Chapitre I GENERALITES
1. Introduction (suite) :
HTML (HyperText Markup Language)
est un langage de description de documents.
Quelques autres langages, ayant la même
vocation existaient au démarrage du World
Wide Web, mais le besoin de définir un
nouveau langage s'est imposé ; il fallait
fournir une fonctionnalité supplémentaire : la
navigation hypertexte

Ass Ir. Elie MUSOYA 14

 Chapitre I GENERALITES
2. Les avantages du langage HTML sont nombreux :
1. peux coûteux en effet un simple éditeur de texte
suffit à écrire ses premiers documents HTML
2. relativement facile à aborder,
3. il représente en outre un bon moyen de dépasser les
problèmes de compatibilité entre des systèmes et des
formats informatiques différents. La description d'un
document HTML passe par l'utilisation de BALISES (ou
"TAGS" en anglais). Une balise est délimitée par les
signes "<" et ">" entre lesquels figure le nom de la
balise. Par exemple, la balise de retour à la ligne est
La plupart du temps, on utilise une balise de début et
une balise de fin, qui définissent les propriétés de
l'intervalle.
Ass Ir. Elie MUSOYA 15
 Chapitre I GENERALITES
Les balises sont des informations spéciales
destinées au navigateur, elles
n’apparaissent pas à l’ écran (sauf
lorsqu’on affiche le code source).
En XHTML, les balises s’écrivent en
minuscules , sans espace, ni accent :
Les balises ont un sens (titre, paragraphe
etc.)
On choisit les balises en fonction de leur sens
, on pourra en modifier la forme avec CSS.

Ass Ir. Elie MUSOYA 16

 Chapitre I GENERALITES

La navigation hypertexte consiste à fournir la

possibilité de cliquer sur certaines zones du
document (lien hypertexte) pour accéder une autre
partie du site, voire un autre site Web.
Peut-on parler de programmation HTML ?
Comme écrit ci-dessus, HTML est un langage de
description de documents mais en aucun cas un
langage de programmation. La distinction est
importante car elle permet de dissocier les
fonctions de l'API dans sa globalité. La
programmation sera faite en HTML.

Ass Ir. Elie MUSOYA 17

 Chapitre I GENERALITES
Balisage d'une page HTML ( suite)
Rien n'est plus facile que d'écrire un document
HTML : il suffit d'écrire le texte dans un fichier
(d'extension .htm ou .html). Cependant, il existe
des « instructions » HTML permettant de rendre un
document plus complet, plus agréable à lire.
Qu'est qu'une instruction HTML ? Toute instruction
HTML, pour être reconnue du texte proprement
dit, doit être entourée par les caractères < et >
par exemple est donc une instruction du langage
HTML (elle permet de placer un ligne horizontale
de séparation dans le document). On parle alors
de balise HTML.
Ass Ir. Elie MUSOYA 18
 Chapitre I GENERALITES
3. Structure d'une page HTML
Elle doit débutée par une balise particulière notée
qui indique <head> au navigateur qu'il va recevoir
une page HTML. Cette balise indiquera aussi la fin
du document. Exemple :
<head>← début du document HTML
… document web
</head> ← fin du document HTML Tout ce qui est
situé entre <head> et </head> est considéré par le
navigateur comme étant du HTML.
Remarque : Le caractère « / » permet de créer une
balise dite « antagoniste » ( on parle aussi de balise
fermante ) qui délimite la zone d'influence.
Certaines balises ne nécessitent pas d'antagoniste .
Ass Ir. Elie MUSOYA 19
 Chapitre I GENERALITES
3. Structure d'une page HTML (suite)
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Ma page de test</title>
 </head>
 <body>
 <img src="images/M’SIRI [Link]"
alt="Mon image de test">
 </body>
 </html>

Ass Ir. Elie MUSOYA 20

 Chapitre I GENERALITES
DocType :
DocType est une directive permettant d'identifier
un document comme étant de type HTML Cette
commande est facultative. La plupart des
navigateurs n'en ont pas besoin même s'il est de
bon ton pour un éditeur HTML de placer en tête
de document une commande de type.
HTML C’est le premier marqueur ou tag que l’on
trouve dans un document HTML. Tout le
document qui sera écrit par la suite (texte ou
marqueur) sera compris entre le tag < HTML>.et
< /HTML>.

Ass Ir. Elie MUSOYA 21

 Chapitre I GENERALITES
En-tête < HEAD>.
L'en-tête du document est réservée aux méta-
informations (les informations relatives au
document) comme son titre. Ces méta-
informations doivent être placées entre les
tags de début < HEAD> et < /HEAD> de fin.
Même si l'en-tête est optionnelle, il est
important de l'inclure dans un document pour
éviter que le logiciel serveur n'ait à balayer
tout le document pour y retrouver
l'information recherchée

Ass Ir. Elie MUSOYA 22

 Chapitre I GENERALITES
Dans l'en-tête, on trouvera les 6 commandes
suivantes :
 TITLE (la seule véritablement essentielle-

voir ci-dessous)
 ISINDEX indique au logiciel client que le

document est un écran permettant une

saisie pour interroger un programme
externe (Programme CGI), (Servait à
l’origine du HTML aux browser à envoyer de
l’info.-Les formulaires ont simplifiés tout),

Ass Ir. Elie MUSOYA 23

 Chapitre I GENERALITES
 BASE permet d'indiquer une adresse de
base qui complétera tous les chemins
relatifs,
 LINK (Indique un lien entre le présent

document et un autre) ; très rarement

utilisé.
 NEXTID (Indique le document suivant –

considéré actuellement comme obsolète-

META donne des informations sur le
document au serveur. Ces informations sont
généralement : le nom, le nom de l'auteur,
un identifiant.
Ass Ir. Elie MUSOYA 24
 Chapitre I GENERALITES
Titre < TITLE>
< TITLE> Titre </ TITLE>
Chaque document HTML, pour être correct, doit
disposer d'un titre. Le titre apparaît le plus
souvent dans la barre de titre du navigateur
Web. Son but est de pouvoir identifier le
document dans un ensemble plus large par
exemple. Le titre d'un document HTML sert aussi
lorsqu'un navigateur World Wide Web dispose
d'une fonction “hotlist” ou “bookmark” pour
fournir un accès rapide à vos documents favoris.

Ass Ir. Elie MUSOYA 25

 Chapitre I GENERALITES
Le titre est limité à 64 caractères y compris
les espaces et ne doit normalement
contenir que les 128 premiers caractères
ASCII (pas de caractères accentués)

Ass Ir. Elie MUSOYA 26

 Le paragraphe
C’est la balise de base.
◮ Mon paragraphe
Sert a de limiter un paragraphe.
Se met, comme tout ce que nous allons voir
par la suite, dans

[Link] MUSOYA 27
 Chapitre I GENERALITES
Corps du document < BODY>
Le corps du document, ce qui sera
effectivement affiché par le navigateur
Web, est balisé par les commandes :
< BODY> et </ BODY>

Ass Ir. Elie MUSOYA 28

 Chapitre I GENERALITES
 Le corps structure
Exemple:
<html>
<head>
..zone en­tête
</head>
<body>
..zone du corps du document HTML
</body>
</html>

Ass Ir. Elie MUSOYA 29

 Chapitre I GENERALITES
les attributs
Les attributs sont des éléments associés aux balises
parentes afin d'améliorer les propriétés de celle-ci.
Certaines balises ne nécessitent pas d'attribut.
Remarque ont ne doit pas avoir d'attributs en HTML5
(style imposé en CSS) en revanche avec HTML4,
elle peut prendre un certain nombre de
paramètres qui permettent de spécifier les
caractères généraux de la page comme les
différentes couleurs dans la page (texte, fond, lien
etc.), les polices et les tailles de caractères par
défaut etc. On utilise de moins en moins ces
paramètres, la présentation et le style sont
désormais décrits dans les feuilles de styles CSS.
Ass Ir. Elie MUSOYA 30
 Chapitre I GENERALITES
Ils apportent un complément d’information à
la balise. `
En XHTML et HTML les attributs s’écrivent en
´ minuscules , sans espace, ni accent.
Directement suivis de = et de guillemets.
Les guillemets encadrent la valeur de
l’attribut (pas de règle pour la valeur).

[Link]. Elie MUSOYA 31

 Chapitre I GENERALITES
Malgré cela, voici quelques paramètres
employés :
background, ce paramètre permet de
spécifier le motif pour le fond de la page. Il
est important de noter que les dimensions du
motif (au format GIF ou JPEG) ne sont pas
importantes. En effet, si le motif est plus
grand que la page alors il sera tronqué. Dans
le cas inverse où le motif est plus petit, alors
il sera répété autant de fois qu'il sera
nécessaire pour couvrir la totalité de la page.
bgcolor, cet autre paramètre est utilisé pour
spécifier la Couleur de fond de la page.
Ass Ir. Elie MUSOYA 32
 Chapitre I GENERALITES
En présence d'un paramètre 'background' c'est
l'image de fond qui prévaut sur la couleur de
fond. Malgré tout, il peut être intéressant de
spécifier les deux paramètres. En effet, si la
personne qui visualise une page est distante,
ou si le réseau est encombré, les images vont
arriver avec un certain décalage par rapport au
code HTML : il serait donc être judicieux d'avoir,
durant ce laps de temps, une Couleur rappelant
les nuances du motif de fond, afin d'assurer une
certaine cohésion pour le document.

Ass Ir. Elie MUSOYA 33

 Chapitre I GENERALITES
. text, permet de fixer la Couleur par défaut du
texte de la page HTML. Il est bien entendu possible
d'écrire des pages avec des textes de différentes
Couleurs, mais en l'absence de spécification, celle
définie par défaut sera prise. Si ce paramètre n'est
pas initialisé, c'est la Couleur par défaut du
navigateur Web qui sera prise le cas échéant.
• link, de la même manière, ce paramètre permet
de définir la Couleur des liens non encore explorés.
• vlink, spécifie la Couleur des liens déjà visités.
• alink, ce dernier paramètre permet donc définir la
Couleur que prendrons les liens lorsqu'ils seront
sélectionnés par un click souris ou bien le clavier
(un instant relativement bref).
Ass Ir. Elie MUSOYA 34
 Chapitre I GENERALITES
3.3-Commentaires

Comme pour la plupart des langages, HTML

permet de faire des commentaires dans le
code HTML. Le commentaire n'est pas
destiné à être affiché et il doit être placé
<!­­commentaire ­>.

Ass Ir. Elie MUSOYA 35

 Chapitre I GENERALITES
3.4-Les caractères spéciaux
L'intérêt du langage HTML est de pouvoir écrire des
documents visualisables quelle que soit la plateforme
utilisée (Système Unix, Windows, ...). Un problème se
pose toutefois . La table de caractères ASCII souvent
utilisée, ne permet que de coder 128 caractères. Les
caractères accentués ne font pas partie de cette table
de caractères. Cependant, chaque plate-forme a
étendu, à sa guise, le jeu de caractères ASCII à 256
caractères, bien entendu, simple e accentué (é ou è)
n'est pas codé de la même manière. A cela il faut
ajouter la langue dans laquelle le document a été écrit
(Les caractères accentués n’existent pas en anglais).

Ass Ir. Elie MUSOYA

36
 Chapitre I GENERALITES
3.5-Les couleurs En HTML, il y a deux façons de
spécifier une couleur. La première consiste à
donner les trois composantes RGB de la couleur
désirée sous le format "#RRGGBB", où RR
représente l'intensité de rouge entre 00 et FF (en
hexadécimal), GG l'intensité de vert et BB celle du
bleu : il est donc possible de définir jusqu'à 16
581 375 couleurs. La seconde méthode, plus
simple, consiste à simplement nommer la couleur
désirée. Cette méthode est peu précise, car elle
implémente un nombre restreint de couleurs.
Exemples : Rouge = #FF0000 Vert=#00FF00
Bleu=#0000FF Blanc=#FFFFFF Noir=#000000
Ass Ir. Elie
MUSOYA 37
 CHAP. II. HTML ET LIENS

Les liens Hypertextes ou sur Objets (images,

fichiers etc.) sont l’essence même du Web.
Ils permettent de naviguer de page sur une
même page, de page en page ou même de
site en site, ils assurent aussi la possibilité
d’échanger des fichiers de tout type tant que
le navigateur n’est pas capable de
l’interpréter.

Ass Ir. Elie MUSOYA 38

 CHAP. II. HTML ET LIENS
[Link] liens hypertextes
Un lien hypertexte est considéré comme un élément
actif d’une page Web, en cliquant sur un mot ou un
ensemble de mot, on peut « surfer » au grès de nos
envies. Comme son nom l’indique, le lien hypertexte
n’est réalisé que sur des caractères de type Texte. Il
existe 3 types de liens hypertextes : • Ancre dans une
même page, qui permet quand la page est beaucoup
plus grande que la taille verticale de l’écran, d’accéder
directement à l’information à partir d’un menu.
• Lien interne de page en page sur un même site
• Lien externe inter-sites D’une manière générale,
c’est toujours la même balise qui est employée <a >
. </a >
Ass Ir. Elie MUSOYA 39
 CHAP. II. HTML ET LIENS

II.1.1-Ancre: Une Ancre permet de se déplacer

directement sur un emplacement donné dans une
même page sans utiliser « l’ascenseur vertical » du
navigateur. Exemple : Menu en haut de page
Introduction
Chapitre1­Les communes de kolwezi
Chapitre 2 – Les quartiers
Chapitre 3 – Les préfectures
En supposant que l’introduction et les 3
chapitres font parties intégrantes de la même page,
en cliquant sur l’un des chapitres, on accède
immédiatement à la zone de texte correspondante.

Ass Ir. Elie MUSOYA 40

 CHAP. II. HTML ET LIENS
Syntaxe : Lien hypertexte
<a>
a href="#nom_de_lancre"Lien hypertexte</a>
href, attribut qui désigne la cible vers laquelle
pointe le lien hypertexte placé entre les balises
<a> et </a>. On remarque aussi que le lien
peut comprendre plusieurs mots séparés par
des espaces et la ponctuation. La valeur de
href doit obligatoirement commencer par un #
pour désigner une ancre dans la page.

Ass Ir. Elie MUSOYA 41

 CHAP. II. HTML ET LIENS

II.1.2-Lien interne L’ancrage est considéré

comme un lien interne mais pour passer de
page en page on associe en paramètre l’URL
de celle-ci de deux façons :
• Soit en absolu en tenant compte de la
totalité de l'URL
• Soit en relatif en prenant en compte la
racine du site ou de la page active

Ass Ir. Elie MUSOYA 42

 CHAP. II. HTML ET LIENS
II.1.3-Lien externe
Le lien externe permet d'accéder à un autre site.
Compte tenu que les noms de domaines ne sont
plus les mêmes, le lien ne pourra être écrit qu'en
absolu. [Link] attributs de En règle générale on
utilise les paramètres suivant pour définir un lien :
• href , désigne l’URL du lien et/ou ancre • name,
désigne l’ancre dans une page • id, identificateur à
utiliser pour Javascript ou CSS • title, affiche un
texte flottant quand la souris passe sur le lien •
target, désigne vers quelle fenêtre va s’ouvrir le
lien

Ass Ir. Elie MUSOYA 43

CHAP. II. HTML ET LIENS
[Link] sur objets
Le lien sur objet correspond à un lien sur un
élément de la page Web qui n’est pas du
texte. La plupart du temps ce sont des liens
sur images mais on peut aussi réaliser sur
les fichiers, des documents multimédia (rich
média) etc.

Ass Ir. Elie MUSOYA 44

CHAP. II. HTML ET LIENS
II.3.1-Liens sur images , Avant même de faire un
lien sur une image, il faut l'intégrer dans la page
web. Pour cela on utilise la balise <img>. Cette
balise dispose d'un certains nombre de
paramètres :
 src, paramètres qui contient l’URL de l’image à

afficher ( même méthode que le paramètre HREF

pour ) < a >•
 width et height , qui définissent la taille à

l’affichage , valeur exprimée soit en pixels soit en

% de la taille d’origine.
 alt, affiche une courte description quand la souris

passe sur l’image

Ass Ir. Elie MUSOYA 45
 CHAP. II. HTML ET LIENS
II.3.1-Liens sur images (suite)
 border, affiche un cadre autour de l’image, la

valeur de celui-ci en pixels définit l’épaisseur

du cadre
 hspace et vspace, attributs fixant un espace

vertical et horizontal autour de l’image

 align, permet de positionner l’image par

rapport à un texte. Cet attribut peut prendre 9

valeurs associée à permet de créer un lien à
condition que cette dernière inclus la
première.

Ass Ir. Elie MUSOYA 46

CHAP. II. HTML ET LIENS
II.3.2-Taille et format des images Un navigateur est
susceptible de lire n'importe quelle image toutefois
il est fortement conseillé d'en utiliser certains
particulièrement bien adaptés pour le web comme
png, jpg ou gif. Le format png est d'autant plus
intéressant qu'il gère nativement la transparence
comme le gif et une grande palette de couleur
comme le jpg, de plus le format est libre. Dans tous
les cas, ces formats permettent de compresser une
image tout en conservant le meilleur rendu
possible. Au final, la taille de l'image ( en octets)
doit être minimisée pour garantir un
téléchargement rapide surtout si la page html en
contient plusieurs
Ass Ir. Elie MUSOYA 47
CHAP. II. HTML ET LIENS
 Les paramètres width et height réduisent la
taille à l'écran mais en aucun cas son «
poids » en octets. Le navigateur mettra
autant de temps à télécharger l'image.
Donc il est conseillé d'utiliser un logiciel de
traitement d'image avant publication.

Ass Ir. Elie MUSOYA 48

 CHAP. II. HTML ET LIENS
 3.4-Liens sur fichier: Les liens sur fichier peuvent
être interprétés différemment suivant les
extensions prises en charge par le navigateur. En
effet, si celui-ci fait le lien avec une application
installée sur le poste client, il peut exécuter un «
plug-in » pour l’afficher directement (Fichier PDF,
certains fichiers texte etc.). En revanche, si une
extension est non reconnue, le navigateur
procède au téléchargement du fichier. A vrai
dire, toutes les informations sont téléchargées,
certaines seront directement interprétées par le
navigateur ou un logiciel externe d’autres seront
enregistrées localement.
Ass Ir. Elie MUSOYA 49
 CHAP .[Link] & CADRE-CONTENUS

Il arrive parfois que la mise en page soit

complètement déstructurée en changeant
de résolution d’écran. L’utilisation des
cadres et tableaux permet de maintenir une
cohésion dans l’affichage de la page HTML
grâce à un astucieux système d’auto-
adaptation.

Ass Ir. Elie MUSOYA 50

CHAP .[Link] & CADRE-
CONTENUS
[Link] L’insertion d’un tableau se fait par
le biais de la balise .... <table> et</table>
On lui adjoint ensuite des balises qui
permettent de créer des lignes et enfin des
cellules. Les colonnes ne sont pas déclarées
afin de faciliter la fusion des cellules.

Ass Ir. Elie MUSOYA 51

 CHAP .[Link] & CADRE-
CONTENUS
1.1- Exemple d'un Tableau simple
Tableau contenant 1 ligne et 2 colonnes :
<table>
<tr>
<td>cellule 1 </td> <td> cellule 2 </td>
</tr>
</table>

Ass Ir. Elie MUSOYA 52

 CHAP .[Link] & CADRE-
CONTENUS
Un tableau est défini en fonction du nombre
de lignes (axe vertical) et du nombre de
cellules par ligne (axe horizontal). Ces
cellules renferment le contenu du tableau à
mettre en page. On ne parle pas des
colonnes car elles ne disposent pas de
balise HTML dédiée.

Ass Ir. Elie MUSOYA 53

 CHAP .[Link] & CADRE-
CONTENUS
Remarques :
Par défaut le tableau fait toute la largeur de
l’écran, le texte est systématiquement
justifié à gauche et les bordures des cellules
sont fixées. Il existe des paramètres qui
permettent de personnaliser le tableau.

Ass Ir. Elie MUSOYA 54

 CHAP .[Link] & CADRE-
CONTENUS
1.2- Attributs de table
En HTML5, cette balise (comme beaucoup)
n'ont pas d'attribut, le style et la mise en
forme doit être faite avec CSS. Toutefois avec
HTML4 il est possible de définir certains
attributs :
• border, définit l’épaisseur des traits de
bordure en pixels
• width, définit la largeur du tableau soit en
pixels soit en % par rapport à la taille du
cadre qui contient le tableau

Ass Ir. Elie MUSOYA 55

 CHAP .[Link] & CADRE-
CONTENUS
• summary, permet d’afficher une description courte
du tableau (en règle général en haut de tableau)
• bgcolor, permet de colorer le fond du tableau
suivant le codage HTML RGB en code Hexadécimal
(voir cours chapitre 1 )
• frame et rules, permettent de modifier les lignes
séparatrices des cellules, FRAME définit
l’apparence des bordures du tableau et RULES
définit quels lignes sont tracées (verticales,
horizontales etc.)
• cellpadding & cellspacing, permettent de définir
l’espacement soit du contenu de la cellule avec sa
bordure soit entre cellules
Ass Ir. Elie MUSOYA 56
 CHAP .[Link] & CADRE-
CONTENUS
1.3-Lignes et cellules En HTML5, et sont
soumises aux mêmes règles que . Avec
HTML4, il y a certains attributs autorisés.
Pour les lignes :
• align, permet de justifier le contenu de
toutes les cellules d’une même ligne
(center, right ou left)
• bgcolor, permet de colorer le fond de toutes
les cellules d’une même ligne

Ass Ir. Elie MUSOYA 57

 CHAP .[Link] & CADRE-
CONTENUS
Pour les cellules :
• bgcolor, affecte une couleur en fond de
cellule
• width, fixe la largeur de la cellule en pixels
ou en % (Attention à la taille du tableau)
• align, permet de justifier le contenu dans la
cellule (center, right ou left)
• rowspan et colspan, permettent de créer des
fusions de cellules respectivement en ligne et
en colonne. La valeur associée correspond au
nombre de ligne ou de colonne fusionnées
Ass Ir. Elie MUSOYA 58
 CHAP .[Link] & CADRE-
CONTENUS
.4-Balises complémentaires
Pour faciliter la gestion des styles et
affichages avec CSS, HTML5 fournit des
balises « enfants » dissociant le tableau en
3 parties distinctes : • En-tête du tableau
qui correspond à la (aux) première(s)
ligne(s) avec la balise ...
• Le pied du tableau qui correspond à la (aux)
dernière(s) ligne(s) avec la balise ...
• Le corps du tableau avec ...

Ass Ir. Elie MUSOYA 59

 CHAP .[Link] & CADRE-
CONTENUS
[Link] cadres
Ce chapitre est divisé en 2 parties : • Les
FRAMES qui sont utilisés en HTML4 ( ne sont
plus supportées avec HTML5)
• Les iFRAMES susceptibles de remplacer les
premiers avec HTML5 Nous aborderons les
deux parties car il existe encore de
nombreuses applications web qui reposent
sur les FRAMES ( interface de configuration
des switchs par exemple).

Ass Ir. Elie MUSOYA 60

 CHAP .[Link] & CADRE-
CONTENUS
2.1-Structure type avec cadres Les cadres
permettent de découper la page support en
parties complètement indépendantes.
Chacune d'entre elles affiche un contenu
différent ( une autre page HTML). Cela
permet de mettre en œuvre une zone
réservée à la navigation (contenu
dynamique ou changeant) et des zones
statiques comme une entête ou un menu.

Ass Ir. Elie MUSOYA 61

 CHAP IV CSS & NOTION DE STYLE

[Link]
Quand on développe un site Web, on est
rapidement confronté au problème du
formalisme de la mise en page et du temps
consacré à cela. En effet, pour chaque objet
contenu dans les pages, il faut définir la
couleur, la taille et la police de caractère si
c’est du texte, les bordures et les couleurs
de fond si c’est un tableau etc. . La tache
devient vite monstrueusement longue. CSS
a été mis au point pour palier ce problème.
Ass Ir. Elie MUSOYA 62
CHAP IV CSS & NOTION DE
STYLE
Le langage CSS (Cascading Style Sheet) est
un complément d’HTML. Il définit, d’une
manière globale, les propriétés de format
des balises HTML employées dans une page
ou sur la totalité d’un site Web.

Ass Ir. Elie MUSOYA 63

 CHAP IV CSS & NOTION DE
STYLE
[Link]ésentation du langage CSS
Dans la pratique, il est possible d’intégrer le
langage CSS dans une page HTML mais
pour un site complet, il est plus utile
d’écrire un fichier externe qui sera appelé
pour chaque page HTML visitée. Il n’y a pas
de règle précise mais par principe nous lui
donnerons comme extension « .css » .

Ass Ir. Elie MUSOYA 64

 CHAP IV CSS & NOTION DE
STYLE
Avantages :
• La structure et la présentation sont gérées
séparément
• La conception se fait sans se soucier de la
présentation
• Le code HTML est réduit en taille et en
complexité.
• CSS permet de contrôler le style de tous les
éléments d'une page web

Ass Ir. Elie MUSOYA 65

 CHAP IV CSS & NOTION DE
STYLE
Exemple comparaison entre déclaration et
{CSS} de la couleur de fond de la page
HTML :
<!­­en HTML­­>
<body bgcolor="#c0c0c0">

Serait équivalent : /* en CSS */ body

{ background­color :#c0c0c0 ; }

Ass Ir. Elie MUSOYA 66

 CHAP IV CSS & NOTION DE
STYLE
A première vue cela semble plus long à écrire et
pourtant ce n'est pas le cas. En effet, en
développement web, on privilégie la
modularisation du code. Cela revient à dire que
chaque partie du site est dissociée en plusieurs
fichiers dont les rôles sont distincts. Dans
l'exemple ci-dessus, on peut imaginer des fichiers
HTML et un fichier CSS. On obtient ainsi un style
commun à tout le site sans avoir de doublon. Ici,
la couleur du fond de chaque page serait définie
de la même façon. Il en serait de même pour tout
ce qui est présent dans le fichier de style.

Ass Ir. Elie MUSOYA 67

 CHAP IV CSS & NOTION DE
STYLE
[Link]égration du code CSS
Le code CSS peut être placé à 3 endroits
différents :
• Dans la balise HTML à l’intérieur de la page
• Dans l’entête de la page HTML ou dans la
page
• Dans un fichier Externe

Ass Ir. Elie MUSOYA 68

 CHAP IV CSS & NOTION DE
STYLE
En reprenant l'exemple précédent :
→ Dans la balise <body>
< body style="background­color:#c0c0c0 ;" >
→ Dans l'en-tête de la page HTML
< head >
< style > body {background­
color:#c0c0c0 ; }
< /style>
< /head>

Ass Ir. Elie MUSOYA 69

 CHAP IV CSS & NOTION DE
STYLE
→ Lien avec un fichier externe qui contient
l'instruction CSS
< head >

<link rel="stylesheet" type="text/

css" href="[Link]" >

< /head>

Ass Ir. Elie MUSOYA 70

 CHAP IV CSS & NOTION DE
STYLE
On remarque que l'instruction CSS est écrite
de la même façon mais la structuration peut
changer (entre les 2 premiers exemples).
Dans un fichier css, aucune balise HTML
n'est tolérée, tout doit être écrit en CSS. Il
est fortement conseillé de placer le code
CSS ou le lien vers un fichier externe dans
l'en-tête. Le navigateur interprète la page
HTML dès le début du téléchargement et
calcule la mise en page à partir de ce qu'il
connaît à cet instant précis.

Ass Ir. Elie MUSOYA 71

 CHAP IV CSS & NOTION DE
STYLE
[Link], Héritage et combinaisons de sélecteurs
4.1-Syntaxe La syntaxe du langage CSS est simple,
elle repose sur le concept de définition de balise
et de propriété associée. Toutefois les propriétés
CSS ne portent pas nécessairement le même nom
qu’en HTML, même si elles ont une action
identique.
sélecteur
{
propriété: valeur;
}

Ass Ir. Elie MUSOYA 72

 CHAP IV CSS & NOTION DE
STYLE
• sélecteur, ce peut être une balise mais pas
seulement, en général il désigne un « objet
» de la page HTML sur lequel on applique le
style décrit dans le bloc
• propriété, c'est l'élément pour lequel on
associe une valeur. Elle doit être compatible
avec le type du sélecteur

Ass Ir. Elie MUSOYA 73

 CHAP IV CSS & NOTION DE
STYLE
Règles d'écriture :
• Un sélecteur peut se voir appliquer un bloc
CSS comprenant plusieurs propriétés
• Plusieurs sélecteurs peuvent avoir un bloc
CSS commun
• L'affection de valeur à une propriété est
réalisée par « : »
• Chaque ligne du bloc CSS doit se terminer
par « ; »
• Le bloc CSS est délimité par « { } »

Ass Ir. Elie MUSOYA 74

 CHAP IV CSS & NOTION DE
STYLE
Exemple :
body
{
background­color:#c0c0c0 ;
}
Le sélecteur body caractérise l'objet de la
page HTML. Le bloc CSS comprend une
seule déclaration pour la propriété
background-color à laquelle on applique la
valeur #c0c0c0.

Ass Ir. Elie MUSOYA 75

 CHAP IV CSS & NOTION DE
STYLE
Exercice :
On souhaite que le texte dans un paragraphe
– balise HTML - soit bleu, taille 12 pixels,
justifié et police « century». 1-Codez en CSS
le style de cette balise. Propriétés
nécessaires « font­size », « font­family », «
text­align » dont les valeurs attendues sont
« right,left,center ou justify » et « color ».

Ass Ir. Elie MUSOYA 76

 CHAP IV CSS & NOTION DE
STYLE
p
{
font­size:12px ;
font­family:ubuntu ;
text­align:justify ;
color:#0000FF ;
}

Ass Ir. Elie MUSOYA 77

 CHAP IV CSS & NOTION DE
STYLE
4.2-Héritage
La notion d'héritage est très usitée dans de
nombreux domaines de l'informatique. On en
parle beaucoup en programmation orientée
objet ( C++, java, php etc.) mais aussi en
HTML/CSS. Ce modèle s'appuie sur la relation «
parent » - « enfant » sachant que ce que l'on
entend par parent/enfant correspond à
l'imbrication des sélecteurs entre eux. Par
exemple, en général la balise contient
d’innombrables autres balises, on considère que
est le parent de ce qu'elle contient.

Ass Ir. Elie MUSOYA 78

 CHAP IV CSS & NOTION DE
STYLE
Exercice Soit le Code source d'une page
HTML :
1. < !doctype html >
2. < html>
3. <head >
4. < title >
5. Héritage en CSS
6. < /title>
7. < meta charset="utf­8" >
8. < /head>

Ass Ir. Elie MUSOYA 79

 CHAP IV CSS & NOTION DE
STYLE
9. < body>
10. < div>
11. < p> ....blablabla...
12.< href="[Link] <
/a> 13.< /p>
14.< /div>
15.< /body>
16.< /html>

Ass Ir. Elie MUSOYA 80

 Conclusion
Nous voici arriver à la fin de notre
cours, les exercices pratiques
vous permettrons de vous
perfectionnés. je tiens à vous
remercier du temps que nous
avons passé ensemble.
Je vous souhaite bon courage à
vous.

Ass Ir. Elie MUSOYA 81