Elément Constitutif :

INFORMATIQUE
Elément: n°2
(Suite)
INFORMATIQUE

CHAPITRE I : INTERNET ET WEB

DÉFINITION

Un réseau informatique est constitué d'un ensemble de matériels informatiques actifs (Ordinateur,...)
communiquant au travers de supports de communication passifs (filaires : ligne téléphonique en cuivre
ou ligne en fibre optique, hertzien, et satellitaire) afin d'échanger des informations. Les échanges sont
normalisés par des protocoles de communication dont le plus connu est IP (Internet Protocol).
Un réseau informatique met en relation des ordinateurs, comme un réseau téléphonique met en relation
des personnes. Des ordinateurs sont dits “ en réseaux ” dès lors qu’ils partagent une technologie qui
leur permet de communiquer ensemble.
Un moyen de faire communiquer deux réseaux distincts passe par l’utilisation de “ gateway ” ou
passerelle. Un tel dispositif est parfois appelé routeur (router), mais c’est un abus de langage. Les
hommes se connectent sur les ordinateurs, les ordinateurs se connectent sur un réseau, les réseaux
s’inter-connectent dans un “ internet ”
Le réseau Internet est un ensemble d'ordinateurs interconnectés, permettant l'échange d'informations :
autrement dit c’est un réseau de réseaux.
Ces informations sont accessibles grâce à des protocoles de communication Internet (HTTP, FTP,
SMTP, NNTP).

CATEGORIES HABITUELLES DE RESEAUX

On distingue les réseaux filaires des réseaux sans fil (Wireless), mais en informatique, les
catégories sont surtout définies selon la taille du réseau et ses usages :
 L.A.N. : Local Area Network : Réseau local d'une entreprise, d'un bâtiment...
 M.A.N. : Metropolitan Area Network : Réseau métropolitain (à l'échelle d'une ville)
 W.A.N.: Wide Area Network : Réseau étendu (à l'échelle d'une région ou de la terre
entière)
 S.A.N. : Storage Area Network : ensemble d'équipements de stockage
Moins connu, on distingue aussi les réseaux personnels :
 P.A.N. : Personal Area Network : Réseau personnel
 C.A.N. : Controller Area Network : Réseau personnel pour les systèmes
Pour pouvoir échanger des informations, les ordinateurs des réseaux doivent possèdent des
adresses (adresses des destinataires des informations et adresses des envoyeurs pour les

1
INFORMATIQUE

réponses), ces adresses sont allouées selon une certaine règle appelée protocole : ces sont les
adresses IP
Les adresses IP des machines d'un réseau dépendent de la nature du réseau. Les réseaux privés
des entreprises ou des foyers ont des adresses spécifiques qui ne circulent pas sur internet. A
l'inverse, les serveurs Web ont des adresses publiques circulant sur le web.

Une passerelle d'interconnexion (routeur, …) relie les deux réseaux grâce à deux câbles, un
connecté vers l'intérieur et l'autre vers l'extérieur.
Cette passerelle possède une adresse privée pour communiquer vers le réseau privé et une
seconde adresse, publique, diffusée à l’extérieur pour communiquer sur internet.
Une adresse IP est un numéro unique permettant d'identifier un ordinateur ou périphérique
connecté à un réseau utilisant le protocole IP.
Une adresse IPv4 (Internet Protocol Version 4) est un nombre de 32 bits composé de 4
numéros allant de 0 à 255 (4 numéros de 8 bits, sauf le dernier numéro qui ne peut excéder
254) séparés par des points.
Les adresses IP sont des nombres de 32 bits qui contiennent 2 champs :
 Un identificateur de réseau (NET-ID): tous les systèmes du même réseau physique
doivent posséder le même identificateur de réseau, lequel doit être unique sur
l'ensemble des réseaux gérés ; net-ID est située à gauche, elle désigne le réseau
contenant les ordinateurs.
 Un identificateur d'hôte (HOST-ID): un nœud (un ordinateur par exemple) sur un
réseau TCP/IP
(TCP/IP est l'ensemble des protocoles utilisés pour le transfert des données sur
Internet, Transmission Control Protocol/Internet Protocol) est appelé hôte, il identifie
une station de travail ; host-ID désigne les ordinateurs de ce réseau.
La concaténation de ces deux champs constitue une adresse IP unique sur le réseau.
Pour éviter d'avoir à manipuler des nombres binaires trop longs, les adresses 32 bits sont
divisées en 4 octets. Ce format est appelé la notation décimale pointée ; cette notation
consiste à découper une adresse en quatre blocs de huit bits. Chaque bloc est ensuite converti
en un nombre décimal.
Chacun des octets peut être représenté par un nombre de 0 à 255.
Ex : [Link]

2
INFORMATIQUE

Exemple :
L'adresse IP 10010110110010000000101000000001 est d'abord découpée en quatre blocs :
10010110.11001000.00001010.00000001 puis, chaque bloc est converti en un nombre
décimal pour obtenir finalement [Link]
= >4 nombres entiers (entre 0 et 255) séparés par des points.
= >4 octets
L'écriture avec les points est une convention, le codage en machine est binaire.
Exemple: [Link] (qui est l'adresse IP dite de loopback, celle qui pointe sur votre machine,
sans passer par un réseau extérieur).
En théorie, il y a 2^32 soit 4 294 967 296 adresses IP différentes possibles. En réalité, il y en a
beaucoup moins, car de nombreuses adresses IP sont réservées.
Voici les plages d'adresses IP réservées :
 [Link] à [Link]
 [Link] à [Link]
 [Link] à [Link]
Prenons pour exemple un réseau ayant une adresse IP de ce type : [Link] comprenant
une dizaine d'ordinateurs. Les adresses IP de ces 10 ordinateurs varient de [Link] à
[Link]
Plus l'adresse réseau est courte (occupe le moins de chiffres), plus le réseau pourra contenir
d'ordinateurs. Ce découpage est appelé classe de réseau. La communauté Internet a défini
trois classes d'adresses appropriées à des réseaux de différentes tailles. Il y a, a priori, peu de
réseaux de grande taille (classe A), il y a plus de réseaux de taille moyenne (classe B) et
beaucoup de réseaux de petite taille (classe C). La taille du réseau est exprimée en nombre
d'hôtes potentiellement connectés.
Il existe 3 classes de réseau notées A, B et C qui se différencient par le nombre d'octets
désignant le réseau. Cette notation est cependant obsolète. On ne l'utilise plus qu'à des fins
théoriques.
Le premier octet d'une adresse IP permet de déterminer la classe de cette adresse.
Les adresses disponibles (de [Link] à [Link]) ont donc été découpées en plages
réservées à plusieurs catégories de réseaux.

Adresse IP de classe A
Dans une adresse IP de classe A, l'adresse réseau est désignée par le premier octet qui doit
être d'une valeur inférieure à 128. Le réseau composé de 0 uniquement n'existe pas, et le

3
INFORMATIQUE

réseau 127 désigne votre ordinateur ([Link]). La plage utilisable est comprise entre [Link]
et [Link].
Un réseau ayant une adresse IP de classe A peut contenir 16646144 ordinateurs.

Adresse IP de classe B :
Dans une adresse IP de classe B, l'adresse réseau est désignée par les deux premiers octets. La
plage utilisable est comprise entre [Link] et [Link].
Un réseau ayant une adresse IP de classe B peut contenir 65024 ordinateurs.

Adresse IP de classe C :
Dans une adresse IP de classe C, l'adresse réseau est désignée par les trois premiers octets. La
plage utilisable est comprise entre [Link] et [Link].
Un réseau ayant une adresse IP de classe C peut contenir 254 ordinateurs.

Identification du réseau
L'adresse IP se décompose, comme vu précédemment, en un numéro de réseau et un numéro
de nœud au sein du réseau.
Afin de s'adapter aux différents besoins des utilisateurs, la taille de ces 2 champs peut varier.
On définit ainsi les 5 classes d'adresses notées A à E:

Classes d'adresses

Exemple. : Soit l'adresse IP suivante : [Link]

142 en décimal = 10001110 en binaire
Le mot binaire commence par les bits 10 donc il s'agit d'une adresse de classe B. Ou, plus simple : 142
est compris entre 128 et 191.

4
INFORMATIQUE

S'agissant d'une adresse de classe B, les deux premiers octets (a et b) identifient le réseau. Le numéro
de réseau est donc : [Link]
Les deux derniers octets (c et d) identifient l'équipement hôte sur le réseau.
Finalement, cette adresse désigne l'équipement numéro 149.4 sur le réseau 142.62.

L'adresse de réseau est une adresse dont tous les bits d'hôte sont positionnés à 0 (ex [Link]
adresse de réseau du réseau 128.10 de classe B). Elle est utilisée pour désigner tous les postes du
réseau. On utilise cette adresse dans les tables de routage.
Les noms de réseaux de type :
 X.Y.Z.0 (de [Link] à [Link]) sont dits de classe C
 X.Y.0.0 (de [Link] à [Link]) sont dits de classe B
 X.0.0.0. (de [Link] à [Link]) sont dits de classe A

L'adresse de diffusion ( = broadcast)est une adresse dont tous les bits d'hôte sont positionnés à 1 (ex :
[Link] adresse de diffusion du réseau 128 de classe B). Elle est utilisée pour envoyer un
message à tous les postes du réseau.

Récapitulatif : Classes d'adresses

Le rôle du masque de réseau (netmask) est d'identifier précisément les bits qui concernent le N° de
réseau d'une adresse (il "masque" la partie hôte de l'adresse).

Un masque de sous réseau est un séparateur qui permet de distinguer les parties réseau et machine
d'une adresse IP.

Un bit à 1 dans le masque précise que le bit correspondant dans l'adresse IP fait partie du N° de
réseau ; à l'inverse, un bit à 0 spécifie un bit utilisé pour coder le N° d'hôte.

5
INFORMATIQUE

Ainsi, on a un masque dit "par défaut" qui correspond à la classe de ce réseau.

Exemple: dans un réseau de classe A sans sous-réseau, le premier octet correspond à l'adresse du
réseau donc le netmask commence par 11111111 suivi de zéros soit [Link].
D'où le tableau suivant :

Classe Netmask
A [Link]
B [Link]
C [Link]

Ex : Si mon adresse IP est [Link] alors je travaille avec une adresse de classe B. Mon N° de
réseau est [Link] et mon masque [Link].

La notation CIDR (Classless Inter-Domain Routing)définit une convention d'écriture qui spécifie le
nombre de bits utilisés pour identifier la partie réseau (les bits à 1 du masque).
Les adresses IP sont alors données sous la forme :

[Link] / 24 <=>

[Link] / 20<=>

Dans cette écriture les nombres 24 et 20 représentent le nombre de bits consacrés à la codification du
réseau.
Que peut faire quelqu'un qui a votre IP ?
De nombreuses personnes se font régulièrement harceler et menacer sur internet. Les malfrats usent de
l'argument qu'ils disposent de votre adresse IP pour vous faire chanter.
N'ayez crainte, la plupart du temps, ils bluffent. Il est impossible d'avoir accès à votre adresse IP via
Facebook directement, par exemple.
Les informations que la personne mal-intentionnée pourra collecter seront éventuellement votre ville
de résidence, sans aller plus loin. Alors bien sûr, si vous êtes dans un village de 50 habitants, cela sera
plus simple de vous trouver que si vous habitez à Antananarivo, mais n'ayez crainte ...

DECOUPAGE D’UN RESEAU EN SOUS-RESEAUX. PLAGE D’ADRESSE

Pour compenser les problèmes de distribution de l'espace d'adressage IP, la première solution utilisée a
consisté à découper une classe d'adresses IP A, B ou C en sous-réseaux.
Les masques de sous-réseaux (subnet mask) permettent de segmenter un réseau en plusieurs sous-
réseaux. On utilise alors une partie des bits de l'adresse d'hôte pour identifier des sous-réseaux.
Toutes les machines appartenant à un sous-réseau possèdent le même numéro de réseau.

6
INFORMATIQUE

On utilise le même principe que pour le masque par défaut sur l'octet de la partie hôte auquel on va
prendre des bits. Ainsi, le masque de sous-réseau d'une adresse de classe B commencera toujours par
[Link]
Pour connaître l'adresse du sous-réseau auquel une machine appartient,
Adresse : [Link] 11001000.01100100.00101000.00100001
Masque : [Link] 11111111.11111111.11111111.11100000
La machine appartient au sous-réseau : [Link]
Nous voyons dans ce deuxième exemple que nous avons pris 2 bits sur le dernier octet de notre
adresse. Ces 2 bits vont nous permettre de construire plusieurs sous-réseaux:
Ex : adresse : [Link]
Masque : [Link]
Conversion de l'adresse en binaire : 11000000 00000000 00000000 10000011
Conversion du masque en binaire : 11111111 11111111 11111111 11000000
Décomposition de l'adresse (R,H) : 11000000 00000000 00000000 10000011
La machine appartient au sous-réseau [Link] et a l'adresse 3(11 en binaire)
 Nombre de sous-réseaux
Le nombre théorique de sous-réseaux est égal à 2^n, n étant le nombre de bits à 1 du masque, utilisés
pour coder les sous-réseaux.

Exemple :
Adresse de réseau : [Link]
Masque : [Link]
224 = 11100000 donc 3 bits pour le N° de sous-réseau et 5 bits pour l'hôte.
Le nombre de sous-réseaux est donc de : 2^3 =8.
Remarque : Un numéro de sous réseau ne peut être composé de bits tous positionnés à zéro ou tous
positionnés à un. Autrement dit, dans notre exemple, on ne pouvait pas utiliser le sous-réseau 0 et le
sous-réseau 224. Le premier nous donnant une adresse de sous-réseau équivalente à l'adresse du réseau
soit [Link]. Le deuxième nous donnant une adresse de sous-réseau dont l'adresse de diffusion se
confondrait avec l'adresse de diffusion du réseau. Le nombre de sous-réseaux aurait alors été de
seulement : 2^3-2 =6.

 Adresse des sous-réseaux

Il faut donc maintenant trouver les adresses des sous-réseaux valides en utilisant les bits à 1 du
masque.
Pour l'exemple précédent, il faut utiliser les 3 premiers bits:

7
INFORMATIQUE

000 00000 = 0
001 00000 = 32
010 00000 = 64
011 00000 = 96
100 00000 = 128
101 00000 = 160
110 00000 = 192
111 00000 = 224
On constate que le pas entre 2 adresses de sous-réseau est de 32 = 2^5 correspondant au nombre
théorique d'hôtes par sous-réseau.

 Adresse de diffusion d'un sous-réseau

Il faut mettre tous les bits de la partie hôte à 1.
Cherchons l'adresse de diffusion des sous réseaux précédents.
Avec le masque [Link]
Pour le sous-réseau [Link]
32 = 001 00000 donc l'adresse de diffusion est 001 11111 = 63.
L'adresse de diffusion complète est donc [Link]
Pour le sous-réseau [Link] l'adresse de diffusion est [Link]
...ETC ...
Avec le masque [Link]
Pour le sous-réseau [Link] l'adresse de diffusion est [Link]
Pour le sous-réseau [Link] l'adresse de diffusion est [Link]
Pourquoi 254 et pas 255 car avec 255 le dernier bit serait à 1 donc on serait dans le sous-réseau
10000001, en décimal 129.

 Nombre de postes d'un sous-réseau

Le nombre de postes est égal à 2^n, n étant le nombre de bits à 0 du masque permettant de coder
l'hôte. A ce chiffre il faut enlever 2 numéros réservés :
 tous les bits à zéro qui identifie le sous-réseau lui-même.
 tous les bits à 1 qui est l'adresse de diffusion pour le sous-réseau.

Exemples :
Soit le masque [Link]
224 = 11100000 donc 3 bits pour le N° de sous-réseau et 5 bits pour l'hôte
le nombre de poste S est donc de : 2^5 -2 =30 postes.
De même, avec le masque non contigu [Link] le nombre de postes sera de 2^6-2 = 62 postes
Démarche pour calculer la plage d’adresse d’un sous-réseau.
Soit une machine avec l’Information de départ :
IP de l’hôte : [Link]
Masque : [Link]
Déterminer la plage d’adresse.

8
INFORMATIQUE

Solution :
On sait que LES BITS A 1 DU MASQUE IDENTIFIENT LE RESEAU :
[Link] S’ECRIT EN BINAIRE :
11111111.111 00000.00000000.00000000
DONC LES 11 PREMIERS BITS IDENTIFIENT LE RESEAU
POUR AVOIR L’ADRESSE IP DU RESEAU, ON PREND L’ADRESSE QUI NE
CONTIENT QUE DES 0 DANS LA PARTIE MACHINE DE L’ADRESSE ip DE L’HOTE
:
On écrit en binaire l’IP de l’hôte :
[Link] S’ECRIT 11 000000.101 01000 .00000000.00000000
POUR AVOIR LA PLUS PETITE ADRESSE DE LA PLAGE, PASSER TOUS LES BITS
DE LA PARTIE MCHINE A 0 :
11000000.101 00000.00000000.00000000 =[Link] C’EST LA PREMIERE ADRESSE
DE LA PLAGE
POUR AVOIR LA DERNIERE ADRESSE DE LA PLAGE ( ADRESSE DE BROADCAST)
:
ON REMPLACE LES 0 PERMETTANT D’AVOIR LA PLUS PETITE ADRESSE PAR
DES 1 DANS LA PARTIE MACHINE DE L’HOTE :
11000000.10111111.11111111.11111111 CE QUI S’ECRIT EN DECIMAL :
[Link]
Donc la plage d’adresses de ce réseau est : [Link] à [Link]
EN CIDR, ON ECRIT
[Link]/11

EXERCICES
Exercice 1.
a) Déterminer la plage d’adresse du réseau dont l’IP d’une machine-hôte est [Link] et le
masque est [Link].
b) Ecrire en notation CIDR (Classless Inter-Domain Routing) :

Exercice 2. Une machine connectée à un réseau donne l’information suivante : [Link]/28

(notation CIDR). Déterminer la plage d’adresse de ce réseau
Exercice 3. Sachant qu’on a :

a) A quelle classe d’adresses appartient cette IP

b) Donner la plus petite adresse IP et la plus grande adresse IP du réseau correspondant.

9
INFORMATIQUE

CHAPITRE II : LES SITES WEB

Le World Wide Web (WWW), littéralement la « toile (d’araignée) mondiale », communément appelé
le Web, et parfois la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet
de consulter, avec un navigateur, des pages accessibles sur des sites. L’image de la toile d’araignée
vient des hyperliens qui lient les pages web entre elles. Le Web n’est qu’une des applications
d’Internet.
Le Web et Internet sont deux choses différentes.
On a vu qu'Internet permettait de relier des ordinateurs entre eux. Mais cela ne permet pas
automatiquement d'avoir de belles pages Web avec textes, images, etc... Pour cela, il a fallu que
quelqu'un invente une façon de communiquer, un langage qui allait être utilisé via Internet.
Ce quelqu'un, c'est un britannique du nom de Tim Berners-Lee. C'est lui qui inventa le Web tel qu'on
le connaît. Le www, « la grande toile d'araignée mondiale » fait bien sûr référence à l'immense réseau
qu'est Internet.
On peut donc voir les choses ainsi : Internet est la structure et le Web est ce qui y circule. Mais au
fait, les sites qu'on visite, que sont-ils ? Où se situent-ils ? Il faut bien qu'ils se trouvent quelque part...
Internet permet de communiquer de bien des façons mais l'utilisation principale qu'on en fait reste la
navigation sur des sites Web. Un site Web est, pour beaucoup, des pages qui s'affichent... Mais un site
Web, ce ne sont jamais que des données, c'est-à-dire des fichiers informatiques ; ces données sont
mises en forme afin qu'elles nous apparaissent de manière structurée, claire et ergonomique.
On l'a vu, Internet est un réseau géant d'ordinateurs. Il n'y a rien d'autre que des ordinateurs. Internet
en tant que tel, ce n'est « rien ». Il n'y a pas un gros cerveau central qui contiendrait tout le système et
tous les sites Web. De ce fait, quand on visite un site sur Internet, on va le chercher sur un ordinateur
qui est lui aussi connecté à Internet.
Les ordinateurs qui hébergent les sites Web sont de gros ordinateurs très puissants (on les appelle des
serveurs) mais dans le fond, ils ressemblent fortement à nos ordinateurs personnels !
Qui peut avoir son site Web ? Le Web est-il ouvert à tous ?
Les sites les plus connus appartiennent à des entreprises. Mais ce ne sont pas les seuls sites existants !
En réalité, chacun peut, du jour au lendemain, créer son propre site et le rendre accessible à tous ; ce
n'est pas simple « techniquement » mais c'est tout à fait faisable !
Faisons un petit parallèle avec un autre média : la radio. Lorsque quelqu'un veut créer une radio, il doit
passer par des étapes administratives assez lourdes (déclaration de candidature, … etc.). Pour créer un
site Web : rien de tout ça n'est nécessaire. Vous pouvez très bien mettre en ligne votre propre site,
quand cela vous chante. Tout cela légalement bien sûr. On consulte des sites web tous les jours. Pour
cela, on lance un programme appelé le navigateur web en cliquant sur l'une des icônes représentées à
la figure suivante.

10
INFORMATIQUE

Les icônes des navigateurs web les plus répandus.

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

Tout le monde sait aller sur le Web… mais qui sait vraiment comment le Web fonctionne ? Comment créer
des sites web comme celui-ci ?

On utilise un langage informatique appelé HTML pour créer des sites web. Tous les sites web sont
basés sur ce langage, il incontournable et universel. Il est à la base même du Web. Le langage HTML a été
inventé par un certain Tim Berners-Lee en 1991…

Quand on consulte un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent
pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML pour
savoir ce qu'il doit afficher. C'est le navigateur web qui fera la traduction entre ce langage informatique et
ce que l’on verra s'afficher à l'écran.

Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le
texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il
faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.
Le rôle de HTML

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 ce langage
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… Vous direz par exemple : « Ceci est mon titre,
ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ».

Les navigateurs
Le navigateur est le programme qui nous permet de voir les sites web. Le travail du navigateur est de lire le
code HTML.
Les balises et leurs attributs

11
INFORMATIQUE

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 balises
Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour les
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>

Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la
page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.
On distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :
<titre>Ceci est un titre</titre>
On distingue une balise ouvrante ( <titre> ) et une balise fermante ( </titre> ) qui indique que le titre se

termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un
titre.
Ceci n'est pas un titre <titre> Ceci est un titre</titre> Ceci n'est pas un titre

Les balises orphelines

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 ».
Une balise orpheline s'écrit comme ceci :
<image />
Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement < image>. Néanmoins, pour ne pas
les confondre avec le premier type de balise, on recommande de rajouter ce /(slash) à la fin des balises
orphelines.

Structure de base d'une page HTML5

Ce code correspond à la base d'une page web en HTML5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

12
INFORMATIQUE

<title>Titre</title>
</head>
<body>
</body>
</html>
On met des espaces au début de certaines lignes pour « décaler » les balises. Ce n'est pas obligatoire et cela
n'a aucun impact sur l'affichage de la page, mais cela rend le code source plus lisible.

On note que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise < html> est la
première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les
balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :
 <html><body></body></html> : correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi

être fermée à l'intérieur.

 <html><body></html></body> : incorrect, les balises s'entremêlent.

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.
Dans le cadre de HTML5 qui est la dernière version, quand on voit une balise doctype courte ( <!DOCTYPE

html> ), cela signifie que la page est écrite en HTML5.

La balise </html>

<html>
</html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme on peut le voir, la
balise fermante </html> se trouve tout à la fin du code !

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 donne quelques informations générales sur la page comme son

13
INFORMATIQUE

titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez
courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des
informations générales à destination de l'ordinateur. Elles sont cependant très importantes !
 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.

L'encodage ( charset )
<meta charset="utf-8" />

Cette balise indique l'encodage utilisé dans votre fichier .html ; 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.).

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.

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, comme sur la figure suivante.
Nous avons appris à créer notre première vraie page HTML dans ce chapitre. Avant de terminer, j'aimerais
vous présenter le principe des 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.

Insérer un commentaire
Un commentaire est une balise HTML avec une forme bien spéciale :
<!-- Ceci est un commentaire -->
<!DOCTYPE html>
<html>
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />

14
INFORMATIQUE

<title>Titre</title>
</head>
<body>
<!-- Corps de la page -->
</body>
</html>

Les 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.
<p>Bonjour et bienvenue sur mon site !</p>

 <p> signifie « Début du paragraphe » ;

 </p> signifie « Fin du paragraphe ».

Comme je vous l'ai dit au chapitre précédent, on écrit le contenu du site web entre les
balises <body></body> . Il nous suffit donc de mettre notre paragraphe entre ces deux balises et nous aurons

enfin notre première vraie page web avec du texte !

Je reprends donc exactement le même code qu'au chapitre précédent et j'y ajoute mon paragraphe :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paragraphes</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>

Sauter une ligne

En HTML, si vous appuyez sur la touche Entrée , cela ne crée pas une nouvelle ligne comme vous en avez
l'habitude. Essayez donc ce code :
<!DOCTYPE html>
<html>
<head>

15
INFORMATIQUE

<meta charset="utf-8" />

<title>Essais de sauts de ligne</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !
Pour l'instant c'est un peu vide!</p>
</body>
</html>
Tout le texte s'affiche sur la même ligne alors qu'on est bien allé à la ligne dans le code ! Taper
frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc strictement à rien.
Comme vous devez vous en douter, il y a pourtant bien un moyen de faire des sauts de ligne en HTML.
En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième balise <p> .

Votre code HTML devrait donc être au final rempli de balises de paragraphe !
Un exemple :
<html>
<head>
<meta charset="utf-8" />
<title>Paragraphes</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !
Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment
cela marche.</p>

<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus
de choses, je vous assure que vous allez être surpris !</p>
</body>
</html>
Il existe une balise « Aller à la ligne » !

C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br /> . Vous devez

obligatoirement la mettre à l'intérieur d'un paragraphe.

Voici comment l'utiliser dans un code :
<html>
<head>

16
INFORMATIQUE

<meta charset="utf-8" />

<title>Sauts de ligne</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment
cela marche.</p>

<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus
de choses, je vous assure que vous allez être surpris !</p>
</body>
</html>
Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs sauts de lignes,

mais on considère que c'est une mauvaise pratique qui rend le code délicat à maintenir. Pour décaler un
texte avec plus de précision, on utilisera le CSS, ce langage qui vient compléter le HTML et dont je vous
parlerai un peu plus loin.
Donc c'est compris ?
 <p> </p> : pour organiser son texte en paragraphes ;

 <br /> : pour aller à la ligne.

Les titres
Lorsque le contenu de votre 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 a le droit d'utiliser six niveaux de titres différents. Je veux dire par là qu'on peut dire « Ceci
est un titre très important », « Ceci est un titre un peu moins important », « Ceci est un titre encore moins
important », etc. On a donc six balises de titres différentes :
 <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 » si vous

voulez).
 <h4> </h4> : titre encore moins important.

 <h5> </h5> : titre pas important.

17
INFORMATIQUE

 <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.

Attention : ne confondez pas avec la balise <title> ! La balise <title> affiche le titre de la page dans la

barre de titre du navigateur. Les titres <h1> et compagnie, eux, servent à créer des titres qui seront

affichés dans la page web.

Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1 ( <h1> ), puis un titre

de niveau 2 ( <h2> ), etc. Il ne devrait pas y avoir de sous-titre sans titre principal !

Essayez de créer une page web avec des titres pour voir ce que cela donne :
<html>
<head>
<meta charset="utf-8" />
<title>Niveaux de titres</title>
</head>

<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>
Exemple d'utilisation des titres dans une page web :
<html>
<head>
<meta charset="utf-8" />
<title>Présentation du Site de l’Université d’Antananarivo</title>
</head>

<body>
<h1>Bienvenue sur le site de l’Université d’Antananarivo !</h1>

<p>Bonjour et bienvenue le site de l’UA.<br />

Cz site, qu'est-ce que c'est ?</p>

18
INFORMATIQUE

<h2>Des informations</h2>

<p>Le Site de l’Université d’Antananarivo des informations concernant les différentes offres de formations </p>
</body>
</html>

Créer des liens

Un site web est composé de plusieurs pages. Comment faire pour aller d'une page vers une autre ?
Un lien : il s'agit d'un texte sur lequel on peut cliquer pour se rendre sur une autre page.

On peut faire un lien d'une page [Link] vers une page [Link] , mais on peut aussi faire un lien vers un autre

site.

Un 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 coder un lien qui amène vers le Site de l’Université d’Antananarivo, 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.

<a href="[Link] univ TANA</a>

19
INFORMATIQUE

SOMMAIRE (ELEMENT N°2)

CHAPITRE I : INTERNET ET WEB........................................................................ 1

DÉFINITION ............................................................................................................. 1

CATEGORIES HABITUELLES DE RESEAUX ..................................................... 1

DECOUPAGE D’UN RESEAU EN SOUS-RESEAUX. PLAGE D’ADRESSE ..... 6

 Nombre de sous-réseaux.................................................................................. 7

 Adresse des sous-réseaux ................................................................................ 7

CHAPITRE II : LES SITES WEB ........................................................................... 10

Les navigateurs ....................................................................................................... 11

Les balises ................................................................................................................ 12

Les balises en paires ............................................................................................ 12

Structure de base d'une page HTML5 ................................................................. 12

Le doctype ............................................................................................................... 13

La balise </html> .................................................................................................. 13

L'en-tête <head> et le corps <body> ................................................................. 13

L'encodage ( charset ).......................................................................................... 14

Le titre principal de la page ................................................................................. 14

Insérer un commentaire ......................................................................................... 14

Les paragraphes...................................................................................................... 15

Sauter une ligne ...................................................................................................... 15

Les titres .................................................................................................................. 17

Créer des liens ......................................................................................................... 19

Un lien vers un autre site ....................................................................................... 19

20