Cours de XHTML Et de Css Definitif UWB

Boni KIBAMBE MUTAMBA
Doctorant en Sciences Economiques à l’Université Pédagogique Nationale

Licencié en Informatique de Gestion
Eléments d’Application et
Programmation Réseaux
Vol.1
2011-2012
Eléments d’application et de programmation réseaux
Cahier des charges
1. OBJECTIF
Ce cours est un complément indispensable au cours des Réseaux informatiques et

en constitue une matière approfondie.
Il a pour objectif de préparer les étudiants informaticiens, à l’initiation de la
programmation des applications Client-Serveur. Il permettra ainsi aux étudiants
qui abordent la vie professionnelle de s’adapter aux besoins actuels du marché de
l’emploi informatique dans le monde et de les rendre compétitifs en tant que
WebMasters.
Ce cours inclut aussi les dernières évolutions de la programmation réseau, qui

sont le Data Web et l’interfaçage des bases de données sur le WEB où les
étudiants seront conduits à la réalisation des sites de différents types, à l’instar
des e-commerces, etc.
2. METHODES
L’enseignement se basera sur la théorie et les exercices de programmation du

modèle client-serveur ainsi que sur les nouvelles connexions du client-serveur sur
Internet et intranet.
3. ORGANISATION DU COURS
Ce cours sera articulé sur :

- une révision sommaire de la théorie du cours de réseau informatique suivie
d’une séance pratique sur la constitution d’un LAN ;
- la conception et la description d’un site Web statique avec le langage
XHTML ;
- la conception des designs avec le langage CSS ;
- la programmation d’un site Web dynamique avec les langages PHP et
MySQL branchés sur le Serveur Web Apache de WampServer.
4. CONTACTS
Tél. : 085 414 0402 - 099 421 0085

E-mail : [email protected]
UWB – RDC 2
Plan du cours
Ière partie : Généralités sur le Client-Serveur
Chapitre I. Introduction au Client-Serveur
I.1. Origines et historique
I.1.1. La période d’avant 1980
I.1.2. La période des années 1980
I.2. Caractéristiques et rôle de l’Approche Client-Serveur
I.2.1. Définition
I.2.2. Les composants de Client-Serveur
I.2.3. Le Rôle de Client-Serveur
I.3. Les générations de Client-Serveur
I.3.1. La première génération de Client-Serveur
I.3.2. La deuxième génération de Client-Serveur
I.3.3. La troisième génération de Client-Serveur
Chapitre II. L’Architecture Client-Serveur
II.1. Introduction
II.2. Technique de dialogue
II.3. Types de Client-Serveur
II.4. Le client-Serveur de données et procédure
II.5. Les fonctions des serveurs de données
UWB – RDC 3
IIère partie : Le langage XHTML
Chapitre III. : Généralités sur le XHTML et le CSS
III.1. Définition
III.2. Les éditeurs
III.3. Les navigateurs
Chapitre IV : Les éléments de XHTML
IV.1. Les balises
IV.2. Les attributs
IV.3. Création de pages XHTML
IV.4. Les commentaires
Chapitre V. : L’organisation du texte
V.1. Les paragraphes
V.2. Le Saut de ligne
V.3. Les titres
V.4. La mise en valeur du texte
V.5. Les autres balises
Chapitre VI. : Création des liens
VI.1. Les liens relatifs et les liens absolus
VI.2. Le lien vers une autre page
VI.3. Info-bulle d'aide sur le lien
VI.4. Le lien d’envoi de mail
VI.5. Le lien vers une ancre
VI.6. Le lien vers une ancre située dans une autre page
UWB – RDC 4
IIIème partie : Le langage CSS
Chapitre VII. : L’emplacement des codes CSS
Chapitre VIII. : La mise en forme
VIII.1. : La taille du texte
VIII.2. : La police
VIII.3. : L’alignement
VIII.4. : Les effets de style
VIII.5. : Le fond
VIII.6. : Les pseudo-formats
VIII.7. : Les listes à puces
Chapitre IX. : La mise en boîte
Chapitre X. : La conception du Design d’un site WEB
Chapitre XI. : La création des tableaux
Chapitre XII. : L’Expédition d’un site sur le Web
XII.1. Le nom du domaine
XII.2. L’Hébergeur
XII.3. L’Utilisation du Client FTP
IVème partie : La Conception du Site avec le PHP et MySQL
Chapitre XIII. : Introduction au PHP
Chapitre XIV. : Transmission des données de page en page
Chapitre XV. : La Constitution d’une DataWeb (Stockage des informations

dans une base de données)
Chapitre XVI. : Les techniques avancées de PHP
UWB – RDC 5
Ière partie : Généralités sur le Client-Serveur
Chapitre I. Introduction au Client-Serveur
I.1. Génèse et historique
Tous les secteurs d’activités, aujourd’hui dans le monde, sont dans la course à la
productivité amenant les technologies à évoluer de plus en plus vite ; Le client–
serveur s’est taillé une place de choix depuis des années 1990. En effet, il faut
pouvoir disposer de systèmes d’information évolutifs permettant une coopération
fructueuse entre différentes entités de l’entreprise. Les systèmes des années 70 et
80 ne répondaient pas à ces exigences.
I.1.1. La période d’avant 1980
Les architectures étaient centralisées autour de calculateurs centraux (mainframe)

de type IBM ou BULL par exemple. Les terminaux étaient passifs à interfaces
caractères ou pages. Les applications étaient développées souvent en Cobol,
parfois en PL1 autour de fichiers ou de grandes bases de données réseaux ou
hiérarchiques, telles IDS2 ou DB2. La productivité des développeurs restait faible.
La maintenance des applications était de plus en plus difficile. Les utilisateurs
restaient prisonniers de systèmes propriétaires. Aujourd’hui, les applications
héritées (legacy applcations en anglais) développées avec ces vieilles technologies
sont encore souvent opérationnelles. Il est difficile de les migrer vers des
technologies plus modernes. Beaucoup d’entreprises ou d’administrations pensent
cependant au downsizing, c'est-à-dire à remplacer leur calculateur central par un
ou plusieurs serveurs départementaux interconnectés à des stations de travail
graphiques, type PC par exemple. La figure 1 illustre les architectures centralisées
aujourd’hui candidates au downsizing.
Ordinateur central
Base de données
Applications
Système
d’exploitation
Figure n°1 : Exemple d’architecture centralisé
Terminaux passifs
Les années 80 ont connu le développement du transactionnel et des bases de

données. Les systèmes ont commencé à migrer depuis des systèmes propriétaires
vers des systèmes plus ouverts type Unix. Les bases de données relationnelles ont
vu le jour accompagnées de langages de développement construits autour des
données. Le SQL s’est imposé comme la norme d’accès aux données. Les réseaux
UWB – RDC 6
locaux se sont développés. D’un autre côté, les micro–ordinateurs se sont imposés
dans l’entreprise et ont apporté des interfaces graphiques conviviales.
UWB – RDC 7
Le maintien des mainframes, le développement des systèmes départementaux, la

profusion d’ordinateurs personnels ont rendu les communications difficiles.
Cette ère a vu les réseaux prendre une place capitale dans les organisations voire
dans les entreprises. Les vitesses de calcul des micros deviennent
impressionnantes et où le graphique est partout au niveau des interfaces. Le
besoin de partage des données est essentiel aussi bien pour l’accès décisionnel
marqué par le besoin de requêtes complexes sur de gros volumes des données. Il
faut développer vite, par exemple pour ne pas rater un mailing ciblé à une
campagne de promotion. La concurrence entre les entreprises est exacerbée ; la
flexibilité et la productivité de l’informatique font souvent la différence.
Toutes ces raisons expliquent le développement autour des réseaux d’entreprises

de serveurs départementaux ouverts et offrant des interfaces standards pour
permettre la connectivité des outils en micros. C’est aussi faciliter le partage et
l’accès simplifié aux données que triomphent les bases de données relationnelles
avec la possibilité de gérer des types de données étendus (Binary Large Object
BLOB par exemple). Pour améliorer la vitesse de développement et surtout la
maintenabilité des applications, on voit s’imposer des méthodes de conception et
développement orientées objets. Ainsi, l’architecture type d’un système moderne a
échoué vers celle représentée à la figure 2. Il s’agit d’une architecture client–
Serveur (en abrégé, C/S).
Serveur
SGBD Règles
-----------
OS/2 , UNIX, NOVELLE, Données
Windows NT
Réquête Résultats
(Service)
Réseau d’entreprise
Windows OS/2 UNIX
Application Application Application
Clients
Figure n°2 : Exemple d’architecture moderne des années 90
2. CARACTERISTIQUES DE L’APPROCHE C/S
L’approche client–serveur constitue une question difficile, car ce vocable n’est pas

encore beaucoup galvaudé. C’est, en fait, un modèle d’architecture à la mode et
assez large pour recouvrir des réalités distinctes, comme nous allons le voir dans
la suite.
UWB – RDC 8
2.1. Une répartition hiérarchique des fonctions
L’architecture client–serveur s’articule en général autour d’un réseau. Deux types

d’ordinateurs sont interconnectés au réseau. Le serveur assure la gestion des
données partagées entre les utilisateurs. Le client gère l’interface graphique de la
station de travail personnelle d’un utilisateur. Les deux communiquent par des
protocoles plus ou moins standardisés, les programmes applicatifs sont
idéalement distribués sur le client et/ou le serveur afin de minimiser les coûts.
2.2. Définition
En fait, l’architecture client–serveur est plus large où un réseau n’est pas toujours
nécessaire. Il est possible de la réaliser sur une même machine (et pourquoi pas
sur un mainframe) en dégageant deux processus, l’un – le client – qui envoie des
requêtes à l’autre – le serveur -, ce dernier traitant les requêtes et envoyant des
réponses. Une définition très large peut donc être proposée.
Notion 1 : Architecture client – serveur (client – serveur Architecture)
Modèle d’architecture applicative où programmes sont répartis entre processus clients et

serveurs communiquant par des requêtes avec réponses.
Dans notre contexte, nous nous concentrons généralement sur les architectures
client–serveur de données et procédures, où clients et serveurs communiquent par
un réseau, où les serveurs sont munis d’un SGBD, et où les clients, mais souvent
aussi les serveurs, sont capables d’exécuter des procédures applicatives.
2.3. La diversité d’outils
Le type de client–serveur que nous étudions est celui aujourd’hui mis en œuvre
pour réaliser les systèmes d’information des entreprises. Il comporte les
composants suivants :
 un système ouvert plus ou moins basé sur des standards publiés ou de
fait pour réaliser les fonctions de base du serveur.
 un SGBD s’exécutant sur le serveur, généralement basé sur le modèle
relationnel et le langage SQL.
 Des stations de travail personnelles avec interface graphique connectées
au réseau, par exemple des PC.
 des outils de développement d’applications variés de plus en plus
fréquemment construits autour d’une approche objet.
 des outils de conception, de déploiement et de maintenance pour
permettre le suivi du cycle de vie des applications.
Bref, tout outil de conception, développement, aide à la décision, gestion de

transactions, gestion de données, gestion de communications, etc., peut trouver
sa place dans une architecture client-serveur.
UWB – RDC 9
2.4. Une approche ouverte
Les systèmes client–serveur appliquent une stratégie du type Systèmes ouverts.

Ces systèmes s’appuient sur des standards à plusieurs niveaux. Plus
particulièrement, les standards importants en matière de client–serveur sont ceux
élaborés par ISO, L’ANSI, l’IEEE, l’X/Open, l’OMG et l’OSF.
l’ISO (International Standard Organisation) est l’organisation internationale

intégrée aux Nations Unies qui entérine des standards internationaux.
L’ANSI (American National Standardisation Institute) est l’organisation de
normalisation nord américain qui soumet des propositions l’ISO.
l’IEEE (Institute of Electrical and Electronic Enineers) se compose de nombreux
comités scientifiques et techniques, dont certains élaborent des propositions pour
l’ANSI.
L’x/Open est une association internationale à but non lucratif composée de
constructeurs (pour l’essentiel américains) qui définit et diffuse les technologies
construites à partir des standards en matière de systèmes ouverts. Ce groupe
construit des documents de spécifications qui précisent et complètent les
standards. Il a particulièrement proposé un ensemble de spécifications pour les
environnements applicatifs appelé CAE (Common Application Environment) très
utilisés en client – serveur.
l’OMG est le pendant de l’X/Open pour les systèmes orientés objets, il propose
une architecture à objet distribué appelée OMA (Objet Management Architecture).
L’OSF (Open Software Foundation) est un organisme à but non lucratif qui
développe un système d’exploitation réparti basé sur les standards. Il promeut
l’architecture distribuée DCE (Distributed Computing Environment).
Cependant tous ces organismes se complètent en général, mais sont parfois

concurrents. Ils sont clairement dominés par les grands constructeurs
américains.
L’intérêt des utilisateurs pour les systèmes ouvert basés sur les standards est
évident. Ceci devrait en théorie permettre d’une part la portabilité des
applications, d’autre part la possibilité de remplacer un composant d’un
constructeur par celui d’un autre conforme aux standards. Aujourd’hui, les
groupes de standardisation sont parfois trop nombreux et trop dirigés par le
marketing, si bien qu’il est permis de se demander si des solutions théoriquement
basées sur des standards ne sont pas tout autant propriétaires que celles d’un
constructeur particulier.
3. LE ROLE DU C/S ?
En plus des avantages de pouvoir fédérer une panoplie de vendeurs d’outils, le

client–serveur répond aux vrais besoins actuels des entreprises.
3.1. Les contraintes de l’entreprise

Les entreprises sont soumises à des contraintes de plus en plus fortes, aussi bien
du monde extérieur que de l’intérieur de l’entreprise. Les contraintes externes
sont imposées par les clients de plus en plus exigeants, la régulation de plus
complexe, la compétition de plus en plus dure qui conduit à réduire le temps de
passage d’un produit de la conception à la vente. Plus précisément,
UWB – RDC 10
il s’agit donc de :

 mieux satisfaire les clients, par exemple en leur présentant des informations
consolidées et claires ;
 respecter les régularisations en vigueur, malgré leur évolutivité, par exemple
en étant capable de générer rapidement de nouvelle déclarations ;
 produire mieux et plus vite les nouveaux produits, de sorte à participer à la
compétition active vers la nouveauté, et à réduire le time to market.
Les contraintes internes se traduisent par des pressions sur les budgets, la
difficulté à absorber les technologies nouvelles, et un manque général de temps et
de moyens. Les budgets sont de plus en plus serrés, car la compression des
dépenses est nécessaire à l’équilibre de l’entreprise. De ce fait, les ressources sont
limitées, et les expérimentations avec des technologies nouvelles, souvent
coûteuses du fait du poids de plus en plus grand de l’histoire, ne peuvent être
menées à bien. Les ingénieurs et techniciens au fait des technologies nouvelles
manquent cruellement de temps, et la conversion des autres est difficile. Ainsi, on
observe dans la plupart des entreprises les problèmes suivants :
 budgets et ressources limités réduisant les capacités d’innovation et de

reprise de l’existant ;
 capacité à absorber de nouvelles technologies limitées par les moyens
humains et matériels, et par le poids de l’existant ;
 manque de temps des personnels les plus qualifiés.
3.2. La maîtrise du système d’information
Une approche de solution aux problèmes mentionnés passe par une meilleure
organisation du système d’information qui doit devenir plus intégré, mais aussi
plus évolutif. Ceci nécessaire tout d’abord par l’adoption de systèmes ouverts,
obéissant à des standards permettant le choix d’un grand nombre de produits sur
le marché. Il faut donc à tout prix éviter les solutions s’enfermant sur un
constructeur ou développements « maison » ignorant les standards, solutions
propriétaires qui risquent à terme de limiter les choix et la concurrence des
fournisseurs, et donc d’augmenter les coûts. L’intégration et l’évolutivité passent
par l’architecture client–serveur, qui permet l’intégration des données mais aussi
des traitements communs de l’entreprise au sein du serveur relationnel, et
l’évolutivité des applications existantes ou développées sur les clients de type PC
ou station de travail. La réutilisation d’applications existantes ou développées
dans l’entreprise, avec possibilité d’adaptation ou de spécialisation, est aussi un
élément déterminant pour le choix d’une architecture client–serveur et des outils
de développement.
Le choix d’un système d’information articulé autour d’une architecture ouverte,

client–serveur, bâtie sur un moteur relationnel, apporte une meilleure maîtrise de
l’information et une plus grande souplesse d’évolution. En effet, le modèle
relationnel permet une représentation simple et claire des données. Il est le
standard industriel ; il permet une bonne productivité des développeurs grâce au
langage SQL, normalisé dès 86, qui a évolué en 89 (SQL 1 complet) et en 92 (SQL2
avec trois niveaux distingués ;. Aujourd’hui, les serveurs relationnels, efficaces et
robustes permettent rapidement la conception et le développement d’applications
à partir d’une modélisation entité–association ou objet supportée par des outils de
UWB – RDC 11
conceptions à partir d’une modélisation entité–association ou objet supportée par

des outils de conception de schéma de données et de programmes autour d’un
dictionnaire de données de référence partageable (outils « CAE »). Des outils de
développement riches et variés permettent la programmation classique (L3G) ou
avancée (L4G), l’aide à la décision à partir des données de la base (tableurs et
SIAD intégrés), le traitement de textes intégrés (textes, courrier électronique) et le
support de document multimédias. De plus, le relationnel garantit l’évolutivité
vers une approche objet progressive et vers une répartition fiable des bases de
données. Il permet aussi l’interopérabilité nécessaire à l’intégration des
applications existantes.
Un élément clé qui milite pour choisir un SGBD relationnel dans une grande
entreprise est la nécessité de réutiliser les applicatifs développés au niveau des
différentes entités de l’entreprise. Avec un serveur relationnel et des outils clients
bien choisis, une entité pourra développer un projet pilote et le proposer aux
autres. Les projets pilotes pourront ainsi être transposés après une éventuelle
adaptation de succursale en succursale. Grâce aux procédures stockées sur le
serveur autour d’une base, des infrastructures d’applications communes pourront
être partagées et adaptées au niveau des clients. Par les techniques d’ouverture et
d’interopérabilité, l’existant sur calculateur central pourra être récupéré et
présenté comme une base intégrée à un serveur.
Autour des grands serveurs relationnels, de nombreux progiciels ont été

développés. L’industrie se spécialise par métiers : finance, assurance, pharmacie,
transports, services publics, etc. Des organisations développent des modèles
standards, par exemple POSC développe le modèle des pétroliers. Les fournisseurs
de SGBD commencent à proposer des modèles réutilisables, incluant des modèles
d’entreprise spécialisables, des vues par domaines, des packages applicatifs
spécialisables, et même du service et du conseil. Les avantages d’une telle
approche sont de factoriser les expériences, de permettre la réutilisation de
solutions éprouvées mais adaptables mais adaptables, et finalement de réduire les
coûts et temps de développement.
3.3. Evolutions des technologies
Au delà de la maîtrise du système d’information qui passe par un serveur

relationnel éventuellement étendu à l’objet, le client–serveur apporte une
modularité des composants matériels et logiciels. Ceci permet d’intégrer plus
facilement les évolutions technologiques. Par exemple, l’usage de systèmes ouverts
basés sur les standards apporte des environnements de développement
graphiques souples tels X/Motif de l’OSF que l’on peut intégrer progressivement.
L’explosion de la puissance des micros (graphique, traitement, disques) permet de
supporter efficacement le graphique au niveau de chaque station client. Un autre
exemple est l’exploitation du parallélisme rendu possible au niveau des serveurs
pour manipuler de grandes masses d’informations. On peut envisager de passer
sans problème d’incompatibilité d’une configuration mono–processeur à une
configuration multiprocesseur. Le développement des technologies multimédia
peut s’effectuer plus facilement au niveau des PC clients sans remettre en cause
l’architecture du système. En résumé, le client–serveur facilite l’intégration des
technologies nouvelles dans le système d’information de l’entreprise, telle est la
tendance des nouvelles technologies de de l’information et de la communication.
UWB – RDC 12
4. LES GENERATIONS DES C/S
La première génération née à la fin des années 80 est basée sur des outils client
autour des SGDB relationnels. Le développement s’effectue sur le serveur pour la
base de données et sur le client pour l’application. La base de données est
relationnelle et développe avec SQL. L’application est programmée sur le client à
partir d’un L4G intégrant une interface graphique des requêtes SQL au serveur.
Autour des requêtes, les traitements s’écrivent par des constructions procédurales
du type assignations, calculs, tests et boucles. Ils gèrent des affichages d’écrans et
les saisies. Tout le code applicatif est exécuté sur le client.
Celui-ci envoie des rêquetes SQL au serveur par un outil de connexion et récupère
les résultats. En résumé, l’architecture client-serveur de première génération est
schématisée ci-dessous :
BD relationnelle
Serveur
Table
SGBD
Table
OS
Table
Réquête SQL TUPLES
Windows OS/2 UNIX
Application Application Application
Clients
Figure n°3 : Exemple d’architecture de première génération
Le client-serveur de deuxième génération apparaît seulement sur le marché. Il se

caractérise par une évolution des outils de trois directions :
a) Possibilité de développer des traitements applicatifs au sein du serveur de

données sous-forme de procédures déclenchées par l’application ou lors
d’événements survenant dans la base ;
b) Utilisation intensive de l’approche orientée objet non seulement pour
construire les interfaces graphique, mais aussi pour modéliser les entités de
l’entreprise et leurs relations ;
c) Facilités de déploiement des applications avec positionnement automatique
du code applicatif entre client-serveur, et avec gestion d’un référentiel des
objets de l’application – véritable dictionnaire contenant la définition des
fenêtres, des entités, des associations, des procédures, etc… - au niveau du
serveur.
UWB – RDC 13
Ainsi, Les trois caractéristiques ci-dessus sont apparues essentielles pour les
applications afin d’optimiser les performances, de faciliter la réutilisation de
composants mémorisés dans un référentiel partagé, d’être capable de gérer des
configurations complexes avec un nombre important de clients et une diversité de
systèmes. Par exemple, la gestion des procédures stockées dans la base de
données et éxécutées par le serveur permettant de réduire le trafic réseau. La
modélisation objet permet de visualiser rapidement les classes d’objets mis en jeu
par un support graphique approprié d’utiliser des méthodologies de conception, de
reprendre des bibliothèques d’objets existantes en les adaptant aux procédures à
traiter. La gestion automatique de versions de code au niveau du référentiel
permet les mises à niveau souvent difficiles sur des configurations hétérogènes
ayant quelques centaines de postes clients. Le client-serveur de deuxième
génération illustré à la figure 5, qui pourrait dans un futur proche, s’appuyer sur
des outils d’échange de requêtes entre objets (Object Request Broker), paraît
promoteur. Il lui reste cependant à faire ses preuves.
Serveur BD relationnelle
étendue
Procédures applicatives
R Table
Référentiel SGBD E
G Table
OS L
E Table
Appels de service Réponses

s
Windows OS/2 UNIX
Application OO Application OO Application OO
Clients
Figure n°4 : Exemple d’architecture de deuxième génération
UWB – RDC 14
Chapitre II. L’Architecture Client-Serveur
II.1. Introduction
Ce chapitre propose une vue d’ensemble de l’architecture client-serveur et définit

les notions de base indispensables à la compréhension du modèle.
Et pour bien définir, d’après le Professeur Inviza LEPAPA, le client-serveur est
avant tout un mode de dialogue entre deux processus. Le premier appelé client
demande l’exécution des services au second appelé serveur. Le serveur accomplit
le service et envoie en retour des réponses. En générale, un serveur est capable
de traiter les requêtes de plusieurs clients. Un serveur permet donc de partager
des ressources entre plusieurs clients qui s’adressent à lui par des requêtes
envoyées sous-forme des messages.
Le client-serveur étant un mode de dialogue, il peut être utilisé pour réaliser de

multiples fonctions. Il existe donc différents types de client-serveur qui ont été
définis dans un schéma célèbre publié pour la première fois par le Gartner
Group. On distingue plus particulièrement :
- le client-serveur des présentations ;

- le client-serveur de données et ;
- le client-serveur de procédures.
Avec le client-serveur de présentations, le client assure seulement l’affichage et

la saisie des informations. Avec le client-serveur des données, le serveur
accomplit la gestion des données. Dans le cas du serveur de procédures, le
serveur exécute des procédures pour le compte des clients ; ces procédures
peuvent accéder aux données. Ces deux derniers types de client-serveur
convergent aujourd’hui vers une architecture client-serveur des données et
procédures qui sont le cœur de cet ouvrage.
En conséquence, ce chapitre est consacré à l’étude des principes de base des

composants de l’architecture client-serveur des données et procédures. Le
serveur est aujourd’hui basé sur un SGBD relationnel exécutant des requêtes SQL
et des procédures stockées. Demain peut être le serveur des données seront
basés sur l’objet. L’objet repose sur trois piliers, en capsulassions, héritage et
polymorphisme, alors que le rationnel est fondé sur une vision tabulaire des
données accédée par une algèbre. Ce modèle des données et traitement constitue
le fondement de l’architecture client-serveur. Nous rappelons les principes
essentiels de ce modèle ci-dessous.
Et pour assurer la médiation entre le client-serveur, nous avons un des

composants clé de l’architecture qui est le médiateur dans le cadre d’architecture
de système hétérogène. Mais cepedant, les médiateurs peuvent assurer de
multiples fonctions telles l’homogénéisation des formats des requêtes et des
données, l’optimisation des accès, la gestion des services distribués, etc. Le
fournisseur des médiateurs ajoutent progressivement de l’intelligence à ses outils
qui sont approchés dans ce chapitre et seront développés dans le suivant.
UWB – RDC 15
II.2. Techniques de dialogue client-serveur
Le client-serveur est avant tout une technique de dialogue entre deux processus,
l’un – le client – sous – traitant - à l’autre – le serveur – des fonctions à réaliser.
Nous allons dans cette section étudier plus en détail ce mode de dialogue.
II.2.1. Notions de base
Le modèle de communication client-serveur est orienté vers la fourniture des

services par un processus serveur à un processus client. Qui exécute l’opération
demandée et envoie en retour la réponse. Nous définissons ci-dessous plus
précisément ces concepts de base.
Notion 1 : Client
Processus demandant l’exécution d’une opération à un autre processus par

envoie d’un message contenant le descriptif de l’opération à exécuter et attendant
la réponse à cette opération par un message en retour.
Notion 2 : Serveur
Processus accomplissant une opération sur demande d’un client et transmettant

la réponse à ce client.
Notion 3 : Requête
Message transmis par un client à un serveur décrivant l’opération à exécutera

pour le compte client.
Notion 4 : Réponse
Message transmis par un serveur à un client suite à l’exécution d’une opération

contenant les paramètres de retour de l’opération.
En résumé, la figure n°5 illustre ces notions : un client exécute une application et
demande l’exécution d’une opération à un serveur par le biais d’une requête. Il
reçoit une réponse, lui indiquant par exemple que l’opération a été bien exécutée.
Les appels au service de transport mis en jeu sont au nombre de quatre :
SendRequest permet au client d’émettre le message décrivant la requête à une
adresse correspondant à la porte d’écoute du serveur : ReceiveRequest permet
au serveur de recevoir la requête sur sa porte d’écoute SendReply permet au
serveur d’envoyer la réponse sur la porte d’écoute du client.
UWB – RDC 16
Client Serveur
Opération
Requête
Application
Réponse
SendRequest() ReceiveRequest()
ReceiveReply() SendReply()
Figure n°5 : Le dialogue Client-Serveur
II.2.2. Protocoles de type question – réponse
Comme vu ci-dessus, le dialogue client-serveur s’appuie sur l’envoie des requêtes

et des réponses en sens inverse. Des opérations de transport permettant d’envoyer
(Send) et de recevoir (Receive) des messages sont typiquement utilisées à cette fin.
Les protocoles de question–réponse peuvent s’implanter au dessus d’une couche
session. Celle-ci doit alors établir entre le client et le serveur par de primitives de
connexion (connect), puis de déconnexion (disconnect) en fin de session. Ils
peuvent aussi être implantés directement au dessus d’un service de datagrammes,
qui permet d’envoyer des messages à des portes associées aux clients et au
serveur, ce que nous avions implicitement supposé ci-dessus.
L’identification des clients et des serveurs dans un réseau est un problème

d’adressage réseau. Une ou plusieurs adresses de porte sont généralement
associées à un serveur.
Cette adresse peut être dépendante du site ou indépendante, ce qui permet un
changement de localisation des serveurs sans changement d’adresse.
Nous avons vu ci-dessus que quatre appels au service de transport (deux Send et
deux Receive) sont généralement nécessaires pour effectuer un dialogue client-
serveur. Dans des systèmes avancés comme Chorus et Mach, trois appels au
service de transport sont suffisants : le SendRequest et ReceiveReply effectués par
le client sont groupés en une seule opération appelée « DoOperation », qui permet
donc à la fois d’envoyer la requête et de recevoir la réponse. Ce mode de dialogue
souligne bien le fonctionnement client-serveur, où le client sous-traite finalement
l’exécution d’une opération au serveur.
UWB – RDC 17
II.2.3. Assemblage et désassemblage des paramétres
En général, client et serveur s’exécutent sur des machines hétérogènes qui

communiquent par un réseau. Les données sont souvent codées de manière
différente sur des machines distinctes. Il est donc nécessaire de définir un format
d’échange standard afin de convertir le nom de fonctions et paramètres dans ce
format lors de l’émission, et de les convertir en sens inverse lors de la réception.
Plusieurs standards existent, dont XDR proposé par SUN, courrier de Xerox, et
ASN.1 (abstract syntax notation) du CCITT.
Lors de l’émission d’une requête, les paramètres doivent être arrangés et codés
sous-forme des messages : c’est l’assemblage. A l’arrivée, ils doivent être remis en
format interne de manière symétrique à partir du message reçus : c’est le
désassemblage.
Notion 5 : Assemblage (marshalling)
Procédé consistant à prendre une collection des paramètres et à les arranger et

coder en format externe pour constituer un message à émettre.
Notion 6 : Désassemblage (unmarchalling)
Procédé consistant à prendre un message en format externe et à reconstituer la

collection des paramètres qu’il représente en format interne.
II.2.4. Appel de procédure à distance
Dans un système centralisé, l’appel d’opération (fonction ou procédure) s’effectue

directement par un débranchement depuis l’appelant vers l’appelé (Cfr. Figure 2) ;
ceci n’est plus possible dans un environnement distribué. Afin de rendre
transparent le dialogue client-serveur, la technique d’appel des procédures à
distance (RPC) a été introduite.
Notion 7 : Appel de procédure à distance (Remote Procedure Call RPC)
Technique permettant d’appeler une procédure distante comme une procédure

locale, en rendant transparents les messages échangés et les
assemblages/désassemblage des paramètres.
Le RPC offre les fonctions de l’appelé à l’appelant sur le site de ce dernier. Il est
réalisé par introduction d’une souche de procédure (en anglais, stub) pour
transformer l’appel de procédure en un envoi de message depuis le site de
l’appelant au site de l’appelé. Là, une souche de procédure symétrique reçoit le
message et réalise l’appel effectif de l’appelé par débranchement. Les paramètres
de retour transitent par un chemin inverse via le réseau d’interconnexion.
Notion 8 : Souche (stub)
Représentant d’une procédure sur un site client ou serveur capable de recevoir

un appel de procédure du client et de le transmettre en format adapté à
l’implémentation ou à son représentant.
UWB – RDC 18
Figure n°6 : Illustration du RPC
Appelant Appelant
Appelé Souche Réseau d’interconnexion
Souche
Appelé
De manière plus détaillée, la figure 6 représente les flots de données entre client
et serveur.
La souche client reçoit l’appel de procédure de l’application. Elle assemble les

paramètres et envoie la requête par la commande SendRequest() sur le réseau. La
souche serveur reçoit la requête par la commande ReceiveRequest(), recherche le
code de la procédure à exécuter, désassemble les paramètres, et lance l’exécution
de la procédure. La réponse est transmise enfin d’exécution à la souche serveur
qui l’ensemble et l’envoie à la souche client par la commande SendReply, la
désassemble, et la transmet à l’application. Tout est donc transparent pour
l’application.
Figure n°7 : Fonctionnement du RPC
Application
Proc.
Appel Proc. Retour Proc. Retour Proc. Exécute Proc.
Source Client Source Serveur
Assemblage Désassemblage Assemblage Désassemblage
Selection
Proc.
SendRequest() SendRequest()
ReceivReply() ReceivReply()
CLIENT SERVEUR
Les souches peuvent être générées automatiquement à partir d’un langage de

description d’interface, permettant de spécifier les noms de procédures appelées,
les noms, positions, et types de paramètres d’entrée et de sortie. Ce langage peut
être défini comme une extension d’un langage existant (par exemple C), ou
UWB – RDC 19
comme un langage indépendant de tout langage de programmation (par exemple

IDL : Interface - Définition - Langage).
II.2.5. Dialogue synchrone et asynchrone
Le dialogue client-serveur nécessite l’émission d’une requête et la réception d’une

réponse. Le RPC permet de cacher ces mécanismes de bas niveau pour
l’application.
Lors de l’émission d’une requête par une commande SendRequest(), celle-ci peut
être émise immédiatement ou mise en fil d’attente pour émission ultérieure. Dans
ce dernier cas, la commande SendRequest() n’est généralement pas bloquante, et
l’utilisateur peut effectuer une autre tâche avant de venir attendre la réponse par
une commande ReceiveRequest. Cette dernière commande peut de même être
bloquante en attente de la réponse, ou non bloquante avec un code retour
signalant que la réponse n’est pas arrivée.
Ceci conduit à distinguer les notions de dialogue synchrone et de dialogue
asynchrone.
a) Dialogue synchrone (Asynchronous dialog)
Type de dialogue géré sans file d’attente, où les commandes d’émission et de

réception sont bloquantes.
Typiquement, dans le cas synchrone, le client attend le serveur pendant que celui-
ci exécute une opération pour lui.
b) Dialogue synchrone (synchronous dialog)
Type de dialogue géré avec fil d’attente, où au moins des commandes d’émission
ou de réception est non bloquante.
Le dialogue asynchrone permet d’effectuer une autre tache pendant que le

serveur exécute une opération pour lui. Il permet aussi, par le biais des files
d’attente, de demander plusieurs opérations au serveur de recevoir les réponses.
Fondamentalement, le RPC est synchrone de sorte à assurer la transparence de l’appel. Il

peut cependant être généralisé au mode asynchrone. Pour ce faire, au moins deux cas
sont possibles : (1) soit la procédure appelée est sans réponse, alors l’appelant n’attend
pas l’envoie de la requête qui est simplement déposée en file d’attente ; (2) soit l’appel de
procédure à distance provoque un débranchement chez le client qui peut continuer à
travailler jusqu’à réception de la réponse qui provoque à un moment opportun un retour
à la sortie de la procédure appelée. Comme on le voie, le RPC asynchrone de copies, il
faut aussi garantir dans très utile par exemple pour la mise à jour asynchrone de copies.
Il faut aussi garantir l’émission de la requête déposée en file d’attente, mémé en cas de
panne d’un site, si bien que les files doivent être persistantes et gérées sur disques
comme des journaux.
UWB – RDC 20
II.3. Les différents types de C/S
Suivant la nature des services rendus par le serveur pour un client, différents
types de client-serveur se sont distingués. La figure 4 illustre diverses possibilités
reconnues. Selon la répartition des fonctions de présentation graphique (affichage
et saisie de données à partir d’icones graphiques par exemple) de gestion de
données (accès aux fichiers ou aux bases de données), d’exécution de code
applicatif (calculs de l’application, on distingue les types de client serveur décrits
ci-dessous.
Tout d’abord, l’architecture client-serveur peut être mise en œuvre afin d’assurer
une meilleure qualité du dialogue homme-machine. Un processus serveur,
souvent exécuté sur une machine séparée (par exemple un terminal intelligent)
exécute les fonctions d’entrées sorties graphiques pour un processus client qui
exécute le code applicatif. Cette organisation est appelée client-serveur de
présentation. Elle peut être utilisée pour transformer une interface homme-
machine caractères en interface graphique : on parle alors de rhabillage.
Figure n°8 : Répartition des fonctions selon le type de client-serveur
Client
Serveur
C/S de présentation Rhabillage C/S de données C/S de procédures Système réparti
Symboles :
Présentation Données Code Applicatif
a) C/S de présentation (présentation c/s)
Type de client-serveur dans le quel un processus exécute les fonctions de dialogue

avec l’utilisateur, l’autre gérant les données et exécutant code applicatif.
b) Rhabillage (Revampling)
Type de client-serveur dans lequel un processus exécute les fonctions de dialogue

sophistiquées avec l’utilisateur, l’autre gérant les données et exécutant le code
applicatif, et assurant des dialogues simplifiés avec le client.
UWB – RDC 21
Ces deux types de client-serveur sont voisins. Cependant, le Rhabillage permet de

reprendre des applications existantes effectuant par exemple des dialogues mode
caractères, et de le connecter à une autre machine transformant les dialogues
modes caractères en dialogue graphiques, avec fenêtre, boutons, menus, etc.
déroulants, machine assurant la présentation des messages à l’utilisateur peut
être un serveur graphique, par exemple X, motif, ou Windows. Dans ce cas, la
machine exécutant le code applicatif dialogue avec le serveur graphique, par
exemple par RPC. On a donc là un dialogue client-serveur renversé où la machine
gérant les données est cliente de la machine gérant l’interface utilisateur, ce qui
est aussi le cas pour le serveur de présentation.
Le client-serveur le plus répandu aujourd’hui est le client-serveur de données.

Cette architecture permet par exemple à un client type PC d’aller accéder des
données partagées gérées par un serveur SQL.
c) C/S de données (Data C/S)
Type de client-serveur dans lequel un programme applicatif contrôlé par une

interface de présentation sur une machine cliente accède à des données sur une
machine serveur par des requêtes de recherche et mise à jour, souvent exprimée
avec le langage SQL.
Le serveur de données gère une ou plusieurs bases de données. La base de

données est accédée par le langage SQL (structured Query language). De plus en
plus souvent, elle intègre des procédures stockées, procédures applicatives
recevant des paramètres d’entrée, accédant à la base, et retournant des
paramètres de sorties. Ainsi, le client-serveur de données devient de plus en en
souvent, dans sa nouvelle génération, un client-serveur de procédures défini
comme suit.
d) C/S de procedures (Procedure C/S)
Type de client-serveur dans lequel un programme applicatif contrôlé par une

interface de présentation sur une machine cliente sous-traite l’exécution de
procédures applicatives à une machine serveur, ces procédures encapsulant
souvent une base de données.
Parfois, les auteurs opposent le client-serveur de données, où aucun code

applicatif n’est exécuté par le serveur, au client-serveur de procédures, où une
partie du code applicatif est exécuté par le serveur.
Le premier est appelé client-serveur de premier génération, alors que le second

constitue le client-serveur de deuxième génération. Dans le premier cas, les
données sont déplacées vers le programme applicatif, alors que dans le second du
code applicatif est installé sur le serveur puis exécuté sur demande du client.
Nous n’opposerons pas client-serveur de données et client-serveur de procédures.
Dans une architecture de deuxième génération, le serveur de procédures inclus
un serveur de données basé sur SQL. Le client peut accéder directement aux
données via SQL, ou appeler des procédures qui manipulent les données. Le
client-serveur de deuxième génération implique donc une intégration du client-
serveur de données et de procédures.
UWB – RDC 22
II.4. Le C/S de données et procédures
La tendance est donc d’aller vers un système d’information du type client-serveur

de données et procédures. De plus en plus souvent, ce type de client-serveur
permet de mettre en commun des procédures communes autour de la base de
données au niveau du serveur. Et donc, de répartir les traitements entre client et
serveur.
Plus précisément, les composants d’une telle architecture (cfr. Figure n°5) sont le
suivant :
1. Les clients. Ils supportent le code de l’application non lié directement aux
données. Ce code est réalisé grâce à un outil de développement
d’application. Il implémente les dialogues interactifs avec les utilisateurs, les
traitements spécialisés des messages, l’affichage des résultats.
2. Le serveur. Il assure le stockage, la distribution, la gestion de la

disponibilité et de la sécurité des données. Il permet l’accès transactionnel
et décisionnel aux informations. Classiquement, il regroupe les
fonctionnalités du SGBD et sera aujourd’hui bâti autour du modèle
relationnel, qui est simple, clair et évolutif. Il devra aussi autoriser la mise
en commun de traitements communs, souvent liés aux données de la base,
par le moyen de procédures stockées.
3. Le réseau. Avec les protocoles réseau de transport et d’échange de requêtes,

il permet le transfert des demandes et des résultats. Il assure la
convertibilité des outils clients au serveur ; l’outil de connectabilité permet
l’encodage des requêtes en messages sur le client, et le décodage sur le
serveur, et vice versa pour les réponses.
Figure n°9 : Les composants de l’architecture C/S de données
Application
Outil applicatif Client
Outil de connectabilité
Protocole réseau
Commandes SQL
Réseau
Résultat
Protocole réseau
Outil de connectabilité Serveur
Serveur BD
Base de données
UWB – RDC 23
Les intérêts techniques d’une architecture client-serveur de données et procédures

sont multiples. Parmi ceux-ci nous citerons les suivants :
 La diminution du codage des applications. L’application ne gère pas la

sécurité et la cohérence de l’information. Les procédures de gestion et
contrôle des données sont codées une fois pour toute au sein du serveur.
L’accès aux informations s’effectue via SQL. Langage de haut niveau
normalisé.
 La mise en commun des procédures réutilisables. En effet, avec les
serveurs modernes, il est possible de développer des bibliothèques de
procédures accédants intensivement à la base sur le serveur. Les données
peuvent ainsi être encapsulées par les fonctions de service. Mieux, des
règles de gestion déclenchées automatiquement lors des mises à jour
peuvent être programmées au niveau du serveur.
 La diminution du trafic réseau. Celui-ci ne véhicule plus que les données
utiles (requêtes, résultats). Après sélection et transformation des données
sur le serveur. De plus, grâce aux procédures stockées, il est possible de
limiter le trafic aux seuls paramètres nécessaires aux transactions.
 La gestion transactionnelle fiable des données. Le serveur fournit à tous
les clients la gestion de transactions atomiques, cohérentes, à mises à jour
isolées, et à effets durables (ACID). Il gère les journaux et sauvegardes pour
assurer les reprises.
 La sécurité des accès aux données. Le serveur permet d’authentifier les
utilisateurs et de contrôler les droits d’accès selon les autorisations allouées
aux utilisateurs ou aux groupes d’utilisateurs.
 L’optimisation et l’administration centralisée des données. L’efficacité
des accès disques est gérée par le SGBD au niveau du serveur qui maintient
une gestion centralisée des chemins d’accès et une optimisation
sophistiquée des requêtes selon des modèles de coûts paramètrés. Ceci
permet de concentrer le travail important d’administration des données sur
un lieu unique, au profit de tous.
II.5. Les fonctions des serveurs de données
Le client-serveur de données (et souvent de procédures) s’appuie sur un serveur

de données. Les serveurs de données sont basés sur les SGBD relationnels, dont
nous rappelons ci-dessous les fonctions essentielles.
5.1 Le modèle relationnel

Le modèle relationnel a été introduit par E.F. Codd. Ce modèle est aujourd’hui
utilisé par la plupart des serveurs de données, bien que quelques uns
commencent à proposer le modèle objet. En effet, le modèle relationnel présente
plusieurs avantages :
1. Il permet un haut degré d’indépendance des programmes d’applications par
rapport à la représentation interne des données – donc des clients au serveur -, les
clients ne voyant que des tables logiques et étant affranchis de la gestion des
méthodes de stockages et des chemins d’accès (index).
2. Il offre un langage de définition et de manipulation de données normalisé, basé sur
des requêtes non procédurales qui permettent des transferts d’ensemble de lignes
constituant de véritables sous-tables entre clients et serveurs.
UWB – RDC 24
3. Il fournit une base solide pour traiter les problèmes de cohérence des données, en
supportant notamment des contraintes d’intégrité basées sur la logique du premier
ordre, et la possibilité d’intégrer à la base des règles de gestion complexes.
4. C’est un modèle extensible permettant de modéliser et manipuler simplement des
données tabulaires, mais pouvant être étendu pour gérer des objets complexes
longs voire structurés.
Le modèle relationnel est basé sur le concept mathématique de relation. Les

ensembles de données de départ sont appelés domaines.
a) Le Domaine (Domain) : Ensemble de valeurs de données caractérisé par un
nom.
Un domaine est en théorie un ensemble quelconque de valeurs, par exemple un
ensemble d’entiers ou un ensemble de figures géométriques. Les domaines
représentent par des valeurs atomiques – c'est-à-dire considérés comme un
tout indissociable – les objets dont on parle dans la base. Dans les SGBD
relationnels, la notion de domaine est souvent confondue avec celle de type, les
seuls domaines supportés étant de base du système. La notion de domaine est
cependant beaucoup plus riche, car un domaine peut être défini en extension
(en donnant la liste des valeurs composantes) ou en compréhansion (à partir de
contraintes définies sur un type).
Les relations modélisent les idées qui relient les objets (codés par des valeurs)
des domaines entre eux. Le concept de relation est défini à partir de celui
cartésien, bien connu en mathématique : rappelons que le produit cartésien de
n domaines D1xD2. Dn est l’ensemble des n-uples ou tuples <d1, d2…dn> que
l’on peut constituer en choisissant des valeurs d1, d2 de D2, …. dn de Dn.
b) La Relation : Sous-ensemble du produit cartésien d’une liste de domaines

caractérisée par un nom.
Etant définie comme un sous-ensemble d’un produit cartésien, une relation est
composée de tuples. Une représentation des relations sous forme de tables a
été retenue dans les SGBD relationnels, si bien que l’on confond relation et
table. Chaque ligne correspond à un tuple. Chaque colonne correspond à un
domaine de produit cartésien; un même domaine peut bien sûr apparaître
plusieurs fois. Afin de pouvoir distinguer les colonnes et de rendre leur ordre
sans importance tout en permettant plusieurs colonnes de même domaine, il
est nécessaire d’associer un nom à chaque colonne. D’où la notion d’attribut.
c) L’Attribut : Est la colonne d’une relation caractérisée par un nom.
Les règles d’intégrité sont des assertions qui doivent être vérifiées par des
données contenues dans une base. Le modèle relationnel privilégie deux types
de règles d’intégrité, en plus de celles qui sont associées aux domaines : les
contraintes d’entité et les contraintes référentielles. Une contrainte d’entité
impose l’existence d’une clé documentée permettant d’identifier tout tuple
d’une relation, définie comme suit :
d) La Clé (Key) : Groupe d’attributs minimum dont la valeur permet de
déterminer un tuple unique dans une relation.
Une contrainte référentielle spécifie un lien hiérarchique entre deux tables,
l’une devenant dépendante de l’autre par le biais d’une clé étrangère.
UWB – RDC 25
e) La Clé étrangère (Foreign Key) : Groupe d’attributs d’une table dépendante

dont toute valeur doit apparaître comme valeur de clé dans la table de
référence.
Une telle contrainte permet en particulier de repérer les associations
obligatoires entre entités; par exemple, si toute voiture a au moins un
propriétaire, la table PROPRIETAIRE pourra posséder un attribut N°Véhicule,
clé étrangère dans la table VOITURE.
En résumé, le modèle relationnel est donc très simple du point de vue
modélisation de données. Il repose sur les concepts rappelés à la figure 6. Sa
simplicité fait sa force, notamment pour le développement d’application client-
serveur.
- Relation ou table
- Attribut ou colonne
- Domaine ou type
- Clé
- Clé étrangère
Figure n°10 : Les concepts du modèle relationnel
Les SGBD relationnels permettent donc de gérer des tables peuplées de tuples
dans la base. Afin de permettre une meilleure indépendance des programmes par
rapport aux données, ils supportent des tables virtuelles appelées vues.
Vue (View)
Table virtuelle est ceele manipulée par un utilisateur comme une table de base,
mais dont les tuples sont calculés par une question à partir d’autres tables.
Nous introduisons le concept de vue, car il est particulièrement important en

client-serveur. Une vue appropriée est gérée au niveau d’un serveur apporte à
l’utilisateur des données répondant directement à ses besoins, réduisant ainsi les
trafics réseaux et les calculs sur le client.
5.2. Langage SQL
Le langage SQL a été initialement développé par IBM à San-José dans le cadre du
projet Système R (comme relationnel). Tout d’abord appelé SEQUEL, il est devenu
le standard pour décrire et manipuler les bases de données relationnelles depuis
1986. A cette date, une première version fut normalisée sous le nom de SQL. En
1992, une version étendue appelé SQL2 a été acceptée comme standard
international. Une version très étendue, appelée SQL3, intégrant en particulier un
langage de programmation de modules et de procédures, mais aussi objet est en
préparation pour 1997-1998. Nous présentons ci-dessous succinctement ces trois
versions de SQL, appelées SQL1, SQL2 et SQL3 par le groupe de normalisation
nord américain (AINSI).
5.2.1. SQL1 : Le standard de base
SQL1 a donc été accepté comme standard international en 1989.
Les quatre verbes de base du langage sont SELECT, INSERT, UPDATE et DELETE.
Il existe de nombreuses opérations additionnelles afin de définir et modifier les
UWB – RDC 26
schémas des tables, définir des contraintes d’intégrité, définir des vues, accorder
ou retirer des autorisations, gérer des transactions atomiques. Plus précisément,
le standard comporte quatre parties :
 le langage de définition de schémas (tables, vues) ;

 le langage de manipulation (sélection et mises à jour, contrôles) ;
 la spécification de modules appelables (procédures) ;
 l’intégration aux langages de programmation (curseurs).
Le langage de définition de schémas comporte deux verbes afin de créer les tables
et les vues, CREATE TABLE et CREATE VIEW. Le langage de manipulation se
compose des verbes de base SELECT, INSERT, UPDATE, DELETE pour
respectivement sélectionner, insérer, mettre à jour, supprimer des tuples dans
une base. Les verbes OPEN, FETCH, et CLOSE permettent l’intégration aux
langages de programmation de troisième génération (Cobol, c, fortran, etc.) :
FETCH lit à chaque appel le tuple suivant du résultat d’un SELECT, pointé par un
curseur. Le curseur doit être préalablement ouvert par la commande OPEN
CURSOR. Il est fermé en fin d’utilisation par la commande CLOSE CURSOR.
Le langage SQL est enrichi par le langage de contrôle qui comporte les verbes
GRANT et REVOKE pour attribuer et retirer des droits d’accès aux utilisateurs,
BEGIN TRANSACTION, END TRANSACTION, COMMIT, et ROLLBACK pour gérer
des transactions atomiques.
NB : Nous nous limiterons dans ce volume, à titre documentaire, au SQL1. Tandis que le
SQL2 et le SQL3 seront détaillés dans le Volume 2 de ce même thème.
UWB – RDC 27
IIère partie : Le langage XHTML
Chapitre III. : Généralités sur le XHTML et le CSS
La création d’un site web est une opération logique qui a pour sous-bassement, en
entrée, des informations orientées vers l'ordinateur. De ce point de vue, seul le
texte ne suffit pas dans le site, par contre, on aura à insérer des images, faire des
liens etc...
Et pour expliquer à l'ordinateur les opérations à faire, il va falloir utiliser un

langage qu'il comprend.
Ainsi, il existe des langages qui servent à créer des programmes, comme le C++ ou
encore le Java. Ces langages sont néanmoins complexes et destinés à des
personnes qui ont déjà quelques connaissances en informatique.
Cependant, les langages XHTML et CSS, eux, servent précisément à créer des sites
web, et ils ont été créés de manière à être simples à utiliser.
Dans ce cadre, nous allons essayer d’apprendre deux langages à la fois dans un
premier temps, et ces deux langages serviront à faire quelque chose de précis, tant
qu’ils se complètent tout naturellement pour aboutir à un site web.
III.1. Définition
a) XHTML : c'est l'abréviation de « eXtensible HyperText Markup Language ».

Il n’a de l’existence qu’avec le contenu de son site web.
Il renferme des informations logiques du genre, "Je suis Ingénieur finaliste

de l’UWB", ceci est le texte principal de la page à afficher, ou du genre image
à afficher etc...
Au côté de XHTML existe une autre version dénommée HTML. Les deux sont
quasiment identiques et peuvent être utilisées pour créer des pages web. Le
XHTML fonctionne cependant sur des règles un peu plus strictes que le
HTML.
Bref, savoir programmer en XHTML ayant plus de fonctionnalités, c’est
savoir programmer en HTML ayant moins de fonctionnalités.
Raison pour laquelle nous nous attarderons plus sur XHTML dans ce cours.
b) CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style en

cascade").
Ce langage sert uniquement à présenter la page web par une bonne mise en
page et une bonne mise en forme.
En résumé, bien qu’ils soient complémentaires, le XHTML permet d’écrire le

contenu des pages web, tandis que le CSS de présenter ce contenu.
UWB – RDC 28
III.2. Les éditeurs
Pour coder les instructions dans le langage XHTML ou CSS, nous aurions besoin
d’un Editeur afin de créer les sites web.
Et les logiciels permettant de créer des sites web en sont nombreux dans les
méandres informatiques, certains d’ailleurs reviennent à trop chers.
Quant à nous et dans le cadre de ce cours, nous allons utiliser le Bloc-Notes ou le

Notepad++, qui s’installent par défaut et qui sont téléchargeables gratuitement.
III.3. Les navigateurs
Un navigateur est un programme qui permet de récupérer les instructions codées

en XHTML ainsi qu’en CSS et de les afficher sur un espace appelé « Site Web ».
Par exemple dans CSS, vous avez les instructions qui demandent d’afficher "UWB
en gras", le navigateur n’affichera que ce qui lui est demandé, c'est-à-dire UWB en
gras.
Et dans la série des navigateurs nous avons :
Navigateur Système Nature Commentaires

Google Chrome
Windows
Le navigateur de Google, simple
Mac Téléchargeable
d'emploi et très rapide.
Linux
Mozilla Firefox
Windows
Le navigateur de la fondation
Mac Téléchargeable
Mozilla, célèbre et réputé.
Linux
Internet Explorer
Installation par défaut avec le Le navigateur de Microsoft, qui
Windows
Windows et aussi téléchargeable équipe tous les PC Windows.
Safari
Windows Installation par défaut avec le Mac et Le navigateur d'Apple, qui équipe
Mac aussi téléchargeable sous Windows tous les Mac (et iPhone/iPad.)
Pour s'assurer que son site fonctionne normalement sur chacun d'eux, Il est
conseillé d'installer plusieurs navigateurs sur son ordinateur.
UWB – RDC 29
Il existe de nombreux autres navigateurs, encore moins utilisés mais qu'il faut
connaître tout de même :
 Opera
 Netscape
 Konqueror (pour Linux)
 Lynx (pour Linux)
 etc...
a) Internet Explorer
 Ce navigateur est le plus répandu de tous les navigateurs et il s’installe par

défaut avec toutes les versions de système d’exploitation de Windows. La
dernière version d'Internet Explorer est la 9 (dit "IE9").
Et ses anciennes versions sont toujours utilisées. Elles supportent mal le CSS :
 IE 6 : livré avec Windows XP

 IE 7 : livré avec Windows Vista
 IE 8 : livré avec Windows 7
 IE 9 : livré avec Windows 7
b) Google Chrome
Le Google Chrome est l’un des navigateurs le plus récent et le plus dynamique qui
a vu jour après l’Internet Explorer et Firefox. Il a connu une évolution très rapide
et il est aussi parmi les navigateurs les plus réactifs et rapides à s'exécuter.
Comme son nom l'indique, ce navigateur a été développé par Google. De nouvelles
versions paraissent régulièrement et prennent en charge les dernières
fonctionnalités des langages XHTML et CSS. Google Chrome a l'avantage de se
mettre à jour fréquemment sans intervention de l'utilisateur.
c) Mozilla Firefox
Mozilla Firefox est un navigateur Internet gratuit, développé et distribué par la

Mozilla Foundation aidée de centaines de bénévoles grâce aux méthodes de
développement du logiciel libre/open source et à la liberté du code source.
UWB – RDC 30
Chapitre IV : Les éléments de XHTML
XHTML est un langage de structuration et de balisage servant à écrire des pages

pour le World Wide Web.
IV.1. Les balises
Les balises servent de références ou de marqueurs pour indiquer au navigateur.
Elle commence par "<" et se termine par ">".

Par exemple, une balise permet d'indiquer que tel texte est le titre de votre page,
cet autre texte est une citation etc...
<TexteTitre>< TexteCitation>
En XHTML, il existe 2 types de balises :
- balises paires ;
- balises singletons.
 Les balises paires : ce sont les plus courantes. On écrit la première balise,
on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash
devant "/". Par exemple :
1 <titre>Bienvenue sur le site de l’UWB!</titre>
La première balise <titre> indique le début du titre, et elle est refermée plus
loin avec </titre>.
Le navigateur comprend que ce qui est entre <titre> et </titre> est le titre de
votre site web, et que celui-ci est "Bienvenue sur le site de l’UWB!"
 Les balises singletons : Sont celles utilisées généralement pour insérer un

élément dans une page.
Ce type de balise se termine toujours par un slash "/", mais cette fois le
slash se trouve à la fin de la balise. Par exemple la balise qui permet
d'insérer une image :
1 <image />
Cette balise indique juste qu'il y a une image à cet endroit.
Bref, Il est donc facile de repérer le type de balise on a affaire :

<uwb> , ici, il s'agit d'une balise existant par paire, qui veut dire que la deuxième
</uwb> peut être trouvée un peu plus loin, pour indiquer la fermeture de la balise.
<uwb />, c'est une balise singleton.
IV.2. Les attributs
Les attributs sont un moyen de donner des précisions sur une balise. On peut
trouver des attributs sur les deux types de balises (paire ou singleton).
UWB – RDC 31
Par exemple, prenons la balise singleton <image />.
1 <image nom="ilungadelu.jpg" />
Ici, l'attribut est "nom", et il a pour valeur "ilungadeloux.jpg". Cela indique que
l'image que l'on veut insérer s'appelle "ilungadeloux.jpg".
Dans le cas de balises paires, les attributs sont dans la balise ouvrante et pas
dans la balise fermante. Par exemple, ce code indique que la citation est de
NSULU MUEMBO et qu'elle date du 01 mars 2009 :
1 <citation auteur="NSULU MWEMBO" date="01/03/2009">

2 Une idée sur les obstacles majeurs à l’approbation des NTIC en RDC, Approche socio-analytique
3 </citation>
Remarques :
 on ferme la balise en mettant simplement </citation> sans répéter les

attributs.
 Les balises existent soit par paires (<balise> </balise> ) ; soit en singleton,
mais dans ce cas il faut mettre un / à la fin de la balise (ex. : <balise /> )
 Les noms des balises et attributs s'écrivent toujours en minuscules (ex. :
"citation, auteur, date")
 Les valeurs des attributs peuvent contenir des majuscules (ex. : "Serge
Kapiamba")
 S'il y a des attributs dans une balise paire, on ne les met que dans la balise
ouvrante (cf : exemple ci-dessus).
IV.3. Création de pages XHTML
Dans cette section, nous allons exploiter maintenant les éditeurs vus
précédemment, tels que le Bloc-notes, Notepad++ ou un autre et aussi tester la
première page web.
Voici le code de base d'une page web, qui va servir de point de départ à chacune
de nos pages :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

1
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
3
<head>
4
<title>Bienvenue sur le site de l’UWB !</title>
5
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6
</head>
7
<body>
8
</body>
9
</html>
Recopiez ce code dans votre éditeur, et faites « enregistrer sous » votre la page avec
l'extension .html ou .htm.
UWB – RDC 32
Ensuite, choisir un dossier où l’on doit enregistrer la page. La page apparaîtra

avec le logo du navigateur configuré par défaut. Ce qui peut être :
Si IE est installé par défaut. Si Mozilla est installé par défaut.
Ce qui revient à dire que l’icône de l’explorateur accompagnera le fichier. Pour

UWB.HTML avec IE:
Pour UWB1.HTML avec Mozilla :
UWB – RDC 33
Explications relatives aux instructions reprises dans l’exemple ci-dessus :

1
2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3
<head>
4
<title>Bienvenue sur le site de l’UWB!</title>
5
6
</head>
7
<body>
8
</body>
9
</html>
Voici les explications ligne par ligne :

1. Sur la toute première ligne se trouve la déclaration "Doctype". C'est une
balise un peu particulière, et c'est la seule qui n'obéit pas aux règles
données ci-dessus.
Cette balise sert à indiquer au navigateur que l’environnement est une page
XHTML, et que la version utilisée est 1.0 du langage XHTML.
2. Vient ensuite la balise <html>. C'est la balise principale qui englobera toute
la page (x)HTML. Elle est fermée en dernier lieu avec </html>, qui indique
que la page (x)HTML s'arrête et Il n'y a donc rien après le </html>.
La balise <html> contient 2 attributs :
o xmlns : cet attribut, obligatoire, indique une adresse traitant du

xHTML.
o xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée
votre page web.
Une page web en français = "fr"

en anglais = "en"
en italien = "it"
en espagnol = "es" etc...
3. La balise <head> contient quelques informations d'en-tête pour la page web.
Elle est refermée un peu plus loin.
1. A l'intérieur de la balise <head>, on a la balise <title>. Elle est très

importante : c'est elle qui contient le titre de la page web. Ici, le titre
est "Bienvenue sur le site de l’UWB".
2. Ensuite, une balise <meta>. Il existe beaucoup de balises de ce type,
que l’on vera plus tard parce qu'elles ne sont pas indispensables.
Enfin, la fermeture de la balise </head> commence une nouvelle balise : <body>
C'est entre <body> et </body> que tout le contenu de votre page web sera placé.
UWB – RDC 34
IV.4. Les commentaires
Les commentaires sont des informations qui sont saisies de manière brute et qui
ne sont susceptibles à être traitées, sinon à orienter l’informaticien dans sa
programmation.
Ils peuvent aussi utilisés pour marquer des repères si la page XHTML est très
vaste, ou pour servir de rappel.
Un commentaire est une balise un peu spéciale commençant par :


Ci-dessous, un exemple de commentaires :

1
2
3
<head>
4
5
6
</head>
7
<body>
8
<! --- Nous demandons à J.ELUMBA, B.ILA, SULU, etc… de ne pas poser des questions -->
9
</body>
10
</html>
UWB – RDC 35
Chapitre V. : L’organisation du texte
La première étape pour "remplir" un site, serait d'y saisir du texte en lui donnant
un contenu. Et dans ce texte, nous allons voir comment séparer les différents
types de texte selon leur nature.
Et pour cela, nous allons voir successivement dans cette section :

 Comment rédiger un paragraphe
 Comment fonctionnent les titres
 Comment donner de l'importance à certains mots de son texte
 Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées,
mais que devons connaître.
V.1. Les paragraphes
En XHTML, les corps des textes sont repris en paragraphes et chaque paragraphe
se trouve entre les balises <p> et </p> (qui signifient "paragraphe").
Exemple :
<p> Différentes nouvelles fonctions tentent d'être attribuées aux chiens
1 policiers comme la recherche d'armes à feu, la détection de produits
inflammables à l'origine d'incendie, la détection de cadavres </p>
 <p> signifie "Début du paragraphe"
 </p> signifie "Fin du paragraphe"
Dans le chapitre précédent, nous avons vu que le contenu du site web doit être
dans les balises <body></body>.
Ici, nous allons mettre notre paragraphe entre ces deux balises, et nous aurons
enfin notre première page web avec du texte.

1
2
<head>
3
4
5
</head>
6
<body>
7
<p> Différentes nouvelles fonctions tentent d'être attribuées aux
8 chiens policiers comme la recherche d'armes à feu, la détection de produits
9
inflammables à l'origine d'incendie, la détection de cadavres </p>
10
</body>
</html>
UWB – RDC 36
V.2. Le Saut de ligne
En XHTML, la touche "Entrée" ne crée pas automatiquement une nouvelle ligne
Et pour écrire un deuxième paragraphe, on va utiliser une deuxième balise <p>,

ce qui va nous donner plusieurs balises de paragraphes.
Exemple :
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
2 strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
4 <head>
5 <title>Bienvenue sur le site de l’UWB </title>
6
</head>
7
<body>
8
<p>
9
Différentes nouvelles fonctions tentent d'être attribuées aux
10
chiens policiers comme la recherche d'armes à feu, la détection de produits inflammables à l'origine d'incendie, la
11
détection de cadavres </p>
12
<p>
13
Pour l'instant c'est un peu vide Marie KAJA et Hélène KANKU, mais revenez dans 2-3 jours quand j'aurai
14 appris un peu plus de choses, je vous assure que vous allez être surpris !
15 </p>
16 </body>
17 </html>
Et si nous devons aller à la ligne, nous allons utiliser une balise qui sert juste à
indiquer qu'on doit aller à la ligne : <br />.
On doit obligatoirement la mettre à l'intérieur d'un paragraphe.
Exemple :
<head>
</head>
<body>
<p>
Bonjour et bienvenue à l’UWB !<br />
Différentes nouvelles fonctions tentent d'être attribuées aux
chiens policiers comme la recherche d'armes à feu, la détection de produits inflammables à l'origine
d'incendie, la détection de cadavres .
</p>
<p>
Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu
plus de choses, je vous assure que vous allez être surpris !
</p>
</body>
</html>
NB : Théoriquement en XHTML, on peut mettre plusieurs balises <br /> d'affilée pour faire
plusieurs sauts de lignes, ce qui ne sera pas le cas quand on fera le CSS.
<p> </p> : pour organiser le texte en paragraphes.
<br /> : pour aller à la ligne.
UWB – RDC 37
V.3. Les titres
Le XHTML nous donne la possibilité d'utiliser 6 niveaux de titres différents selon

leur importance : Titre très important, Titre important, Titre peu moins important,
Titre encore moins important etc... ; Ce qui va nous donner donc 6 balises de titre
différentes que l'on peut utiliser :
 <h1> </h1> : signifie "titre très important". En général, on s'en sert pour
afficher le titre de la page en haut.
 <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour
organiser vos paragraphes et leur donner un titre.
 <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un
"sous-titre" si vous voulez)
 <h4> </h4> : titre encore moins important.
 <h5> </h5> : titre pas important.
 <h6> </h6> : titre vraiment pas important du tout.
NB : ne confondez pas avec la balise <title> qui affiche le titre de la page dans la
barre de titre du navigateur comme nous l'avons vu. Les titres <h1> et compagnie
eux, servent à créer des titres qui seront affichés sur la page web.
Exemple :
<head>
</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>
UWB – RDC 38
Dans l’exemple ci-après, nous allons voir comment se distinguent les différents
titres selon leur importance :

<head>
<title>Le Site de l’UWB</title>

</head>
<body>
<h1>Bienvenue sur le Site de l’Institut Supérieur Technique d’Informatique Appliquée </h1>
<p>
Bonjour et bienvenue aux Ingénieurs de L2 <br />
Votre Site est très pratique
</p>
<h2>Bienvenue sur le Site de l’Université de Mbujimayi </h2>

<p>
Ce Site vous propose des cours de médecine destiné aux pédiatres : aucun effort ne peut
être fait pour décortiquer ce cours de XHTML.
</p>
<p>
Il est inconcevable qu’un finaliste Ingénieur informaticien terminant son cycle ne puisse pas
maîtriser la programmation réseau.
</p>
<h2>Une communauté des étudiants non homogène</h2>

<p>
Ce cours est capital pour ceux qui veulent se hisser dans les sciences de nouvelles
technologies d’information et de communication ?<br />
Et aussi, être compétitifs sur le marché de l’emploi. Entant que chercheur produit de l’UWB,
je dois aussi m’y mettre pour découvrir et contribuer à cet élan technologique.
</p>
</body>
</html>
V.4. La mise en valeur du texte
Le langage XHTML dispose de 2 formes de mise en valeur :
 La première permet de mettre "un peu" en valeur les mots du texte.

 La seconde permet de bien mettre en valeur les mots.
a) Première forme de mise en valeur
Pour mettre "un peu" en valeur votre texte, vous devez utiliser la balise <em>
</em>. Son utilisation est très simple : entourez les mots à mettre en valeur par
ces balises, et c'est bon ! Je reprends un peu l'exemple de tout à l'heure, et j'y
mets quelques mots en évidence :
UWB – RDC 39

<head>
</head>
<body>
<p>
Bonjour et bienvenue à l’UWB !<br />
Ceci est un premier pas, alors <em>soyez indulgents</em> s'il vous plaît, on
apprend petit à petit comment programmer dans un environnement XHTML.
</p>
</body>
</html>
Comme vous pouvez le voir, le texte avec la balise <em> est mis en italique. Vous
pouvez donc vous servir de cette balise pour mettre des mots en italique.
b) Deuxième forme de mise en valeur
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> :

<head>
<title>Bienvenue sur le site UWB !</title>
</head>
<body>
<p>
Bonjour et bienvenue sur ce site !<br />
Ceci est un premier pas, alors <strong>soyez indulgents</strong> s'il vous plaît, on apprend
petit à petit comment programmer dans un environnement XHTML.
</p>
</body>
</html>
V.5. Les autres balises
Il s’agit, ici, d’utiliser les balises qui vont nous permettre :

 de mettre en exposant ou en indice ;
 de Saisir les citations ;
 de saisir les acronymes.
UWB – RDC 40
a) Exposant et indice
Pour mettre en exposant certains mots ou caractères, on utilise la balise <sup>.

Les mots seront alors affichés en hauteur.
Exemple :
1
2
<head>
3
<title>Un peu d'histoire...</title>
4
5
</head>
6
<body>
7
<h1>Un peu d'histoire...</h1>
8
<p>
9
<em>Le saviez-vous ?</em><br />
10
Le langage XHTML est le langage qui nous permet de créer des sites web en ce début de
11
XXI<sup>ème</sup> siècle.<br />
12
Avant, vers la fin du XX<sup>ème</sup>, on utilisait le langage HTML, qui disparaît
13
aujourd'hui peu à peu au profit de XHTML
14
</p>
15
</body>
</html>
Pour mettre en indice (c'est-à-dire pour écrire le texte en bas de la ligne en petit),
on utilise cette fois la balise <sub>.
Exemple :
1 <p>
2 x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub>
3 </p>
b) Les citations
On peut faire 2 types de citations :

 Des citations courtes, dans un paragraphe : les citations courtes
s'effectuent à l'intérieur d'un paragraphe. On encadre la citation par la
balise <q>, qui fonctionne comme <em>, <strong>, <sup> etc...Voici un
exemple de citation courte au milieu d'un paragraphe :
<p>Vous souvenez-vous de la phrase célèbre qu'a prononcée Neil Armstrong en posant le
premier pied sur la Lune ? <q>C'est un petit pas pour l'Homme, un grand pas pour
l'Humanité</q>. C'était un certain 20 Juillet 1969...</p>
 Tandis que les citations longues, qui peuvent aller au delà d'un paragraphe,
on utilisera la balise <blockquote>.
UWB – RDC 41
Et cette-fois là, les balises de paragraphe <p> seront placées à l'intérieur du

blockquote comme ceci :

<head>
<title>Bienvenue au Département Informatique !</title>
</head>
<body>
<h1>Le Corbeau et le Renard</h1>
<p>Voici ce qui est sans aucun doute une des plus connues fables de <em>La
Fontaine</em> :</p>
<blockquote>
<p>
Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l'odeur alléché,<br />
Lui tint à peu près ce langage :<br />
"Hé ! bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli ! que vous me semblez beau !<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois."<br />
A ces mots le Corbeau ne se sent pas de joie ;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l'écoute :<br />
Cette leçon vaut bien un fromage, sans doute. "<br />
Le Corbeau, honteux et confus,<br />
Jura, mais un peu tard, qu'on ne l'y prendrait plus.
</p>
</blockquote>
</body>
</html>
En résumé, nous pouvons dire qu’en XHTML, on distingue 2 types de balises :

 Les balises de type inline : ce sont des balises que l'on utilise à l'intérieur
d'un paragraphe. C'est le cas notamment des balises <strong>, <em>, <q>
etc...
 Les balises de type bloc : ces balises servent à structurer la page en
plusieurs "blocs". La première qu'on a apprise, c'est la balise <p>, mais il y a
aussi les balises de titre <h1>, <h2>, <blockquote>... Chacune de ces
balises constitue un bloc séparé.
c) Les acronymes
Un acronyme est une suite d'initiales utilisées généralement pour raccourcir

certains noms, comme par exemple DOS, WEP, BIOS etc...
Exemple :
<p>Le terme <acronym title="Local Area Network">LAN</acronym> désigne un réseau local qui
1
relie plusieurs ordinateurs dans une zone limitée.</p>
UWB – RDC 42
Chapitre VI. : Création des liens
VI.1. Les liens relatifs et les liens absolus
Il existe, en XHTML, deux types de liens, à savoir :

 Les liens internes à son site : Dans cet environnement, le site comporte
plusieurs pages XHTML où l’on passera d’un lien d'une page à une autre, et
cette relation est appelée lien relatif. Et général, ce type de lien est toujours
court.
Exemple : "fichiers/cible.html".
 Les liens vers d'autres sites : ce sont des liens vers d’autres sites, du genre :
"http://www.UWB_rdc1.com", ou vers un fichier précis (par exemple
"http://www.uwb_rdc1.com/fichier.html"). Cette relation est appelée liens
absolus et, contrairement aux liens relatifs, ils commencent souvent par
"http://".
Cas pratique
Supposons maintenant que vous ayez 2 pages XHTML qui se trouvent dans le
même dossier sur votre disque dur :
c:\site\source.html
c:\site\cible.html
Vous voulez faire un lien de source.html vers cible.html. Ce cas est très simple,
comme les fichiers se trouvent dans le même dossier, il suffira juste d'écrire
"cible.html" !
Si les fichiers ne se trouvent pas dans le même dossier :
 Si votre fichier cible.html se trouve dans un sous-dossier, par exemple :

c:\site\dossier\cible.html
Le fichier source.html garde toujours son emplacement.
Il faudra écrire le nom du dossier d'abord "dossier/cible.html". S'il y a
plusieurs sous-dossiers, il suffit de les écrire à la suite :
"dossier1/dossier2/cible.html" (cfr. Cours de DOS Système d’Exploitation
G1 Informatique).
NB : Sur le Web, on n’utilisera que des slash (/) et non des (\) utilisé par le
système d’exploitation de Windows.
 Si le fichier cible.html se trouve dans un dossier parent, par exemple dans :

c:\cible.html
Alors là, pour remonter d'un dossier il faudra écrire "../cible.html"
UWB – RDC 43
VI.2. Le lien vers une autre page
Pour réaliser un lien vers une autre page, on utilise la balise <a> à laquelle on
ajoutera l'attribut "href" pour indiquer l'adresse de la page cible (la page vers
laquelle le lien nous amène).
<p>Hep ! Je connais un site qui est vraiment super : le <a href="http://www.uwb_rdc1.com">Site

1
de UWB RDC</a><br />
2
N'hésitez pas d’aller le visiter, il vaut <em>vraiment</em> le coup d'oeil </p>
NB : Le texte du lien est placé entre les balises <a> et </a>, et l'adresse de la page
dans le href=""
Le lien ainsi crée, est appelé « lien absolu vers un autre site ("http://"...). Tandis
qu’un lien relatif est celui qui a les pages à relier se trouvant dans le même
dossier.
Exemple :
1 <h1>source.html</h1>
2
3 <p>Tu te trouves sur source.html<br />
4 Souhaites-tu visiter <a href="cible.html">Cliquez ici pour ouvrir le fichier ciblel</a> </p>
1 <h1>cible.html</h1>
2
3 <p>Bravo ! Tu viens d'atterrir sur cible.html !</p>
VI.3. Info-bulle d'aide sur le lien
Une Info-bulle est un objet qui permet d’informer ou de donner de l’aide à

l’utilisateur qui place le pointeur sans cliquer sur le lien, et ce dernier affichera le
message d’aide relatif.
A l’aide de l’attribut title, XHTML nous crée une Info-bulle qui affiche un message
lié à l’objet pointé.
Exemple :
<p>Allez donc visiter le <a href="http://www.uwb_rdc1.com" title="Site réservé aux
1
Ingénieurs">Site de l’UWB</a></p>
Ce qui donne :
UWB – RDC 44
VI.4. Le lien d’envoi de mail
Le lien d’envoi de mail se fait à l’aide de "mailto:" et ensuite, saisir l'adresse où

l’on envoie le mail. En effet, rien ne change au niveau de la balise, on modifie juste
la valeur de l'attribut href comme ceci :
href="mailto:[email protected]"
Exemple :
<h2>Adressez-vous au Secrétariat de l’UWB</h2>
1
2
<p>Pour nous contacter, <a href="mailto:[email protected]">cliquez
3
ici</a> !</p>
VI.5. Le lien vers une ancre
Une ancre est un repère qui est placé dans des grandes pages XHTML et qui peut
être utile de faire un lien amenant plus bas dans la même page pour amener
l’utilisateur visiteur directement à la partie recherchée.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors
servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre, ce qui va vous servir ensuite
pour faire le lien vers cette ancre.
Exemple : <h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href
contiendra un dièse (#) suivi du nom de l'ancre.
Exemple : <a href="#mon_ancre">Aller vers l'ancre</a>
Enfin cliquez sur le lien, nous 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 texte et utilisant les ancres :

<h1>Ma grande page</h1>
<p>
Aller directement à la partie traitant de :<br />
<a href="#L2INFO">Ingénieur Concepteur</a><br />
<a href="#L1INFO">Futur Ingénieur</a><br />
<a href="#G3INFO">Gradué Analyste-Programmeur</a><br />
</p>
<h2 id="L2INFO">Ingénieur Concepteur</h2>
<p> Le rôle du cogniticien est de soutirer les connaissances aux experts du

domaine et de traduire ces connaissances dans un formalisme se prêtant à un
traitement automatique, c'est-à-dire en règles. Ces deux tâches sont aussi
délicates l'une que l'autre. En effet, un expert est la plupart du temps
inconscient de la majeure partie de son savoir ; et s'il arrive à en exprimer une
partie, c'est souvent sous une forme qui ne se laisse pas facilement formaliser.
De plus l'extraction de connaissances peut avoir un effet perturbant sur l'expert
: il est bien connu que si l'on demande à un maître aux échecs de réfléchir à sa
UWB – RDC 45
manière de jouer, on observera une baisse de ses performances dans les jours ou
les semaines qui suivent cet effort d'introspection.
L'indépendance entre la base de connaissances et le moteur d'inférences est un
élément essentiel des systèmes experts. Elle permet une représentation des
connaissances sous forme purement déclarative, c'est-à-dire sans lien avec la
manière dont ces connaissances sont utilisées. L'avantage de ce type
d'architecture est qu'il est possible de faire évoluer les connaissances du
système sans avoir à agir sur le mécanisme de raisonnement. Il en est de même
pour nous : un accroissement ou une modification de nos connaissances n'entraîne
pas nécessairement une restructuration en profondeur de nos mécanismes de
fonctionnement.
</p>
<p> Le rôle du cogniticien est de soutirer leurs connaissances aux experts du

fonctionnement./p>

fonctionnement.
</p>
<h2 id="L1INFO">Futur Ingénieur </h2>

UWB – RDC 46
fonctionnement.
</p>

fonctionnement.
.</p>


fonctionnement.
</p>
<h2 id="G3INFO">Gradué Analyste-Programmeur</h2>

UWB – RDC 47

fonctionnement.
</p>
VI.6. Le lien vers une ancre située dans une autre page
Le concept ici est de faire un lien qui ouvre une nouvelle page et qui amène
directement à une ancre située plus bas sur cette page.
En pratique cela est assez simple à faire : il suffit de taper le nom de la page, suivi
d'un dièse (#), suivi du nom de l'ancre.
Par exemple :
<a href="cible.html# G3INFO">
Cela nous amènera sur la page cible.html, directement au niveau de l'ancre appelé
"G3INFO".
Voici une page qui contient 3 liens, chacun amenant vers une des ancres se
trouvant dans les fichiers hmtl différents. Cela revient à dire qu’il faudrait, au
préalable, commencer par crée ces différents fichiers html.
Exemple :
- Créons quatre fichiers HTML distincts, nommés respectivement UWB0.HTML,
UWB1.HTML, UWB2.HTML, UWB3.HTML
- Le premier étant la source, doit nous amener vers les autres se trouvant
toujours dans le même site.
Résolution :
a) Créer le fichier source dans lequel nous aurons les éléments ci-après :
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<head>
<title>Bienvenue sur le site de l’UWB </title>
</head>
UWB – RDC 48
<body>
<h1>Les profils des finalistes UWB<sup>ESU</sup></h1>
<p>
A l’UWB, nous avons les filières ci-après :<br />
<a href="UWB1.html#L2INFO">Ingénieur Concepteur </a><br />
<a href="UWB2.html#L1INFO">Futur Ingénieur Concepteur</a><br />
<a href="UWB3.html#G3INFO">Gradué Analyste-Programmeur</a><br />
</p>

délicates l'une que l'autre. En effet, un expert est la plupart du temps inconscient
de la majeure partie de son savoir ; et s'il arrive à en exprimer une partie, c'est
souvent sous une forme qui ne se laisse pas facilement</p>
b) Créer le 1er fichier cible dans lequel nous aurons les éléments ci-après :
<html xmlns="http://www.google.fr" xml:lang="fr" >
<head>
<title>Bienvenue sur le site de l'UWB !</title>
</head>
<body>
<h1>Bienvenue sur le Site des Ingénieurs</h1>
<h2>Concernant les cours non terminés en l2 licence</h2>

<p>Le rôle du cogniticien est de soutirer leurs connaissances aux experts du
souvent sous une forme qui ne se laisse pas facilement
<h2 id="L2INFO">C'est ça la vraie réponse que tu cherchais, MUKENDI, pour

atteindre l’espace des ingénieurs Aspirants</h2>
<p>Le rôle du cogniticien est de soutirer leurs connaissances aux experts du
souvent sous une forme qui ne se laisse pas facilement
c) Créer le 2ème fichier cible : Idem

d) Créer le 3ème fichier cible : Idem
UWB – RDC 49
IIème partie : Le langage CSS
Chapitre VI. : L’emplacement des codes CSS
Comme nous l’avons vu dans le premier chapitre, le CSS qui signifie : "Cascading
Style Sheets" ou "Feuilles de style en cascade", qui permet de créer des fichiers
Web autonomes et indépendants de XHTML.
Dans la "Feuille de style en cascade" en règle générale, on y saisit des codes CSS
qui constituent un fichier à part qui a comme extension .css au lieu de .html.
Il renferme un fichier dans lequel on définit l'apparence qu’un site peut avoir :
 la couleur ;
 la police du texte ;
 la taille des titres ;
 la position des menus ;
 la couleur ou l'image de fond etc...
Et le code CSS peut être saisi à 3 niveaux différents, selon les méthodes :
 Méthode A : dans un fichier .css (la méthode la plus recommandée)
 Méthode B : dans l'en-tête du fichier XHTML
 Méthode C : dans les balises
Ci-dessous la description de chacune de ces méthodes :
 Dans un fichier .css (Méthode A) :
Comme il est signalé ci-haut, le plus souvent on écrit du code CSS dans un
fichier spécial ayant l'extension .css (contrairement aux fichiers XHTML qui ont
l'extension .html).
C'est la méthode la plus pratique qui présente un grand nombre d’avantages
par la création de plusieurs designs.
NB : En cas d’utilisation de Notepad++, sélectionner le menu "Langage / CSS"

pour activer les options de CSS. Ce qui donne l’apparence ci-après :
UWB – RDC 50
Et dans le fichier XHTML, on va ajouter la balise singleton <link /> dans

les balises <head> </head> qui va permettre de "dire" au fichier XHTML
quel fichier CSS il doit charger :
Exemple :

2 <head>
3 <title>Exemple d'utilisation de CSS externe</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-
5 8859-1" />
6 <link rel="stylesheet" media="screen" type="text/css" title="Design"
7 href="design.css" />
8 </head>
9 <body>
10 <p>Cette page comporte une feuille de style externe. C'est la
11 meilleure méthode à utiliser quand on fait du CSS.</p>
</body>
</html>
La balise singleton <link /> peut comporter plusieurs attributs. Ci-dessous, nous allons
modifier deux d'entre eux :
o title : c'est le nom qui est donné à la feuille de style (n’importe quel
nom peut être repris);
o href : c'est l'emplacement où se trouve la feuille de style sous forme
de lien relatif. Présentement dans cet exemple, le CSS se trouve dans
le même dossier.
o
 Dans le header du fichier XHTML (Méthode B) :
Dans cette méthode, il est aussi possible de taper du CSS directement à

l'intérieur même du fichier XHTML, entre les balises <head> </head>. Alors,
on y mettra une balise <style> </style> à l'intérieur, comme ceci :

1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <head>
4 <title>Exemple de CSS dans le header</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-
6 8859-1" />
7 <style type="text/css">
8 /* Vous taperez votre code CSS ici */
9 </style>
10 </head>
11 <body>
12 <p>Cette page comporte du CSS directement dans le header.</p>
13 </body>
</html>
UWB – RDC 51
Notre attention est attirée sur cette seconde méthode qui ressemble beaucoup
à la première. Cependant, la première solution (utilise un .css externe) est
quand même bien plus pratique, car elle permet de faire changer directement le
design du site. De plus, le fichier ne sera téléchargé qu'une seule fois pour
toutes sur le site, ce qui allègera la taille des fichiers .html et rendra donc le
site plus rapide !
 La méthode "à l'arrache" dans les balises (Méthode C) :
La troisième méthode est la moins recommandée de toutes les méthodes. Elle

consiste à ajouter un attribut style sur les balises pour leur appliquer un style
particulier. Elle est censée reprendre l’attribut style dans toutes les balises. Par
exemple sur un titre :
1 <h1 style="/* Votre style pour cette balise ici */">Titre</h1>
Partant, elle renferme tous les défauts de mauvaise performance d’un langage
de programmation ; Non seulement le CSS sera confus et peu lisible à
l'intérieur des balises, mais en plus il ne permettra pas de profiter de tous les
avantages du CSS, tel que le changement de couleurs de tous les titres du site
en un clic.
Remarque : L'idéal dans cette section serait d'utiliser une feuille de style
externe (= mettre du CSS dans un fichier .css).
Dans le dossier de votre site, il doit y avoir au moins 2 fichiers: un .html et un .css.
UWB – RDC 52
 Le fichier .html contient le code XHTML (qu'on a appris jusqu'ici) avec en

particulier la ligne pour faire la liaison avec le fichier .css :
 Le fichier .css contient du code CSS (que nous allons apprendre à partir de
maintenant) :
UWB – RDC 53
NB : Les résultats que va offrir le CSS, seront perceptibles à travers l’exécution du
fichier HTML (double-cliquez sur l'icône du fichier index.html dans l'explorateur).
N'essayez jamais d'ouvrir le .css : ce fichier ne produira aucun effet.
C'est le .html qui, lors de son ouverture, va charger le .css et appliquer les
informations de style.
VI.1. Application des styles aux balises
Dans la structure du langage CSS, on trouve trois éléments principaux :

 Des noms de balises : Ici, on reprend textuellement les noms des balises
dont on veut modifier l'apparence.
Par exemple, on veut modifier l'apparence de tous les titres <h1>, là on

saisit simplement h1.
 Des propriétés CSS : les "effets de style" de la page sont rangés dans des
propriétés.
Par exemple la propriété color qui permet d'indiquer la couleur du texte et

font-size qui permet d'indiquer la taille du texte etc...
 Les valeurs : Chaque propriété CSS est suivie d’une valeur.
Par exemple, pour la couleur, il faut indiquer le nom de la couleur. Pour la

taille, il faut indiquer quelle taille on veut etc...
Et schématiquement, une feuille de style CSS se présente comme suit :
balise1
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise2
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise3
{
propriete: valeur;
}
NB : Chaque propriété est suivie toujours des "deux-points" (:) puis de sa valeur
correspondante et chaque ligne se termine par un point-virgule (;).
Le point-virgule n'est pas obligatoire s'il n'y a qu'une seule propriété pour la balise
(comme c'est le cas pour la balise 3). Toutefois, il vaut mieux le mettre tout le
temps pour avoir un texte ordonné.
UWB – RDC 54
Exemple : Supposons qu’on veut modifier tous les paragraphes pour qu'ils soient
écrits en bleu, avec une taille de 18 pixels.
Sachant que tous les textes des paragraphes sont entre des balises <p> </p>, on
écrira dans le fichier CSS :
p
{
color: blue;
font-size: 18px;
}
NB : Ne mettez jamais d'espace entre "18" et "px", car sinon le code CSS ne
fonctionnera pas.
A titre de rappel, il faut commencer par créer un fichier indépendant appelé

"design.css" par exemple et mettre les codes ci-dessus.
Ensuite, il va falloir maintenant revenir au fichier XHTML pour tester le CSS.
Il ne faut pas oublier de mettre la balise <link /> pour indiquer où se trouve le
fichier CSS.

<head>
<title>Page d'exemple pour tester le CSS</title>
<link rel="stylesheet" media="screen" type="text/css" title="Essai"
href="design.css" />
</head>
<body>
<h1>Découverte du CSS, la fierté de l’UWB</h1>
<p>
Bonjour !<br />
Je suis une page XHTML apparemment banale, mais je sers en fait de test
de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour
apprendre aux ingénieurs de l’ITSIA qui travaillent aussi sur Google <a
href="http://www.google.cd">Site de Google de la RDC</a>
</p>
<h2>Content du cours de l’APR</h2>
<p>
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q>C'est un
petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
J'aime la viande de chien en conserve.<br />
Vive les frites !
</p>
<p>
La vie d’un homme qui connaît les intérêts de l’humanité est plus celles
des mille personnes qui vivent dans l’ignorance.
</p>
</body>
</html>
Ensuite, ouvrez e fichier HTML pour exécuter les codes de CSS.
UWB – RDC 55
VI.2. Application d’un style à plusieurs balises
Revenons à notre fichier CSS, et reprenons chaque balise avec les mêmes
propriétés, on aura :
h1
{
color: red;
}
h2
{
color: red;
}
Cet exemple signifie que nos balises h1 doivent être en rouge, ainsi que nos
balises h2. Cela, comme on vient de le remarquer, est répétitif.
En CSS, on fusionne les styles pour avoir la même présentation en séparant les
noms des balises par des virgules :
h1, h2
{
color: red;
}
Cela peut s’appliquer aussi sur autant de balises auxquelles on peut attribuer le
même style. Par exemple, si vous voulez mettre en rouge les titres, les liens et les
citations, on fera : h1, h2, a, q
VI.3. Les commentaires dans le CSS
Les commentaires constituent une partie du programme inactive qui sert

simplement à indiquer des informations pour le développeur. Et c’est dans CSS où
nous ferons trop de fichiers et de commentaires pour expliquer leurs codes
correspondants de style dans XHTML.
Ainsi, pour faire un commentaire, on : /*, suivi du commentaire, puis */ pour
terminer le commentaire. Et les commentaires peuvent être sur une ou plusieurs
lignes.
Par exemple :
/*
design.css
---------
Par les étudiants Ingénieurs Concepteurs & Réseaux

Fichier créé le 29/07/2011
*/
p
{
color: blue; /* Les paragraphes seront bleus */
font-size: 18px; /* La taille de 18 pixels me semble pas mal */
}
VI.4. Les class et id
UWB – RDC 56
Les deux propriétés vues, jusqu’ici, appliquent impérativement leurs styles sur
tous les paragraphes sans aucune distinction. Cependant, les attributs spéciaux
« class » et « id », qui permettent de définir des styles personnalisés, ont la
possibilité de sélectionner pour que seulement certains paragraphes (ou certains
titres, ou certaines citations) soient écrits différemment, et cela sur toutes les
balises.
Les attributs class et id sont quasiment identiques. Cependant, une petite
différence se fera remarquer dans leur application.
a) L’attribut : class
1. Ce que sont les class et id et comment s'en servir
2. Les balises dites "universelles" et leur utilité
3. Les imbrications de balises
Comme il est signalé ci-haut, l’attribut « class » peut être placé dans n'importe quelle balise, aussi
bien dans les titres que dans les paragraphes, image etc...
<h1 class=""> </h1>
<p class=""></p>
<img class="" />
Et la valeur à placer pour l'attribut class n’est que tout simplement un nom, n’importe quel nom.
Exemple : Supposons que vous vouliez définir un style appelé "important" qui écrit le texte en
rouge / 18 pixels. Vous rajouterez dans le fichier HTML l'attribut class="important" à chacune des
balises que vous voulez modifier.
<head>
<title>Page d'exemple pour tester le CSS crée à l’UWB</title>
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2"
href="design.css" />
</head>
<body>
<h1>Découverte du CSS</h1>
<p>
Bonjour !<br />
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test
de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour faire
comprendre aux licenciés de l’UWB le site de google
<a href="http://www.google.com">Site de Google</a>
</p>
<h2>Citation de Monsieur Mobutu</h2>
<p>
Tellement qu’il a été fortement secoué par la pression interne qui a coïncidé
avec le courant de la perestroïka initié par Michael GORBATCHEV, un certain le
20 avril 1990, déclara <q class="important">: Je prends congé du Mouvement
Populaire de la Révolution. </q> Cela, était la résultante des
consultations populaires qu’il avait entamées pour sonder sa popularité.
Vive le Zaïre !
</p>
<p class="important">
La République Démocratique du Congo regorge dans le sol et sous-sol une
diversité des substances minérales, pétrolières et forestières disséminées dans
presque toutes les provinces.
</p>
</body>
</html>
Ensuite, à partir du fichier CSS, on peut déjà définir toutes les balises qui ont la
class "important" pour qu’elles soient écrites en rouge / 18 pixels".
UWB – RDC 57
Dans cette syntaxe, au lieu de mettre le nom de la balise avant les accolades
(comme p ou encore h1), on saisit seulement un point suivi du nom de la class.
Par exemple : .important
Ce qui nous donnerait le CSS suivant :
.important
{
color: red;
font-size: 18px;
}
b) L’attribut : id
Cet attribut fonctionne aussi exactement de la même manière que class, à un

détail près et dans la mesure où il ne peut être utilisé qu'une fois.
Syntaxe : le nom d'id doit commencer par une lettre et peut être suivi ensuite de
lettres et de chiffres.
Exemple : id = "3tableaux" serait invalide car il commence par un chiffre.

id = "tableau3" est en revanche valide.
Et généralement, en pratique, les "id" sont utilisés que sur des éléments qui sont
uniques sur la page, comme par exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo" />
Et avec le « id », on utilisera avant le nom, le symbole dièse (#) :
1 #logo
2{
3 /* Mettez les propriétés CSS ici */
4} VI.5. Les balises universelles
Dans cette section, nous allons étudier comment isoler les mots qui ne sont
pas entourés par des balises pour leur appliquer un style à l’aide de l’attribut
« class ».
Par exemple, on veut modifier uniquement "Monsieur" dans le paragraphe

suivant : :
Code : HTML
1 <p> Citation de Monsieur Mobutu.</p>
UWB – RDC 58
Nous utiliserons les deux balises, avec une petite différence :

 <span> </span> : c'est une balise de type inline qui se met à l'intérieur d'un
paragraphe, comme <strong>, <em>, <q>. Cette balise s'utilise au milieu
d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer
« Monsieur ».
 <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle
crée un nouveau "bloc" dans la page, et provoque obligatoirement un retour
à la ligne. C'est une balise très utilisée pour faire des bons design.
Exemple :
Code : HTML
1 <p>Citation de <span class="important">Monsieur</span> Mobutu.</p>
Code : CSS
1 .important
2{
3 color: blue;
4}
VI.6. Imbrications de balises
Cette section constitue une des notions importantes pour indiquer l'ordre
d'imbrication des balises dans le CSS.
Exemple, nous sommes dans notre fichier CSS. Nous souhaiterions définir un
style uniquement pour les balises <em> qui se trouvent à l'intérieur d'un titre
<h3>.
Code : CSS
1 h3 em /* => tous les em situés à l'intérieur d'un h3 */
2{
3 color: blue;
4}
NB : On a juste séparé les 2 noms de balises par un espace, et non pas par une
virgule comme on l'a fait plus haut. Cela signifie que l’on a modifié le style de
toutes les balises <em> situées à l'intérieur de titres <h3>". On a indiqué dans le
CSS dans quel ordre devaient être imbriquées les balises.
L'ordre dans l’imbrication des balises est très important. Si on avait mis "em h3"
cela aurait voulu dire "Tous les <h3> situés à l'intérieur de balises <em>". Or c’est
impossible de mettre une balise de type block dans une balise de type inline.
Exemple :
Code : HTML
<h3>L'imbrication, c'est <em>pratique</em></h3>
<p>Cet exemple vous montre comment fonctionne l'imbrication.<br />Le mot

"pratique" dans le titre sera écrit en bleu, mais pas celui-ci :
<em>pratique</em>.</p>
On peut aussi mélanger des balises et des class :
UWB – RDC 59
Exemple1 : p .important
Ce qui signifie : "Toutes les class "important" contenues dans des balises <p>".
Exemple2 :
blockquote p strong, h1 .important
NB : La virgule "coupe" la ligne en deux, elle signifie "ET". Pour bien voir que la
ligne est coupée en deux, je vais colorer les deux parties :
blockquote p strong, h1 .important
Ce qui veut dire : "Toutes les balises <strong> contenues dans un <p> elles-
mêmes contenues dans un <blockquote> ET toutes les class "important"
contenues dans un titre <h1>"
UWB – RDC 60
Chapitre VIII. : La mise en forme
Dans ce chapitre, nous allons étudier comment formater le texte pour modifier
l'apparence du texte dans le CSS, et aussi nous allons réutiliser ce que nous
avons vu dans le chapitre précédent.
Entre autre, nous allons voir, successivement, comment modifier la taille du texte,
changer la police, aligner le texte etc...
VIII.1. : La taille du texte
En CSS, les possibilités pour modifier la taille du texte sont nombreuses :
 En pixels : c'est une façon très précise d'indiquer la taille du texte. C'est à
dire combien de pixels exactement doit faire le texte. Ainsi, pour avoir un
texte de 16 pixels de hauteur, on écrit : font-size:16px.
Les lettres auront une taille de 16 pixels, comme le montre l'image suivante :
Code : CSS
1 P
2 {
3 font-size: 14px; /* Paragraphes de 14 pixels */
4 }
5 h1
6 {
7 font-size: 22px; /* Titres de 22 pixels */
8 }
 En centimètres et en millimètres ("14mm" par exemple).
Indiquer la taille du texte en pixels, centimètres et millimètres est très pratique et très précis.
Certes, il est préférable d'indiquer une taille relative - comme nous allons le voir - afin que la
taille du texte s'adapte aux choix ; Par contre , il y a aussi des préférences pour avoir du texte
plutôt gros, petit, plus petit...
 En donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très gros", "petit",
"minuscule". Et en anglais, voici la liste des différentes valeurs que CSS propose ainsi que
leur signification :
o xx-small : minuscule
o x-small : très petit
o small : petit
o medium : moyen
o large : grand
o x-large : très grand
o xx-large : gigantesque
UWB – RDC 61
Un exemple de CSS qui utilise des valeurs relatives :
Code : CSS
1 .minuscule
2 {
3 font-size: xx-small;
4 }
5 .trespetit
6 {
7 font-size: x-small;
8 }
9 .petit
10 {
11 font-size: small;
12 }
13 .moyen
14 {
15 font-size: medium;
16 }
17 .grand
18 {
19 font-size: large;
20 }
21 .tresgrand
22 {
23 font-size: x-large;
24 }
25 .supermegagigatresgrand
26 {
27 font-size: xx-large;
28 }
NB : Cette méthode qui utilise la valeur relative est avantageuse par rapport
aux pixels. Car, il rend le site plus "adaptable" aux différentes
configurations de vos visiteurs.
 En em : Permet aussi d'indiquer de manière relative la taille du texte. On

indique la taille du texte par rapport à la taille normale de la police. "1em"
signifie "Taille normale".
Exemple, si vous mettez un nombre supérieur (généralement un nombre

décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande.
De même pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus
petite.
Cette méthode est plus pratique par rapport même à la méthode relative
pour indiquer la taille du texte.
NB : Il faut mettre un point à la place de la virgule pour les nombres

décimaux. Donc, "1.4em" et non pas "1,4em".
Code : CSS
1 .petit_em
2 {
3 font-size: 0.7em;
4 }
5 .grand_em
6 {
7 font-size: 1.3em;
8 }
UWB – RDC 62
 En pourcentage : Par défaut, un texte est toujours écrit à "100%", qui

reprend une taille "normale". Pour mettre à "130%", le texte aura une taille
correspondant à 130% de la taille normale. Ca ressemble énormément aux
"em".
VIII.2. : La police
Par défaut, la polices "Times New Roman" et "Arial" sont celles qui s’installent et
s’utilisent automatiquement sur le système Windows. Tandis que sur les Mac,
"Time" et "Times New Roman".
En CSS, la propriété qui permet d'indiquer la police est font-family.
Syntaxe : font-family:police;
Et pour éviter qu'il n'y ait de problème si l'on n'a pas la même police, on mettra en
général plusieurs noms de police, séparés par des virgules :
font-family:police1, police2, police3, police4;
Cela veut dire que le navigateur essaiera d'abord de mettre la police1. S'il ne l'a
pas, il essaiera de mettre la police2. S'il ne l'a pas, il essaiera la police3 et ainsi de
suite.
En général, on met en tout dernier "serif", ce qui correspond à une police standard
(qui ne se met que si aucune autre police n'a été trouvée).
Ci-dessous, la liste de polices qui fonctionnent sur la plupart des navigateurs :

 Arial
 Arial Black
 Comic Sans MS
 Courier New
 Georgia
 Impact
 Times New Roman
 Trebuchet MS
 Verdana
Exemple :
font-family:Impact, "Arial Black", Arial, Verdana, serif;
Ce qui veut dire : "Mets la police Impact, ou, si elle n'y est pas, Arial Black, ou
sinon Arial, ou sinon Verdana, ou si rien n'a marché mets une police standard
(serif)".
NB : Si le nom de la police comporte des espaces, on doit l'entourer de guillemets,

comme pour "Arial Black".
UWB – RDC 63
Code : CSS
h1
1
{
2
font-family: "Arial Black", Arial, Verdana, serif; /* On essaie d'avoir Arial Black
3
en priorité */
4
}
5
p
6
{
7
/* La police Comic Sans MS est aussi agréable à lire pour les paragraphes */
8
font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
9
}
VIII.3. : L’alignement
VIII.3.1. Alignement simple
Le langage CSS nous permet de faire tous les alignements que l'on connaît : à
gauche, centré, à droite et justifié.
Pour cela, 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 tout le temps justifiés.
Ci-dessous, l’exemple des différents alignements:
Code : CSS
h1
1
{
2
text-align: center; /* Pour centrer le titre */
3
font-family: "Arial Black", Arial, Verdana, serif; /* Un titre en Arial
4
Black c'est mieux :o;) */
5
}
6
blockquote
7
{
8
text-align: justify; /* La citation sera justifiée */
9
}
10
.signature
11
{
12
text-align: right; /* Pour aligner à droite ma signature */
13
font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
14
font-size: 80%;
15
}
NB : Ne jamais oublier qu'il y a toujours du XHTML derrière, bien entendu.
UWB – RDC 64
Voici donc le code XHTML de cet exemple permettant de tester les alignements :
Code : HTML
<h1>L’adage d’un sage</h1>
<p>Un jour, un grand sage a dit :</p>
<blockquote><p>Morbi fermentum libero non libero. Nunc in turpis in justo adipiscing scelerisque.
Donec id elit non diam aliquet semper. Maecenas pede. Maecenas fringilla. Fusce eleifend dui quis
lectus. Praesent facilisis, ligula a consequat posuere, metus purus porta mi, at consectetuer justo
wisi id dui. Maecenas mattis. Ut imperdiet pharetra enim. Suspendisse quis leo nec arcu interdum
aliquam. Vivamus dictum quam id tellus. Maecenas in quam sit amet risus semper auctor. Integer
leo dui, malesuada eu, fermentum at, vehicula at, nisl. Pellentesque hendrerit. Proin ut libero.
Curabitur sem ipsum, porta non, feugiat vel, mollis ut, justo. Sed a orci id metus pretium lobortis.
Morbi ultrices, quam a facilisis faucibus, odio nunc dignissim enim, eget rhoncus purus erat ac
quam.</p></blockquote>
<p class="signature">Signé : Boni KIBAMBE</p>
NB : L'alignement du texte d'une balise inline ne peut être modifié (comme span,
a, em, strong...). L'alignement ne fonctionne que sur des balises de type block :
p, div, blockquote, h1, h2, ...).
VIII.3.2. L'indentation
L'indentation est une opération qui consiste à faire la mise en retrait du texte.
Cela permet par exemple de faire commencer un paragraphe un peu plus à droite,
ce qui rend la lecture beaucoup plus facile et agréable. C'est un procédé que l'on
retrouve dans la plupart des livres d'ailleurs.
Exemple :
Syntaxe : text-indent, suivi de la taille du retrait : qui peut être en pixels, en centimètres, en
millimètres...
Les pixels seraient les biens indiqués dans ce cas.
Exempe :
Code : CSS
P
{
text-indent: 30px; /* Les paragraphes commenceront 30 pixels sur la droite */
text-align: justify; /* Ils seront justifiés */
font-size: large; /* Allez, soyons fous, grossissons le texte :o;) */
}
UWB – RDC 65
VIII.3.3. Espacement entre les mots et entre les lettres
L’espacement entre les mots se fait à l’aide de la propriété :
word-spacing, suivie de la taille en pixels ;
Et tandis que l’espacement entre les lettres se fait à l’aide de la propriété :
letter-spacing, suivie de la taille en pixels ;
VIII.4. : Les effets de style
Le CSS étant est un langage de mise en forme, renferme une série de propriétés
qui permettent de donner de style aux pages web, par exemple la mise en gras,
italique, souligné à la mise en capitales, en passant par la possibilité de faire
clignoter le texte.
a) Mise en italique
Contrairement à la balise <em></em> qui met aussi le texte en italique, pour

insister sur des mots mis en évidence, par certains navigateurs, le CSS utlise
font-style, qui peut prendre 3 valeurs :
 italic : le texte sera mis en italique ;
 oblique : le texte sera mis en italique ;
 normal : le texte sera normal (par défaut). Cela vous permet d'annuler une
mise en italique. Par exemple, si on veut que les textes entre <em> ne soient
plus en italique, vous devrez écrire :
Code : CSS
1 em
2{
3 font-style: normal;
4}
Dans l'exemple suivant, nous allons utiliser le font-style pour mettre en italique
tous les titres <h2> :
Code : CSS
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
}
h2
{
font-style: italic; /* Les titres h2 seront en italique ! */
text-indent: 30px; /* On décale un peu les sous-titres */
font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif;
}
UWB – RDC 66
b) Mise en gras
La mise en gras permet de mettre rendre gras les mots sélectionnés, les titres
sélectionnés, et même certains paragraphes entiers etc...
La propriété CSS pour mettre en gras est font-weight, qui prendra les valeurs
suivantes :
 bold : le texte sera en gras ;
 normal : le texte sera écrit normalement (par défaut).
Exemple :
Code : CSS
1p
2{
3 font-weight: bold;
4}
c) Mise en majuscules
Le CSS possède de 2 propriétés qui transforment les caractères en majuscules.
Avec la propriété font-variant, qui prend uniquement 2 valeurs différentes :

 small-caps : le texte sera écrit en petites capitales ;
 normal : le texte sera écrit normalement (par défaut).
Exemple :
Code : CSS
1p
2{
3 font-variant: small-caps;
4}
Et aussi la propriété : text-transform transforme les caractères soit en majuscule

ou soit en minuscule et elle prend les valeurs ci-dessous :
 uppercase : tout le texte sera écrit en majuscules ;
 lowercase : tout le texte sera en minuscules ;
 capitalize : la première lettre de chaque mot sera en majuscule ;
 none : pas de transformation (par défaut).
UWB – RDC 67
Dans l’exemple ci-après, nous allons faire recours à l’attribut class dans le code
XHTML :
Code : HTML
<h1>Je suis très ému du cours de l’APR donné à l’UWB...</h1>
<p>...mais je vais essayer d’aller loin. Enfin, si possible, mais je promets de

soutenir FBK...<br />
<span class="important">ahhhh !!! non cette fois je vais aller loin ! et aussi,
même après mes études universitaires à l’UWB, je continuerai avec mes recherches
!??<br />C’est bon</span></p>
<p class="chuchoter">CECI EST UN PARAGRAPHE QUE JE CHUCHOTE, ALORS QUE POURTANT
DANS LE CODE XHTML IL EST ECRIT EN MAJUSCULES</p>
Code : CSS
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
text-transform: capitalize; /* Les premières lettres des mots du titre seront
en majuscules */
}
.important
{
text-transform: uppercase; /* le texte sera en majuscules à l’aide de la
class important*/
}
.chuchoter
{
text-transform: lowercase;
font-style: italic; /* Le texte chuchoté sera en minuscules et italique */
}
d) Le soulignement avec décoration
Avec la propriété: text-decoration le CSS arrive à souligner le texte sous diverses

formes, et peut prendre les valeurs ci-après :
 underline : souligné ;
 line-through : barré ;
 overline : ligne au-dessus ;
 blink : clignotant.
NB : Cette propriété ne marche pas sous Internet Explorer ni sous Google
Chrome. Elle fonctionne en revanche bien sur tous les autres navigateurs,
dont Mozilla Firefox.
 none : normal (par défaut).
UWB – RDC 68
L’exemple ci-dessous va nous permettre d’expérimenter les effets de text-decoration
Code : HTML
<h1>A ne pas manquer !</h1>
<p>La propriété CSS <em>text-decoration</em> permet de décorer un peu son

texte :<br />
<span class="souligne">en le soulignant</span>...<br />
<span class="barre">en le barrant</span>...<br />
...ou encore <span class="ligne_dessus">en mettant une ligne
au-dessus</span>.</p>
Code : CSS
h1
{
text-align: center;
font-family: "Arial Black", Arial, "Times New Roman", serif;
text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas
sous Internet Explorer) */
}
.souligne
{
text-decoration: underline;
}
.barre
{
text-decoration: line-through;
}
.ligne_dessus
{
text-decoration: overline;
}
NB : L'intérêt du CSS c'est aussi de pouvoir cumuler les styles. Dans notre
exemple, la class "souligne" est là juste pour souligner, mais dans la pratique on
crée souvent des class combinant les styles, comme par exemple la class
"important" peut souligner le texte, mettre en gras et écrire en plus gros
e) La mise en couleur
Le langage CSS renferme plusieurs possibilités pour appliquer une couleur ou des
couleurs à un texte. Et ici, nous allons voir quelles sont les possibilités qu'offre le
CSS pour choisir une couleur.
La propriété qui permet de changer la couleur du texte est color.
La faiblesse de cette propriété est qu'il ne renferme que 16 couleurs dites

"standard". Et aussi quelques couleurs non couramment utilisées existent, mais
qui ne fonctionneront pas sur tous les navigateurs.
UWB – RDC 69
Ci-dessous, les 16 couleurs dont on peut utiliser en tapant juste leurs noms :
Couleur Aperçu
White
Silver
Grey
Black
Red
Maroon
Lime
Green
Yellow
Olive
Blue
Navy
Fuchsia
Purple
Aqua
Teal
Exemple :
Code : HTML
<h1>De toutes les couleurs</h1>
<p>Salut et bienvenue dans cette page haute en couleurs ! J'utilise des <strong>noms
de couleurs standards</strong> dans mon CSS pour égayer un peu la page. Ainsi, "red"
signifie "rouge", "blue" signifie "bleu" etc.</p>
<p>Grâce à l'attribut <em>color</em> du CSS, j'ai (entre autres) pu convertir

<strong>automatiquement</strong> tous mes mots importants (dans une balise
"strong" ;) ) en textes rouge clignotant ! Comme ça, on ne risque pas de les
louper ;o)</p>
Code : CSS
h1
{
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", serif;
color: green; /* Le titre en vert (pourquoi pas ?) */
}
p
{
text-indent: 20px;
color: blue; /* Les paragraphes en bleu */
}
strong /* ... et les mots importants en rouge clignotant ! */
{
color: red;
text-decoration: blink;
}
Il existe aussi d’autres méthodes pour la notation des valeurs à associer aux
UWB – RDC 70
couleurs :
- Notation hexadécimale
La notation hexadécimale nous donne la possibilité de définir plusieurs couleurs

par rapport à la première qui est limitée.
L’aspect de cette notation pour définir les couleurs en hexadécimal ressemble à la

syntaxe ci-après :
color : #FF5A28
La combinaison de lettres et de chiffres détermine une couleur et qui doit

commencer par un dièse (#), suivi de 6 lettres ou chiffres allant de 0 à 9 et de A à F.
Ces chiffres ou lettres fonctionnent en couple de deux par deux. Les 2 premiers
indiquent une quantité de rouge, les 2 suivants une quantité de vert, et les 2
derniers une quantité de bleu. Et quand on fusionne, en terme de quantités, (qui
sont les composantes Rouge-Vert-Bleu de la couleur) on fini par obtenir la couleur
voulue.
Ainsi : - #000000 donnera la couleur noire ;

- #FFFFFF donnera la couleur blanche.
Exemple : color:#FFFFFF;
- Notation RGB
L’acronyme RGB signifie en anglais, « Red-Green-Blue » ou en français « Rouge-

Vert-Bleu ». Dans cette notation, on définit aussi une quantité de rouge, de vert et
de bleu.
Procédure pour définir les quantités :

1. Lancez le logiciel Paint depuis le menu Démarrer.
2. Rendez-vous dans le menu Couleurs / Modifier les couleurs :
UWB – RDC 71
3. Une fenêtre s'ouvre. Cliquez sur le bouton "Définir les couleurs

personnalisées" en bas. Dans la zone qui apparaît à droite, faites bouger les
curseurs pour sélectionner la couleur qui vous intéresse.
4. Supposons que je sois pris d'une envie folle d'écrire mes titres <h1> en rose
barbie (supposons seulement). Je sélectionne la couleur dans la fenêtre,
comme ceci :
5. On relève les quantités de Rouge-Vert-Bleu correspondantes indiquées en

bas à droite de la fenêtre (ici 243-65-243). Je recopie ces valeurs dans cet
ordre dans le fichier CSS, comme ceci :
Code : CSS
h1
{
text-align: center;
color: rgb(243,65,243);
}
Comme vous avez pu le constater dans l'exemple, pour utiliser la méthode RGB il
faut taper rgb (Rouge, Vert, Bleu) en remplaçant "Rouge, Vert, Bleu" par les
nombres correspondants. Et ces nombres vont de 0 à 255.
VIII.5. : Le fond
Le fond ne désigne pas seulement le fond d’une page web, mais par contre il peut
aussi s’appliquer aux titres ou aux paragraphes, ou encore à certains mots d'un
paragraphe.
Cependant, il faut noter qu'il existe 2 types de fond :

 Les fonds comportant une couleur ;
 Les fonds comportant une image de fond.
UWB – RDC 72
a) La couleur de fond
L’application de la couleur de fond, se fait à l’aide de la propriété :

background-color. Elle s'utilise de la même manière que la propriété color, c'est-
à-dire qu’on peut taper le nom d'une couleur, l'écrire en notation hexadécimale ou
encore utiliser la méthode RGB.
Et pour appliquer la couleur de fond de la page web, on utilise la balise <body>

qui correspond à toute la page web. C'est-à-dire en modifiant la couleur de fond,
cette dernière s’applique sur tous les éléments de la page Web se trouvant dans la
section Body.
Code : CSS
body /* Dans la section body, la couleur s’appliquer sur toute la page */
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
NB : Tout le texte apparaît en une seule couleur qui est blanche, qui a été
appliquée à la balise <body>, et tous les titres <h1> ainsi que tous les paragraphes
<p> ont hérité la même couleur définie dans le fichier CSS ; autrement dit, ils ont
hérité les propriétés que renferme le fichier CSS.
Et ce phénomène s'appelle l'héritage.
Cela veut dire aussi que quand on applique un style à une balise, toutes les
balises se trouvent à l'intérieur de cette balise prendront le même style.
Cependant, la sélection des différents éléments peut aussi être appliquée. Par
exemple on veut mettre les titres en rouge ; La priorité sera accordée d’abord aux
titres qui prendront la couleur rouge. Et en revanche, si rien n’est indiqué, les
titres hériteront de la couleur blanche.
Et pour annuler un héritage pour que les titres ne soient pas écrits en blanc sur
un fond jaune, on peut utiliser le surlignage avec les propriétés de la manière
suivante : Code : CSS
Body
{
background-color: black;
color: white; /* Toutes les balises contenues dans body verront leur texte
coloré en blanc... */
}
h1
{
color: red; /* ... sauf si je demande expressément de changer la couleur par
la suite */
}
.surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */
{
background-color: yellow;
color: black; /* Le texte surligné sera écrit en noir, parce que le blanc sur
fond jaune on voit rien ;o) */
}
UWB – RDC 73
b) L’image de fond
A l’instar de la couleur de fond, l'image de fond ne s'applique pas forcément à la

page entière, l’image de fond peut aussi s’appliquer aux titres, paragraphes,
citations etc.
Et l’application de l’image de fond, se fait à l’aide de la propriété :
background-image qui reçoit la valeur url("nom_de_l_image.png").

Par exemple : background-image:url("fond.png");
NB : Le fond n'est pas seulement en PNG, mais aussi en JPEG ou en GIF.
L'adresse indiquant où se trouve l'image de fond peut être en absolu (http://...) ou

en relatif (fond.png).
NB : Pour un travail qui se fait en local, on détermine le chemin du répertoire avec
des slashs qui sépare les sous-répertoires. Et une image censée être appliquée sur
toute la page, on utilise la balise <body></body>.
Exemple :
Code : CSS
body
{
background-image: url("../images/boni.jpg");
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p /* Tous les paragraphes contenus dans un blockquote */
{
text-align: justify;
text-indent: 25px;
}
c) Attachement de l’image de fond
Naturellement une image de fond appliqué à une page est toujours mobile, c’est-à-
dire qu’elle est censée bougée avec le texte quand ce dernier monte, descend, ou
glisse à droit et à gauche. Le langage CSS permet de "fixer" le fond, de manière à
ce que le fond (image) ne pas bouge pas en même temps avec le texte.
Et la propriété qui répond à cette application c’est background-attachment qui

prend aussi 2 valeurs :
 fixed : l'image de fond reste fixe.
 scroll : l'image de fond défile avec le texte (par défaut).
Exemple :
Code : CSS
UWB – RDC 74
1 body
2 {
3 background-image: url("../images/neige.png");
4 background-attachment: fixed; /* Le fond restera fixe */
5 }
6 h1
7 {
8 font-style: italic;
9 font-family: "Arial Black", Arial, Verdana, serif;
10 text-align: center;
11 }
12 blockquote p
13 {
14 text-align: justify;
15 text-indent: 25px;
16 }
d) Répétition de l’image de fond
En des deux propriétés ci-dessous, nous avons encore deux autres propriétés
relatives avec les images de fond.
La première propriété est celle qui assure la répétition de l'image de fond.
Elle s'appelle background-repeat et peut prendre les quatre valeurs ci-après :
 no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
 repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
 repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
 repeat : le fond sera répété (par défaut).
Exemple, avec l’image ci-après s’appelle boni.jpg, nous allons essayer de la répéter en
autant de fois en position verticale :
Code : CSS
body
{
background-image: url(boni.jpg");
background-repeat: repeat-y; /* Le fond ne se répètera que sur la
première colonne, verticalement */
}
h1
{
font-style: italic;
text-align: center;
}
blockquote p
{
text-indent: 25px;
}
UWB – RDC 75
e) Position de l’image de fond
Une image de fond peut aussi être positionnée sur la page web à l’aide de la
propriété background-position. Cette propriété n'est utilisée que si
"background-repeat: no-repeat;" est aussi définie.
La propriété background-position prend, quant à elle, 2 valeurs en pixels pour

indiquer la position du fond par rapport au coin supérieur gauche de la page (ou
du paragraphe si on applique le fond à un paragraphe).
Ce qui va donner : background-position:25px 40px;

Le fond sera localisé à 30 pixels de la gauche et à 40 pixels du haut. Tout comme
aussi, en CSS on peut utiliser les valeurs ci-dessous pour positionner une image
de fond :
 top : en haut.
 bottom : en bas.
 left : à gauche.
 center : centré.
 right : à droite.
NB : La combinaison des mots est aussi possible en CSS, soit par exemple pour
aligner une image en haut à droite, on tapera : background-position: top right;
Exemple :
Code : CSS
body
{
background-image: url(boni.jpg"); /* Le fond est l'image "boni.gif" */
background-repeat: no-repeat; /* Le fond ne se répète pas */
background-position: top right; /* Le fond est aligné en haut à droite */
background-attachment: fixed; /* Le fond est fixé */
}
h1
{
font-style: italic;
text-align: center;
}
blockquote p
{
text-indent: 25px;
}
UWB – RDC 76
f) Mégo-propriété de backgroung
La Mégo-propriété de backgroung permet de combiner plusieurs propriétés en

prenant plusieurs valeurs ; cela pour diminuer le nombre de lignes de
background.
Exemple :
Code : CSS
body
{
background: url("boni.jpg") no-repeat top right fixed;
}
h1
{
font-style: italic;
text-align: center;
}
blockquote p
{
text-indent: 25px;
}
Le résultat reste le même comme dans le cas précédent.
VIII.6. : Les pseudo-formats
Dans les chapitres et sections précédents, nous avons fait recours à un bon
nombre de propriétés qui façonnent et qui donnent du style au texte en modifiant
la taille, la police, la couleur etc...
Et dans cette section, nous allons apprendre un nouvel aspect du langage CSS
dénommé «pseudo-formats» qui va nous permettre d’appliquer par exemple, à des
moments ou des endroits précis, une modification à l'apparence d'un lien au
passage de la souris, et aussi à modifier automatiquement la première lettre d'un
paragraphe etc...
Et le pseudo-format est un nom ajouté après celui de la balise ou de la class qui
change l’apparence selon les critères qui lui sont donnés.
Ces éléments vont nous permettre d'ajouter encore plus de dynamisme au site
web.
VIII.6.1. : Liens dynamiques
La modification de l’apparence d’un lien devra toujours s’appliquer dans la balise

<a>, qui manipule jusque là les liens. Normalement et par défaut, un lien s'affiche
toujours en couleur bleu avec un soulignement. Cependant, la propriété
text-decoration:none; efface les effets du soulignement sur les liens.
UWB – RDC 77
Ci-dessous, quelques styles pris à titre d’exemple qui peuvent modifier les styles à
un lien :
a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-style: italic; /* Les liens seront en italique */
}
Nous allons voir comment modifier l'apparence des liens dans les cas suivants :
 Quand l’utilisateur fait passer la souris sur le lien;
 Quand l’utilisateur clique sur le lien ;
 Quand l’utilisateur sélectionne le lien ;
 Quand l’utilisateur découvre une page.
a) Au passage de la souris
Le pseudo-format à appliquer c’est le :hover.

Code : CSS
a:hover
{
}
":hover" signifie "Dessus".

"a:hover" signifie donc : "Quand la souris est sur le lien" (quand on pointe dessus).
A gauche, mettre la balise concernée (en l'occurrence <a>, la balise de lien), et à
droite mettre le pseudo-format.
Ensuite, définir l'apparence que doit prendre un lien lorsqu'on pointe dessus.
Laissez libre cours à votre imagination, il n'y a pas de limite
Voici un exemple de présentation des liens, mais n'hésitez pas à inventer le vôtre:
Code : CSS
a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: red; /* Les liens seront en rouge au lieu de bleu */
font-style: italic; /* Les liens seront en italique */
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera
dessus */
color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}
Le pseudo-format ":hover" a l’avantage d’être appliqué à n'importe quelle balise.

Mais cependant il ne marche que sur la version de l’Internet Explorer 7 et aussi
sur le navigateur Mozilla Firefox.
UWB – RDC 78
Un exemple d'utilisation du :hover sur un paragraphe (à tester avec un autre

navigateur que IE) :
Code : CSS
p:hover /* Quand on pointe sur un paragraphe */
{
background-color: #CFE1EB; /* Le fond du paragraphe change de couleur */
text-indent: 20px;
}
b) Au moment du clic
Le pseudo-format : active permet d'appliquer un style particulier au moment du

clic. Le lien gardera cette apparence très peu de temps : juste pendant qu’on
clique avec le bouton de la souris. Ce pseudo-format est trop moins perceptible
quand il s’applique sur un lien, mais trop pratique en changeant l’aspect du lien.
Exemple : avec active, on peut changer la couleur de fond du lien lorsqu’on
clique.
Code : CSS
a:active /* Quand l’utilisateur clique sur le lien */
{
background-color: #FFCC66;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
color: green;
}
a /* Lien normal */
{
text-decoration: none;
color: red;
font-style: italic;
}
c) Au moment de la sélection du lien
Le pseudo-format :focus permet d’appliquer un style quand le lien est

sélectionné ; ce qui le différencie un peu du pseudo active.
Il est aussi appliqué à d'autres balises XHTML pour changer toujours l’apparence.
Code : CSS
a:focus /* Quand l’utilisateur sélectionne le lien */
{
background-color: #FFCC66;}
a:hover /* Quand l’utilisateur pointe sur le lien */
{
color: green;
}
a /* Lien normal */
{
color: red;
font-style: italic;
}
UWB – RDC 79
Dans cet exemple, nous avons constaté que le lien garde sa couleur de fond un
peu plus longtemps. Et il serait avantageux d’utiliser: focus à la place de :active.
NB : Comme l’ancienne version de l’IE ne prend pas le focus, il serait prudent
d'appliquer le même style au :focus et au :active, comme on a appris à le faire
dans le premier chapitre CSS, en séparant les noms par une virgule. Exemple :
Code : CSS
a:active, a:focus /* Appliquer le même style aux liens actifs et focus */
{
background-color: #FFCC66;
}
Cette astuce a comme avantage dans la mesure où si le navigateur est IE, il fera
recours uniquement le :active (et le fond sera un peu coloré), par contre si c'est un
navigateur autre que l’IE, le fond gardera pendant longtemps son apparence grâce
au :focus.
VIII.6.2. : Apparence de la première lettre et de la première ligne

Le pseudo-format qui permet la modification de la première lettre et de la première
ligne s’applique beaucoup plus sur des balises traitant les paragraphes et les
blockquotes.
a) Apparence de la première lettre
Et c’est pseudo-format :first-letter qui permet de modifier l'apparence de la

première lettre, que l’on peut changer en gras ou en plus gros ou dans une
couleur donnée, etc. pour tous les paragraphes de la page.
Code : CSS
p:first-letter /* La première lettre de chaque paragraphe */
{
font-weight: bold; /* En gras */
font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
color: blue; /* En bleu */
}
p
{
text-indent: 20px;
}
b) Apparence de la première ligne
Pour modifier l’apparence de la première ligne, on applique le pseudo-format

:first-line.
Exemple : Appliqué aux premières de tous les paragraphes, les textes en petites
capitales : Code : CSS
p:first-line /* La première ligne de chaque paragraphe */
{
font-variant: small-caps; /* En petites capitales */
}
p
{
text-indent: 20px;
}
UWB – RDC 80
VIII.7. : Les listes à puces
Une liste à puces est une forme qu’on applique pour créer un menu sur la page
web en énumérant une série d’options et même de citations en différentes lignes ;
distinguées par des puces, des points, des numéros, etc..
Dans un premier temps nous allons voir comment créer des listes à puces en
XHTML, et ensuite, nous allons décorer ces listes au travers de nouvelles
propriétés CSS.
Il existe trois sortes de listes à puces :

 Les listes non ordonnées ;
 Les listes ordonnées ;
 Les listes de définitions (plus rares).
VIII.7.1. Liste à puces sous XHTML
a) Liste non ordonnée
Une liste non ordonnée est obtenue à l’aide de la balise <ul></ul, qui prend toute
la liste et chaque élément de la liste doit être précédé de la balise <li></li>, ce qui
va restituer la forme ci-dessous :
 Licence ;
 Maîtrise ;
 Doctorat.
Cette liste nous restitue une suite d'éléments, sans notion d'ordre (il n'y a pas de
"premier" ni de "dernier").
Exemple en Code : HTML

<ul>
<li> Licence ;</li>
<li> Maîtrise;</li>
<li> Doctorat.</li>
</ul>
NB : <ul></ul> indique le début d'une liste à puce

<li></li> indique un nouvel élément de la liste à puce.
L’imbrication des listes à puces peut aussi s’appliquer dans des menus
complexes. Il suffira d’ouvrir une seconde balise <ul> à l'intérieur d'un élément
<li></li>.
b) Liste ordonnée
Une liste à puces ordonnée est celle qui renferme une numérotation ou des
références en ordre alphabétique. Et pour l’ordonner, On change cette fois-ci la
balise <ul></ul> qui devient cette fois <ol></ol> A l'intérieur, on ne change rien :
chaque élément de la liste être toujours précédé de la balise <li></li>.
UWB – RDC 81

<ol>
<li> Licence ;</li>
<li> Maîtrise;</li>
<li> Doctorat.</li>
</ol>
NB : La différence avec la liste ordonnée est la seule balise <ol></ol> qui a
remplacé <ul></ul>.
c) Liste de définitions
Contrairement aux deux balises précédentes, dans la liste de définition on indique

le début et la fin de la liste à l'aide de la balise <dl></dl> (c'est l'abréviation de
"Definition List")
Code : HTML
<dl>
</dl>
Ici, la seule différence avec les deux premières, pour indiquer les éléments de la
liste, on a 2 types d'éléments :
 Les mots
 Les définitions
Les mots se trouvent entre <dt></dt>, et les définitions entre <dd></dd>.

Ce qu'on doit retenir est qu'on doit mettre d'abord le mot (<dt>), ensuite sa
définition (<dd>). Et ainsi de suite s’il faut recommencer les mêmes opérations :
un dt et ensuite un dd.

1 <dl>
2 <dt>Licence</dt>
3 <dd>Ce cycle est de trois ans pour le programme LMD</dd>
4 <dt>Master</dt>
5 <dd>Il correspond au deuxième cycle, appelé en RDC licence</dd>
6 <dt>Doctorat</dt>
7 <dd>Il est le troisième cycle qui coiffe les études univ</dd>
8 </dl>
NB : Les définitions sont placées en retrait par rapport aux mots principaux.
L’apparence est loin d’être appréciée, néanmoins avec le CSS on fera en sorte que
les mots et leurs éléments soient très bien présentés.
VIII.7.2. Liste à puces sous CSS
La liste à puces peut être embellie par une suite de propriétés dans le CSS, selon
les besoins. A titre d’exemple, nous allons faire en sorte que les définitions soient
clignotantes sur fond rouge.
UWB – RDC 82
Code : CSS
dd
{
background-color:red;
/* ... */
}
En CSS, il y a 3 propriétés spécialisées pour la présentation des listes à puces :
a) Retrait des listes
Cette propriété permet d'indiquer si la liste peut être mise en retrait ou non.
Elle s'appelle list-style-position, et peut prendre 2 valeurs :
 inside : la liste n'est pas mise en retrait.
 outside : la liste est mise en retrait (par défaut).
Ce qui peut être représenté ci-après :
Code : CSS
.pas_de_retrait
{
list-style-position: inside;
}
.retrait
{
list-style-position: outside;
}
Code : HTML
<p>Voici une liste avec retrait (par défaut) :</p>
<ul class="retrait">
<li>Liste<br />à puces</li>
<li>Ligne 1<br />Ligne 2</li>
<li>Vous pouvez voir<br />que le texte est décalé sur la droite</li>
</ul>
<p>Voici une liste sans retrait :</p>
<ul class="pas_de_retrait">
<li>Liste<br />à puces</li>
<li>Ligne 1<br />Ligne 2</li>
<li>Vous pouvez voir<br />que le texte n'est pas décalé sur la droite</li>
</ul>
NB : Pour bien voir la différence au niveau du retrait, il faut que les éléments de la
liste comportent au moins 2 lignes à l’aide de la balise <br />. En pratique, on ne
désactive pas le retrait des listes à puces, sauf quand on se sert des listes pour
créer le menu de son site comme on le verra plus tard.
b) Représentation de la puce
UWB – RDC 83
La propriété list-style-type permet de modifier l'apparence de la puce. En effet, il

n’y a pas que de puces sous la forme ronde ou de chiffres pour les listes
numérotées, par contre on peut aussi utiliser les alphabets comme : a, b, c, d...
Et la propriété list-style-type peut prendre un nombre varié de valeurs. Certaines

d'entre elles concernent uniquement les listes non ordonnées, d'autre concernent
uniquement les listes ordonnées :
 Pour les listes non ordonnées (<ul>) :
o disc : un disque noir (par défaut).

o circle : un cercle.
o square : un carré.
o none : aucune puce ne sera utilisée.
o
 Pour les listes ordonnées (<ol>), le choix est vaste :
o decimal : des nombres 1, 2, 3, 4, 5... (par défaut)

o decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04,
05...).
o upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
o lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
o upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
o lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
o lower-greek : numérotation grecque.

<h2>Quelques listes non ordonnées</h2>
<p>Voici une liste à puce non ordonnée sans modification (= <em>disc</em>) :</p>
<ul>
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>
<p>Avec <em>circle</em> :</p>

<ul class="cercle">
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>
<p>Avec <em>square</em> :</p>

<ul class="carre">
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>
<p>Avec <em>none</em> (sans puces) :</p>

<ul class="rien">
<li>Liste</li>
<li>à</li>
<li>puces</li>
</ul>
<h2>Quelques listes ordonnées</h2>
<p>Liste à puces ordonnée sans modification (= <em>decimal</em>)</p>

<ol>
<li>Premier Graduat Info</li>
<li>Deuxième Graduat Info </li>
UWB – RDC 84
<li>Troisième Graduat Info </li>

<li>Première Licence</li>
<li>Deuxième Licence</li>
</ol>
<p>Avec <em>decimal-leading-zero</em> (<strong>Ne fonctionne pas sous IE)</strong>) :</p>

<ol class="commence_a_zero">
<li>Première Licence Info</li>
<li>Deuxième Licence Info</li>
</ol>
<p>Avec <em>lower-alpha</em> :</p>

<ol class="lettres_minuscules">
</ol>
<p>Avec <em>upper-roman</em> :</p>

<ol class="chiffres_romains">
</ol>
<p>Avec <em>lower-greek</em> (<strong>Ne fonctionne pas sous IE</strong>) :</p>

<ol class="lettres_grecques">
</ol>
Et son Code : CSS

/* Listes à puces non ordonnées */
.cercle
{
list-style-type: circle;
}
.carre
{
list-style-type: square;
}
.rien
{
list-style-type: none;
}
/* Listes à puces ordonnées */
.commence_a_zero
{
list-style-type: decimal-leading-zero;
}
.lettres_minuscules
{
list-style-type: lower-alpha;
}
.chiffres_romains
{
list-style-type: upper-roman;
UWB – RDC 85
}
.lettres_grecques
{
list-style-type: lower-greek;
}
/* Quelques styles supplémentaires juste pour la présentation

En plus ça vous fait quelques rappels ;o) */
h2
{
text-indent: 20px;
font-family: Arial, Verdana, "Times New Roman", serif;
}
em
{
}
strong
{
color: red;
}
b) Représentation de la puce en image
Dans le cas où il n’a aucune représentation de puces, on pourra aussi utiliser la

propriété list-style-image, qui vous permet d'utiliser n'importe quelle image à la
place d'une puce.
Et il prendra comme valeur "url" suivi de l'adresse de l'image à utiliser. Il

fonctionne comme la propriété background. C’est-à-dire à la place de la puce, on
aura une image.
Exemple du Code : CSS

ul /* Ma liste aura des puces en forme de dossiers */
{
list-style-image: url("dossier.png");
}
/* Juste pour améliorer la présentation : */

a
{
color: blue;
}
a:hover
{
}
UWB – RDC 86
Chapitre IX. : La mise en boîte
Le chapitre présent est celui qui va nous permettre de donner une stature de bon
site web avec des designs adaptés à l’environnement et aux applications.
Cependant dans les chapitres précédents, nous avons vu les balises inline /
block, pour lesquelles nous essayerons de faire un petit rappel.
Rappel : Block et Inline
Durant les chapitres précédents, on avait utilisé à maintes reprises les mots
"inline" et "blocks".
Ici, nous allons relever la différence qui peut exister entre les balises inline et
block. Et comme on parle des balises, on peut classer les balises XHTML dans
une des 2 catégories suivantes : inline et block (en français : "En ligne" et
"Bloc") ; ce classement nous amènera à distinguer si une balise est inline ou
block.
Par exemple : <p></p> = balise block.

<a></a> = balise inline.
Comment reconnaître une balise inline d'une balise block ?

 block : une balise de type "block" sur une page web crée automatiquement
un retour à la ligne avant et après. Normalement, une page web est
constituée d'une série de blocks à la suite des uns et des autres. Et tout
comme il sera aussi possible de placer un block à l'intérieur d'un autre, ce
qui va augmenter considérablement nos possibilités de créer le design de
notre site.
 inline : une balise de type "inline" se trouve obligatoirement à l'intérieur
d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le
texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur
la même ligne (c'est pour cela que l'on parle de balise "en ligne").
Ci-dessous un exemple dans un petit schéma :
NB : le fond bleu renferme le type block et tandis que le fond jaune, est du type
inline.
UWB – RDC 87
Comme on peut le voir, les blocks se poursuivent les uns en-dessous des autres.
La balise inline <a></a> se trouve surtout à l'intérieur d'une balise block.
Ci-dessous, nous allons étaler une petite liste listant quelques balises courantes :
Balises blocks Balises inline

<p> <em>
<blockquote> <strong>
<h1> <q>
<h2> <a>
<ul> <sup>
<ol> <img />
<div> ...
La liste ci-dessus est loin d’être exhaustive. Néanmoins, vous trouverez dans les
annexes de ce cours, une liste complète des balises (inline ou block).
IX.1. : Modification de la taille – bordure - marge
IX.1.1. : La taille
La taille dont il est question, présentement, est celle qui sera appliquée sur des
balises de type "block".
Contrairement à un inline, un block doit avoir des dimensions bien déterminées,

entre autres, une largeur et une hauteur. Et pour cela, le langage CSS dispose des
deux propriétés :
width: c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%).
height: c'est la hauteur du block. Là encore, on l'exprime soit en pixels (px), soit en pourcentage
(%).
Par défaut, un block prend 100% de la largeur disponible. Regardez par exemple
ce code XHTML qui n'utilise aucune propriété CSS :
Code : HTML
<p>La FBK est une nouvelle fondation qui, jusqu’à présent, renferme tous les
jeunes intellectuels de la Province du Kasaï-Oriental. La FBK est une nouvelle
fondation qui, jusqu’à présent, renferme tous les jeunes intellectuels de la
Province du Kasaï-Oriental. La FBK est une nouvelle fondation qui, jusqu’à
présent, renferme tous les jeunes intellectuels de la Province du Kasaï-Oriental.
La FBK est une nouvelle fondation qui, jusqu’à présent, renferme tous les jeunes
intellectuels de la Province du Kasaï-Oriental. La FBK est une nouvelle fondation
qui, jusqu’à présent, renferme tous les jeunes intellectuels de la Province du
Kasaï-Oriental. </p>
Dans l’exemple ci-dessous, nous allons essayer de modifier la largeur des paragraphes dans le CSS en leur donnant la largeur de 60%.
Code : CSS
P
{
width: 60%;
text-align: justify; /* Texte justifié pour mieux voir la largeur du block */}
UWB – RDC 88
La valeur en pourcentages est simple à utiliser parce qu’il s'adapte

automatiquement à la résolution de l’utilisateur. Toutefois, un block ou un
paragraphe peut être redimensionné en pixels :
Code : CSS
p{
width: 250px;
}
IX.1.2. : Taille minimale et maximale
En plus de la propriété width et height , nous avons aussi 4 propriétés qui

s’appliquent sur un bloc pour donner une taille minimale ou maximale, qui sont :
 min-width : largeur minimale
 min-height : hauteur minimale
 max-width : largeur maximale
 max-height : hauteur maximale
NB : Ces propriétés ne fonctionnent pas sous le navigateur IE version6 et en

partie sous le navigateur IE 7.
IX.1.3. : Redimensionnement du block avec « overflow »
Le redimensionnement du block se fait en hauteur et en largeur à l’aide, toujours

avec les deux propriétés qui sont width et height exprimées en pixels.

1 p{
2 width: 250px;
3 height: 100px;
5}
Mais cependant, si le texte n'a pas assez de place pour être visible dans son entièreté, il va s’empiéter
sur lui-même. C’est pourquoi, la propriété overflow donne la possibilité, soit de rendre visible, de
couper, de cacher, d’utiliser les barres de défilement ou de restituer le texte de manière automatique.
Et les valeurs que peut prendre overflow sont les suivantes :

 visible (par défaut) : si le texte dépasse les limites de taille, le block est agrandi de manière à
ce que tout soit visible ;
 hidden : si le texte dépasse les limites, la partie en dehors des dimensions sera coupée ;
 scroll : si le texte dépasse les limites, le navigateur met disponibilise les barres de défilement
verticale et horizontale afin de rendre le texte visible ;
 auto : avec cette valeur, le navigateur détermine s’il faut placer les barres de défilement.
UWB – RDC 89
Dans l’exemple ci-dessous, nous allons essayer de tester les quatre valeurs en
CSS, à tours de rôle sur les paragraphes saisis en XHTML :
p /* Tous les paragraphes auront ces propriétés CSS */
{
width: 250px;
height: 100px;
}/* Et chacun des paragraphes aura en plus une valeur d'overflow différente */
.coupe{
overflow: hidden;
}
.barres_defilement{
overflow: scroll;
}
.auto{
overflow: auto;
}
La propriété auto est celle qui sera beaucoup plus utilisée pour résoudre les cas
d’incohérence des cadres avec les corps des textes à l'intérieur des pages web.
IX.1.4. : Les bordures
Les bordures, dans le langage CSS, sont des objets qui encadrent les textes ou
tout autre objet se trouvant sur la page web.
Les propriétés qui traitent les bordures sont nombreuses à tel point que nous
serons contraints de recourir à une méga-propriété qui va regrouper toutes les
autres, à l’instar de background vue précédemment.
Et la méga-propriété dont il est question, c'est « border » qui permet d'indiquer

quelle bordure appliquer à un block ou à un paragraphe. La méga-propriété prend
plusieurs valeurs, néanmoins dans un premier temps, nous allons commencer par
3 valeurs qui seront alignées après la méga-propriété border.
Nb : L’ordre d’alignement importe peu, c’est-à-dire qu’il n’y a pas un ordre de
priorité. Ci-dessous, les 3 valeurs pour modifier l'apparence de la bordure :
 La largeur : elle détermine la largeur de la bordure en pixels ou avec des
mots-clé suivants :

o thin : bordure fine
o medium : bordure moyenne
o thick : bordure épaisse
NB : Dans le deuxième cas, c'est le navigateur qui détermine le nombre de

pixels qui correspond à thin, medium et thick. Les pixles sont bien indiqués
pour définir la largeur des bordures.
 La couleur : elle détermine la couleur de la bordure. Exemple, 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 pas mal de choix. Votre bordure peut
être un simple trait, ou des pointillés, ou encore des tirets etc...
UWB – RDC 90
Ci-dessous, les différentes valeurs disponibles pour définir le type de

bordure :
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 : effet 3D.
o inset : autre effet 3D (Dans ce cas, le block forme un creux).
o outset : encore un autre effet 3D (Dans ce cas, le block est surélevé).
Exemple dans le Code CSS où nous allons essayer à tours de rôle les différentes :
p
{
width: 300px; /* Tous les paragraphes font 300px */
text-align: justify; /* Tous les paragraphes sont justifiés */
}
.rien
{
border: none;
}
.solid
{
border: 2px solid black;
}
.dotted
{
border: 2px dotted green;
}
.dashed
{
border: 2px dashed red;
}
.double
{
border: 4px double maroon;
}
.groove
{
border: 4px groove teal;
}
.ridge
{
border: 4px ridge fuchsia;
}
.inset
{
border: 3px inset black;
}
.outset
{
border: 3px outset black;
}
UWB – RDC 91
IX.1.5. : L’emplacement des bordures
Une bordure peut être placée sur n’importe quel côté du block ou du paragraphe
(haut, bas, gauche ou droite,..). Dans ce cas, nous utiliserons les 4 propriétés ci-
dessous :
 border-top : bordure en haut.
 border-bottom : bordure en bas.
 border-left : bordure à gauche.
 border-right : bordure à droite.
Ces propriétés sont aussi des méga-propriétés, elles fonctionnent comme border
mais ne s'appliquent donc qu'à un seul côté.
Code : CSS
p
{
width: 350px;
}
h2
{
border-bottom: 2px solid black;
}
.haut_bas
{
border-top: 1px dashed red;
border-bottom: 1px dashed red;
}
.points
{
border-top: 3px dotted blue;
border-left: 2px solid green;
border-right: 2px solid green;
border-bottom: 3px dotted blue;
}
.tres_solide
{
border-left: 6px solid black;
border-right: 6px solid gray;
}
NB : Utilisez border qui s'applique à tous les 4 côtés simultanément dans le cas
où l’on cherche le même design.
Les propriétés CSS que nous voyons dans ces chapitres s'appliquent le plus
souvent aux blocks et aussi bien sur quelques balises inline, telle que <img />
(pour les images).
<p>
Vous souhaitez vous rendre vers un le site de Google ? cliquez sur l'image
ci-dessous :<br />
<a href="http://www.google.com"><img src="boni.jpg" alt="Photo de FBK"
title="Clique pour ici pour lancer google !" /></a>
</p>
UWB – RDC 92
Avec la propriété border du CSS, on pourra toujours éviter la bordure autours de

l’image qui s’accompagne avec les propriétés de liens (en bleu) de la balise
<a></a>.
Code : CSS
a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}
NB : On peut bien aussi utiliser border:0px" ou encore "border:0" à la place de border:none
IX.1.6. : Les marges des blocks
Tous les blocks possèdent des marges. Ce qui est important, c'est de savoir qu'il
existe 2 types de marges :
 les marges intérieures ;
 les marges extérieures.
Exemple :
Dans l’exemple ci-dessus, il y a un cadre ou une bordure pour bien identifier les
bords. En effet, l'espace entre le texte et la bordure est la marge intérieure (en
vert). Et l'espace entre la bordure et le prochain block est la marge extérieure (en
rouge).
Dans le langage CSS, nous avons des 2 propriétés suivantes, pour modifier la
taille des marges :
 padding : indique la taille de la marge intérieure. A exprimer en pixels (px).
 margin : indique la taille de la marge extérieure. Là encore, on utilise le
plus souvent des pixels.
Prenons 2 paragraphes par exemple auxquels on peut ajouter une petite bordure :
UWB – RDC 93
Code : CSS
p
{
width: 250px;
}
Il y a lieu de constater qu’il n'y a pas de marge intérieure (padding). En revanche,

il y a une marge extérieure (margin). C'est cette marge qui fait que 2 paragraphes
ne sont pas collés et qu'on a l'impression de "sauter une ligne". Là, c’est une
marge dite, par défaut.
Et aussi, les marges dites par défaut ne sont pas identiques pour toutes les
balises block. En appliquant le CSS à des balises <div> qui contiennent du texte
par exemple, on constatera qu’il n'y a ni marge intérieure et ni marge extérieure.
Dans cet exemple CSS, nous allons ajouter une marge intérieure de 12px aux
paragraphes :
1p
2{
3 width: 350px;
4 border: 1px solid black;
6 padding: 12px; /* Marge intérieure de 12px */
7}
Et ajoutons une marge de 50px entre 2 paragraphes dans le CSS

1p
2{
3 width: 350px;
4 border: 1px solid black;
6 padding: 12px;
7 margin: 50px; /* Marge extérieure de 50px */
8}
Les propriétés margin et padding s'appliquent aux 4 côtés du block pour indiquer
une marge en haut, en bas, à gauche et à droite, en les associant top, bottom, letf
et right :
 margin-top : marge extérieure en haut ;

 margin-bottom : marge extérieure en bas ;
 margin-left : marge extérieure à gauche ;
 margin-right : marge extérieure à droite.
 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.

p
{
width: 350px;
UWB – RDC 94

padding: 12px;
margin-bottom: 50px;
}
h1
{
margin-left: 30px;
}
IX.1.7. : Centrage des blocks
Le centrage de block est l’une des opérations régulières qui doit s’appliquer quand
on ne connaît pas la résolution de l’utilisateur. Et cette option ne fonctionne que
si une largeur précise (width) a été indiquée au block.
Revenons à nos petits paragraphes auxquels on a déjà donné une largeur précise ;
Et si on veut les centrer sur l’écran, on mettra la valeur "auto" à la propriété
margin, comme ceci :
Code : CSS
p
{
width: 350px; /* On a indiqué une largeur (obligatoire) */
padding: 12px;
margin: auto; /* On peut donc demander à ce que le block soit centré avec
"auto" */
}
IX.2. : Emplacement des blocks
A titre rappel, dans les sections précédentes de ce chapitre "Mise en boîte", il a été
question de modifier l'apparence et la taille des blocks avec des propriétés
appropriées pour :
 modifier la taille des blocks ;
 modifier la bordure des blocks ;
 modifier la marge des blocks.
Et dans les sections qui suivent, nous allons voir comment les placer sur une
page web en les associant avec d’autres objets, tels que les images, les menus, etc.
UWB – RDC 95
IX.2.1. : Transformation de inline en block (et vice-versa)
La transformation des balises de type inline en balises de type des blocks s’obtient
à l’aide de la propriété display qui prend beaucoup de valeurs parmi lesquelles
nous en verrons deux : block et inline.
Cette propriété CSS est très pratique qu’il faudrait l’utiliser avec beaucoup plus de
précautions ; Elle nous restitue les possibilités suivantes :
 block : la balise concernée deviendra de type block.
 inline : la balise concernée deviendra de type inline.
Dans cet exemple, on veut transformer toutes les images qui, au départ, sont
généralement du type inline en type block, on fera :
Code : CSS
img
{
display: block;
}
NB : Les images prenant le type block, iront automatiquement à la ligne.
L’attribut display peut s’utiliser en faisant recours à l’attribut class dans le fichier
XHTML sur une balise afin de lui donner une présentation différente.
Par exemple :
Code : HTML
<img src="image.png" alt="Cette image est normale (type inline)" />
<img src="image.png" class="imageblock" alt="Cette image est modifiée (type
block)" />
Pour transformer la deuxième image en type bloc dans le CSS, on fera :

.imageblock
{
display: block;
}
En revanche, pour transformer une balise de type block en balise de type inline, la
procédure reste toujours la même : display:inline;
NB : La transformation se fait généralement de inline en block et rarement

l'inverse. Il faut aussi dire que les balises block présentent plus d'avantages dans
la modification de taille, de bordure, de marges etc...
IX.2.2. : Les flottants
Les flottants sont des techniques qui permettent de rendre flottant une image ou
un objet qui sera entouré d’un texte. Et c’est la propriété float qui le rend possible
en prenant 2 valeurs :left : l'élément flottera à gauche et right : l'élément flottera... à droite.
UWB – RDC 96
Une image flottant à gauche
Une image flottant à droite
Bref, la démarche pour appliquer le flottant se résume en 2 étapes :

1. appliquer un float à une balise.
2. saisir le texte à la suite.
NB : La propriété float peut s’utiliser sur des balises block que sur des balises inline.
a) Flottement d’image
Dans ce point, nous allons voir comment faire flotter une image qui, au départ, est
du type "inline" dans le code XHTML. Le principe à respecter serait de déclarer,
dans un premier temps l’image <img/> qui sera entouré du texte ensuite, du texte
dans un paragraphe comme repris dans cet exemple :
<p><img src="boni.jpg" class="imageflottante" alt="Image flottante" /></p>
<p>Ceci est un texte normal de paragraphe, écrit à la suite de l'image mais qui
l'"entourera" car l'image est flottante.<br />
Uyrirur rjhfjhdfsjkhf fdsjhfdsjkhfds fdskhfdjkhfds dfskjhdfskjhfd dfskjhfdjhgfdof
fglkjghjkhfgh dvhvvbvdkldf qkjfgkkjhgfdjkhgf ,nhdgjkhg fgjkhg Uyrirur
rjhfjhdfsjkhf fdsjhfdsjkhfds fdskhfdjkhfds dfskjhdfskjhfd dfskjhfdjhgfdof
fglkjghjkhfgh dvhvvbvdkldf qkjfgkkjhgfdjkhgf ,nhdgjkhg fgjkhg </p>
NB : Le tout concours à comprendre comment il faut modifier le CSS de l'image, et

non pas du paragraphe.
Code : CSS
.imageflottante
{
float: left;
}
UWB – RDC 97
b) La lettrine
Une lettrine est la première lettre d'un paragraphe mise en évidence dans un
caractère spécial (gras de grande taille). A l’instar des quotidiens économiques,
politiques et sociaux qui utilisent ce genre de caractère pour donner beaucoup
plus d’importance à l’article et attirer l’attention des lecteurs.
Nous allons expliquer cette technique par un exemple en utilisant d’abord le code XHTML, qui reste
inchangé.
<p>jfufjfkjhfd fdkjhfdjkhfd fdkjhfdjhfd cbcvbnvcsy dfljefg efgkljfgpfbfd
jhgfdhgsdf dfdjhgdf shfgfd fshjgf fjhgfnb dchjkhf fdsjkhjkhfds. jfufjfkjhfd
fdkjhfdjkhfd fdkjhfdjhfd cbcvbnvcsy dfljefg efgkljfgpfbfd jhgfdhgsdf dfdjhgdf
shfgfd fshjgf fjhgfnb dchjkhf fdsjkhjkhfds. jfufjfkjhfd fdkjhfdjkhfd
fdkjhfdjhfd cbcvbnvcsy dfljefg efgkljfgpfbfd jhgfdhgsdf dfdjhgdf shfgfd fshjgf
fjhgfnb dchjkhf fdsjkhjkhfds. jfufjfkjhfd fdkjhfdjkhfd fdkjhfdjhfd cbcvbnvcsy
dfljefg efgkljfgpfbfd jhgfdhgsdf dfdjhgdf shfgfd fshjgf fjhgfnb dchjkhf
fdsjkhjkhfds. jfufjfkjhfd fdkjhfdjkhfd fdkjhfdjhfd cbcvbnvcsy dfljefg
efgkljfgpfbfd jhgfdhgsdf dfdjhgdf shfgfd fshjgf fjhgfnb dchjkhf
fdsjkhjkhfds.</p>
La première lettre du paragraphe est mise en évidence dans le CSS à l’aide du

pseudo-élément :
first-letter (= "première lettre") associé au nom de la balise qui, dans la suite des
propriétés, prend des valeurs différentes susceptibles à modifier le première lettre.
Et dans cette suite des propriétés, seule font-size, conviendrait pour modifier la
taille de la première lettre qui varie en hauteur de lignes. Une lettrine peut
prendre 3 hauteurs de lignes, cela donnerait "3em". On peut aussi utiliser la
taille en pourcentage, comme "300%" ; Par contre, les valeurs en pixels seraient
inopportunes, d’autant plus qu'on ne connaît pas la taille exacte d'une ligne qui
peut varier à tout moment, par exemple "40px".

p:first-letter /* Je veux que la première lettre de mes paragraphes... */
{
float: left; /* Flotte à gauche */
font-size: 3em; /* Fasse une hauteur de 3 lignes */
font-family: Arial, Georgia, "Times New Roman", Times, serif; /* Soit mise en
Arial si possible*/
font-weight: bold; /* Soit écrite en gras (c'est plus voyant) */
margin-right: 5px; /* Qu'il y ait une marge de 5px à droite pour que ça colle
pas trop au reste du texte */
}
UWB – RDC 98
Cela revient à dire que tout flottant est toujours entouré d’un texte et cependant, on aura aussi besoin
d’une propriété pouvant nous aider à mettre fin la suite ou la forme que prendre tout un texte se
plaçant au coté de la lettrine ou de l’image. Cela serait possible à l’aide de la propriété clear qui
permettra de poursuivre en-dessous de la lettrine.
La forme à améliorer avec la suite d’un texte en dessous de la lettrine.
Et la propriété clear peut prendre trois valeurs qui suivent :

 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;
Dans l’exemple ci-dessous, nous allons utiliser la propriété clear:both, qui tourne
après un flottant à gauche et après un flottant à droite.
Exemple du Code : HTML

<p><img src="boni.jpg" 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>
Code : CSS
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
NB : la propriété clear:both s’applique au paragraphe appelé à continuer sous

l'image flottante.
IX.2.3. : Positionnement absolu, fixe et relatif
Dans le langage CSS, nous avons 3 façons de positionner un block en CSS :

 Le positionnement absolu : Est celui qui permet de placer un block n'importe où
sur la page web (en haut à gauche, en bas à droite, tout au centre etc...)
 Le positionnement fixe : il est similaire au positionnement absolu, sauf qu’il garde
le block toujours visible même quand on utilise la barre de défilement horizontal
ou vertical. On peut aussi le comparer au background-attachment:fixed qu’on a vu
dans les chapitres précédents.
 Le positionnement relatif : Est celui qui permet de déplacer un block par rapport à
sa position normale.
Le positionnement des blocks s’applique sur des balises de type inline comme on
l’a vu avec la balise <img />. Toutefois, il sera plus utilisé sur des balises block
que sur des balises inline.
UWB – RDC 99
Il faut d'abord faire son choix entre les 3 modes de positionnement disponibles en
utilisant la propriété CSS position à laquelle on donne une de ces valeurs :
 absolute : positionnement absolu ;
 fixed : positionnement fixe ;
 relative : positionnement relatif.
a) Le positionnement absolu
Le positionnement du block se fait à l’aide de la propriété position:absolute; en

lui associant les 4 propriétés CSS ci-après :
 left : position par rapport à la gauche de la page ;
 right : position par rapport à la droite de la page ;
 top : position par rapport au haut de la page ;
 bottom : position par rapport au bas de la page.
Les valeurs de cette propriété peuvent être exprimées en pixels ou pourcentage.

Ci-dessous, un exemple illustrant cette propriété :
La propriété position est appliquée avec au moins l’une des 4 propriétés ci-dessus
(top, left, right ou bottom).
Par exemple : position:absolute;

right:0px
bottom:0px;
Cet exemple signifie que le block doit être positionné tout en bas à droite (0 pixels
par rapport à la droite de la page, 0px par rapport au bas de la page).
UWB – RDC 100

Pour bien illustrer cet exemple, nous prendrons la balise universelle <div> (de type
block) où nous allons rédiger un paragraphe et mettre dans le block <div> deux ou
trois mots :
Code : HTML
<p>
Ceci est un paragraphe normal.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero.
Cras dolor. Quisque quis odio eget justo pulvinar aliquet. Morbi luctus mi. Fusce
leo. Integer eleifend condimentum felis. Phasellus vitae nibh. Mauris
pellentesque porta magna. Quisque at turpis. Praesent semper odio eget risus.
Praesent bibendum imperdiet massa. Quisque ac arcu ac augue dapibus vestibulum.
Pellentesque gravida. Mauris turpis. Aenean molestie. Praesent at quam et ligula
pellentesque luctus.
</p>
<div>Block positionné</div>
Ici, on a un paragraphe suivi d'un block div qui contient un peu de texte.
Ensuite, on va ajouter un peu de CSS pour positionner le block div :
Code : CSS
div
{
border: 1px solid green;
position: absolute;
left: 35px;
top: 50px;
}
NB : Le fond est en jaune avec une bordure pour que le block soit bien repéré.
Comme on l’a remarqué le block se place au-dessus du paragraphe avec le risque
de masquer le texte repris en dessous. Cela constitue l’un des grands avantages et
défauts du positionnement absolu.
Un autre exemple du Code : CSS
div
{
position: absolute;
right: 50%;
bottom: 20px;
}
Dans le cas où l’on veut positionner un block B en absolu dans le block A en
absolu reconnu initial, ce positionnement ne se fera plus par rapport au coin en
haut à gauche de la fenêtre mais, au contraire, par rapport au coin en haut à
gauche du block A.
b) Le positionnement fixe
Le positionnement fixe fonctionne comme le positionnement absolu, sauf que dans

ce dernier, le block reste fixe, même si on descend plus bas dans la page.
UWB – RDC 101

Et la propriété devient position:fixed; dans le CSS à laquelle on associe les

propriétés suivantes : top, left, right et bottom pour placer le block à n’importe
quel endroit sur la page web.
Le position:fixed; est couramment utilisé dans les menus qui sont censés rester
toujours visible :
Code : CSS
div
{
width: 150px;
height: 250px;
position: fixed;
right: 40px;
top: 60px;
}
p
{
width: 300px;
}
c) Le positionnement relatif
Le positionnement relatif, moins utilisé d’ailleurs, est celui qui sert généralement à
faire des "ajustements" des blocks.
Prenons par exemple un texte important, situé entre 2 balises <strong> qui doit
être mis sur un fond rouge pour qu'on puisse mieux le repérer :
Code : CSS
strong
{
background-color: red; /* Fond rouge */
color: yellow; /* Texte de couleur jaune */
}
Ce qui va nous restituer le texte ci-dessous :
Les coordonnées initiales (0,0) dans le positionnement relatif deviennent celles du

texte mis en évidence avec strong. Et en appliquant l’une des propriétés top,
bottom, left, right, le texte sur fond rouge va se déplacer par rapport à la position
où il se trouve.
UWB – RDC 102

Dans l’exemple qui suit, nous allons décaler de 55 pixels vers la droite et de 10
pixels vers le bas. :
Code : CSS
strong
{
background-color: red;
color: yellow;
position: relative;
left: 55px;
top: 10px;
}
Le texte s'est décalé par rapport à sa position initiale, comme ceci :
UWB – RDC 103

Chapitre X. : Conception du Design d’un site WEB
La conception du design pour son adaptation à l’environnement constitue un

chapitre tout à fait particulier, dans la mesure où il renferme les outils
indispendables pour arriver à changer complètement l’apparence de l’espace de
travail ; bien plus, une architecture complète de la page web répartie en différents
espaces d’application. Entre autres un en-tête, un menu principal, un corps
reprenant toutes les informations de la page web et un pied de page.
Et aussi, ce même chapitre nous servira de Travail Pratique dans lequel nous
allons créer un design complet du site web. Cette gymnastique exige certaines
qualités du Webmaster, tels que de la créativité, de l’imagination, de la préférence
dans les couleurs, du talent et enfin de l'expérience.
A tire de rappel, une page web c'est une combinaison de 2 fichiers distincts, à
savoir :
 fichier XHTML (.html ou .htm) : Est le fichier dans lequel se trouve le contenu de
la page (le texte). Il est constitué de balises comme <strong> qui servent à indiquer
si tel texte est important, si c'est un paragraphe ou une citation etc...
 fichier CSS (.css) : Est le fichier qui permet de créer la présentation de la page
web. En théorie, le CSS est facultatif d’autant plus qu’il améliore la présentation
des pages web.
Ce qui revient à dire que dans ce chapitre, nous allons prendre la démarche
suivante :
1. Saisir le contenu de la page (XHTML)
2. Et ensuite on modifie la présentation de la page (CSS)
Avant de commencer l’étape de la conception, nous allons d’abord parler de design

fix et de design extensible.
- Design fixe
Un design est dit fixe, quand sa largeur detient une taille fixée (par exemple de
800 pixels). Il y a en général une marge à gauche et à droite, et le contenu du site
se trouve au milieu.
- Design extensible
Tandis qu’un design extensible, est celui qui s'élargit automatiquement en

fonction de la résolution du visiteur. Si par exemple, le visiteur est en 1024*768,
le design fera 1024 pixels de large. Si le visiteur est en 1600*1200, il fera 1600
pixels de large.
De ces deux designs, le design extensible est plus préférable quand il n’autorise
pas d’avoir une partie de l’écran inutilisée. Mais cependant, les designs fixes sont
très faciles à concevoir, raison pour laquelle ils sont très rependus.
UWB – RDC 104

X.1. La structure du Design dans le XHTML
La structure d’une page web se construit avec la balise de blocks <div>, appelée
aussi balise universelle de type "block" qui va répartir les espaces en au moins 4
blocks, présentés comme ceci :
1. L'en-tête, appelé "header" est la partie qui contient en général le titre du

site, sous forme de bannière.
2. Ensuite, la partie principale de la page avec :
o à gauche ou à droite, le menu.
o de l'autre côté, le corps de la page, c'est-à-dire la partie qui contiendra
le texte du site.
3. Enfin, le "pied de page", appelé "footer" est la partie dans laquelle on indique
l'auteur du site, le Webmaster et ses coordonées : éventuellement son e-
mail, son numéro de télephone, la version du site, l’année, le copyright pour
faire classe, sa licence et quelques mots sur ses droits de propriétés.
La procédure étant toujours la même, le design dans le XHTML se développe

toujours avec l’éditeur NotePade++ ou le Bloc-Notes en se référant à la balise de
départ DOCTYPE.
Code : HTML
<head>
<title>Bienvenue sur mon site !</title>
</head>
<body>
</body>
</html>
UWB – RDC 105

Ce qui revient à dire que notre développement se fera seulement dans les balises
<body></body>.
En XHTML, nous allons commencer par va créer les 4 blocks à l'aide de 4 <div>
différents :

<div id="en_tete">

</div>
<div id="menu">

</div>
<div id="corps">

</div>
<div id="pied_de_page">

<div class="element_menu"> 
Texte du premier menu
</div>
<div class="element_menu">
Texte du second menu
</div>
</div>
UWB – RDC 107

Les balises <div>, dites balises blocks universelles, sont appellées aussi "balises
génériques". Des commentaires accompagnent les codes source pour bien repérer
à quoi correspond chaque <div>. Le premier englobe tous les autres sous-
menus (sous-menus une class "element_menu")
Nous allons ajouter, par un exemple, le texte à l'intérieur du menu pour faire
comme dans le dernier schéma et placer aussi un titre de menu dans chaque
"element_menu". Et c’est la balise du genre <h1> à <h6> par laquelle nous
commencerons pour terminer avec une liste à puces (<ul>) afin d’avoir un menu
bien organisé.

<div id="menu">
<h3>Titre menu</h3> 
<ul>
<li>Lien</li> 
<li>Lien</li>
<li>Lien</li>
</ul>
</div>
<h3>Titre menu</h3>
<ul>
<li>Lien</li>
<li>Lien</li>
<li>Lien</li>
</ul>
</div>
</div>
Généralement comme dans tous outils de développement Web, on place souvent

des listes à puces pour les menus car cela permet de créer une bonne
organisation.
NB : Les liens qui sont placés comme différentes options ne sont pas accompagnés
de balises <a href="...">, question d’éviter aux étudiants un encombrement dans
le code ci-haut. Néanmoins, dans la suite de programmes, nous tacherons
d’ajouter ces références pour bien illustrer les bons menus.

<div id="menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
</ul>
</div>
<h3>Titre menu</h3>
<ul>
</ul>
</div>
</div>
UWB – RDC 108

c) Le corps
Le corps de la page Web est la partie principale de la page qui renferme tout le
contenu à exposer sur l’espace public.
Pour bien structurer la page, on va placer d’abord un titre <h1> qui sera le titre
principal de la page. En général, le titre de la balise <title> de <head> est le même
que celui de la balise <h1>. Ensuite, viennent les paragraphes <p> éventuellement
séparés par des sous-titres <h2>.
Cela donnera un code relativement simple pour le corps:
Code : HTML
<div id="corps">
<h1>Super site des étudiants de l’UWB</h1>
<p>
Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd f hjgfgf fkhf
fhgfh fhf Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd f
hjgfgf fkhf fhgfh fhf Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd
fhjgfd f hjgfgf fkhf fhgfh fhf Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd
fdjhgfdhjgfd fhjgfd f hjgfgf fkhf fhgfh fhf
</p>
<h2>A qui s'adresse ce site ?</h2>

<p>
</p>
<h2>L'auteur : One NSULU</h2>

<p>
</p>
</div>
d) Le pied de page
Comme nous l’avons dit ci-haut, le pied de page est une partie de la page Web qui
sert à écrire le nom de l'auteur en général, un copyright, etc…

<p>Copyright, Etudiants de L2 Informatique 2011, tous droits réservés</p>
</div>
UWB – RDC 109

Le code XHTML final
Après avoir décortiqué tous les détails sur chacun des 4 gros blocks du design,
nous allons maintenant assembler tous les codes sur lesquels on a travaillé, en
reconduisant toujours en haut les balises DOCTYPE, <html>, <head>, <body>
etc...
Code : HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<title>Super site des étudiants de l’UWB</title>
</head>
<body>

<div id="en_tete">
</div>


<div id="menu">
<h3>Titre menu</h3>
<ul>
</ul>
</div>
<h3>Titre menu</h3>
<ul>
</ul>
</div>
</div>


<div id="corps">
<h1> Super site des étudiants de l’UWB </h1>
<p>
Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd f hjgfgf fkhf fhgfh fhf
Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd f
</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd f hjgfgf
fkhf fhgfh fhf Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd f
</p>
<h2>L'auteur : One NSULU, Ingénieur ressortissant de l’UWB</h2>
<p>
Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd f hjgfgf fkhf fhgfh fhf
Ururbr rjhf dfbfdjhgfjhfd fjkhfdkjhfd fdjhgfdhjgfd fhjgfd
</p>
</div>


<p>2011 UWB Copyright ©, tous droits réservés</p>
</div>
</body>
</html>
Ce dernier est la première page XHTML développée avec tous les outils vus jusqu’à lors.
UWB – RDC 110

X.2. La structure du Design dans le CSS
Cette partie du CSS est très importante dans la mesure où chaque ligne de code
qui s’applqiue, modifie directement le design.
a) Centrage du design
Sachant bien que toutes les opérations se développent sur la balise <body> du
code XHTML, cette dernière va renfermer tout le contenu de la page Web et a une
dimension en largeur et en hauteur, peut aussi avoir une des marges automatique
et être déclarée fixe, etc..
Exemple, nous allons donner une taille à la page, de 760 pixels, sachant que la
taille totale est de 800px et que les visiteurs qui sont en résolution 800*600
n'auront pas à se déplacer vers la droite pour voir le reste de la page.
On mettra les marges suivantes :
- un margin:auto pour centre le design ;

- une marge en haut (top) ;
- une marge en bas (bottom) de 20 pixels pour éviter que la page soit trop
"collée" avec le haut et le bas du navigateur.
- Enfin, une petite image de fond (background-image) à la page pour faire un
peu moins de vide.

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur.
Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter
d'avoir un vieux fond blanc :p */
}
On va enlever quelques lignes pour observer le résultat sur la page :

 Quand on enleve le fond (background-image), le fond de base redevient blanc.
 Quand on enleve le margin-top ou le margin-bottom, la page devient trop "collée"
avec les bords de la page.
 Quand on enleve le margin:auto, la page ne sera plus centrée et se retrouvera à
gauche.
NB : Le margin:auto ne marche pas sous IE 5 : leurs designs placés est placé à
gauche.
UWB – RDC 111

b) L'en-tête
La partie en-tête sera décorée avec une image de fond (background-image) en

affichant la bannière du site dans le CSS. Et dans la balise <div> de l'en-tête en
XHTML, aucun code n’a été saisi.
Cette technique permet d’utiliser et de faire que tout le design soit compris dans le
fichier CSS.
Ainsi à titre d’exemple, la démarche suivante peut être suivie pour afficher la
bannière avec uniquement du CSS :
1. La première chose à faire, pour que la bannière soit visible, il faut agrandir la taille du block
"en_tete" afin qu'il puisse contenir la bannière entière.
Comme la bannière fait 758x100pixels, on va définir une largeur et une hauteur de ces
dimensions :
width:758px;
height:100px;
2. Ensuite, on va indiquer quelle image de fond on veut mettre à notre grand block qui est pour
l'instant vide :
background-image:url("images/banniere.png");
3. En principe le fond ne peut apparaître qu'une seule fois, néanmoins on peut toujours vérifier
si cette image ne sera pas répétée en mosaïque avec background-repeat :
background-repeat:no-repeat;
4. Enfin, pour éviter que l'en-tête ne soit trop collé avec ce qui se trouvera dessous (le menu et
le corps), on va définir une petite marge en-dessous (margin-bottom) de quelques pixels :
margin-bottom:10px;

body
{
width: 760px;
margin: auto;
margin-top: 20px;
background-image: url("images/fond.png");
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
}
Rappel :
 Pour une class, on met un "." (point) devant le nom dans le CSS.
 Pour un id, on met un "#" (dièse) devant le nom dans le CSS. Et en XHTML, "en_tete" est un id !
c) Le menu : Un menu est normalement toujours placé "à gauche" du corps,

nous allons utiliser la propriété CSS float pour le faire flotter
Une taille par exemple de 120 pixels au menu est raisonable pour qu'il ne soit pas
trop grand sur la page Web.
UWB – RDC 112

Ensuite, on va faucaliser l’attention sur :

- la class "element_menu" (qui correspond à une partie de menu ou à un sous-menu). ;
- la couleur de fond un peu plus gris foncé ;
- une image de fond en repeat-x (qui se répètera uniquement horizontalement) ;
- une bordure à chaque élement de menu pour qu'on voie bien ses limites. "2px" solid black ;
- mettra un margin-bottom à chaque élément de menu pour éviter qu'ils ne soient trop collés
les uns par rapport aux autres.

body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
NB : Il y a toujours le risque de voir le texte du corps passer sous le menu flottant ; c’est pourquoi, il
faudra prévoir une marge à gauche du corps (margin-left).
UWB – RDC 113

Le principal qu'il faut bien comprendre ici, est qu’opn fera recours aux
"imbrications de balises".
Exemple : .element_menu ul
C’est-à-dire que le CSS va concerner les balises <ul> se trouvant à l'intérieur d'un
element_menu.

body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
}
/* Quelques effets sur les menus */
.element_menu h3 /* Tous les titres de menus */
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera
finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-
right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais
tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #B3B3B3;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
Pour améliorer davantage le design, l'effet du :hover sur les liens du menu sera très facile à réaliser.
UWB – RDC 114

d) Le corps
Le corps est une partie capitale de la page Web qui renferme le contenu à
soumettre à la lecture des visiteurs. Et pour cela, il serait important de définir les
bonnes marges de manière à ce que le texte du corps ne passe pas "sous" le menu
quand il est trop long. Cette conséquence ne s’aperçoit qand on utilise le code
float:left sur le menu.
Ci-dessous, la démarche à suivre :
- Il suffit de modifier la marge "à gauche" du corps. C'est une marge extérieure,
donc un margin-left.
- Donner une valeur suffisamment grande pour "pousser" le corps sur la droite,
afin qu'il ne passe plus sous le menu (donc une valeur supérieure à la largeur
du menu). Ici par exemple, on va mettre une valeur de 140px.
- Rajouter un margin-bottom afin que le pied de page en-dessous ne soit pas trop
"collé" au corps. Exemple : margin-bottom:20px;
- mettre un padding (marge intérieure) sur tous les côtés afin que le texte ne colle
pas trop avec les bords du corps ; Exemple : padding:5px;
- mettre une couleur de fond, une petite image de fond qui se répète
horizontalement, une bordure...

body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
}

.element_menu h3
{
color: #B3B3B3;
UWB – RDC 115


text-align: center;
}
.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
.element_menu a:hover
{
color: black;
}
/* Le corps de la page */
#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe
plus sous le menu */
margin-bottom: 20px; /* pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #B3B3B3;
background-color: #626262; /* Une couleur de fond pour le corps */
background-repeat: repeat-x; /* Une petite image de fond qui se répètera
horizontalement en haut */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps */
}
Ensuite on peut aussi :

- décorer les titres en changeant leur police pour mettre une "Arial" ;
- rajouter une image de fond sur les titres h2, avec background-repeat:no-repeat;, ce qui - signifie
que le fond ne se répètera pas (il restera donc à gauche) ;
- pour éviter que le texte du titre ne s'écrive sur l'image de fond, on met un padding-left de quelques
pixels. L’image d'engrenage devant chaque titre <h2>.
Code : CSS
body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
UWB – RDC 116

{
}
.element_menu h3
{
color: #B3B3B3;
text-align: center;
}
.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
{
color: black;
}
#corps
{
margin-left: 140px;
padding: 5px;
color: #B3B3B3;

}
#corps h1 /* Tous les titres h1 du corps */
{
color: #B3B3B3;
text-align: center;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
background-image: url("images/titre.png"); /* Une petite image de fond sur les titres
h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du
titre */
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
UWB – RDC 117

c) Le pied de page
Le modifications à appliquer dans cette partie sont similaires au reste. Telles que :
- mettre une couleur de fond, une bordure, vérifier la position des marges
- Mettre un "clear: both" pour supprimer l'effet flottant du menu. Cela permet de s'assurer que
le pied de page est bien sous le menu.

/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
*/
body
{
width: 760px;
margin: auto;
margin-top: 20px;
}
/* L'en-tête */
#en_tete
{
width: 760px;
height: 100px;
}
/* Le menu */
#menu
{
float: left;
width: 120px;
}
.element_menu
{
}
.element_menu h3
{
color: #B3B3B3;
text-align: center;
}
.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}
.element_menu a
{
color: #B3B3B3;
}
{
color: black;
UWB – RDC 118

}
#corps
{
margin-left: 140px;
padding: 5px;
color: #B3B3B3;
}
#corps h1
{
color: #B3B3B3;
text-align: center;
}
#corps h2
{
height: 30px;
background-image: url("images/titre.png");
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
padding: 5px;
clear: both;
text-align: center;
color: #B3B3B3;
}
Rappel : Insértion du CSS dans le XHTML
Pour faire appliquer les instructions du Code CSS par le fichier XHTML, il faut
rajouter la ligne suivante entre <head> et </head> :
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
Bref, modifier le CSS c’est modifier le design. Ce qui peut être à une personne qui
change de vêtement : on modifie son look (son apparence), mais la personne à
l'intérieur est toujours la même
UWB – RDC 119

Chapitre XI. Les tableaux

Par définition ; un tableau est une liste ou un état reprenant en nomenclatures
une suite de relevés structurée en colonnes et lignes. (cfr. Cours de C++). Dans
notre cours de l’APR, la construction des tableaux se fera à l’aide des balises
XHTML qui seront récupérées en CSS pour l’application des effets de style afin de
changer leurs apparences avec toutes les balises déjà vues jusqu’à lors.
C’est-dire, aucune nouvelle propriété ne sera ajoutée, en dehors de toutes celles

déjà appliquées dans le langage CSS.
Ainsi, le langage XHTML nous propose deux types de tableaux :
- Les tableaux simples ;

- Les tableaux complexes.
XI.1. Les tableaux simples
Pour construire un tableau, la structure de base est nécessaire pour définir le

début et la fin d’un tableau.
Avec la balise de type block <table> </table> placée en dehors de tout

paragraphe, on a un espace réservé pour un tableau simple.
Exemple du code HTML :

<p>Ceci est un paragraphe avant le tableau.</p>
<table>

</table>
<p>Ceci est un paragraphe après le tableau.</p>
Ensuite, dans la balise <table> </table>, nous allons placer 2 nouvelles balises
pour indiquer les limites de la ligne et les contenus des cellules :
 <tr> </tr> : indique le début et la fin d'une ligne du tableau.
 <td> </td> : indique le début et la fin du contenu d'une cellule.
Nom Promotion Age Ville

Deloux ILUNGA L2 Info 35 ans Kinshasa
One NSULU L2 Info 20 ans Lubumbashi
Jean KALENDA L2 Info 25 ans Likasi Ligne <tr>
Remy KAZADI L1 Info 33 ans Kinshasa
Marie MWISANGE L2 Eco 22 Kinshasa
Cellules <td>
NB : La construction du tableau se fait ligne par ligne avec la balise (<tr>),
c’est-à-dire autant de (<tr>) autant de lignes.
Exemple en Code HTML, construire un tableau à cinq lignes, avec quatre cellules par lignes (donc 4 colonnes) :
<table>
UWB – RDC 120

<tr>
<td>Deloux Ilunga</td>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>One NSULU</td>
<td>L2 Info</td>
<td>20 ans</td>
<td>Lubumbashi</td>
</tr>
<tr>
<td>Jean KALENDA</td>
<td>L2 Info</td>
<td>25 ans</td>
<td>Likasi</td>
</tr>
<tr>
<td>Remy KAZADI</td>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>Marie MWISANGE</td>
<td>L2 Economie</td>
<td>22 ans</td>
<td>Kinshasa</td>
</tr>
</table>
Ensuite, avec le CSS, nous allons essayer d’ajouter des bordures, avec les codes
CSS que nous avons déjà vus.
Code : CSS
td /* Toutes les cellules des tableaux... */
{
border: 1px solid black; /* ... auront une bordure de 1px */
}
Le tableau que restitue le CSS, jusque là, n’est pas un tableau parfait qui
nécessite une seule bordure entre 2 cellules.
Nous avons une propriété CSS spécifique aux tableaux : border-collapse, qui
signifie "coller les bordures entre elles". Et cette propriété peut prendre 2 valeurs :
 collapse : les bordures seront collées entre elles, c'est l'effet qu'on
recherche.
 separate : les bordures seront dissociées (valeur par défaut)
Code : CSS
Table
{
border-collapse: collapse; /* Les bordures du tableau seront collées */
}
td
{
}
NB : Dans les sections prochaines, plus loin, nous allons voir d'autres options
CSS à titre documentaire pour améliorer davantage le design des tableaux.
a) La ligne d'en-tête
UWB – RDC 121

La ligne d'en-tête d’un tableau est la partie supérieure qui reprend les noms des
rubriques expliquant la nature des contenus dans les cellules.
Dans notre exemple, les en-têtes sont "Nom", "Promotion", "Age" et "Ville" ? Et celle
ligne d'en-tête se crée avec un <tr> comme l’on vu jusqu'ici, mais les contenus des
cellules sont définis avec <th> et non pas des <td>.

<table>
<tr>
<th>Nom</th>
NB : La ligne d'en-tête est facilement repérable
<th>Promotion</th>
<th>Age</th> pour 2 raisons :
<th>Ville</th>  Les cellules sont des <th> au lieu des <td>
</tr> habituels.
 C'est la première ligne du tableau
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>One NSULU</td>
<td>L2 Info</td>
<td>20 ans</td>
<td>Lubumbashi</td>
</tr>
…
</table>
Et dans le Code CSS, il faut aussi ajouter le nom de la balise th :

table
{
border-collapse: collapse;
}
td, th /* Mettre une bordure sur les td ET les th */
{
}
NB : Après la définition de la balise th dans le CSS, le navigateur met le texte des
cellules d'en-tête en gras. Cette option peut toujours être modifiée et adaptée avec
les différentes propriétés dans le CSS.
b) Titre du tableau
Le titre du tableau permet de renseigner au visiteur du site sur le contenu du

tableau.
Nous allons utiliser dans le langage XHTML la balise <caption> qui se place au
début du tableau, juste avant les balises <tr> <th> de l'en-tête.
UWB – RDC 122


<table>
<caption>Liste des Ingénieurs finalistes</caption>
<tr>
<th>Nom</th>
<th>Promotion</th>
<th>Age</th>
<th>Ville</th> NB : La balise <caption> se place
</tr> toujours après la balise <table>.
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>One NSULU</td>
<td>L2 Info</td>
<td>20 ans</td>
<td>Lubumbashi</td>
</tr>
…
</table>
XI.2. Les tableaux complexes
Un tableau complexe n’est autre qu’un tableau simple bien structuré qui se
construit avec les 2 techniques ci-après :
 Pour les gros tableaux, la procédure est de les diviser en 3 parties :
o En-tête ;
o Corps du tableau ;
o Pied de tableau.
 Pour certains tableaux, la procédure est de fusionner des cellules entre elles.
a) Division du gros tableau
Dans le cas où le tableau est assez gros, l’intérêt est de le découper en plusieurs
parties. Pour cela, il existe des balises XHTML qui permettent de définir les 3
« zones » du tableau :
 L’en-tête (en haut) : il se définit avec les balises <thead></thead> ;
 Le corps (au centre) : il se définit avec les balises <tbody></tbody> ;
 Le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>.
Dans le pied de tableau d’un long tableau, généralement, la partie des cellules
d’en-tête peut être recopiée en autant de fois pour mémoire, afin de faire
correspondre la suite du corps aux titres des colonnes.
UWB – RDC 123

Schématiquement, un tableau en 3 parties se découpe comme suit :

Liste des Ingénieurs finalistes
Nom Promotion Age Ville En-tête (Thead)
Jean KALENDA L2 Info 25 ans Likasi Corps (tbody)
Remy KAZADI L1 Info 33 ans Kinshasa
Marie MWISANGE L2 Eco 22 Kinshasa
Nom Promotion Age Ville Pied du tableau (tfoot)
NB : Dans ce découpage, la disposition des balises doit suivre l'ordre suivant :
1. <thead> ;
2. <tfoot> ;
3. <tbody>.

<table>
<caption>Liste des Ingénieurs finalistes</caption>
<thead> 
<tr>
<th>Nom</th>
<th>Promotion</th>
<th>Age</th>
<th>Ville</th>
</tr>
</thead>
<tfoot> 
<tr>
<th>Nom</th>
<th>Promotion</th>
<th>Age</th>
<th>Ville</th>
</tr>
</tfoot>
<tbody> 
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>One NSULU</td>
<td>L2 Info</td>
<td>20 ans</td>
<td>Lubumbashi</td>
</tr>
<tr>
<td>L2 Info</td>
<td>25 ans</td>
<td>Likasi</td>
</tr>
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>22 ans</td>
<td>Kinshasa</td>
</tr>
</tbody>
</table>
UWB – RDC 124

NB : L’utilisation de ces 3 balises (thead, tbody, tfoot) sur un tableau n’est pas
une contrainte ; néanmoins, on pourra toujours s’en servir dans le cas où le
tableau devient complexe et qu’il nécessite une organisation assez systématique.
b) Fusion des tableaux
La fusion est une opération qui s’applique sur certains tableaux complexes, où les
données peuvent partager la même nature dans les colonnes tout comme dans les
lignes. Ce qui revient à dire que deux ou plusieurs colonnes peuvent être
fusionnées en une seule cellule et deux ou plusieurs lignes peuvent être
fusionnées aussi en une seule cellule.
Et pour effectuer une fusion, on fait recours à la balise <td> qui utilise deux
attributs, qui sont le type de fusion :
 la fusion de colonnes : Est celle qui s'effectue horizontalement avec l'attribut colspan.
 la fusion de lignes : Est celle qui s'effectue verticalement avec l’attribut rowspan.
Les attributs colspan et rowspan sont censés recevoir des valeurs qui déterminent
le nombre de cellules à fusionner entre elles.
C'est-à-dire : "Cette cellule est la fusion de 2 cellules"
Exemple : <td colspan="2">
Il est possible de fusionner plus de cellules à la fois (3, 4, 5...).
- la fusion de colonnes

<table>
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>One NSULU</td>
<td>L2 Info</td>
<td>20 ans</td>
<td>Lubumbashi</td>
</tr>
<tr>
<td>L2 Info</td>
<td>25 ans</td>
<td>Likasi</td>
</tr>
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td colspan=”2”> Non donné</td>
</tr>
</table>
UWB – RDC 125

Ce qui nous restitue le tableau ci-après :

Jean KALENDA L2 Info 25 ans Likasi
Remy KAZADI L1 Info 36 ans Kambove
Marie MWISANGE L2 Eco Non donné
- la fusion de lignes

<table>
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td>One NSULU</td>
<td>L2 Info</td>
<td>20 ans</td>
<td>Lubumbashi</td>
</tr>
<tr>
<td>L2 Info</td>
<td>25 ans</td>
<td>Likasi</td>
</tr>
<tr>
<td>L2 Info</td>
<td>35 ans</td>
<td>Kinshasa</td>
</tr>
<tr>
<td colrow=”2”> Non donné</td>
</tr>
</table>
Ce qui nous restitue un tableau de l’apparence ci-après :

Jean KALENDA L2 Info Likasi
Non donné
Remy KAZADI L1 Info Kambove
Les tableaux dans l’environnement CSS :
Dans cet environnement, nous ferons recours aux propriétés CSS pour changer
l’apparence du tableau, ci-dessous dans les différents cas par quelques exemples :
 Pour modifier la bordure des cellules, il suffit d'utiliser border ;
 Pour modifier la couleur de fond d'une cellule, on utilisera background-color ;
 Pour modifier l'image de fond d'une cellule, on utilisera background-image ;
 Pour modifier la taille (font-size) et la police (font-family) du texte des cellules d'en-
tête, en appliquant les propriétés adaptées aux balises <th> ;
UWB – RDC 126
 Pour agrandir le tableau tout entier : (width), le centrer (margin:auto car le tableau
est un block) ;
 Pour centrer le texte à l'intérieur des cellules (text-align:center) ;
 Pour modifier les marges intérieures des cellules : (padding) afin d’aérer le tableau.
NB : Les propriétés évoquées dans les exemples ci-dessus, sont censées être
appliquées aux balises appropriées selon le contexte. Par exemple, si on place une
couleur de fond noire à la balise <table>, tout le tableau sera noir. Tandis que si
on place la couleur de fond sur les balises <th>, seules les cellules d'en-tête.
Ci-dessous, un exemple complet dans lequel nous ferons du HTML et du CSS.

Code : HTML
<table>
<caption>Situation familiale</caption>
<thead> 
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
</thead>
<tfoot> 
<tr>
<th>Nom</th>
<th>Age</th>
<th>Pays</th>
</tr>
</tfoot>
<tbody> 
<tr>
<td>Kazadi</td>
<td>33 ans</td>
<td>e</td>
</tr>
<tr>
<td>Ngoie</td>
<td>26 ans</td>
<td>Etats-Unis</td>
</tr>
<tr>
<td>Ebambi</td>
<td>43 ans</td>
<td>France</td>
</tr>
<tr>
<td>Ntumba</td>
<td>34 ans</td>
<td>France</td>
</tr>
<tr>
<td>Kibambe</td>
<td>13 ans</td>
<td>Australie</td>
</tr>
<tr>
<td>Mulenda</td>
<td>19 ans</td>
<td>Chine</td>
</tr>
</tbody>
</table>
Code : CSS
caption /* Titre du tableau */
{
margin: auto; /* Centre le titre du tableau */
UWB – RDC 127

font-family: Arial, Times, "Times New Roman", serif;

font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-
dessous */
}
table /* Le tableau en lui-même */

{
margin: auto; /* Centre le tableau */
border: 4px outset green; /* Bordure du tableau avec effet 3D (outset) */
border-collapse: collapse; /* Colle les bordures entre elles */
}
th /* Les cellules d'en-tête */

{
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td /* Les cellules normales */

{
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center; /* Tous les textes des cellules seront centrés*/
padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche
les bordures */
}
Ce qui va nous restituer les tableaux ci-après :
Tableau sans CSS Tableau avec CSS
UWB – RDC 128

Quelques nouvelles propriétés CSS

Il existe quelques nouvelles propriétés CSS qui sont propres aux tableaux,
 caption-side : indique où doit se trouver le titre du tableau. Cette propriété peut prendre
les valeurs suivantes :
o top : le titre sera placé en haut du tableau (par défaut).
o bottom : le titre sera placé en bas du tableau.
o left : le titre sera placé à gauche du tableau.
o right : le titre sera placé à droite du tableau.
o
 border-collapse : cette propriété indique que les bordures des cellules seront collées entre
elles. On utilise souvent cette propriété car l'effet qu'elle procure est intéressant. Les
valeurs possibles sont :
o separate : les bordures seront séparées les unes par rapport aux autres (par défaut).
o collapse : les bordures seront collées entre elles.
o
 vertical-align : alignement vertical du contenu d'une cellule. Si une cellule a une hauteur
importante, il est possible de placer son contenu en haut, en bas ou au milieu de la cellule
o top : le contenu sera aligné en haut de la cellule
o middle : le contenu sera aligné au milieu de la cellule
o bottom : le contenu sera aligné en bas de la cellule
Comme on connaît déjà border-collapse, je vais me contenter de vous montrer un CSS de tableau
qui utilise le vertical-align et le caption-side.
J'utilise les mêmes fichiers XHTML et CSS que tout à l'heure, mais je rajoute dans le CSS les deux
propriétés qu'on vient d'apprendre :

caption
{
caption-side: bottom; /* Le titre sera placé en bas du tableau */
margin: auto;
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-top: 20px; /* La marge doit se faire au-dessus et non en-dessous maintenant */
}
table
{
margin: auto;
border: 4px outset green;
border-collapse: collapse;
}
th
{
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td
{
height: 80px; /* J'agrandis la hauteur des cellules pour que l'on puisse voir l'alignement
vertical */
vertical-align: bottom; /* Alignement vertical, le contenu des cellules sera placé en bas */
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
}
UWB – RDC 129

Chapitre XII. : L’Expédition d’un site sur le Web
Dans ce chapitre, nous allons voir comment expédier un site sur le Web par la
réservation d’un domaine, l’occupation d’un espace auprès de l’hébergeur et le
transfert des fichiers par le protocole client FTP.
XII.1. Le nom de domaine
Un nom du domaine est une adresse sur l’environnement Web. Exemple :

uwb_rdc.cd
Un nom de domaine est constitué de 2 parties :
uwb_rdc.cd
1 2
 La partie 1, constitue le nom de domaine proprement dit qui est donné librement
par le Webmaster et qui peut contenir des lettres et des chiffres, mais pas de
symboles particuliers (comme le ç français, le é, le è, les espaces, etc). Et ce nom
est censé être unique sur l’environnement Web.
 La partie 2, l'extension (aussi appelée tld). Il existe des extensions reprenant et
typifiant les noms des pays.
Exemple : .cd pour la RDC, .fr pour la France, .be pour la Belgique, .ca pour le
Canada).
Toutefois, il y a aussi des extensions utilisées au niveau international comme .com,

.net, .org. Elles étaient au départ réservées aux sites commerciaux, aux
organisations, etc...
En général, un site web se fait toujours précéder par "www", comme par exemple
"www.uwb_rdc.cd". Le «www » ne fait pas partie du nom de domaine; Et d’après
Wikipedia, Le World Wide Web (WWW), littéralement la « toile d’araignée
mondiale », communément appelé le Web, parfois la Toile, est un système
hypertexte public fonctionnant sur Internet qui permet de consulter, avec un
navigateur, des pages accessibles sur des sites. L’image de la toile d'araignée vient
des hyperliens qui lient les pages web entre elles.
Tandis que le HTTP (pour HyperText Transfer Protocol) est le protocole de

communication communément utilisé pour transférer les ressources du Web. Et le
HTTPS est la variante sécurisée de ce protocole.
Un nom de domaine est une entité qu’on peut réserver à un WebMaster contre
paiement d’une caution annuelle qui varie généralement entre 7 et 12 € pour un
an.
Le prix d’un domaine peut aussi varier en fonction de l'extension tandis que les
domaines qui portent l'extension .info sont généralement à plus bas prix.
UWB – RDC 130

Et pour avoir une réservation d’un nom de domaine, nous avons 2 solutions
possibles :
 Passer par un registrar spécialisé, qui est un organisme qui sert d'intermédiaire
entre l'ICANN (l'organisation qui gère les noms de domaine au niveau international,
tel les .com) et le WebMaster.
Exemple : http://www.ovh.com et http://www.gandi.net sont des registrars

français les plus rependus.
 Ensuite, solliciter un hébergement. Toutefois, le nom de domaine ainsi que

l'hébergement peuvent être sollicités au même moment.
XII.2. L’hébergeur
Un hébergeur Web est une entreprise de services informatiques hébergeant

(mettant en ligne) sur ses serveurs Web les ressources constituant les sites Web
de ses clients.
Dans l’environnement Web, tous les sites web sont stockés sur des ordinateurs
particuliers appelés "Serveurs". Et ces ordinateurs sont généralement de grande
capacité et de grandes vitesses, qui restent allumés en permanence.
Et ces serveurs contiennent des pages des sites web et les délivrent aux
internautes qui les demandent par des requêtes appropriées cela, de manière
permanente.
Ci-après, l’exemple d’un serveur :
NB : Le serveur ne possède pas d'écran car, la plupart du temps, il tourne tout
seul sans avoir besoin qu'on fasse quoi que ce soit dessus. Comme on le voit, les
serveurs sont très plats : c'est un format spécial de serveur (appelé "1U"). Cela
permet de les empiler dans des baies (une sorte d'armoire climatisée pour
serveurs). Ci-dessous, une baie type :
La baie que nous avons en exemple,

renferme une multitude de serveurs
qui sont sans écrans. Par contre, le
seul écran sur la baie n’est utilisé
que dans les cas de problème que
peut poser un serveur.
Une baie de serveurs
UWB – RDC 131

XII.2.1. Le rôle de l'hébergeur
L'hébergeur est une entreprise qui se charge de gérer des baies de serveurs. Elle
s'assure du bon fonctionnement des serveurs 24h/24 et 7j/7. En effet, si l'un
d'eux tombe en panne, tous les sites présents sur la machine deviennent
inaccessibles. Ces baies se situent dans des lieux particuliers appelés
datacenters. Les datacenters sont donc des "entrepôts à serveurs" et leur accès
est hautement sécurisé.
Exemple d’un datacenter renfermant plusieurs baies de serveurs.
En théorie, un site Web peut aussi être hébergé sur un ordinateur propre en
réunissant les critères ci-après :
- Avoir comme système d’exploitation Linux ;
- Avoir un ordinateur assez puissant qui doit fonctionner jour et nuit ;
- Avoir une connexion à très haut débit (en upload, la vitesse d'envoi des fichiers
compte énormément) ;
- Au besoin, avoir un câblage en fibre optique (pour une vitesse de plusieurs Gbps).
Bref, gérer un serveur soi-même est activité très complexe, et la plupart du temps
les particuliers et les entreprises font appel à des hébergeurs professionnels.
XII.2.2. Localisation des hébergeurs
Les hébergeurs, contrairement aux registrars, sont très nombreux sur le marché
de l’Internet. Cependant, il y a ci-dessous, trois types d’hébergeurs :
 Hébergement mutualisé : C’est un hébergement où le site est placé sur un
serveur gérant plusieurs sites à la fois (Exemple une centaine, ou même
plus). Cette offre est la moins chère.
 Hébergement dédié virtuel : C’est un hébergement où le serveur ne gère
que très peu de sites (généralement moins d'une dizaine). I
 Hébergement dédié : C’est un hébergement où le serveur gère uniquement
un seul site. Mais, c’est un environnement qui coûte quand il s’agit
d’administrer le serveur à distance.
Ci-dessous, un hébergeur type :
- PlanetHoster : www4.smartadserver.com/call/cliccommand/4446357
L’ébergement est une opération pour laquelle les hébergeurs proposent les offres
de différents types selon les trois catégories de plan :
 Plan essentiel : 10 Go d'espace disque et 250 Go de trafic.
UWB – RDC 132
 Plan performance : 50 Go d'espace disque et trafic illimité.

 Plan illimité : espace disque et trafic illimités.
Les différentes catégories de plan ci-dessus, sont en fait très similaires mais elles
diffèrent seulement au niveau de l'espace de stockage et du trafic.
Et le trafic dont il est question ici, est une quantité de données envoyées par mois
aux visiteurs du site. A titre d’exemple, une image de 1 Mo sur le site et qui est
chargée 500 fois dans le mois par les visiteurs, amènera le WebMaster de créer un
trafic de 500 Mo.
En pratique, les navigateurs utilisés par les visiteurs mettent en cache les images,
ce qui leur évite d'avoir à recharger plusieurs fois une même image. Cela diminue
d'autant plus le trafic nécessaire.
Cela revient à dire qu’un site sollicité par beaucoup de visiteurs (donc beaucoup
de trafics), nécessite un choix d’un plan approprié pour assurer un trafic intense.
Ainsi, pour concrétiser la commande sur l’hébergeur PlanetHoster, on aura à

paramétrer le formulaire suivant :
Le champ de texte se trouvant sous Nom de domaine est le nom de domaine à

saisir. Ensuite, le site de PlanetHoster va se charger de vérifier si le domaine est
disponible.
- Si le réellement le nom de domaine existe, il passe à une autre étape ;

- Sinon, il faudra choisir un autre nom de domaine ;
- Enregistrer le nom domaine ; et c’est le formulaire ci-dessous qui sera
affiché :
- Ensuite, il ne reste plus qu'à renseigner les coordonnées et finaliser l'achat

par carte bancaire ou Paypal ;
- une fois les formalités et le paiement effectués, le site est redirigé vers
PlanetHoster, qui confirme au WebMaster de la bonne prise en compte de la
UWB – RDC 133

commande.
- Ensuite, l’hébergeur envoie plus tard un e-mail indiquant toutes les
informations nécessaires pour mettre en place le site.
- Enfin, lorsque les identifiants parviennent au WebMaster, on passe à
l'étape suivante : envoyer votre site web sur le serveur de votre
hébergeur !
XII.3. L’Utilisation du Client FTP
XII.3.1. Installation d’un client FTP
Le FTP qui signifie « File Transfer Protocol » est le moyen utilisé pour envoyer les
fichiers.
Cependant, il existe plusieurs logiciels permettant d'utiliser le FTP pour transférer

les fichiers sur Internet, à l’instar de FileZilla qui est un logiciel gratuit et en
français.
La démarche à suivre, présentement, est de télécharger Télécharger FileZilla (3,9 Mo)
Dans la fenêtre ci-haut, nous avons 4 grandes :

1. En haut, les messages qu'envoie et reçoit le logiciel.
2. A gauche, c'est votre disque dur avec les dossiers et la partie du bas la liste des
fichiers du dossier actuel.
3. A droite, c'est la liste des fichiers envoyés sur Internet.
4. Enfin, en bas, les fichiers en cours d'envoi (en pourcentage d'envoi).
UWB – RDC 134

XII.3.2. Configuration du client FTP
La première étape dans cette section qui concerne l’installation du client FTP,
serait de se "connecter" au serveur de l’hébergeur.
Ainsi, quel que soit l'hébergeur, le principe de fonctionnement reste toujours le

même, où nous avons les trois étapes indispensables ci-après pour que le
(FileZilla) choisi puisse se connecter au serveur :
 L'IP : Est "l'adresse" du serveur. Où l’on configura de manière suivante :
 ftp.mon-site.com, Aussi, ça peut être une suite de nombres comme 122.65.203.27
 Le login : Est une identifiant, où l’on peut mettre un pseudo, ou le nom du site.
 Exemple : boni630.
 Le mot de passe.
Après être en possession de ces informations, le WebMaster est censé les confier au
FileZilla pour se connecter au serveur.
Ce qui va donner un formulaire comme ce dernier :
NB : Dans le cas présent,
- Hôte : est l’espace où l’on doit indiquer l'adresse ip, du genre ftp.attitude-nature.com).
- Pour pouvoir entrer le login / mot de passe, on doit cocher Type d'authentification : Normal
- Le login est attitudeU et le mot de passe est caché
- Ensuite, cliquez sur "Connexion" pour lancer le site.
Et pour transférer les fichiers à ce stade, nous avons 2 possibilités :

 Soit la connexion a réussi, et apparaissent en haut, des messages en vert comme
"Connecté". Dans ce cas, la zone de droite de la fenêtre de FileZilla devrait s'activer
et vous verrez les fichiers qui se trouvent déjà sur le serveur.
 Soit il ya blocage (planté). Dans ce cas, des messages sont écrits en rouge. Car, soit
le login ou soit le mot de passe est incorrect
Si la connexion a réussi, alors la suite serait simple : dans la partie de gauche, on cherche où se
trouvent sur le disque dur les fichiers .php, .html et .css et aussi les images .jpg, .png, .gif etc...
UWB – RDC 135

Ensuite, on double-clique sur le fichier à transférer à gauche, il apparaîtra à droite, ce qui voudra dire
qu'il a été correctement envoyé sur le serveur, donc qu'il est accessible sur Internet.
Les fichiers, généralement, à envoyer sont des fichiers de types : .php, .html, .css et des images,
mais aussi .pdf, .zip, etc.
Ci-dessous un exemple quand on a transféré un fichier "index.html" :
NB : Index.html apparaît à droite, ce qui veut dire qu'il est maintenant disponible
sur le serveur Web, Et il doit aussi servir de page d'accueil. Elle est la page qui
sera chargée lorsqu'un nouveau visiteur arrivera sur votre site.
Les dossiers entiers peuvent aussi être transférés d'un seul coup quand ont fait
glisser-déplacer depuis la partie de gauche jusqu'à la partie de droite de la fenêtre.
UWB – RDC 136

Cours de XHTML Et de Css Definitif UWB

Transféré par

Droits d'auteur :

Formats disponibles

Cours de XHTML Et de Css Definitif UWB

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours de XHTML Et de Css Definitif UWB

Transféré par

Droits d'auteur :

Formats disponibles

Boni KIBAMBE MUTAMBA

Doctorant en Sciences Economiques à l’Université Pédagogique Nationale

Cahier des charges

Ce cours est un complément indispensable au cours des Réseaux informatiques et

Ce cours inclut aussi les dernières évolutions de la programmation réseau, qui

L’enseignement se basera sur la théorie et les exercices de programmation du

Ce cours sera articulé sur :

Tél. : 085 414 0402 - 099 421 0085

Chapitre I. Introduction au Client-Serveur

I.1. Origines et historique

I.1.1. La période d’avant 1980

I.1.2. La période des années 1980

I.1.3. La période des années 1990

I.2. Caractéristiques et rôle de l’Approche Client-Serveur

I.2.2. Les composants de Client-Serveur

I.2.3. Le Rôle de Client-Serveur

I.3. Les générations de Client-Serveur

I.3.1. La première génération de Client-Serveur

I.3.2. La deuxième génération de Client-Serveur

I.3.3. La troisième génération de Client-Serveur

Chapitre II. L’Architecture Client-Serveur

II.2. Technique de dialogue

II.3. Types de Client-Serveur

II.4. Le client-Serveur de données et procédure

II.5. Les fonctions des serveurs de données

IIère partie : Le langage XHTML

Chapitre III. : Généralités sur le XHTML et le CSS

III.3. Les navigateurs

Chapitre IV : Les éléments de XHTML

IV.1. Les balises

IV.2. Les attributs

IV.3. Création de pages XHTML

IV.4. Les commentaires

Chapitre V. : L’organisation du texte

V.1. Les paragraphes

V.2. Le Saut de ligne

V.3. Les titres

V.4. La mise en valeur du texte

V.5. Les autres balises

Chapitre VI. : Création des liens

VI.1. Les liens relatifs et les liens absolus

VI.2. Le lien vers une autre page

VI.3. Info-bulle d'aide sur le lien

VI.4. Le lien d’envoi de mail

VI.5. Le lien vers une ancre

IIIème partie : Le langage CSS

Chapitre VII. : L’emplacement des codes CSS

Chapitre VIII. : La mise en forme

VIII.1. : La taille du texte

VIII.4. : Les effets de style

VIII.6. : Les pseudo-formats

VIII.7. : Les listes à puces

Chapitre IX. : La mise en boîte

Chapitre X. : La conception du Design d’un site WEB

Chapitre XI. : La création des tableaux

Chapitre XII. : L’Expédition d’un site sur le Web

XII.1. Le nom du domaine

XII.3. L’Utilisation du Client FTP

IVème partie : La Conception du Site avec le PHP et MySQL