Labo2 2022

Notes de cours de Labo_II/G2_IG/ISC-GOMA -1-
Enseignement Supérieur et Universitaire

Institut Supérieur de Commerce de Goma
ISC-GOMA
www.iscgoma.net
NOTES DE COURS DE LABORATOIRE

INFORMATIQUE II
Destinées aux étudiants de deuxième année de l’Option Informatique de Gestion
Collection et mise à jour par : Ir Janvier TWIZERE SINDAMBIWE
Appartenant à l’étudiant(e): ………………………………
Avril 2022
……………………………………………………………………………………………………………………………………………………………………….
Par : Ir Janvier TWIZERE
Email : ngoga10janvier@gmail.com
Objectifs du Cours
En deuxième année de graduat, le cours de Laboratoire Informatique poursuit les
objectifs ci-après :
- Exploiter le cadre conceptuel des réseaux ;
- Faire la simulation avec CISCO PacketTracer ;
- Concevoir et configurer un réseau local;
- Partager les données et les ressources ;
- Réaliser la configuration d’un routeur ;
- Exploiter le cadre conceptuel du Web ;
- Développer les pages web.
Bibliographie Sélective
I. Ouvrages
1. Danièle Dromard & Dominique Seret, Architecture des réseaux, 2ème édition,
Pearson France, 2010, 102 pages.
2. Pierre-Alain GOUPILLE, Technologie des ordinateurs et des réseaux (Cours et
exercices corrigés), Dunod, Paris, 2000, 408 pages.
3. Guy Pujolle, Cours réseaux et télécoms, EYROLLES, Paris, 2004, 512 pages.
4. Matthieu Nebra, Apprenez à créer votre site web avec HTML5 et CSS3, 2013, 248
pages.
5. Christophe Porteneuve, Bien développer pour le Web 2.0, Bonnes pratiques 2è
édition, EYROLLES, Paris, 2008, 673 pages.
6. Mathieu Nebra, Réussir son site web avec HTML et CSS, 2è édition, EYROLLES,
Paris, 2008, 316 pages.
7. JOHN L. Hennessy et David A. Patterson, Architecture des ordinateurs: une
approche quantitative, 2e édit, International Thomson Publishing Compagny, Paris,
France, 1996.
8. DANIEL CALI et Gabriel ZANY, Technologies de l’interconnexion des réseaux, Paris,
France, PUF, 1994.
9. Gérard BOUYER, Transmissions et réseaux de données, DUNOD, Paris, France,
1995.
……………………………………………………………………………………………………………………………………………………………………….
INTRODUCTION
La communication entre ordinateurs ne peut pas être distinguée de
celle des hommes. Si au départ, l'ordinateur n'est qu'un gros jouet aux mains
de scientifiques, celui−ci a créé une véritable révolution technologique qui
devient le support de base de la communication entre les humains.
L'informatique est entrée partout, dans le téléphone, les disques compacts, la
voiture, l'avion,... Partout l'ordinateur a remplacé la machine à écrire.
Les réseaux locaux permettent aux ordinateurs de communiquer entre

eux sur un site (un bâtiment, une agence, un bureau). On utilise pour ces
communications des technologies permettant aux ordinateurs de communiquer
rapidement mais sur de courtes distances (100 mètres par exemple).
Pour gérer ces liaisons et pour interconnecter des réseaux, on utilise
des ordinateurs spécialisés : des routeurs. Un réseau informatique est composé
d'ordinateurs, de routeurs, de liaisons et de réseaux locaux.
La communication internationale fait intervenir le Web qui permet aux
internautes de larguer des requêtes partout dans le monde via le serveur qui
les analyse afin de réserver et d’acheminer les réponses appropriées aux
requêtes larguées.
Le Web utilise des langages et syntaxes officiels (HTML, XHTML, XML,
CSS,…) qui reposent sur des standards publiés par des organisations de
normalisation telles que le W3C. Timothy Berners-Lee est le co-inventeur du
Web, qu'il met au point au début des années 1990 avec son collègue Robert
Cailliaud.
……………………………………………………………………………………………………………………………………………………………………….
PART I. RÉSEAU INFORMATIQUE
CHAP.I. CONCEPTION D’UN RÉSEAU INFORMATIQUE

1.0. NOTIONS
a) Déf
A la base, un réseau informatique désigne un moyen quelconque
permettant de relier deux ou plusieurs ordinateurs entre eux. Le terme
générique « réseau » définit un ensemble d’entités (objets, personnes, etc.)
interconnectées les unes avec les autres.
Un réseau permet ainsi de faire circuler des éléments matériels ou
immatériels entre chacune de ces entités selon des règles bien définies.
Selon les types d’entité concernés, on distingue le réseau de transport,
le réseau téléphonique, le réseau de neurones, le réseau des malfaiteurs, le
réseau informatique, …C’est ce dernier type qui fera l’objet de ce cours.
La mise en réseau (Networking) consiste à mettre en œuvre des outils
et des tâches permettant de relier des ordinateurs afin qu’ils puissent partager
des ressources en réseau.
b) Rôle du R.I.
Un réseau informatique peut servir au (à la) :
• Partage de ressources (fichiers, applications ou matériels, connexion à
internet, etc.).
• Communication entre personnes (courrier électronique, discussion en direct,
etc.).
• Communication entre processus (entre des ordinateurs industriels par
exemple).
• Garantie de l'unicité et de l'universalité de l'accès à l'information (bases de
données en réseau).
• Jeu vidéo multi-joueurs.
• …..
1.1. CONCEPTS-CLÉS DU RÉSEAU
• Nœud : Équipement (ordinateur, concentrateur, imprimante etc.) du réseau
informatique possédant une adresse physique.
• Nœud TCP/IP: Équipement fonctionnant avec le protocole TCP/IP.
• Adresse physique: Adresse unique attribuée par le fabricant, gérée par un
organisme international et inscrite de façon définitive dans l'équipement.
Appelée aussi adresse Ethernet ou adresse MAC (Media Access Control).
……………………………………………………………………………………………………………………………………………………………………….
• Adresse logique: Adresse unique attribuée par les répondants informatique

locaux et gérée par le NIC pour les adresses IP (organisme international).
• Paquet, trame: Information électrique transitant sur le réseau et
représentant une suite de bits. Il s'agit de l'unité de base du réseau (frame).
• Protocole: Description des mécanismes permettant la gestion des paquets
d'information et leur transition du réseau à l'application. Par extension, logiciel
(software) fonctionnant sur une machine et permettant cette gestion interne.
• Suite de protocoles: Ensemble de protocoles communiquant entre eux.
• Couches réseau: Composante protocole fonctionnant sur un équipement et
lui permettant de communiquer à travers le réseau.
• Media: Support permettant le passage de l'information: différents types de
câble, ondes hertziennes, laser etc.
• Bande passante: Comme en téléphonie ou en wi-fi, la bande passante
détermine la quantité d'informations capables de transiter par seconde sur un
media donné.
• Backbone : Réseau physique (câble et matériel actif) servant de colonne
vertébrale au reste du réseau. En général composée de fibres optiques est
assurant parfois une plus grande bande passante (155Mbits/s).
• Interconnexion: Ensemble matériel et logiciel permettant la connexion
d'équipements utilisant des média et des protocoles différents.
• Segment physique: Câble ou ensemble de câbles reliés sans équipement
électronique d'interconnexion (il s'agit d'un seul domaine de collisions).
• Segment logique: Sous réseau regroupant des nœuds correspondant à un
même groupe d'adressage; un segment logique peut englober plusieurs
segments physiques.
1.2. ÉQUIPEMENTS RÉSEAU

Les principaux équipements matériels mis en place dans les réseaux
locaux sont:
- Le répéteur, permettant de régénérer un signal.
- Le concentrateur (hub), permettant de connecter plusieurs hôtes entre
eux.
- Le pont (bridge), permettant de relier des réseaux locaux de même type.
……………………………………………………………………………………………………………………………………………………………………….
- Le commutateur (switch) permettant de relier divers éléments tout en

segmentant le réseau.
- La passerelle (gateway), permettant de relier des réseaux locaux de

types différents.
- Le routeur, permettant de relier de nombreux réseaux locaux de telle
façon à permettre la circulation de données d'un réseau à un autre de la
façon optimale.
- Le B-routeur, associant les fonctionnalités d'un routeur et d'un pont.

Les f
1.3. TYPES DE RÉSEAUX INFORMATIQUES

On distingue différents types de réseaux selon leur taille, leur vitesse de
transfert des données ainsi que leur étendue. Les réseaux privés sont des
réseaux appartenant à une même organisation. On fait généralement trois
catégories de réseaux : LAN, MAN & WAN.
Il existe trois autres types de réseaux : les PAN (Personal Area Network),
les TAN (Tiny Area Network) identiques aux LAN mais moins étendus (2 à 3
machines) et les CAN (Campus Area Network) identiques au MAN (avec une
bande passante maximale entre tous les LAN du réseau).
♦ LAN (Local Area Network)
Il s’agit d’un ensemble d’ordinateurs appartenant à une même
organisation et reliés entre eux dans une petite aire géographique par un
réseau, souvent avec une même technologie (la plus répandue étant Ethernet).
La vitesse de transfert de ce type de réseau varie entre 10 Mbps (pour
Ethernet) et 1 Gbps (pour FDDI) tandis que sa taille peut varier entre 100 et
1000 utilisateurs.
La frontière entre un réseau local et un réseau métropolitain est très
floue. Les principes de fonctionnement sont à peu près les mêmes. Un réseau
……………………………………………………………………………………………………………………………………………………………………….
local se différencie surtout par des performances plus réduites : la distance

généralement beaucoup plus courte, les débits moins élevés.
♦ MAN (Metropolitan Area Network)
Les réseaux métropolitains ou MAN permettent d’interconnecter un
certain nombre de sites entre eux. Les MAN servent surtout à interconnecter
des réseaux locaux. Ils sont souvent appelés dans la littérature anglaise
backbone, c’est – à –dire épine dorsale. De ce fait, le nombre d’utilisateurs
est limité et la distance couverte est plus petite que pour les WAN.
♦ WAN (Wide Area Network) représentent les réseaux étendus. Le réseau
Transpac est un bon exemple de réseau public. Ce réseau est constitué de
liaisons point à point à haut débit entre des nœuds situés dans de grandes
villes Françaises, comme compagnies concurrentes peuvent utiliser le réseau
pour transmettre des données, la confidentialité doit être garantie. Le délai de
transmission est assez important, le message est recopié de nœud en nœud
jusqu’à atteindre sa destination.
♦ VPN (Virtual Private Network)
Le VPN ou RPV (Acronyme de Réseau Privé Virtuel), est dit virtuel car il
relie deux réseaux physiques (réseaux locaux) par une liaison non fiable
(Internet), et privé car seuls les ordinateurs des réseaux locaux de part et
d’autre du VPN peuvent voir les données.
Le système de VPN permet donc d’obtenir une liaison sécurisée à
moindre coût, si ce n’est la mise en œuvre des équipements terminaux. En
contrepartie, il ne permet pas d’assurer une qualité de service comparable à
une ligne louée dans la mesure où le réseau physique est public et donc non
garanti.
1.4. TOPOLOGIE D’UN RÉSEAU

Un réseau informatique est constitué d’ordinateurs reliés entre eux grâce
à des lignes de communication (câbles réseau par ex.) et des éléments
matériels (cartes réseau, ainsi que d’autres équipements permettant d’assurer
la bonne circulation des données). La topologie peut être physique ou logique.
1.4.1. Topologie physique
L’arrangement physique, c'est-à-dire la configuration spatiale du réseau
est appelé « topologie physique ». Au point de vue physique, on distingue
généralement les topologies suivantes :
a) Topologie en bus
……………………………………………………………………………………………………………………………………………………………………….
Une topologie en bus est l’organisation la plus simple d’un réseau. En

effet, dans une topologie en bus tous les ordinateurs sont reliés à une même
ligne de transmission par l’intermédiaire de câble, généralement coaxial. Le
mot « bus » désigne la ligne physique qui relie les machines du réseau.
Cette topologie a pour avantage d’être facile à mettre en œuvre et de
posséder un fonctionnement simple. En revanche, elle est extrêmement
vulnérable étant donné que si l’une des connexions est défectueuse,
l’ensemble du réseau en est affecté.
b) Topologie en étoile
Dans une topologie en étoile, les ordinateurs du réseau sont reliés à

un système matériel central appelé concentrateur (en anglais hub,
littéralement moyen de roue). Il s’agit d’une boîte comprenant un certain
nombre de jonctions auxquelles il est possible de raccorder les câbles réseau
en provenance des ordinateurs. Celui-ci a pour rôle d’assurer la communication
entre les différentes jonctions.
Contrairement aux réseaux construits sur une topologie en bus, les
réseaux suivant une topologie en étoile sont beaucoup moins vulnérables car
une des connexions peut être débranchée sans paralyser le reste du réseau. Le
point névralgique de ce réseau est le concentrateur, car sans lui plus aucune
communication entre les ordinateurs du réseau n’est possible.
……………………………………………………………………………………………………………………………………………………………………….
En revanche, un réseau à topologie en étoile est plus onéreux qu’un

réseau à topologie en bus car un matériel supplémentaire est nécessaire (le
hub).
c) Topologie en anneau
Dans un réseau possédant une topologie en anneau, les ordinateurs

sont situés sur une boucle et communiquent chacun à leur tour.
En réalité, dans une topologie en anneau, les ordinateurs ne sont pas
reliés en boucle, mais reliés à un répartiteur (appelé MAU, Multistation Access
Unit) qui va gérer la communication entre les ordinateurs qui lui sont reliés en
impartissant à chacun d’entre eux un temps de parole.
Les deux principales topologies logiques utilisant cette topologie physique
sont Token Ring (anneau à jeton) et FDDI.
d) Topologie en arbre
Aussi connu sous le nom de hiérarchique, il est divisé en niveaux. Le

sommet, de haut niveau, est connecté$ à plusieurs nœuds de niveau inférieur,
dans la hiérarchie. Ces nœuds peuvent être eux-mêmes connectés à plusieurs
nœuds de niveau inférieur. Le tout dessine alors un arbre, ou une
arborescence. Le point faible de ce type de topologie réside dans l'ordinateur
"père" de la hiérarchie qui, s'il tombe en panne, paralyse l’ensemble (les deux
moitiés) du réseau.
e) Topologie maillée
Une topologie maillée correspond à plusieurs liaisons point à point. (Une

unité réseau peut avoir 1-N connexions point à point vers plusieurs autres
unités.) Chaque terminal est relié à tous les autres. L'inconvénient est le
nombre de liaisons nécessaires qui devient très élevé lorsque le nombre de
……………………………………………………………………………………………………………………………………………………………………….
terminaux l'est : s'il y a N terminaux, le nombre de liaisons nécessaires est

N .( N − 1)
de , fonction qui croît comme N * 2.
2
Cette topologie se rencontre dans les grands réseaux de distribution

(Exemple : Internet). L'information peut parcourir le réseau suivant des
itinéraires divers, sous le contrôle de puissants superviseurs de réseau, ou
grâce à des méthodes de routage réparties.
1.4.2. Topologie logique

La topologie logique, par opposition à la topologie physique,
représente la façon dont les données transitent dans les lignes de
communication. Les topologies logiques les plus courantes sont Ethernet,
Token Ring et FDDI.
a) LAN Ethernet
Le principe du réseau Ethernet est apparu à la fin des années 70 dans les
milieux de chercheurs aux E.U. La méthode utilisée est la contention, tout le
monde peut prendre la parole quand il le souhaite. Mais alors, il faut une règle
pour le cas où deux stations se mettraient à parler au même moment.
La méthode Ethernet consiste pour une station, à écouter si une autre
station n’est pas aussi en train d’émettre. Si c’est le cas, la station cesse
d’émettre et réémet son message au bout d’un délai fixe. Cette méthode est
aléatoire, en ce sens qu’on ne peut prévoir le temps nécessaire à un message
pour être émis, transmis et reçu.
La vitesse normalisée d’Ethernet est de 10 Mbps. Depuis 1992, les comités de
standardisation ont travaillé à un nouveau réseau Ethernet à 100 Mbps baptisé Fast-
Ethernet.
b) Token Ring
La méthode du jeton est dite déterministe puisqu’en fonction des
caractéristiques du réseau (nombre de stations et longueur du câble), on peut
déterminer le temps maximal que prendra un message pour atteindre son
destinataire. IBM est resté le principal acteur du monde Token Ring.
Le droit d’émettre est matérialisé par une trame particulière « le jeton ou
token ». Celui-ci circule en permanence sur le réseau. Une station qui reçoit le jeton
peut émettre une ou plusieurs trames (station maître). Si elle n’a rien à émettre, elle
se contente de répéter le jeton (station répéteur). Dans un tel système, les
informations transitent par toutes les stations actives.
Notons que le jeton n’a nullement besoin de contenir l’adresse d’un
destinataire, le destinataire est la station qui suit physiquement celle qui le détient
(technique du jeton non adressé).
……………………………………………………………………………………………………………………………………………………………………….
Notes de cours de Labo_II/G2_IG/ISC-GOMA - 10 -
c) FDDI (Fiber Distributed Data Interface)
FDDI est un réseau en anneau (double anneau), il utilise la fibre optique
multimode, le débit nominal est de 100Mbps et la distance maximale couverte
de 100km. FDDI supporte jusqu’à 1000 stations distantes l’une de l’autre de
moins de 2 km. Une version de FDDI sur paire torsadée existe (Twisted Pair
Distributed Data Interface), elle autorise des débits de 100 Mbps sur 100
mètres.
Pour accéder au support, une station doit posséder le jeton. Elle émet
ses données et génère un nouveau jeton. Chaque station retire de l’anneau les
données qu’elle y a déposées. Plusieurs trames de données issues de stations
différentes peuvent circuler sur l’anneau, mais il n’y a qu’un seul jeton.
……………………………………………………………………………………………………………………………………………………………………….
CHAP. II. INSTALLATION PHYSIQUE D’UN R.I.

2.1. CONSTITUANTS MATÉRIELS D'UN RÉSEAU LOCAL
Un réseau local est constitué d'ordinateurs reliés par un ensemble
d'éléments matériels et logiciels. Les éléments matériels permettant
d'interconnecter les ordinateurs sont les suivants:
• La carte réseau (parfois appelé coupleur): il s'agit d'une carte connectée
sur la carte-mère de l'ordinateur et permettant de l'interfacer au support
physique, c'est-à-dire aux lignes physiques permettant de transmettre
l'information.
• Le transceiver (appelé aussi adaptateur): il permet d'assurer la
transformation des signaux circulant sur le support physique, en signaux
logiques manipulables par la carte réseau, aussi bien à l'émission qu'à la
réception:
• La prise: il s'agit de l'élément permettant de réaliser la jonction mécanique
entre la carte réseau et le support physique
• Le support physique d'interconnexion: c'est le support (généralement
filaire, c'est-à-dire sous forme de câble) permettant de relier les ordinateurs
entre eux.
2.2. CÂBLAGE RÉSEAU
L’étape de câblage, bien que contraignante, n’est pas à prendre à la

légère : sans câblage de bonne qualité, votre réseau ne pourra pas fonctionner
de manière fiable et satisfaisante.
Selon le cas, il n’est pas à exclure que vous ayez recours à un
spécialiste. Au même titre que le réseau électrique classique, le câblage réseau
peut passer par des goulottes, des prises encastrées, etc. C’est même la
solution conseillée si vous voulez relier un nombre important de machines
(plus de cinq), et si le câblage s’étend sur une distance importante.
2.2.1. Types de câbles

Pour relier les diverses entités d'un réseau, plusieurs supports
physiques de transmission de données peuvent-être utilisés. Une de ces
possibilités est l'utilisation de câbles. Il existe de nombreux types de câbles,
……………………………………………………………………………………………………………………………………………………………………….
mais on distingue généralement: Le câble de type coaxial, La double paire

torsadée et la fibre optique.
a)Le câble coaxial
 Caractéristiques
Historiquement parlant, le câble coaxial est le premier type de câble qui
ait été utilisé pour monter les réseaux locaux.
Physiquement, le câble coaxial ressemble à du câble pour antenne TV,
avec une tige de cuivre recouverte d’isolant et des brins conducteurs.
Toutefois, la qualité de fabrication est assez différente et l’un ne peut pas
remplacer l’autre. La couleur de la gaine permet de les différentier : blanche
pour un câble TV et noir pour un câble réseau.
Quelques particularités de ce type d’installation :
- La vitesse est limitée, juste environ 1M de données transférées en une
seconde ;
- La modularité : Un réseau coaxial peut en effet être agrandi en plaçant les
machines en T qui permet de relier les ordinateurs en série.
Son inconvénient majeur est que si le réseau est coupé en un point
pour une raison ou une autre (perturbation électromagnétique, câble
sectionné), c’est le réseau dans son intégralité qui tombe en panne.
Ainsi le manque de fiabilité, ajouté à l’impossibilité de faire évoluer la rapidité
des transferts, font que ce type de réseau tend à disparaître.
 Composition du câble
Le câble coaxial (en anglais coaxial cable) a longtemps été le câblage
de prédilection, pour la simple raison qu'il est peu coûteux et facilement
manipulable (poids, flexibilité, ...). Un câble coaxial est constitué d’une partie
centrale (appelée âme), c'est-à-dire un fil de cuivre, enveloppé dans un
isolant, puis d’un blindage métallique tressé et enfin d'une gaine extérieure.
La gaine permet de protéger le câble de l'environnement extérieur. Elle

est habituellement en caoutchouc (parfois en Chlorure de polyvinyle: PVC,
éventuellement en téflon).
Le blindage (enveloppe métallique) entourant les câbles permet de
protéger les données transmises sur le support des parasites (autrement
appelé bruit) pouvant causer une distorsion des données.
……………………………………………………………………………………………………………………………………………………………………….
L'isolant entourant la partie centrale est constitué d'un matériau

diélectrique permettant d'éviter tout contact avec le blindage, provoquant des
interactions électriques (court-circuit).
L'âme, accomplissant la tâche de transport des données, est
généralement composée d’un seul brin en cuivre ou de plusieurs brins
torsadés.
Grâce à son blindage, le câble coaxial peut être utilisé sur de longues
distances et à haut débit (contrairement à un câble de type paire torsadée), on
le réserve toutefois pour des installations de base.
A noter qu'il existe des câbles coaxiaux possédant un double blindage
(une couche isolante, une couche de blindage) ainsi que des câbles coaxiaux à
quadruple blindage (deux couches isolantes, deux couches de blindage).
 Classification
On distingue habituellement deux types de câbles coaxiaux:
o Le 10Base5 - Thick Ethernet- Câble coaxial épais
Le premier câble Ethernet à avoir été standardisé est le câble de type
Thick Ethernet ou Thicknet (normalisé 10Base5) appelé aussi Yellow Cable,
ou 'tuyau d'arrosage', en raison de sa dimension et de sa couleur. Il s'agit d'un
câble coaxial blindé de 50 Ohm, terminé, d'un diamètre de près de 2cm,
utilisable sur une distance de 500m sans ré- amplification du signal électrique.
La bande passante est de 10Mbits/s.
Ses dimensions le rendent malaisé à poser et sa 'connectique' est délicate: en
effet, il faut perforer l'enveloppe du câble pour y introduire une aiguille
permettant la connexion sur un transceiver (émetteur-récepteur) externe.
Physiquement, il s'agit d'un bus, puisque tous les nœuds se connectent
les uns à côté des autres (la distance entre deux connexions sur le câble doit
être, pour des raisons de physique électrique, d'un multiple de 1,5m).
La connexion d'une machine sur le réseau s'effectue à travers son port AUI
(Access Unit Interface) de 15 pôles, un câble AUI d'une longueur maximum de
5m et d'un 'Transceiver' permettant la jonction physique sur le câble coaxial.
o Le 10Base2 - Thin Ethernet.
Le câble coaxial fin de 50 Ohm, appelé aussi 'CheaperNet', terminé et
facile à poser est apparu après le Thick Ethernet et présente les
caractéristiques suivantes:
- longueur maximum sans ré-amplification: 185m.
- connecteurs de type BNC à bayonnettes, branchement à l'aide de
connecteurs en 'T', nbre de connexions maximum par segment de 185m: 30.
……………………………………………………………………………………………………………………………………………………………………….
- bande passante de 10Mbits/s.

Il s'agit également de câble de type 'bus', puisque tous les nœuds se
connectent les uns à coté des autres. Sa connectique délicate en fait un câble
facilement sujet à des perturbations intermittentes difficilement éliminables.
 Connexion entre Thinnet et Thicknet
La connexion entre Thinnet et Thicknet se fait grâce à un transceiver. Il
est muni d’une prise dite "vampire" qui effectue la connexion physique réelle à
la partie centrale du Thinnet en transperçant l’enveloppe isolante. Le câble du
transceiver (drop cable) est branché sur un connecteur AUI (Attachment Unit
Interface) appelé également connecteur DIX (Digital Intel Xerox) ou
connecteur DB 15 (SUB-D 15).
b) Câblage à paire torsadée (10Base-T)

Dans sa forme la plus simple, le câble à paire torsadée (en anglais
Twisted-pair cable) est constitué de deux brins de cuivre entrelacés en torsade
et recouverts d’isolants.
On distingue généralement deux types de paires torsadées:
- Les paires blindées (STP: Shielded Twisted-Pair)
- Les paires non blindées (UTP: Unshielded Twisted-Pair).
Un câble est souvent fabriqué à partir de plusieurs paires torsadées
regroupées et placées à l’intérieur de la gaine protectrice. L’entrelacement
permet de supprimer les bruits (interférences électriques) dus aux paires
adjacentes ou autres sources (moteurs, relais, transformateur).
La paire torsadée est donc adaptée à la mise en réseau local d'un faible
parc avec un budget limité, et une connectique simple. Toutefois, sur de
longues distances avec des débits élevés, elle ne permet pas de garantir
l’intégrité des données (c'est-à-dire la transmission sans perte de données).
……………………………………………………………………………………………………………………………………………………………………….
Description d’un câble cuivre

La paire torsadée est constituée de deux conducteurs de cuivre d’un
diamètre compris entre 0.4mm et 0.8mm (rarement 1mm). Les conducteurs
sont isolés et torsadés afin de diminuer la diaphonie. La plupart du temps, les
paires torsadées sont regroupées en quatre dans un câble protégé par un
manteau de plastique.
Les câbles utilisés sur le réseau téléphonique comprennent de 2 à 2'400
paires et ne sont pas blindés.
Les services téléphoniques traditionnels nécessitent une largeur de

bande de 3,1 kHz (la bande passante comprise entre 3oo et 3400 Hz), or les
câbles reliant les centraux téléphoniques aux utilisateurs possèdent tous une
bande passante supérieure, de l’ordre de plusieurs centaines de kHz. C’est sur
ce réseau d’accès câblé que se sont développées les techniques xDSL.
En hautes fréquences, les problèmes liés à la distance sont les plus
contraignants (affaiblissement, diaphonie, distorsion de phase). Aux basses
fréquences, ce sont les difficultés liées aux bruits impulsionnels qui dominent
sans trop de difficulté jusqu’à 1 Mhz. Au-delà, leur utilisation devient délicate
et elle nécessite des systèmes de transmission très performants.
Types de câbles torsadés
- La paire torsadée non blindée (UTP)
Le câble UTP obéit à la spécification 10baseT. C’est le type de paire
torsadée le plus utilisé et le plus répandu pour les réseaux locaux. Voici
quelques caractéristiques:
· Longueur maximale d’un segment: 100 mètres.
· Composition: 2 fils de cuivre recouverts d’isolant.
· Normes UTP: conditionnent le nombre de torsions par pied (33cm) de câble
en fonction de l’utilisation prévue.
UTP: répertorié dans la norme Commercial Building Wiring Standard 568 de
l’EIA/TIA (Electronic Industries Association / Télécommunication Industries
Association). La norme EIA/TIA 568 a utilisé UTP pour créer des normes
applicables à toutes sortes de locaux et de contextes de câblage qui
……………………………………………………………………………………………………………………………………………………………………….
garantissent au public l’homogénéité des produits. Ces normes incluent cinq

catégories de câbles UTP:
· Catégorie 1: Câble téléphonique traditionnel (transfert de voix mais pas de
données).
· Catégorie 2: Transmission des données à 4Mbit/s maximum (RNIS). Ce type
de câble est composé de 4 paires torsadées.
· Catégorie 3: 10 Mbit/s maximum. Ce type de câble est composé de 4 paires
torsadées et de 3 torsions par pied.
· Catégorie 4: 16 Mbit/s maximum. Ce type de câble est composé de 4 paires
torsadées en cuivre.
· Catégorie 5: 100 Mbit/s maximum. Ce type de câble est composé de 4
paires torsadées en cuivre.
· Catégorie 5e: 1000 Mbit/s maximum. Ce type de câble est composé de 4
paires torsadées en cuivre.
La plupart des installations téléphoniques utilisent un câble UTP.
Beaucoup de locaux sont pré-câblés pour ce genre d’installation (souvent en
nombre suffisant pour satisfaire les futurs besoins). Si la paire torsadée pré-
installée est de bonne qualité, il est possible de transférer des données et donc
l’utiliser en réseau informatique. Il faut faire attention cependant aux nombres
de torsades et aux autres caractéristiques électriques requises pour une
transmission de données de qualité.
Le problème majeur provient du fait que le câble UTP est
particulièrement sujet aux interférences (signaux d’une ligne se mélangeant à
ceux d’une autre ligne). La seule solution réside dans le blindage.
- La paire torsadée blindée (STP)
Le câble STP (Shielded Twisted Pair) utilise une gaine de cuivre de
meilleure qualité et plus protectrice que la gaine utilisée par le câble UTP. Il
contient une enveloppe de protection entre les paires et autour des paires.
Dans le câble STP, les fils de cuivre d’une paire sont eux-mêmes torsadés, ce
qui fournit au câble STP un excellent blindage, c'est-à-dire une meilleure
protection contre les interférences). D'autre part, il permet une transmission
plus rapide et sur une plus longue distance.
• Les connecteurs pour paire torsadée
La paire torsadée se branche à l’aide d’un connecteur RJ-45. Ce
connecteur est similaire au RJ-11 utilisé dans la téléphonie mais différent sur
certains points: le RJ-45 (8 broches) est légèrement plus grand et ne peut pas
être inséré dans une prise de téléphone RJ-11 (4 ou 6 broches).
……………………………………………………………………………………………………………………………………………………………………….
c) Fibre optique
La fibre optique est un câble possédant de nombreux avantages:
· Légèreté ;
· Immunité au bruit ;
· Faible atténuation ;
· Tolérance des débits de l'ordre de 100Mbps ;
· Largeur de bande de qlqs dizaines de Mhz à +eurs Ghz (fibre monomode).
Le câblage optique est particulièrement adapté à la liaison centrale
(backbone) entre répartiteurs (notamment entre plusieurs bâtiments), car
elle permet des connexions sur de longues distances (jusqu’à 60 km dans le cas de
fibre monomode) sans nécessiter de mise à la masse. De plus, ce type de câble est
très sûr car il est extrêmement difficile de mettre un tel câble sur écoute.
Toutefois, malgré sa flexibilité mécanique, ce type de câble ne convient
pas pour des connexions dans un réseau local car son installation est
problématique et son coût élevé. C'est la raison pour laquelle on lui préférera
la paire torsadée ou le câble coaxial pour de petites liaisons.
Au fil de l'évolution des composants électroniques, divers types de
câblages ont vu le jour enfin d’atteindre toujours les objectifs suivants:
- Grande bande passante.
- Possibilité d'utiliser ces câbles sur de longues distances.
- Faible encombrement, facile à poser et à installer.
- Connecteurs simples et résistants.
- Faible coût...
En rappel, la vélocité d'un signal électrique dans un câble est d'environ
200000km/s.
2.2.2. Sertissage des câbles UTP et la connectique
a) Câbles réseaux
Les câbles réseaux interviennent pour la technologie du réseau avec fil
contrairement au réseau sans fil (Wireless) pour la technologie WIFI qui
transmet les informations sous forme des ondes lumineuses.
Le câblage réseau est l’œuvre initiée par la norme CISCO.
Les broches 1-2 et 3-6 sont utilisées pour transmettre les informations.
Lors d’un câblage informatique à 1000 Mbit/s (1 Gbit/s), les 8 broches sont
utilisées.
Lorsque l’on branche un poste de travail dans un concentrateur (hub) ou
un commutateur (switch), un câble droit doit être utilisé. Lorsque l’on doit
……………………………………………………………………………………………………………………………………………………………………….
brancher deux postes de travail entre eux, un câble croisé doit être utilisé, sauf
pour le cas d’une communication en Gigabit où il faudra aussi utiliser un câble
droit. Dans le câble croisé, les paires utiles sont inversées, c’est-à-dire que la
paire de transmission d’un côté est connectée aux broches de réception de
l’autre côté.
Certains équipements réseau modernes sont, cependant, capables de
faire du MDI/MDI-X, c’est-à-dire du (dé) croisement automatique en fonction
du type de câble utilisé, des adaptateurs réseaux et de la situation présente.
Ce (dé) croisement se fait de manière logicielle au niveau d’un des deux
adaptateurs (ou sur le système d’exploitation) après que ceux-ci se soient mis
d’accord sur l’adaptateur à inverser.
Suivant la succession des couleurs nous retrouvons deux types de
câblage réseau suivants :
 Câble droit ou parallèle
Le câble droit est utilisé pour connecter l’ordinateur à un hub ou un
switch. Il suit la succession des couleurs suivantes :
……………………………………………………………………………………………………………………………………………………………………….
 Câble Croisé
Le câble croisé est utilisé pour connecter deux appareils identiques
ensemble et ainsi s’affranchir d’un hub ou switch ; le croisement ci-dessous est
valable pour les connexions 1000 Mbit/s (Gigabit). La connexion d’un appareil
à un switch ou à un hub peut se faire par câble croisé à condition d’avoir un
switch, un hub ou un adaptateur réseau qui détecte le câblage (système de
Croisement Auto MDI/MDI-X). Depuis quelques années, la connexion entre
deux PC peut se faire par câble non croisé, la carte étant capable d’analyser si
le câble est croisé ou non (natif pour les cartes gigabit).
La succession des couleurs dans le câblage croisé se fait de la manière
suivante :
Certains équipements un peu anciens ou certains types d’installations

peuvent nécessiter d’avoir un câble croisé uniquement avec les paires 2 et 3,
les 2 autres paires (bleu/blanc-bleu et marron/blanc-marron) ne devant pas
être croisés. On a alors un câble croisé qui ne peut pas fonctionner en
Gigabit/s (mais fonctionne en 10/100 Mbit/s) et qui ressemble à ceci :
……………………………………………………………………………………………………………………………………………………………………….
b) Installation classique : la paire torsadée

Pour relier vos PC, si vous n'en avez que deux, vous avez plusieurs
solutions : Vous pouvez directement relier vos deux PC en les connectant
ensemble via un câble réseau croisé (l'ordre des fils n'est pas le même
lorsqu'on regarde les deux prises réseau situées aux extrémités du câble,
contrairement à ce qui se passe avec un câble droit). L'avantage de cette
technique est qu'elle ne vous coûtera que le prix du câble, et éventuellement le
prix des deux cartes réseaux si vos PC ne sont pas dotés de chipsets réseaux
intégrés. L'inconvénient majeur est que cette solution est très peu évolutive si
vous souhaitez ajouter un PC ou un périphérique réseau ultérieurement. Très
peu évolutive car vous serez obligé de tout reconfigurer, outre le fait de devoir
acheter un périphérique réseau supplémentaire, et de devoir racheter des
câbles réseaux dits droits (ou alors de passer par une autre carte réseau qui
fera doublon sur un des deux PC).
Pour une solution dite "propre" que vous ayez deux ou plus de deux PC,
l’utilisation des câbles droits est recommandée. L'ordre de couleur des fils est
le même quelle que soit l'extrémité choisie.
……………………………………………………………………………………………………………………………………………………………………….
Les câbles droits seront reliés à un concentrateur (Hub) ou, mieux, à un

répartiteur (Switch). La différence principale entre un Hub et un Switch est
que le Hub va "envoyer" des paquets de données à tous les ordinateurs qui y
sont reliés, contrairement au switch qui lui n'enverra ses données qu'à
l'ordinateur cible.
De plus, le hub partage sa bande passante entre tous les PC l'utilisant,

contrairement au Switch qui dédie un canal à la bande passante maximale
entre lui et chaque PC. Les performances sont donc à l'avantage des switchs.
Ils existent à partir de 4 ports. Il est inutile d'investir directement dans un
switch 8 ports si vous ne disposez que de deux ou trois PC.
Vous pourrez de toute façon ajouter des switchs reliés entre eux, et le
nombre de ports disponibles sera en augmentation constante, et ce sans
toucher au réseau de départ. Ces périphériques peuvent comporter d'autres
technologies. La plus courante est celle du routage (on parle alors
généralement de routeur) qui va permettre d'y connecter un modem
Ethernet. Vous pourrez alors partager votre connexion Internet entre tous vos
PC. Les routeurs intègrent généralement des firewalls qui protègent vos PC
contre les attaques extérieures.
En conclusion, pour créer un réseau câblé, vous avez besoin de certains
ou de l’ensemble des éléments suivants:
- Carte Ethernet (carte réseau): intégrée dans la carte mère de chaque
ordinateur.
- Câble Ethernet: Connu sous le nom de câble UTP, CAT 5 ou 6. Si un câble
doit être relié directement d’un pc à un autre, alors, un câble croisé est requis.
……………………………………………………………………………………………………………………………………………………………………….
- Un hub Ethernet ou un switch Ethernet (commutateur ou

répétiteur): utilisé évidemment si plus de deux ordinateurs sont connectés.
2.3. COUCHES RÉSEAUX

Le transport de données d’une extrémité à une autre d’un réseau
nécessite un support physique ou hertzien de communication. Pour que ces
données arrivent correctement au destinataire, avec la qualité de service
exigée, il faut une architecture logicielle ou matérielle.
2.3.1. Modèle OSI

Cette partie du cours aborde le modèle d’architecture en sept couches
développé par l’ISO et appelé « modèle de référence ». Cette valeur de sept
niveaux (couches) a pour origine un découpage en fonctions indépendantes.
L’ISO a mis au point le modèle OSI (Open Systems Interconnections) en 1984
comme standard de communication entre les ordinateurs d’un réseau. En effet,
aux origines des réseaux, chaque constructeur avait un système propre, ce qui
était à la base de l’existence de plusieurs réseaux incompatibles.
Le rôle du modèle OSI consiste à standardiser la communication entre les
machines afin que différents constructeurs puissent mettre au point des
produits (logiciels ou matériels) compatibles.
Les couches basses s’intéressent au transport de l’information tandis que
les couches hautes correspondent à son traitement.
Une couche définit des fonctionnalités qui sont réalisées par un protocole
associé à la couche. Chaque couche rend un service à la couche située au-
dessus. Autrement-dit, chaque couche se sert de la couche sous-jacente pour
réaliser sa fonction.
Aujourd’hui, on parle de deux modèles de référence après quelques
évolutions.
……………………………………………………………………………………………………………………………………………………………………….
Les correspondances entre ces deux modèles sont les suivantes :

Numéro de couche Nouveau modèle Ancien modèle
Couche 1 Niveau physique Couche physique
Couche 2 Niveau trame Couche liaison
Couche 3 Niveau paquet Couche réseau
Couche 4 Niveau message Couche transport
Couche 5 Niveau session Couche session
Couche 6 Niveau présentation Couche présentation
Couche 7 Niveau application Couche application
Le terme « couche » est utilisé pour évoquer le fait que les données
transitant sur le réseau, traversent plusieurs types de protocoles. Ainsi les
données (paquets d’informations) qui circulent sur le réseau sont traitées
successivement par chaque couche, qui vient rajouter un élément
d’information (appelée en-tête) puis sont transmises à la couche suivante.
Couche 1 : Niveau physique
Il fournit les moyens mécaniques, électriques, fonctionnels et
procéduraux nécessaires à l’activation, au maintien et à la désactivation des
connexions physiques destinées à la transmission des éléments binaires entre
entités de liaison.
Ce premier niveau du modèle de référence a pour objectif de conduire les
éléments binaires à leur destination sur le support physique. C’est dans cette
couche où l’on trouve tous les matériels et logiciels nécessaires au transport
correct des éléments binaires, et notamment :
- Les interfaces de connexion des équipements informatiques, appelées
jonctions ;
- Les modems qui transforment les signaux;
- Les multiplexeurs concentrant plusieurs voies de communication distinctes
vers un même point distant;
- Les nœuds de transferts qui forment le matériel intermédiaire entre
l’émetteur et le récepteur ;
- Divers équipements spécifiques du réseau comme un satellite par exemple.
Couche 2 : Niveau trame
Il fournit les fonctions nécessaires pour transporter un bloc d’information,
appelé « trame », d’un nœud de transfert vers un autre. La fonction de base
concerne la reconnaissance du début et de la fin de ce bloc d’information, de
sorte qu’il puisse être transmis sur le support physique et capté correctement
par le récepteur.
……………………………………………………………………………………………………………………………………………………………………….
Couche 3 : Niveau paquet

Son rôle est de transporter les paquets d’un utilisateur jusqu’à un
récepteur connecté au réseau. En d’autres termes, le niveau paquet, que l’on
appelle la couche réseau dans le vocabulaire de la 1 ère génération du modèle
de référence, permet d’acheminer correctement les paquets d’information
jusqu’au récepteur connecté au réseau en transitant par des nœuds de
transfert intermédiaires. Si l’émetteur et le récepteur ne sont pas situés sur un
même réseau, un premier niveau paquet transporte les données vers une
passerelle. Un autre niveau paquet, pouvant être le même que le premier,
achemine les paquets sur le deuxième réseau traversé, et ainsi de suite
jusqu’à arriver au récepteur. Le niveau paquet ne va donc pas forcément
directement de l’émetteur au récepteur.
Le paquet à la différence de la trame, n’offre aucun moyen de
reconnaissance de son début ou sa fin et comporte trois fonctions principales :
- Le contrôle de flux qui évite les congestions dans le réseau ;
- Le routage qui permet d’acheminer les paquets d’informations vers leur
destination, au travers du maillage des routeurs.
- L’adressage qu’est la définition des adresses de routage ou de
commutation.
Couche 4 : Niveau message
Il assure le transport des messages d’un client émetteur vers un client de
destination. C’est un transport dit de bout en bout, qui peut traverser plusieurs
réseaux sous-jacents.
En particulier, la couche transport (dans l’ancienne dénomination) doit
utiliser au mieux les ressources du réseau de communication en multiplexant,
par exemple, plusieurs clients sur un même circuit virtuel ou sur une même
route.
Cette couche permet de compléter les fonctions offertes par les couches
précédentes et qui seraient jugées insuffisantes. Grâce à ce complément,
l’utilisateur doit obtenir une qualité de service susceptible de le satisfaire.
Couche 5 : Niveau session
Il fournit les moyens nécessaires à l’organisation et à la synchronisation
du dialogue entre les clients en communication. Comme il est inutile d’émettre
de l’information s’il n’y a pas de récepteur, le protocole de session s’assure que
l’utilisateur distant ou son représentant (une boîte aux lettres électroniques,
par ex.) est bien présent.
……………………………………………………………………………………………………………………………………………………………………….
Pour ouvrir une connexion avec une machine distante, la couche session
doit posséder un langage intelligible par l’autre extrémité. C’est pourquoi,
avant d’ouvrir une session, il est obligatoire de passer à la fois par le niveau
présentation (couche 6), pour l’unicité du langage, et par le niveau application
(couche 7), pour travailler sur des paramètres définies d’une façon homogène.
Couche 6 : Niveau présentation
Il se charge de la syntaxe des informations que les entités d’application
se communiquent. En d’autres termes, la couche 6 met en forme les données
pour les rendre compréhensibles par le destinataire en fournissant la
traduction de code des caractères, la conversion des données et leur
compression ainsi que leur cryptage.
En résumé, le niveau présentation s’intéresse à la syntaxe, tandis que le
niveau application (couche 7) se charge de la sémantique.
Couche 7 : Niveau application
Il constitue la dernière couche du modèle de référence. Il fournir aux
processus d’application le moyen de s’échanger des informations par le biais
du réseau sous-jacent.
Par exemple, un utilisateur peut envoyer un message électronique à son
correspondant en utilisant les couches de protocole donnant accès au réseau.
2.3.2. Modèle TCP/IP

Le modèle TCP/IP est très proche du modèle OSI. Afin de pouvoir
appliquer ce modèle à n’importe quelle machine, c'est-à-dire indépendamment
du S.E., le modèle TCP/IP a été décomposé en plusieurs modules effectuant
chacun une tâche précise. De plus, ces modules effectuent leurs tâches, les
uns après les autres dans un ordre précis. On a donc un système stratifié, c’est
la raison pour laquelle on parle de modèle en couches.
TCP/IP ne suit pas scrupuleusement les préconisations de l'ISO. Il ne
compte que les 4 couches suivantes :
Modèle TCP/IP Modèle OSI
N°couche Désignation Désignation N° couche
Niveau 4 Couche Application Couche Application Niveau 7
Couche Présentation Niveau 6
Couche Session Niveau 5
Niveau 3 Couche Transport (TCP) Couche Message Niveau 4
Niveau 2 Couche Internet (IP) Couche Paquet Niveau 3
Niveau 1 Couche Accès Réseau Couche Trame Niveau 2
……………………………………………………………………………………………………………………………………………………………………….
Couche Physique Niveau 1

Comme on peut le remarquer, les couches du modèle TCP/IP ont des
tâches beaucoup plus diverses que les couches du modèle OSI, étant donné
que certaines couches du modèle TCP/IP correspondent à plusieurs couches du
modèle OSI.
……………………………………………………………………………………………………………………………………………………………………….
CHAP.III. RÉSEAU TCP/IP

3.1. NOTIONS SUR LE TCP/IP
TCP/IP est une suite de protocoles utilisés sur Internet. Il représente la
façon dont les ordinateurs communiquent sur Internet. Pour cela, il se base sur
l’adressage IP, c'est-à-dire le fait de fournir une adresse IP à chaque machine
du réseau afin de pouvoir acheminer des paquets de données.
Le protocole TCP/IP a été créé à l’origine dans un but militaire et répond
à un certain nombre de critères, parmi lesquels :
- Le fractionnement des messages en paquets ;
- L’utilisation d’un système d’adresses ;
- L’acheminement des données sur le réseau (routage) ;
- Le contrôle des erreurs de transmission de données.
3.1.1. Adresse IP
Une machine est nommée de manière unique sur son réseau par son
"adresse IP" formée en binaire de 4 octets que l’on convertit en décimal en
nombres compris entre 0 et 255 séparés par des points.
Exemple:
10101100 00010100 10000000 00010111
172.20.128.23
Une adresse IP a deux parties :
_ La partie gauche identifiant le réseau auquel appartient le nœud : partie
réseau appelée Net ID.
_ La partie droite identifiant le nœud lui même : partie hôte ou machine
appelée Host ID.
3.1.2. Masque de sous-réseau (Subnet Mask)

Formé lui aussi en binaire de 4 octets que l’on convertit en décimal en
nombres compris entre 0 et 255 séparés par des points, le masque de sous-
réseau permet d'indiquer à une machine quelles sont les adresses IP de
machines qui font partie de son sous-réseau c'est-à-dire les machines avec
lesquelles elle peut communiquer sans routage.
Comme son nom l'indique, le masque de sous-réseau est un masque
numérique géré en arithmétique binaire : Si les "ET binaire" entre les adresses
IP de deux machines et le masque sont égaux alors les deux machines font
partie du même sous-réseau TCP/IP.
……………………………………………………………………………………………………………………………………………………………………….
Exemple:
Soient le masque M = 255.255.255.128 et les machines d'adresses IP
I1 = 172.20.128.164 et I2 = 172.20.128.213.
En binaire, le masque devient
M = 11111111.11111111.11111111.10000000
et les adresses :
I1 = 10101100.00010100.10000000.10100100
et
I2 = 10101100.00010100.10000000.11010101
3.1.3. Classes de réseaux
Les adresses IP sont donc réparties en classes, c'est-à-dire selon le
nombre d'octets qui représentent le réseau.
 Classe A
Dans une adresse IP de classe A, le premier octet représente le réseau.
Le bit de poids fort (le premier bit, celui de gauche) est à zéro, ce qui signifie
qu'il y a 27 (00000000 à 01111111) possibilités de réseaux, c'est-à-dire 128.
Toutefois le réseau 0 (00000000) n'existe pas et le nombre 127 est réservé
pour désigner votre machine, les réseaux disponibles en classe A sont donc les
réseaux allant de 1.0.0.0 à 126.0.0.0 (lorsque les derniers octets sont des
zéros cela indique qu'il s'agit d'un réseau et non d'un ordinateur!)
Les trois octets de droite représentent les ordinateurs du réseau, le
réseau peut donc contenir:
224-2 = 16777214 ordinateurs.
Une adresse IP de classe A, en binaire, ressemble à ceci:
0 xxxxxxx Xxxxxxxx xxxxxxxx xxxxxxxx
 Classe B
Dans une adresse IP de classe B, les deux premiers octets représentent
le réseau. Les deux premiers bits sont 1 et 0, ce qui signifie qu'il y a 2 14 (10
000000 00000000 à 10 111111 11111111) possibilités de réseaux, c'est-à-dire
16384. Les réseaux disponibles en classe B sont donc les réseaux allant de
128.0.0.0 à 191.255.0.0
Les deux octets de droite représentent les ordinateurs du réseau, le
réseau peut donc contenir: 216-2 = 65534 ordinateurs.
Une adresse IP de classe B, en binaire, ressemble à ceci:
10xXxxxxx Xxxxxxxx xxxxxxxx xxxxxxxx
……………………………………………………………………………………………………………………………………………………………………….
 Classe C
Dans une adresse IP de classe C, les trois premiers octets représentent
le réseau. Les trois premiers bits sont 1,1 et 0, ce qui signifie qu'il y a 2 21 (110
00000 00000000 00000000 à 110 11111 11111111 11111111) possibilités de
réseaux, c'est-à-dire 2097152. Les réseaux disponibles en classe C sont donc
les réseaux allant de 192.0.0.0 à 223.255.255.0
L'octet de droite représente les ordinateurs du réseau, le réseau peut
donc contenir: 28-2 = 254 ordinateurs.
Une adresse IP de classe C, en binaire, ressemble à ceci:
110Xxxxx Xxxxxxxx xxxxxxxx xxxxxxxx
 Classe D :
Les adresses de cette classe sont utilisées pour les communications
multicast. Le 1er octet d’une adresse IP de la classe D commence toujours par
la séquence des bits 1110, il est donc compris () 224 & 239. Un exemple
d’adresse IP de classe D est 224.0.0.1, le masque de réseau n’étant pas
défini.
 Classe E :
Les adresses de cette classe sont réservées par IANA à un usage non
déterminé. Le 1er octet d’une adresse IP de la classe E commence toujours par
la séquence des bits 1111. Les adresses de la classe E débutent par
240.0.0.0 et se terminent en 255.255.255.255, le masque de réseau n’étant
pas défini.
3.1.4. Calcul de sous-réseaux
Lorsqu’un réseau comporte un grand nombre de machines, il devient
nécessaire de subdiviser l’ensemble pour optimiser les échanges entre les
machines.
Une segmentation physique par VPN est certainement la solution la
plus radicale car elle s’opère au niveau des couches 2 et 3 ; on constitue des
réseaux virtuels en programmant des commutateurs (switch) administrables.
Cette tâche supplémentaire dans la gestion d’un réseau est délicate de par sa
rigidité. Elle exige un plan physique de l’utilisation de chacune des prises
réseaux de l’entreprise et toute modification, aussi petite soit-elle, doit être
répercutée sur tous les commutateurs.
Sachant que la couche 4 de transport doit, de toutes façons, être gérée
(par le protocole TCP/IP), il peut se concevoir de subdiviser le réseau global en
utilisant une segmentation logique grâce au même protocole de transport.
Cette méthode s’appelle le « subnetting » ou la création de sous-réseaux. Elle
permet d’éviter une dégradation de la bande passante quand trop de machines
……………………………………………………………………………………………………………………………………………………………………….
sont sur le même réseau. Si des routeurs (ils appartiennent à la couche 3) sont
utilisés, le trafic de diffusion des trames (broadcast) sera limité à chacun des
sous-réseaux.
Un bon plan d’adressage IP peut donc offrir certains des avantages de la
segmentation physique en limitant le travail d’administration du réseau. Il
n’offre évidemment pas la même sécurité, mais assure un minimum de
confort. Pour le réseau pédagogique d’un grand établissement scolaire, ce
minimum paraît suffisant et contribue à une bonne gestion, à une bonne
utilisation sans limiter les possibilités offertes aux utilisateurs.
Le nombre de sous-réseaux dépend du nombre de bits que l’on attribue
en plus au réseau. Soit n ce nombre de bits, alors le nombre de sous-réseaux
est donc : 2n.
N Sous-réseaux
1 21=2
2 22=4
3 23=8
4 24=16
5 25=32
6 26=64
7 27=128
8 28=256 (Impossible pour la classe C)
3.1.5. Repérage ou détermination de la machine sur le réseau

Une machine est repérée sur le réseau par une adresse IP (IPx) associée
à un masque (Mx) qui sont chacun un nombre de 4 octets. Le masque sert à
repérer le réseau ou le sous-réseau auquel la machine appartient. Ces deux
nombres sont en général donnés en décimal, ce qui nous oblige à effectuer
quelques petits calculs et conversions.
……………………………………………………………………………………………………………………………………………………………………….
 Identification du réseau
 Adresse de diffusion et nombre d’hôtes

L’adresse de diffusion (Bx) d’un réseau (ou d’un sous-réseau) est une
adresse réservée (la dernière des adresses possibles audit réseau). Cette
adresse est utilisée pour transmettre des informations (paquets) à tous les
hôtes du sous-réseau (plus exactement du domaine de diffusion) en même
temps. Un paquet destiné à l’adresse Bx est forcément transmis à toutes les
machines de Rx. Les commutateurs diffusent aussi les broadcast ; quand un de
leurs parts reçoit une trame (suite de paquets) pour Bx, il la diffuse sur tous
les autres ports. Seuls les routeurs (et a fortiori la segmentation physique)
bloquent les broacast. Connaissant Mx et Rx, on trouve Bx par un petit calcul
en décimal ; on opère octet par octet, en considérant chacun des octets de Rx,
en y ajoutant la différence entre 255 et la valeur de l’octet correspondant de
Mx. On trouve :
B1=192.168.20.255 car R1=192.168.20.0 et M1=255.255.255.0 ;
B2=172.16.255.255 car R2=172.16.0.0 et M1=255.255.0.0 ;
B3=192.154.88.191 car R3=192.154.88.128 et M3=255.255.255.192.
La capacité maximale du réseau (ou du sous-réseau), appelée « nombre
d’hôtes » (Hx) ou nombre d’IP utilisables pour les machines, s’obtient aisément
par le nombre n de bits à 1 du masque Mx :
[ ]
H= 2 (32−n ) − 2 ; 2 adresses en moins car une est réservée pour l’adresse du
sous-réseau lui-même et l’autre pour la diffusion du sous-réseau (broadcast).
2 exposant 32-n, donne le nombre d’IPs max.
Dans l’exemple 1, H1=254 ; dans l’exemple 2, H2=65 534 et dans l’exemple
3, H3=62.
……………………………………………………………………………………………………………………………………………………………………….
Plus Hx est grande et plus la bande passante du réseau s’amenuise et le

trafic de diffusion augmente.
A partir d’une adresse IP complète (ou CIDR), on peut obtenir tous les
renseignements précédemment définis.
 Passerelle par défaut (Gateway) :
Il s'agit de l'adresse IP vers laquelle seront envoyés tous les paquets
non destinés à une machine du même sous-réseau que la machine source. Un
routeur ou un ordinateur assurant le routage sera installé à cette adresse pour
les réceptionner et assurer la transmission vers le sous-réseau destination.
Dans cette partie nous allons concevoir et monter un réseau local au
sein du Labo de l’ISC. Ledit réseau local comprendra deux machines. Les deux
machines auront des numéros IP ayant la même partie ID (192.168.10.0) qui
est l’adresse du réseau et des numéros hôtes différents (192.168.10.1) et
(192.168.10.2).
On remarquera que ces adresses sont de la classe C parce que le
premier octet est compris entre 192 et 223. Nous prenons l’adresse de la
classe C car le nombre d’ordinateurs à interconnecter est inférieur à 255. De ce
fait, le type de protocole est TCP/IP car c’est lui qui requiert un numéro IP.
3.1.6. Configuration des adresses IP
Pour accéder au protocole TCP/IP (sous Windows 7) :
- Activer la fenêtre « Panneau de configuration » puis sélectionner la
commande Centre Réseau et partage.
- Sélectionner la commande Modifier les paramètres de la carte réseau.
- Cliquer-droit sur Connexion au réseau local puis sélectionner
Propriétés.
• Choisir le protocole TCP/IP.
……………………………………………………………………………………………………………………………………………………………………….
• Pointer Propriétés puis cocher la case Utiliser l’adresse IP suivante (ou

Obtenir une adresse IP automatiquement selon le cas).
• Taper l’adresse IP voulue puis valider (Une fois terminé, le masque de sous
réseau s’affiche automatiquement).
Si l’on veut sécuriser les données de votre ordinateur par le non accès d’autres
utilisateurs, on procède comme suit :
• Accéder au tableau des propriétés de connexion
• Cliquer sur l’onglet Avancé pour ouvrir la fenêtre suivante :
Vous pouvez choisir de partager la connexion Internet à partir de votre PC en

cliquant sur l’onglet Partage de la fenêtre des propriétés :
……………………………………………………………………………………………………………………………………………………………………….
Après la configuration de toutes les machines, on procède par le partage

des ressources (Imprimante, Dossiers, lecteurs,…).
3.2. GESTION D’UN RÉSEAU WORKGROUP
3.2.1. Configuration réseau et connectivité

Les machines sur un réseau local doivent s’identifier par leurs noms de
façon à éviter toute confusion entre elles. Nous pouvons choisir de travailler
avec 2 machines : PC1 & PC2, tous appartenant au groupe de travail
LAN_G2. Ci-dessous, nous configurons ces identifiants:
- Cliquer-droit sur l’icône poste de travail (ordinateur) puis sélectionner de
la commande Propriétés;
- Cliquer sur Modifier les paramètres dans la fenêtre système ;
- Sélectionner l’onglet Nom de l’ordinateur et cliquer sur Modifier enfin
taper les nouvelles informations.
L’étape suivante consiste à vérifier que les différents ordinateurs

communiquent bien ensemble. Cette vérification passe par le test matériel de
la carte réseau ainsi que celui des données au réseau. Les outils tels que ping,
ipconfig /all, telnet,… permettent de réaliser ces tests.
……………………………………………………………………………………………………………………………………………………………………….
Pour vérifier la présence d’une machine sur le réseau, on exécute, à

l’invite de commande DOS, la commande ping suivi de l’adresse IP de la
machine.
Ex. ping 192.168.1.15 suivi de l’appui sur la touche Entrée du clavier.
ping nomduPC permet de vérifier que le nom donné à un ordinateur
correspond à la bonne adresse IP.
ipconfig /all permet de connaître le détail de la configuration réseau de
l'ordinateur, et permet notamment de connaître l'adresse IP de la machine
utilisée si celle-ci a été attribuée automatiquement.
3.2.2. Exploitation du réseau

 Partage des fichiers
Des fichiers et des dossiers d’une machine sur un réseau deviennent des
ressources du réseau à partir du moment où ils sont partagés sur l’ordinateur
local. Ici, il est question de placer les fichiers et dossiers à partager dans un
répertoire bien précis.
Le partage d’un répertoire et de ses contenus se fait de la manière
suivante:
1ère étape: se rendre sur l’Explorateur Windows,
2ème étape: clic droit sur le répertoire à partager,
3ème étape: choisir la commande partager avec puis choisir l’option de
partage dans le menu contextuel.
……………………………………………………………………………………………………………………………………………………………………….
5ème étape: Accorder les permissions.

 Partage des lecteurs HDD, CD et disquette.
On accède à ces ressources matérielles en double-cliquant l’icône poste
de travail se trouvant au bureau. On clique du coté droit de la souris sur l’une
de ces ressources. Comme on le voit sur la figure ci–après, on choisit de
partager le lecteur qu’on veut.
Sur le menu qui apparaît, on choisit la commande partager avec qu’on
pointe puis choisir l’option de partage pour amorcer le processus de partage.
Sur la fenêtre de partage, on accorde le nom de partage, la lettre du lecteur et
les permissions. Dès que l’on termine tout ceci, on valide en cliquant sur OK.
 Partage de l’Imprimante.
L’accès à ce partage nécessite l’installation de l’imprimante, exactement
de la même manière que son installation sur la machine locale en précisant
simplement qu’il s’agit d’une imprimante réseau et non d’une imprimante
locale. Une boite de dialogue s’ouvre, permettant de parcourir le réseau pour
chercher l’imprimante et continuer l’installation classiquement. L’imprimante
partagée change d’icône par rapport à celle qui est locale.
Voici comment procéder :
- Connecter l’imprimante à une des machines en réseau. Une boite de
dialogue se présente, demandant si on veut installer l’imprimante.
- Cliquer sur suivant pour poursuivre avec l’installation.
- Sélectionner Local printer (cocher le bouton à option) car l’imprimante est
directement connectée à la présente machine et enfin suivant.
- Préciser le fabriquant et le modèle de l’imprimante puis cliquer sur suivant.
- Choisir le type de port de connexion de l’imprimante puis suivant.
- Poursuivre le processus jusqu'à la fin de l’installation.
- Cliquer-droit sur l’icône représentant l’imprimante puis choisir partager
avec enfin préciser les options de partage.
Après l’installation locale, procéder comme suit sur les autres machines
du réseau :
- Double-cliquer sur l’icône Favoris réseau (réseau).
- Double-cliquer sur l’icône Connexion réseau local.
- Double-cliquer sur le nom du groupe de travail.
- Double-cliquer sur le nom de la machine sur laquelle est connectée et
partagée l’imprimante afin de visualiser les ressources qu’elle partage.
- Cliquer-droit sur l’icône de l’imprimante et choisir le bouton Connexion
(Connect).
……………………………………………………………………………………………………………………………………………………………………….
- Choisir Non et puis sur suivant pour imprimante réseau.

- Cliquer sur suivant.
- Choisir Non et enfin sur Terminer.
 Accès aux ressources partagées.
On peut accéder aux ressources partagées par deux moyens différents
mais tous deux équivalents.
1er chemin: on accède aux ressources partagées en suivant exactement les
étapes suivantes :
- Démarrer-Exécuter ;
- Taper ce qui suit : \\ suivi du numéro IP de la machine target ;
- Double-cliquer sur le lecteur ou cliquer-droit dans le cas de l’imprimante.
2eme chemin:
- Double-cliquer sur Favoris réseau.
- Double-cliquer sur l’icône Réseau.
- Double-cliquer sur l’icône Réseau Microsoft Windows.
- Double-cliquer sur le Nom de l’ordinateur ayant la ressource partagée.
……………………………………………………………………………………………………………………………………………………………………….
PART II. INITIATION A LA CONCEPTION WEB

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

La page web est l'unité de consultation du World Wide Web. Ce terme
a une signification pratique ; il n'a pas de définition technique formelle. Elle est
conçue pour être consultée à l'aide d'un navigateur web. Elle a une adresse
web. Techniquement, une page web est souvent constituée d'un document en
Hypertext Markup Language (HTML) et d'images. Cependant, tout type de
ressources ou d'assemblage de ressources, textuelles, visuelles, sonores,
logicielles, peuvent constituer une page web.
Pour créer une page Web, un éditeur de texte ou un éditeur HTML
spécialisé est nécessaire. Il faut ensuite enregistrer la page Web créée sur un
serveur Web (hébergeur).
Le design d’une page Web est personnel. Il est possible d’utiliser des
modèles préfabriqués. Les modèles de Web page permettent au webmaster
……………………………………………………………………………………………………………………………………………………………………….
de se concentrer sur le contenu du site sans avoir à se préoccuper des

problèmes esthétiques.
Une page web se consulte soit en entrant directement son adresse Web
dans un navigateur Web, soit en suivant un hyperlien se trouvant dans une
autre page.
4.3. ADRESSE WEB

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

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

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

Avec un navigateur, vous pouvez consulter n'importe quel site web.
Il s'agit de langages informatiques qui permettent de créer des sites

web. Ils sont à la base même du Web. Le langage HTML a été inventé par un
certain Tim Berners-Lee en 1991.
HTML et CSS sont deux « langues » qu'il faut savoir parler pour créer des
sites web. C'est le navigateur web qui fera la traduction entre ces langages
informatiques et ce que vous verrez s'afficher à l'écran.
Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser
un langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va
falloir apprendre deux langages qui se complètent car ils ont des rôles
différents :
• HTML (HyperText Markup Language) : Il a fait son apparition dès 1991
lors du lancement du Web. Son rôle est de gérer et organiser le contenu.
C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du
texte, des liens, des images…
• CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le
rôle du CSS est de gérer l'apparence de la page web (agencement,
positionnement, décoration, couleurs, taille du texte…). Ce langage est venu
compléter le HTML en 1996.
Vous pouvez très bien créer un site web uniquement en HTML, mais
celui-ci ne sera pas très beau : l'information apparaîtra «brute ». C'est pour
cela que le langage CSS vient toujours le compléter.
Le HTML définit le contenu tandis que le CSS permet de définir la
présentation : couleurs, image de fond, marges, taille du texte…
Comme vous vous en doutez, le CSS a besoin d'une page HTML pour
fonctionner. C'est pour cela que nous allons d'abord apprendre les bases du
HTML avant de nous occuper de la décoration en CSS.
XML traduit en « Langage à balises étendu », ou « Langage à balises
extensible »est en quelque sorte un langage HTML amélioré permettant de
définir de nouvelles balises. Il s'agit effectivement d'un langage permettant de
mettre en forme des documents grâce à des balises (markup).
XML est un format de description des données et non de leur
représentation, comme c'est le cas avec HTML. La mise en page des données
……………………………………………………………………………………………………………………………………………………………………….
est assurée par un langage de mise en page, le XSL (eXtensible StyleSheet

Language).
Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la
toute première version de HTML (HTML 1.0) il n'était même pas possible
d'afficher des images.
Voici un très bref historique de ces langages pour votre culture générale.
A. Versions de HTML
• HTML 1 : c'est la toute première version créée par Tim Berners-Lee en
1991.
• HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en
1996 avec l'apparition du HTML 3.0. C'est cette version qui posera en fait
les bases des versions suivantes du HTML. Les règles et le fonctionnement
de cette version sont donnés par le W3C (tandis que la première version a
été créée par un seul homme).
• HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de
nombreuses possibilités au langage comme les tableaux, les applets, les
scripts, le positionnement du texte autour des images, etc.
• HTML 4 : il s'agit de la version la plus répandue du HTML (plus
précisément, il s'agit de HTML 4.01). Elle apparaît pour la première fois en
1998 et propose l'utilisation de frames (qui découpent une page web en
plusieurs parties), des tableaux plus complexes, des améliorations sur les
formulaires, etc. Mais surtout, cette version permet pour la première fois
d'exploiter des feuilles de style, notre fameux CSS.
• HTML 5 : c'est la dernière version. Encore assez peu répandue, elle fait
beaucoup parler d'elle car elle apporte de nombreuses améliorations comme
la possibilité d'inclure facilement des vidéos, un meilleur agencement du
contenu, de nouvelles fonctionnalités pour les formulaires, etc. C'est cette
version que nous allons découvrir ensemble.
B. Versions de CSS
• CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les
bases de ce langage qui permet de présenter sa page web, comme les
couleurs, les marges, les polices de caractères, etc.
• CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle
version de CSS rajoute de nombreuses options. On peut désormais utiliser
des techniques de positionnement très précises, qui nous permettent
d'afficher des éléments où on le souhaite sur la page.
……………………………………………………………………………………………………………………………………………………………………….
• CSS 3 : c'est la dernière version, qui apporte des fonctionnalités

particulièrement attendues comme les bordures arrondies, les dégradés, les
ombres, etc.
4.5.2. ÉDITEUR DE TEXTE

Il existe effectivement de nombreux logiciels dédiés à la création de sites
web dont Bloc-notes (figure suivante).
On peut tout à fait créer un site web uniquement avec Bloc-notes, le

logiciel d'édition de texte intégré par défaut à Windows. Il y a cependant des
logiciels plus puissants aujourd'hui et personne n'utilise vraiment Bloc-notes.
On peut classer ces logiciels de création de site web en deux catégories :
• Les WYSIWYG (What You See Is What You Get = Ce Que Vous Voyez Est
Ce Que Vous Obtenez) : ce sont des programmes qui se veulent très faciles
d'emploi, ils permettent de créer des sites web sans apprendre de langage
particulier. Parmi les plus connus d'entre eux : Mozilla Composer, Microsoft
Expression Web, Dreamweaver… et même Word. Leur principal défaut est la
qualité souvent assez mauvaise du code HTML et CSS qui est
automatiquement généré par ces outils. Un bon créateur de site web doit
tôt ou tard connaître HTML et CSS.
• Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de
code. On peut en général les utiliser pour de multiples langages, pas
seulement HTML et CSS. Ils se révèlent être de puissants alliés pour les
créateurs de sites web !
Voici quelques conseils, selon que vous êtes sous Windows, Mac OS X ou
Linux.
Sous Windows
L’un des éditeurs de texte les plus utilisés est Notepad++. Ce logiciel
est simple, en français et gratuit. Voici à quoi il ressemble lorsque vous le
lancez (figure suivante).
……………………………………………………………………………………………………………………………………………………………………….
Il faut faire la manipulation suivante : allez dans le menu Langage > H >
HTML. Cela permettra au logiciel de savoir que l'on va taper du HTML. Il existe
d'autres éditeurs disponibles sous Windows. Si Notepad++ ne vous convient
pas, vous pouvez essayer : jEdit, PSpad, ConTEXT, … et bien d'autres si vous
recherchez « Éditeur de texte » sur le Web.
Sous Mac OS X
Vous pouvez essayer l'un des logiciels suivants : jEdit, Smultron,
TextWrangler.
Sous Linux
Les éditeurs de texte sont légion sous Linux. Certains d'entre eux sont
installés par défaut, d'autres peuvent être téléchargés facilement via le centre
de téléchargement (sous Ubuntu notamment) ou au moyen de commandes
comme apt-get et aptitude. V oici quelques logiciels que vous pouvez tester :
gEdit, Kate, vim, Emacs, jEdit.
4.5.3. NAVIGATEUR
Le navigateur est le programme qui nous permet de voir les sites web.
Comme expliqué plus tôt, le travail du navigateur est de lire le code HTML et
CSS pour afficher un résultat visuel à l'écran. Si le code CSS dit « Les titres
sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du
navigateur est donc essentiel.
Le principal problème, vous vous en rendrez vite compte, c'est que les
différents navigateurs n'affichent pas le même site exactement de la même
façon. Il faudra vous y faire et prendre l'habitude de vérifier régulièrement que
votre site fonctionne correctement sur la plupart des navigateurs.
……………………………………………………………………………………………………………………………………………………………………….
Il existe de nombreux navigateurs différents. Voici les principaux à

connaître :
En plus des navigateurs précités, voici quelques Smartphones avec leurs

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

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

• Sélectionner la commande Enregistrer du menu Fichier.
• Dans la boîte de dialogue qui apparaît, indiquez l’emplacement (dossier)
pour conserver le fichier
• Donnez au fichier le nom que vous voulez et l’extension .html.
L'icône qui représente le fichier dépend de votre navigateur web par
défaut. Voici par exemple les icônes qui apparaissent lorsque votre navigateur
principal est Firefox ou Internet Explorer (figures suivantes).
Icône en Internet Icône en Google Grome

Explorer
Faites simplement un double-clic sur le fichier et votre navigateur affiche

le texte que vous avez écrit comme dans la fenêtre suivante :
En fait, pour créer une page web, il ne suffit pas de taper simplement du
texte comme on vient de le faire. En plus de ce texte, il faut aussi écrire ce
qu'on appelle des balises, qui vont donner des instructions à l'ordinateur
comme « aller à la ligne », « afficher une image », etc.
4.5.5. BALISES ET LEURS ATTRIBUTS

Il ne suffit pas d'écrire « simplement » du texte dans l’éditeur, il faut
aussi donner des instructions à l’ordinateur. En HTML, on utilise pour cela des
balises.
……………………………………………………………………………………………………………………………………………………………………….
Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci
sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur
de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons »,
c'est-à-dire des symboles < et >, comme ceci : <balise>
On distingue deux types de balises : les balises en paires et les balises
orphelines.
a) Les balises appariées ou en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi
elles ressemblent en HTML:
<titre>Ceci est un titre</titre>
La balise ouvrante <balise> dit au navigateur : « L’élément commence
ici.» tandis que la balise fermante </balise> dit au navigateur : « L’élément
se termine là. »
b) Les balises orphelines ou isolées
Ce sont des balises qui servent le plus souvent à insérer un élément à un
endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le
début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image
ici ». En HTML une balise orpheline s'écrit comme ceci :
<image />
Les attributs sont les options des balises. Ils viennent les compléter pour
donner des informations supplémentaires. L'attribut se place après le nom de
la balise ouvrante et a le plus souvent une valeur, comme ceci :
<balise attribut="valeur">
Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à
grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :
<image nom="photo.jpg" />
L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le
fichier photo.jpg. Dans le cas d'une balise fonctionnant « par paire », on ne
met les attributs que dans la balise ouvrante et pas dans la balise fermante.
Par exemple :
<citation auteur="Neil Armstrong" date="21/07/1969">C'est un petit pas
pour l'homme, mais un bond de géant pour l'humanité.</citation>
Ce code indique que la citation est de Neil Armstrong et qu'elle date du
21 Juillet 1969.
……………………………………………………………………………………………………………………………………………………………………….
4.5.5. STRUCTURE DE BASE D’UNE PAGE HTML5

Reprenons notre éditeur Notepad++ et écrivons-y ce code correspondant
à la structure de base d'une page web en HTML5 :
N.B. Le fait qu’il y ait des espaces au début de certaines lignes pour décaler les
balises en vue de rendre uniquement lisible le code source s’appelle
« Indentation ».
Vous noterez que les balises s'ouvrent et se ferment dans un ordre

précis. Les balises doivent être fermées dans le sens inverse de leur ouverture.
Ci-dessous, nous expliquons les balises utilisées dans le code précédent :
a) Le doctype < !DOCTYPE html>
La toute première ligne s’appelle le doctype. Elle est indispensable car
c’est elle qui indique qu’il s’agit bien d’une page web HTML. Ce n'est pas
vraiment une balise comme les autres (elle commence par un point
d'exclamation), vous pouvez considérer que c'est un peu l'exception qui
confirme la règle.
b) La balise < html> ----- < / html>
C'est la balise principale du code. Elle englobe tout le contenu de votre
page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à
la fin du code.
c) L'en-tête <head> et le corps <body>
Une page web est constituée de deux parties :
• L'en-tête <head> : cette section un peu courte donne quelques
informations générales très importantes sur la page comme son titre,
……………………………………………………………………………………………………………………………………………………………………….
l'encodage (pour la gestion des caractères spéciaux), etc. Ces informations

ne sont pas affichées sur la page mais sont à destination de l’ordinateur.
• Le corps <body> : c'est là que se trouve la partie principale de la page.
Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du
corps que nous écrirons la majeure partie de notre code.
Pour le moment, le corps est vide (nous y reviendrons plus loin).
Intéressons-nous par contre aux deux balises contenues dans l'en-tête.
d) L'encodage (charset)
Code : HTML
<meta charset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html. Sans
rentrer dans les détails, l'encodage indique la façon dont le fichier est
enregistré. C'est lui qui détermine comment les caractères spéciaux vont
s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
Il y a plusieurs techniques d'encodage portant des noms bizarres et
utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253… Une
seule, cependant, devrait être utilisée aujourd'hui autant que possible : UTF-8.
Cette méthode d'encodage permet d'afficher sans aucun problème
pratiquement tous les symboles de toutes les langues de notre planète. C'est
pour cela qu’il est indiqué utf-8 dans cette balise.
e) Le titre principal de la page
<title>
C'est le titre de votre page, probablement l'élément le plus important.
Toute page doit avoir un titre qui décrit ce qu'elle contient. Il est conseillé de
garder le titre assez court (moins de 100 caractères en général). Le titre ne
s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet
du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur.
Vous verrez que le titre s'affiche dans l'onglet.
f) Commentaires
Un commentaire en HTML est un texte qui sert simplement de mémo. Il
n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à
l'affichage de la page. Cela vous permettra de vous rappeler comment
fonctionne votre page si vous revenez sur votre code source après un long
moment d'absence. Voici la balise utilisée pour insérer un commentaire
n’importe où dans le code.

……………………………………………………………………………………………………………………………………………………………………….
N.B. Pour voir le code HTML de la page une fois mise en ligne, il suffit de
cliquer-droit sur la page puis, dans le menu contextuel qui s’affiche,
sélectionner la commande « Code source de la page ».
……………………………………………………………………………………………………………………………………………………………………….
CHAP. V. ORGANISATION DU TEXTE

Nous allons maintenant découvrir de nombreuses balises HTML dont
certaines existent depuis la 1ère version de HTML et d’autres plus récemment
introduites dans HTML5.
5.1. PARAGRAPHES
La plupart du temps, lorsqu'on écrit du texte dans une page web, on le
fait à l'intérieur de paragraphes. Le langage HTML propose justement la balise
<p> pour délimiter les paragraphes.
Ex. <p>Bonjour le monde !</p> : Début du paragraphe <p> et </p> Fin du
paragraphe.
5.2. SAUT DE LIGNE

En HTML, la touche Entrée ne crée pas une nouvelle ligne comme vous
en avez l'habitude. On fait les sauts de ligne en HTML avec la balise <br />
placée à l'intérieur d'un paragraphe.
<p>Bienvenue sur mon site !<br /> Cette balise orpheline permet un saut de
ligne. </p>
5.3. TITRES
Lorsque le contenu de la page va s'étoffer avec de nombreux
paragraphes, il va devenir difficile pour vos visiteurs de se repérer. C'est là que
les titres deviennent utiles.
En HTML, on est verni, on a le droit d'utiliser six balises différentes pour
indiquer les niveaux :
<h1> </h1> : signifie « titre très important ». En général, on s'en sert pour
afficher le titre de la page au début de celle-ci.
<h2> </h2> : signifie « titre important ».
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un «
sous-titre »).
<h4> </h4> : titre encore moins important.
<h5> </h5> : titre pas important.
<h6> </h6> : titre pas important du tout.
……………………………………………………………………………………………………………………………………………………………………….
Code : HTML
<html>
<head>
<title>Niveaux de titres</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>
Grâce au langage CSS, vous pourrez dire « Je veux que mes titres
importants soient centrés, rouges et soulignés ». Pour le moment, en HTML,
nous ne faisons que structurer notre page. Nous rédigeons le contenu avant de
nous amuser à le mettre en forme.
5.4. MISE EN VALEUR

Au sein de vos paragraphes, certains mots sont parfois plus importants
que d'autres et vous aimeriez les faire ressortir. HTML vous propose différentes
balises de mise en valeur du texte de votre page.
La balise <em>
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise
<em> </em>. Son utilisation est très simple : encadrez les mots à mettre en
valeur avec ces balises. Reprenons l’exemple précédent en mettant certains
mots en valeur :
<!DOCTYPE HTML>
<html>
<head>
<title>MISE EN VALEUR</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !<br /> Je mets les mots suivants <em>en valeur</em> comme vous le remarquez</p>
</body>
</html>
Comme vous pouvez le voir, utiliser la balise <em> a pour conséquence
de mettre le texte en italique mais ne reste pas la balise qui met un texte en
italique. En fait, c'est le navigateur qui choisit comment afficher les mots. On
lui dit que les mots sont assez importants et, pour faire ressortir cette
information, il change l'apparence du texte en utilisant l'italique.
La balise <strong>
……………………………………………………………………………………………………………………………………………………………………….
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui

signifie « fort », ou « important » si vous préférez. Elle s'utilise exactement de
la même manière que <em>.
La balise <strong> ne signifie pas « mettre en gras » mais « important
». On pourra décider plus tard, en CSS, d'afficher les mots « importants »
d'une autre façon que le gras si on le souhaite.
5.5. MARQUAGE DU TEXTE
La balise <mark> permet de faire ressortir visuellement une portion de
texte. L'extrait n'est pas forcément considéré comme important mais on veut
qu'il se distingue bien du reste du texte. Cela peut être utile pour faire ressortir
un texte pertinent après une recherche sur votre site par exemple.
5.6. LISTES
Les listes nous permettent souvent de mieux structurer notre texte et
d'ordonner nos informations. Les listes utilisent une combinaison d’au moins
deux éléments :
• Un élément de balisage qui dit au navigateur que ce qui suit est une liste ;
• Des éléments de balisage qui disent au navigateur que ce qui suit est un
élément de la liste.
Nous allons découvrir ici trois types de listes :
5.6.1. Listes à puces ou non ordonnées

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

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

Elle regroupe des termes et des définitions dans une seule liste et
s’appuient sur trois éléments :
……………………………………………………………………………………………………………………………………………………………………….
• <dl> : Contient les définitions de la liste ;

• <dt> : Définit un terme de la liste ;
• <dd>: Définit une définition pour un terme.
Pour créer une liste de définitions comprenant deux éléments, vous
devez utiliser les éléments suivants :
<dl>
<dt>premier terme</dt>
<dd> définition du premier terme</dd>
<dt>deuxième terme</dt>
<dd> définition du deuxième terme</dd>
<dd> définition du deuxième terme</dd>
</dl>
5.7. CRÉATION DES LIENS

Un lien est un texte sur lequel on peut cliquer pour se rendre sur une
autre page. On peut faire un lien d'une page a.html vers une page b.html,
mais on peut aussi faire un lien vers un autre site (par exemple,
http://www.siteduzero.com). Dans les deux cas, nous allons voir que le
fonctionnement est le même.
5.7.1. Lien vers un autre site

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

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

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

Une ancre est une sorte de point de repère que vous pouvez mettre dans
vos pages HTML lorsqu'elles sont très longues. En effet, il peut alors être utile
de faire un lien amenant plus bas dans la même page pour que le visiteur
puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va
alors servir de repère. C’est peut être n'importe quelle balise, un titre par
exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira
ensuite pour faire un lien vers cette ancre. Par exemple :
Code : HTML
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois
l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.
Exemple : Code HTML
……………………………………………………………………………………………………………………………………………………………………….
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas
dans la même page (à condition que la page comporte suffisamment de texte
pour que les barres de défilement se déplacent automatiquement). Voici un
exemple de page comportant beaucoup de textes et utilisant les ancres :
Code : HTML
<h1>Mes langages préférés</h1>
<p>Aller directement à la partie traitant de :<br />
<a href="#html">En savoir plus sur html</a><br />
<a href="#css"> En savoir plus sur css</a><br />
<a href="#javascript"> En savoir plus sur javascript</a><br /></p>
<h2 id="html">Historique de HTML avec détails possibles</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="css">Historique de CSS avc details possibles</h2>
<h2 id="javascript">Historique de Javascript avec détails possibles</h2>
5.7.5. Un lien qui affiche une infobulle au survol

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

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

Si vous voulez qu’un visiteur puisse vous envoyer un e-mail, vous pouvez
utiliser des liens de type mailto. Rien ne change au niveau de la balise, vous
devez simplement modifier la valeur de l'attribut href comme ceci :
Code : HTML
<p><a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a></p>
Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse
e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau
message vide s'ouvre, prêt à être envoyé à votre adresse e-mail.
……………………………………………………………………………………………………………………………………………………………………….
5.7.8. Lien pour télécharger un fichier

Beaucoup d'entre vous se demandent comment cela se passe pour le
téléchargement d'un fichier… En fait, il faut procéder exactement comme si
vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du
fichier à télécharger.
Par exemple, supposez que vous vouliez faire télécharger monfichier.zip.
Placez simplement ce fichier dans le même dossier que votre page web (ou
dans un sous-dossier) et faites un lien vers ce fichier :
Code : HTML
<p><a href="monfichier.zip">Télécharger le fichier</a></p>
Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va
lancer la procédure de téléchargement lorsqu'on cliquera sur le lien.
5.8. IMAGES
Il existe différents formats d'image que l'on peut utiliser sur des sites
web, et on ne doit pas les choisir au hasard. En effet, les images sont parfois
volumineuses à télécharger, ce qui ralentit le temps de chargement de la page.
Quand vous avez une image, vous avez la possibilité de l'enregistrer
dans plusieurs « formats » différents. Le poids (en Ko, voire en Mo) de l'image
sera plus ou moins élevé selon le format choisi et la qualité de l'image va
changer. Par exemple, le logiciel de dessin Paint vous propose de choisir entre
plusieurs formats lorsque vous enregistrez une image :jpg, gif, png, …
N.B. Les formats non cités ici sont à bannir car ils ne sont pas compressés,
donc trop gros.
La balise <img /> est utilisée pour insérer une image. Elle doit être
accompagnée de deux attributs obligatoires :
- src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous
pouvez soit mettre un chemin absolu (ex. : http://www.site.com/fleur.png),
soit mettre le chemin relatif (ce qu'on fait le plus souvent). Ainsi, si votre
image est dans un sous-dossier images, vous devrez taper :
src="images/fleur.png"
- alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte
court qui décrit ce que contient l'image. Ce texte sera affiché à la place de
l'image si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les
navigateurs de personnes handicapées (non-voyants) qui ne peuvent
malheureusement pas « voir » l'image. Cela aide aussi les robots des
moteurs de recherche pour les recherches d'images. Pour la fleur, on
mettrait par exemple : alt="Une fleur".
……………………………………………………………………………………………………………………………………………………………………….
Les images doivent se trouver obligatoirement à l'intérieur d'un

paragraphe (<p></p>). Voici un exemple d'insertion d'image :
Code : HTML
<p>Ceci est une montagne située au Nord Kivu :<br /> <img src="images/montagne.jpg" alt="Photo de montagne" /> </p>
Bref, l'insertion d'image est quelque chose de très facile pour peu qu'on
sache indiquer où se trouve l'image, comme on avait appris à le faire avec les
liens.
La plus grosse « difficulté » (si on peut l’appeler ainsi) consiste à choisir
le bon format d'image. Ici, c'est une photo donc c'est évidemment le format
JPEG qu'on utilise.
L'attribut permettant d'afficher une bulle d'aide est le même que pour les
liens : il s'agit de title.
Code : HTML
<p>Ceci est une montagne située au Nord Kivu :<br /> <img src="images/montagne.jpg" alt="Photo de montagne" title="Bon
massif" /> </p>
Rmq : Évitez à tout prix les accents, majuscules et espaces dans vos noms de
fichiers et de dossiers.
……………………………………………………………………………………………………………………………………………………………………….
CHAP.VI. MISE EN FORME AVEC CSS

6.1. MISE EN PLACE DU CSS
Maintenant nous allons découvrir le CSS pour mettre en forme votre
page web.
Vous avez le choix car on peut écrire du code en langage CSS à trois
endroits différents :
A. Dans un fichier .css (méthode la plus recommandée)
Maintenant, créez un nouveau fichier vide dans votre éditeur de texte
(par exemple Notepad++) puis l’enregistrer au format .css. Ensuite, dans le
fichier HTML, insérer la ligne suivante dans le <Head>.<link
rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce fichier
HTML est associé à un fichier appelé style.css et chargé de la mise en forme.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
</head>
<body>
</body>
</html>
B. Dans l'en-tête du fichier HTML
Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML :
cela consiste à insérer le code CSS directement dans une balise <style> à
l'intérieur de l'en-tête : <head>.
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color: blue;
}
</style>
</head>
<body>
<p>Bienvenue à notre site !</p>
</body>
</html>
C. Directement dans les balises du fichier HTML via un attribut style
(méthode la moins recommandée).
Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un
attribut style à n'importe quelle balise. Vous insérerez votre code CSS
directement dans cet attribut :
<p style="color: blue;">Bienvenue à notre site !</p>
……………………………………………………………………………………………………………………………………………………………………….
6.2. APPLICATIONS DE STYLES
Dans un code CSS, on trouve trois éléments différents :
• Des noms de balises : on écrit les noms des balises dont on veut modifier
l'apparence. Par exemple, si je veux modifier l'apparence de tous les
paragraphes <p>, je dois écrire p.
• Des propriétés CSS : les « effets de style » de la page sont rangés dans des
propriétés. Il y a par exemple la propriété color qui permet d'indiquer la
couleur du texte, font-size qui permet d'indiquer la taille du texte, etc. Il y
a beaucoup de propriétés CSS.
• Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par
exemple, pour la propriété color, il faut indiquer le nom de la couleur. Pour
font-size, il faut indiquer quelle taille on veut, etc.
Code : CSS
balise1
{
propriete1: valeur1;
}
balise2
{
}
NOTE : Comme vous le voyez, on écrit le nom de la balise (par exemple h1) et on ouvre des accolades
pour, à l’intérieur, mettre les propriétés et valeurs que l'on souhaite. On peut mettre autant de propriétés
que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole « deux-points » ( : ) puis
de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ).
Il est possible d’appliquer un style à plusieurs balises. Par exemple :

Code : CSS
h1, em
{
color: blue;
}
Ceci signifie : «le texte des <h1> et <em> seront écrits en bleu ». Vous
pouvez indiquer autant de balises à la suite que vous le désirez.
6.2.1. Insertion des commentaires

Pour faire un commentaire, il faut taper /* suivi de votre commentaire
puis */ pour terminer votre commentaire.
6.2.2. Class et Id
Pour que certains paragraphes seulement soient écrits d'une manière
différente, on peut utiliser les attributs spéciaux qui fonctionnent sur toutes les
balises : class et id. Les deux attributs sont quasiment identiques. Il y a
……………………………………………………………………………………………………………………………………………………………………….
seulement une petite différence. Pour le moment, et pour faire simple, on ne

va s'intéresser qu'à l'attribut class.
Class est un attribut que l'on peut mettre sur n'importe quelle balise,
aussi bien titre que paragraphe, image, etc.
Code : HTML
<h1 class=""> </h1>
<p class=""> </p>
<img class="" />
En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que
vous voulez, du moment que le nom commence par une lettre.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Mon super site</h1>
<p class="introduction">Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>.Patientez encore un peu !</p>
</body>
</html>
Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom :
introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour
dire : « Je veux que seules les balises qui ont comme nom 'introduction' soient
affichées en bleu ».
Pour faire cela en CSS, indiquez le nom de votre classe en commençant
par un point, comme ci-dessous :
Code : CSS
.introduction
{
color: blue;
}
Id fonctionne exactement de la même manière que class, à un détail
près : il ne peut être utilisé qu'une fois dans le code. D'ailleurs, nous avons
déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres). En
pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans
la page, comme par exemple le logo :
Code : HTML
<img src="images/logo.png" alt="Logo du site" id="logo" />
Si vous utilisez des id, lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire
précéder le nom de l'id par un dièse (#) :
……………………………………………………………………………………………………………………………………………………………………….
Code : CSS
#logo
{
/* Indiquez les propriétés CSS ici */
}
6.2.3. Balises universelles

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

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

Le « formatage du texte » n'a rien à voir avec la destruction de toutes
les données présentes sur votre disque dur. Cela signifie simplement que l'on
va modifier l'apparence du texte (on dit qu'on le « met en forme »).
Pas de surprise particulière : nous sommes toujours dans le CSS et nous
allons réutiliser ce que nous venons d'apprendre dans le chapitre précédent.
Nous allons donc travailler directement au sein du fichier .css que nous avons
créé.
Ici nous allons découvrir de nombreuses propriétés CSS : nous allons
voir comment modifier la taille du texte, changer la police, aligner le texte…
6.3.1. Taille
Pour modifier la taille du texte, on utilise la propriété CSS font-size.
Deux types de taille sont proposés :
a) Taille absolue (en pixels, en centimètres ou millimètres).
Cette méthode est très précise mais il est conseillé de ne l'utiliser que si
c'est absolument nécessaire, car on risque d'indiquer une taille trop petite pour
certains lecteurs. Pour indiquer une taille absolue, on utilise généralement les
pixels.
Pour avoir un texte de 16 pixels de hauteur, vous devez donc écrire :
Code : CSS
p
{
font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
font-size: 40px; /* Titres de 40 pixels */
}
b) Taille relative (en pourcentage, « em » ou « ex ») : Cette technique
souple s'adapte plus facilement aux préférences de taille des visiteurs. C'est la
méthode recommandée car le texte s'adapte alors plus facilement aux
préférences de tous les visiteurs. La valeur relative peut être indiquée par les
mots anglais suivants :
• xx-small : minuscule ;
• x-small : très petit ;
……………………………………………………………………………………………………………………………………………………………………….
• small : petit ;
• medium : moyen ;
• large : grand ;
• x-large : très grand ;
• xx-large : euh… gigantesque.
Code : CSS
p
{
font-size: small ;
}
h1
{
font-size: large ;
}
Cette technique a un défaut : il n'y a que sept tailles disponibles (car il
n'y a que sept noms). Heureusement, il existe d'autres moyens.
De préférence, indiquer la taille en « em » :
• Si vous écrivez 1em, le texte a une taille normale.
• Si vous voulez grossir le texte, vous pouvez inscrire une valeur supérieure à
1, comme 1.3em.
• Si vous voulez réduire le texte, inscrivez une valeur inférieure à 1, comme
0.8em.
Exemple :
Code : CSS
p
{
font-size: 0.8em;
}
h1
{
font-size: 1.3em;
}
D'autres unités sont disponibles. Vous pouvez essayer le « ex » (qui
fonctionne sur le même principe que le em mais qui est plus petit de base) et
le pourcentage (80%, 130%…).
6.3.2. Police
En effet, il se pose un problème : pour qu'une police s'affiche
correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas
la même police que vous, son navigateur prendra une police par défaut (une
police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous
attendiez.
La bonne nouvelle, c'est que depuis CSS 3, il est possible de faire
télécharger automatiquement une police au navigateur.
……………………………………………………………………………………………………………………………………………………………………….
A. Modification de la police
La propriété CSS qui permet d'indiquer la police à utiliser est font-
family. Seulement, pour éviter les problèmes si l'internaute n'a pas la même
police que vous, on précise en général plusieurs noms de Police, séparés par
des virgules :
Code : CSS
p
{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}
Cela signifie que le navigateur essaiera d’abord d’utiliser : «Impact ou,
si elle n'y est pas, Arial Black, ou sinon Arial, ou sinon Verdana, ou si rien
n'a marché, il mettra une police standard (sans-serif) ».
En général, il est bien d'indiquer un choix de trois ou quatre polices (+
serif ou sans-serif) afin de s'assurer qu'au moins l'une d'entre elles aura été
trouvée sur l'ordinateur du visiteur.
N.B. Si le nom de la police comporte des espaces, il faut l'entourer de
guillemets comme c’est fait pour « Arial Black».
Voici une liste de polices qui fonctionnent bien sur la plupart des
navigateurs :Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact,
Times New Roman, Trebuchet MS, Verdana.
B. Style de police
Il existe en CSS une série de propriétés classiques de mise en forme du
texte. Nous allons découvrir ici comment afficher le texte en gras, italique,
souligné… et au passage nous verrons qu'il est même possible d'aller jusqu'à le
faire clignoter !
1°) Mise en italique
En CSS, pour mettre en italique, on utilise font-style qui peut prendre
trois valeurs :
• italic : le texte sera mis en italique.
• oblique : le texte sera passé en oblique (les lettres sont penchées, le
résultat est légèrement différent de l'italique proprement dit).
• normal : le texte sera normal (par défaut). Cela vous permet d'annuler une
mise en italique. Par exemple, si vous voulez que les textes entre <em> ne
soient plus en italique, vous devrez écrire :
Code : CSS
em
{
font-style: normal;
}
……………………………………………………………………………………………………………………………………………………………………….
Ainsi, dans l'exemple suivant, nous nous servons de font-style pour

mettre en italique tous mes titres <h2> :
Code : CSS
h2
{
font-style: italic;
}
2°) Mise en gras
La propriété CSS pour mettre en gras est font-weight et prend les
valeurs suivantes :
• bold : le texte sera en gras ;
• normal : le texte sera écrit normalement (par défaut).
Voici par exemple comment écrire les titres en gras :
Code: CSS
h1
{
font-weight: bold;
}
3°) Soulignement et autres décorations
La propriété CSS associée porte bien son nom : text-decoration. Elle
permet, entre autres, de souligner le texte, mais pas seulement. Voici les
différentes valeurs qu'elle peut prendre :
• underline : souligné.
• line-through : barré.
• overline : ligne au-dessus.
• blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et
Google Chrome, notamment).
• none : normal (par défaut).
Ce code CSS va vous permettre de souligner les titres du niveau 2 :
h1
{
text-decoration: underline;
}
6.3.3. Alignement du texte

Le langage CSS nous permet de faire tous les alignements connus : à
gauche, centré, à droite et justifié.
C'est tout simple. On utilise la propriété text-align et on indique l'alignement
désiré :
• left : le texte sera aligné à gauche (c'est le réglage par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera « justifié ». Justifier le texte permet de faire en sorte
qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des
lignes. Les textes des journaux, par exemple, sont toujours justifiés.
……………………………………………………………………………………………………………………………………………………………………….
Code : CSS
h1
{
text-align: center;
}
6.3.4. Flottants
Le CSS nous permet de faire flotter un élément autour du texte. On dit
aussi qu'on fait un « habillage ».
La propriété y relative est float (« flottant » en anglais) appliquée à une
balise. Cette propriété peut prendre deux valeurs très simples :
• left : l'élément flottera à gauche.
• right : l'élément flottera à droite.
Pour faire flotter une image, par exemple, nous devons taper dans un
premier temps, dans un paragraphe :
Code : HTML
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> Ceci est un texte normal de paragraphe, écrit à la suite de
l'image et qui l'habillera car l'image est flottante. </p>
Voici le seul bout de code CSS qu'on ait besoin de taper, qui permet de faire flotter l'image à gauche :
Code : CSS
.imageflottante
{
float: left;
}
Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte
doit être en-dessous du flottant et non plus à côté ». C'est la propriété clear,
qui peut prendre ces trois valeurs :
• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit après un float: left; ou
après un float: right;.
Pour simplifier, on va utiliser tout le temps le clear: both, qui marche
après un flottant à gauche et après un flottant à droite (cela fonctionne donc à
tous les coups). Pour illustrer son fonctionnement, on va prendre ce code :
Code : HTML
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Ce texte est écrit à côté de l'image flottante. </p>
<p class="dessous">Ce texte est écrit sous l'image flottante. </p>
Et ce code CSS :
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
……………………………………………………………………………………………………………………………………………………………………….
}
6.3.5. Couleur de fond

A. Méthodes de choix de couleur
La méthode la plus simple et la plus pratique pour choisir une couleur
consiste à taper son nom (in english, of course). Le seul défaut de cette
méthode est qu'il n'existe que seize couleurs dites « standard ». D'autres
couleurs officieuses existent mais qui ne fonctionneront pas forcément de la
même manière sur tous les navigateurs.
a) Notation hexadécimale
Seize couleurs, c’est un peu limité alors qu’il y a de millions de couleurs.
Heureusement, il existe en CSS plusieurs façons de choisir une couleur parmi
toutes celles qui existent. La première montrée est la notation hexadécimale.
Elle est couramment utilisée sur le Web mais il existe aussi une autre méthode
que nous verrons plus loin.
Un nom de couleur en hexadécimal, cela ressemble à : #FF5A28. Pour
faire simple, c'est une combinaison de lettres et de chiffres qui indiquent une
couleur. On doit toujours commencer par écrire un dièse (#), suivi de six
lettres ou chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux. Les deux premiers
indiquent une quantité de rouge, les deux suivants une quantité de vert et les
deux derniers une quantité de bleu. En mélangeant ces quantités (qui sont les
……………………………………………………………………………………………………………………………………………………………………….
composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on

veut.
Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur
blanche. Mais maintenant, ne me demandez pas quelle est la combinaison qui
produit de l'orange couleur « coucher de soleil », je n'en sais strictement rien.
Voici par exemple comment on fait pour appliquer aux paragraphes la
couleur blanche en hexadécimal :
Code : CSS
p
{
color: #FFFFFF;
}
b) Méthode RGB
En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège
en «RGB». Comme avec la notation hexadécimale, pour choisir une couleur, on
doit définir une quantité de rouge, de vert et de bleu.
Là, vous allez voir que c'est beaucoup plus pratique et qu'avec un logiciel
de dessin tout simple comme Paint, vous pouvez trouver la couleur que vous
désirez. Voici la marche à suivre :
1. Lancez le logiciel Paint depuis le menu Démarrer.
2. Rendez-vous dans la section Modifier les couleurs.
3. Une fenêtre s'ouvre. Dans la zone qui apparaît à droite, faites bouger les
curseurs pour sélectionner la couleur qui vous intéresse. Supposons que vous
soyez pris d'une envie folle d'écrire vos titres <h1> en rose bonbon.
Sélectionnez la couleur dans la fenêtre, comme à la figure suivante.
4. Relevez les quantités de Rouge-Vert-Bleu correspondantes, indiquées en

bas à droite de la fenêtre (ici 240-96-204). Recopiez ces valeurs dans cet ordre
dans le fichier CSS, comme dans le code ci-dessous :
……………………………………………………………………………………………………………………………………………………………………….
Code : CSS
p
{
color: rgb(240,96,204);
}
B. Définition de la couleur
Pour indiquer une couleur de fond, on utilise la propriété CSS
background-color. Elle s'utilise de la même manière que la propriété color,
c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation
hexadécimale ou encore utiliser la méthode RGB.
Pour indiquer la couleur de fond de la page web, il faut travailler sur
la balise <body>. C'est donc en modifiant sa couleur de fond que l'on changera
la couleur d'arrière-plan de la page.
Exemple :
Code : CSS
body
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
C. Héritage
En CSS, si vous appliquez un style à une balise, toutes les balises qui se
trouvent à l'intérieur prendront le même style. C'est en fait simple à
comprendre et intuitif. La balise <body>, vous le savez, contient entre autres
les balises de paragraphe <p> et de titre <h1>.
Code : CSS
body
{
background-color: black;
color: white;
}
mark
{
/* La couleur de fond prend le pas sur celle de toute la page */
background-color: red;
color: black;
}
Sur le texte de la balise <mark>, c'est la couleur de fond rouge qui
s'applique. En effet, même si le fond de la page est noir, c'est la propriété CSS
de l'élément le plus précis qui a la priorité.
D. Images de fond
La propriété permettant d'indiquer une image de fond est background-
image. Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par
exemple :
……………………………………………………………………………………………………………………………………………………………………….
Code : CSS
body
{
background-image: url("neige.png");
}
La propriété CSS background-attachment permet de « fixer » le fond.
L'effet obtenu est intéressant car on voit alors le texte « glisser » par-dessus le
fond. Deux valeurs sont disponibles :
• fixed : l'image de fond reste fixe ;
• scroll : l'image de fond défile avec le texte (par défaut).
Code : CSS
body
{
background-image: url("neige.png");
background-attachment: fixed; /* Le fond restera fixe */
}
6.4. BORDURES ET OMBRES

Le CSS vous offre un large choix de bordures pour décorer votre page.
De nombreuses propriétés CSS vous permettent de modifier l'apparence de
vos bordures : border-width, border-color, border-style… La super-propriété
border qui regroupe l'ensemble de ces propriétés.
Pour border, on peut utiliser jusqu'à trois valeurs pour modifier
l'apparence de la bordure : la largeur, la couleur et le type de bordure.
Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets,
etc.
Ainsi, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels autour
de mes titres, je vais écrire :
Code : CSS
h1
{
border: 3px blue dashed;
}
Si vous voulez mettre des bordures différentes en fonction du côté (haut,
bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas, vous
devrez utiliser ces quatre propriétés :
• border-top : bordure du haut ;
• border-bottom : bordure du bas ;
• border-left : bordure de gauche ;
• border-right : bordure de droite.
……………………………………………………………………………………………………………………………………………………………………….
Pour ajouter une bordure uniquement à gauche et à droite des

paragraphes, on écrira :
Code : CSS
p
{
border-left: 2px solid black;
border-right: 2px solid black;
}
La propriété border-radius va nous permettre d'arrondir facilement les
angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance »)
de l'arrondi en pixels :
Code : CSS
p
{
border-radius: 10px;
}
On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas,
indiquez quatre valeurs :
Code : CSS
p
{
border-radius: 10px 5px 10px 5px;
}
Les valeurs correspondent aux angles suivants dans cet ordre : haut à
gauche , haut à droite, bas à droite et bas à gauche.
Enfin, il est possible d'affiner l'arrondi de nos angles en créant des
courbes elliptiques). Dans ce cas, il faut indiquer deux valeurs séparées par
une barre oblique (slash, caractère /). Le mieux est certainement de tester
pour voir l'effet :
Code : CSS
p
{
border-radius: 20px / 10px;
}
……………………………………………………………………………………………………………………………………………………………………….
CHAP.VII. MISE EN PAGE DU SITE

7.1. INTRODUCTION
Dans ce chapitre, nous allons nous intéresser aux nouvelles balises HTML
dédiées à la structuration du site. Ces balises ont été introduites par HTML5
(elles n'existaient pas avant) et vont nous permettre de dire : « Ceci est mon
en-tête », « Ceci est mon menu de navigation », etc.
7.2. BALISES STRUCTURANTES

Nous allons présenter ci-dessous les nouvelles balises introduites par
HTML5 pour structurer nos pages. Vous allez voir, cela ne va pas beaucoup
changer l'apparence de notre site pour le moment, mais il sera bien construit
et prêt à être mis en forme ensuite.
<header> : l’entête
La plupart des sites web possèdent en général un en-tête, appelé
« header » en anglais. On y trouve le plus souvent un logo, une bannière, le
slogan de votre site… Vous devrez placer ces informations à l'intérieur de la
balise <header> :
Code : HTML
<header>

</header>
<footer> : le pied de page
À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas
du document. On y trouve des informations comme des liens de contact, le
nom de l’auteur, les mentions légales, etc.
Code : HTML
<footer>

</footer>
<nav> : principaux liens de navigation
La balise <nav> doit regrouper tous les principaux liens de navigation
du site. Généralement, le menu est réalisé sous forme de liste à puces à
l'intérieur de la balise <nav> :
Code : HTML
<nav>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="cours.html">Cours</a></li>
<li><a href="ouvrage.html">Ouvrages</a></li>
<li><a href="contact.html">A propos de l'Auteur</a></li>
<li><a href="http://www.iscgoma.net"> Inscription</a></li>
</ul>
</nav>
……………………………………………………………………………………………………………………………………………………………………….
<section> : une section de page

La balise <section> sert à regrouper des contenus en fonction de leur
thématique. Elle englobe généralement une portion du contenu au centre de la
page.
Code : HTML
<section>
<h1>Ma section de page</h1>
<p>La section regroupe les contenus selon leur thématique</p>
</section>
<aside> : informations complémentaires
La balise <aside> est conçue pour contenir des informations
complémentaires au document que l'on visualise. Ces informations sont
généralement placées sur le côté (bien que ce ne soit pas une obligation).
Code : HTML
<aside>

</aside>
Il peut y avoir plusieurs blocs <aside> dans la page. Sur Wikipédia, par
exemple, il est courant de voir à droite un bloc d'informations complémentaires
à l'article que l'on visualise. Ainsi, sur la page présentant la planète Saturne,
on trouve dans ce bloc les caractéristiques de la planète (dimensions, masse,
etc.).
<article> : un article indépendant
La balise <article> sert à englober une portion généralement autonome
de la page. C'est une partie de la page qui pourrait ainsi être reprise sur un
autre site. C'est le cas par exemple des actualités (articles de journaux ou de
blogs).
Code : HTML
<article>
<h1>Mon article</h1>
<p>Englobe une portion de la page</p>
</article>
7.3. MARGES
Il faut savoir que tous les blocs possèdent des marges (exprimées en
pixels). Il existe deux types de marges :
• les marges intérieures (espace entre le texte et la bordure) définies par la
propriété padding ;
• les marges extérieures (espace entre la bordure et le bloc suivant) définies
par la propriété margin.
Pour bien voir les marges, appliquez les valeurs suivantes aux
paragraphes :
……………………………………………………………………………………………………………………………………………………………………….
Code : CSS
p
{
width: 350px;
border: 1px solid black;
text-align: justify;
padding : 12px ; /* Marge intérieure de 12 pixels */
margin: 50px; /* Marge extérieure de 50px */
}
Voici la liste des propriétés pour margin : margin-top, margin-bottom,
margin-left et margin-right : marge extérieure à droite. Et la liste pour
padding : padding-top, padding-bottom, padding-left et padding-right.
N.B. La propriété overflow permet à ce que le texte ne dépasse pas des
limites du paragraphe. Il va falloir lui affecter comme valeur overflow : auto ;
pour que le navigateur décide lui-même.
7.3. POSITIONNEMENT EN CSS

Nous allons essayer de placer le menu à gauche et le reste du texte à
droite. Pour cela, nous allons faire flotter le menu à gauche et laisser le reste
du texte se placer à sa droite.
Nous voulons que le menu occupe 150 pixels de large. Nous allons aussi
rajouter une marge extérieure gauche de 170px à notre section (pour mieux le
séparer du menu), une bordure noire autour du menu et une bordure bleue autour du
corps (à la balise <section>) pour bien les distinguer.
Code : CSS
nav
{
float: left;
width: 150px;
border: 1px solid black;
}
section
{
margin-left: 170px;
border: 1px solid blue;
}
EXEMPLE
Cet exemple porte sur la conception d’une page web contenant un aperçu
général du site. Il reprend la plupart de balises HTML5 et des propriétés CSS3 que
nous avons parcourues dans la deuxième partie de ce support. Nous signalons, par
ailleurs, que ce n’est pas tout. Les étudiants peuvent encore aller plus loin. Les codes
ont été pris de l’éditeur Notepad++ par des captures d’écran pour que le lecteur se
rende compte qu’il y a indentation.
……………………………………………………………………………………………………………………………………………………………………….
CODE : HTML
……………………………………………………………………………………………………………………………………………………………………….
CODE : CSS
……………………………………………………………………………………………………………………………………………………………………….
……………………………………………………………………………………………………………………………………………………………………….
TP INDIVIDUEL DE LABO
Consignes :
- A envoyer au format PDF via la plateforme Google Classroom suivant le lien qui
vous sera partagé.
-Les réponses doivent contenir les codes utilisés et les captures des pages
web.
I. Créez une page web enregistrée sous le nom « reseau.html » dont le contenu est
la synthèse de la première partie du cours.
II. Créez une deuxième page enregistrée sous le nom « web.html » dont le contenu
est la synthèse de la deuxième partie du cours. Sur cette page, ajoutez aussi un
tableau reprenant les 20 balises étudiées (exemple avec la balise <p> :
N° Nom de la Balise Rôle Type
1 <p> Créer un Balise appariée
paragraphe
III. Créez une troisième page enregistrée sous le nom « formulaire.html » dont le
contenu est formulaire sur lequel l’internaute doit fournir les renseignements
suivants : Nom, Posnom, Sexe, Lieu de naissance, Date de naissance, Sexe,
Numéro de téléphone.
IV. Pour toutes ces pages, faites la mise en forme et la mise en page avec CSS tout en
respectant la disposition de principaux éléments notamment l’entête, le menu, la
section, le pied de page. Rassurez-vous que vous prévoyez aussi des liens
permettant de quitter une page vers une autre.
Bon travail.
……………………………………………………………………………………………………………………………………………………………………….
TABLE DES MATIÈRES

Objectifs du Cours ......................................................................................................................................... - 1 -
Bibliographie Sélective .................................................................................................................................. - 1 -
INTRODUCTION ............................................................................................................................................. - 2 -
PART I. RÉSEAU INFORMATIQUE ................................................................................................................... - 3 -
CHAP.I. CONCEPTION D’UN RÉSEAU INFORMATIQUE.................................................................................. - 3 -
1.2. ÉQUIPEMENTS RÉSEAU ...................................................................................................................... - 4 -
1.3. TYPES DE RÉSEAUX INFORMATIQUES................................................................................................. - 5 -
1.4. TOPOLOGIE D’UN RÉSEAU.................................................................................................................. - 6 -
CHAP. II. INSTALLATION PHYSIQUE D’UN R.I............................................................................................... - 11 -
2.1. CONSTITUANTS MATÉRIELS D'UN RÉSEAU LOCAL ........................................................................... - 11 -
2.2. CÂBLAGE RÉSEAU ............................................................................................................................. - 11 -
2.3. COUCHES RÉSEAUX........................................................................................................................... - 22 -
CHAP.III. RÉSEAU TCP/IP.............................................................................................................................. - 27 -
3.1. NOTIONS SUR LE TCP/IP ................................................................................................................... - 27 -
3.2. GESTION D’UN RÉSEAU WORKGROUP ............................................................................................. - 34 -
PART II. INITIATION A LA CONCEPTION WEB............................................................................................... - 38 -
CHAP.IV. THÉORIES SUR LE WEB ................................................................................................................. - 38 -
4.1. HISTORIQUE...................................................................................................................................... - 38 -
4.2. PAGE WEB......................................................................................................................................... - 38 -
4.3. ADRESSE WEB ................................................................................................................................... - 39 -
4.4. SITE WEB........................................................................................................................................... - 39 -
4.5. BASES DU HTML................................................................................................................................ - 41 -
CHAP. V. ORGANISATION DU TEXTE............................................................................................................ - 51 -
5.1. PARAGRAPHES.................................................................................................................................. - 51 -
5.2. SAUT DE LIGNE ................................................................................................................................. - 51 -
5.3. TITRES ............................................................................................................................................... - 51 -
5.4. MISE EN VALEUR............................................................................................................................... - 52 -
5.5. MARQUAGE DU TEXTE..................................................................................................................... - 53 -
5.6. LISTES................................................................................................................................................ - 53 -
5.7. CRÉATION DES LIENS ........................................................................................................................ - 55 -
5.8. IMAGES ............................................................................................................................................. - 58 -
CHAP.VI. MISE EN FORME AVEC CSS ........................................................................................................... - 60 -
6.1. MISE EN PLACE DU CSS..................................................................................................................... - 60 -
6.2. APPLICATIONS DE STYLES ................................................................................................................. - 61 -
……………………………………………………………………………………………………………………………………………………………………….
6.3. FORMATAGE DU TEXTE .................................................................................................................... - 65 -
6.4. BORDURES ET OMBRES .................................................................................................................... - 73 -
CHAP.VII. MISE EN PAGE DU SITE ................................................................................................................ - 75 -
7.1. INTRODUCTION ................................................................................................................................ - 75 -
7.2. BALISES STRUCTURANTES ................................................................................................................ - 75 -
7.3. MARGES............................................................................................................................................ - 76 -
7.3. POSITIONNEMENT EN CSS................................................................................................................ - 77 -
TP ............................................................................................................................................................ - 77 -
TABLE DES MATIÈRES .................................................................................................................................. - 82 -
……………………………………………………………………………………………………………………………………………………………………….

Labo2 2022

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

Labo2 2022

Transféré par

Droits d'auteur :

Formats disponibles

Notes de cours de Labo_II/G2_IG/ISC-GOMA -1-

Enseignement Supérieur et Universitaire

NOTES DE COURS DE LABORATOIRE

Destinées aux étudiants de deuxième année de l’Option Informatique de Gestion

Collection et mise à jour par : Ir Janvier TWIZERE SINDAMBIWE

Appartenant à l’étudiant(e): ………………………………

Les réseaux locaux permettent aux ordinateurs de communiquer entre

PART I. RÉSEAU INFORMATIQUE

CHAP.I. CONCEPTION D’UN RÉSEAU INFORMATIQUE

• Adresse logique: Adresse unique attribuée par les répondants informatique

1.2. ÉQUIPEMENTS RÉSEAU

- Le commutateur (switch) permettant de relier divers éléments tout en

- La passerelle (gateway), permettant de relier des réseaux locaux de

- Le B-routeur, associant les fonctionnalités d'un routeur et d'un pont.

1.3. TYPES DE RÉSEAUX INFORMATIQUES

local se différencie surtout par des performances plus réduites : la distance

1.4. TOPOLOGIE D’UN RÉSEAU

Une topologie en bus est l’organisation la plus simple d’un réseau. En

Dans une topologie en étoile, les ordinateurs du réseau sont reliés à

En revanche, un réseau à topologie en étoile est plus onéreux qu’un

Dans un réseau possédant une topologie en anneau, les ordinateurs

Aussi connu sous le nom de hiérarchique, il est divisé en niveaux. Le

Une topologie maillée correspond à plusieurs liaisons point à point. (Une

terminaux l'est : s'il y a N terminaux, le nombre de liaisons nécessaires est

Cette topologie se rencontre dans les grands réseaux de distribution

1.4.2. Topologie logique

CHAP. II. INSTALLATION PHYSIQUE D’UN R.I.

2.2. CÂBLAGE RÉSEAU

L’étape de câblage, bien que contraignante, n’est pas à prendre à la

2.2.1. Types de câbles

mais on distingue généralement: Le câble de type coaxial, La double paire

La gaine permet de protéger le câble de l'environnement extérieur. Elle

L'isolant entourant la partie centrale est constitué d'un matériau

- bande passante de 10Mbits/s.

b) Câblage à paire torsadée (10Base-T)

Description d’un câble cuivre

Les services téléphoniques traditionnels nécessitent une largeur de

garantissent au public l’homogénéité des produits. Ces normes incluent cinq

2.2.2. Sertissage des câbles UTP et la connectique

Certains équipements un peu anciens ou certains types d’installations

b) Installation classique : la paire torsadée

Les câbles droits seront reliés à un concentrateur (Hub) ou, mieux, à un

De plus, le hub partage sa bande passante entre tous les PC l'utilisant,

- Un hub Ethernet ou un switch Ethernet (commutateur ou

2.3. COUCHES RÉSEAUX

2.3.1. Modèle OSI

Les correspondances entre ces deux modèles sont les suivantes :

Couche 3 : Niveau paquet

2.3.2. Modèle TCP/IP

Couche Physique Niveau 1

CHAP.III. RÉSEAU TCP/IP

3.1.2. Masque de sous-réseau (Subnet Mask)

3.1.5. Repérage ou détermination de la machine sur le réseau

 Adresse de diffusion et nombre d’hôtes

Plus Hx est grande et plus la bande passante du réseau s’amenuise et le

• Choisir le protocole TCP/IP.

• Pointer Propriétés puis cocher la case Utiliser l’adresse IP suivante (ou

Vous pouvez choisir de partager la connexion Internet à partir de votre PC en

Après la configuration de toutes les machines, on procède par le partage

3.2. GESTION D’UN RÉSEAU WORKGROUP

3.2.1. Configuration réseau et connectivité

L’étape suivante consiste à vérifier que les différents ordinateurs

Pour vérifier la présence d’une machine sur le réseau, on exécute, à