ARCHIDIOCÈSE DE YAOUNDÉ ARCHDIOCESE OF YAOUNDE

INSTITUT UNIVERSITAIRE CATHOLIC UNIVERSITY INSTITUTE

CATHOLIQUE SAINTE THERESE OF YAOUNDE
SAINTE THÉRÈSE DE YAOUNDÉ Fix: (+237) 242 085 418/ (+237) 243 232 811 Tél:6
B.P. 207-Yaoundé
93 19 81 99/6 95 28 74 94/6 95 58 57 05
Email:[email protected]
Site: inucasty.org

Année Académique 2019 – 2020 Filière : CO Niveau : 2

Enseignant : BEKECK M. R. Phone : 699 51 79 37, [email protected]

QU’EST-CE QU’INTERNET
Pour faire simple disons qu’Internet est un système de communication (un réseau de communication) entre
des ordinateurs et qui ne dépend d’aucuns systèmes de communication physique (exemple : réseau
téléphonique, réseau mobile, réseau satellite, …). Il est évident que ce système de communication pour
échanger des données entre des ordinateurs répond à des normes, … ce que l’on appel des protocoles.
Un ordinateur pour être accessible et en communication via Internet doivent disposer d’un numéro
d’identification (comme un numéro de téléphone), ce numéro est appelé une adresse IP (Internet Protocol).

Aujourd’hui ce que l’on appelle le Web mais aussi ce que l’on retrouve sous la désignation du Cloud (l’accès
à de l’information, de la donnée à travers Internet) est constitué d’ordinateurs, de machines qui répondent en
générale à des caractéristiques bien particulières et que l’on appelle des serveurs. Internet c’est un système de
communication qui permet de transférer, échanger des données entre des ordinateurs. Ces données peuvent
être de différents type (textuelle, visuelles, sonores, …) et c’est donc suivant ce que l’on a et que l’on veut
faire avec ses données via Internet qu’on utilise différents protocoles.
Exemple : pour l’envoie de données sur un serveur Web à travers Internet on utilise le protocole FTP (pour
File transfert Protocol), pour l’appel et l’affichage d’une page Web sur un écran au travers d’un navigateur, on
utilise le protocole HTTP (pour Hyper Text Transfert Protocol).

1
 Exemples de différents protocoles utilisés sur Internet (protocoles TCP/IP)

QU’EST CE QU’UN NAVIGATEUR WEB – NAVIGATEUR INTERNET

Pour faire simple et ne pas rentrer dans les détails techniques de ce qu’est un navigateur web, on dira
simplement que c’est un logiciel qui permet de visualiser sur un écran le rendu d’une page Web (page
Internet). Il existe plusieurs navigateurs Internet dont les plus connus sont :

Internet Explorer, Firefox, Opéra, Safari, Google Chrome.

Navigateur Internet ou Navigateur Web

La barre d’adresse du navigateur
La barre d’adresse du navigateur permet de saisir le chemin pour accéder à la page Web, on dit que l’on saisit
l’URL (Uniform Ressource Locator), l’adresse de la page Web.
Si cette page Web se trouve sur notre ordinateur (ordinateur personnel ou serveur local) on dira alors que
l’adresse URL est une adresse locale, si la page Web se trouve sur un serveur (ordinateur) accessible
seulement par Internet (serveur distant) on parlera dans le jargon d’adresse Web.
 Exemple d’adresse local : http://localhost/index.html
 Exemple d’adresse web : http://www.monsite.com

Affichage de la page Web distante ou locale : URL distante ou URL local

La zone de visualisation du navigateur
La zone de visualisation du navigateur permet de faire afficher le rendu de la page Web, la page Web prend
forme, les textes et tous les médias qui lui sont liés se positionnent (mise en page de la page Web). C’est donc
bien à travers un navigateur Web qu’une page Web prend forme.
Rappel : une page Web n’est qu’un fichier texte qui ne contient que du code et du texte.

2
C’est au moment où la page Web est lue par le navigateur que celui-ci va appeler les médias et autres scripts
qui sont liés à la page Web et mettre le tout en forme visuellement.
A travers la zone de visualisation ou maintenant parois à travers d’autres outils du navigateur, on peut
visualiser le code constituant la page Web, on parle de Code Source de la page Web.
Rmq : si on ouvre une page Web avec un logiciel lisant les fichiers textes (exemple : Notepad sur Windows),
on ne verra le code source de la page Web (code et textes composants la page Web).

Affichage du rendu visuel et du code source d’une page Web sur un écran au travers d’un Navigateur

Internet – Navigateur Web Principe du navigateur Internet (navigateur web)

QU’EST CE QU’UNE PAGE WEB, PAGE INTERNET ?

Une page Web ou page Internet n’est rien d’autre qu’un fichier texte d’un certain type d’extension.
Sur ce fichier texte on ne peut donc écrire que du texte, on ne peut pas y insérer des images, des sons, … On
peut y écrire du langage de programmation (code), celui-ci étant du texte.

Page Internet – Page Web

C’est par le code écrit sur ce fichier texte que se retrouvent liés à la page Web les autres fichiers qui ne sont
pas ou qui ne peuvent pas se trouver sur le fichier (exemple : les images, les sons, …) et que l’on retrouvent
présent sur la page Web lors de sa visualisation sur un écran par le navigateur Web.

3
Rappel : ce n’est qu’en visualisant la page Web sur un écran au travers d’un navigateur Web ( Internet

Explorer, Firefox, Opéra, Safari, Google Chrome etc.) que la page se met en page et que
nous pouvons donc avoir un rendu visuel de celle-ci.

Affichage d’une page Web par le navigateur Internet

Rmq : Bien sur l’affichage d’une page Web peut être réalisée autrement qu’avec un navigateur, mais nous ne
détaillerons pas plus ici.
Le fichier texte constituant la page Web peut, suivant nos besoins ne pas toujours posséder la même extension.
Selon le type de page Web (page Web statique ou page Web dynamique), les pages Web peuvent avoir des
extensions différentes. Exemple : des pages Web statiques peuvent avoir une extension de fichier .HTML et
des pages Web dynamiques une extension de fichier .PHP.

Page Web statique d’extension .HTML – Page Web dynamique d’extension .PHP
Conclusion : Une page Web peut s’ouvrir simplement avec tout logiciel éditeur de texte (Notepad, Notepad+
+, …), toutefois bien souvent nous n’en visualiserons que le code (code source de la page), pour en visualiser
le rendu, il faut alors un navigateur Web qui interprète le code et est capable de mettre en forme visuellement
la page Web ainsi que d’appeler les fichiers liés à celle-ci.

Affichage d’une Page Internet – Page Web à travers un logiciel éditeur de texte et un Navigateur Web
A savoir : Un document Word est aussi un fichier texte seulement en plus d’un fichier de texte simple comme
celui d’une page Web, tous les éléments autre que textes constituant le document (images, …) constituant le

4
fichier peuvent/sont par défaut intégrés au fichier. Ainsi qu’en t’on transmet par exemple un document Word à
quelqu’un (par email par exemple) en générale la personne qui le reçoit, reçoit son intégralité. Ce n’est pas le
cas d’une page Web ou il faut envoyer le fichier texte constituant la page + les fichiers liés à celle-ci.

Affichage d’un document Word à traver Microsoft Word et d’une page Web à travers un Navigateur
Internet

CONCEPTION D’UN SITE INTERNET

Un site Internet est avant tout une structure, un organigramme*, qui rassemble et présente les informations
(contenus visuels et auditifs), d’un organigramme, d’une activité, d’un programme…

Exemple d’organigramme d’un site Internet

Si l’on emploi le mot organigramme pour définir avant tout ce qu’est un site Internet, c’est pour nous
renvoyer à l’image d’un système structurer, hiérarchisé, qui peut être complexe, évolutif, et peut être
simplement représenter sous une forme d’un schéma.
Il parait trop simple pour beaucoup de s’imaginer qu’un site Internet est avant tout une structure (un schémas)
à penser, élaborer, et non pas quelques chose à penser tout d’abord comme quelque chose de graphique, de
programmé, …
Pourtant bien des sites Internet se trouvent dépréciés par les internautes par cette négligence à la base de leur
création.
Pour utiliser une image, un site Internet n’est donc pas un empilement de pages Web aléatoirement rangées,
classées, … et reliées bêtement les unes aux autres, mais c’est avant tout une structure logique claire dans
laquelle chacun peut si retrouver.

5
De nombreux créateurs de sites Internet (Webmaster) se lancent dans la création de leurs pages Web sans être
passé par cette étape de définir l’organigramme de leur site Internet. Pourtant, bien que cette étape puisse
passée pour facultative, cette étape entraine des conséquences (positives ou négatives) dans nos
positionnements dans les résultats de recherche des moteurs de recherche.
Rmq : Pour la plus part des sites Internet, la structure d’un site Internet définie par l’organigramme se retrouve
souvent être transposé sur le sites Internet par la barre de navigation principale (barre des menus) et par ses
sous navigations.

Exemple de barre des menus d’un site Web (transposition de l’organigramme dans le site Web)

Organigramme, structure d’un site Internet, exemple

Imaginons que nous devions créer un site Internet pour un artiste peintre. La première étape est donc de créer
l’organigramme du site Web, de définir la structure.

Exemple d’organigramme d’un site Internet

Il existe un tas de logiciel pour créer visuellement, graphiquement des organigrammes, là encore rien ne nous
empêche de les utiliser, mais un organigramme d’un site Web peut se créer avec un simple éditeur de texte
(exemple : Word, …).
Avant de créer un organigramme il faut se poser les questions de ce que l’on veut retrouver sur son site
Internet (rmq : en amont il peut y avoir une étape dite de « brain storming »), les premières grandes lignes du
cahier des charges.
En imaginant que cette étape ait été faite, voici ce qu’il en résulte.
L’artiste veut se présenter, présenter ses peintures : à l’aquarelle, à l’huile, … présenter ses dessins au crayon,
aux pastelles, renvoyer l’utilisateur vers des sites Internet de références et être en mesure d’être contacté par le
site Internet.
L’organigramme proposé pourrait donc être celui-ci :
 Accueil
 Peintures
o – Aquarelles
o – Huiles
 Dessins
o – Crayons
o – Pastelles
 Biographie

6
  Liens
 Contact
Une représentation graphique de l’organigramme pourrait-être ainsi :

Exemple d’organigramme
Cette structure pourrait donc être transposer sur le site Internet comme barre de navigation principale (barre
des menus) et pourrait donc prendre cette forme :
Accueil – Peintures – Illustrations – Biographie – Liens – Contact
Ci-dessous une image donnant une représentation plus graphique et plus concrète de cette structure sous forme
de barre des menus pouvant être présente sur le site Internet.

Représentation graphique de l’organigramme (barre des menus d’un site Internet)

La difficulté pour bâtir une bonne structure (un bon organigramme) c’est de trouver les mots qui, de manière
synthétique, regroupent clairement toute une autre série de mots. Dit autrement, d’arriver à trouver des
regroupements dans le but de présenter clairement son information.
Reprenons notre exemple pour mieux comprendre :
Si pour notre artiste l’important pour lui est de se faire connaitre selon un style de peintures (paysage,
portraits, natures mortes) mais non celons une technique de peinture (aquarelle, à l’huile, …). Une autre
structure (organigramme) lui serait peut-être alors mieux adapté.
Exemple :
 Accueil
 Peintures
o – Paysages
o – Portraits
o – Natures mortes
 Dessins
o – Crayons
o – Pastelles
 Biographie
 Liens
 Contact
La représentation de l’organigramme du site Internet deviendrait donc :

7
Exemple d’organigramme
Comme on peut le voir par ces deux exemples, la difficulté est donc bien de trouver les familles (les
catégories) qui rassemblent le mieux ce que l’on veut présenter au travers de notre site Internet.
Les avantages d’une bonne structure (un bon organigramme) permettent :
 De pouvoir très simplement si retrouver dans un site Internet
 De donner rapidement accès à l’internaute à l’information souhaitée
 De pouvoir donner une évolution à son site Internet sans pour autant devoir tout repenser en cas
d’évolution mais aussi sans pour autant de disposer de tous les éléments constituant le site Internet dès
le début de sa création.

DIFFERENCE ENTRE LES PAGES STATIQUES ET DYNAMIQUES D’UN SITE WEB

La différenciation entre une page statique et une page dynamique ne se fait pas sur leur affichage à l’écran à
travers le navigateur, mais sur leur particularité de création avant de s’afficher.
Rappel : une page Web est un fichier texte qui est mise en forme visuellement par le navigateur Web.

Qu’est-ce qu’une page Web statique (page statique)

En simplifiant, disons qu’une page Web statique est une page Web dont la machine (le serveur Web,
l’ordinateur) sur laquelle celle-ci est stockée, ne fait aucun effort pour la créer lorsque celle-ci est demandée
par la machine qui veut l’affichée à travers son navigateur Web.
On dit alors que le serveur reste statique pour la création de la page Internet (il ne fait rien pour créer la page
Web).
Les pages statiques impliquent donc que celles-ci doivent déjà exister sur la machine (le serveur Web,
l’ordinateur), avant que l’on en face la demande d’affichage. Ces pages web dites statiques en générale sont
créées par un Webmaster. La page Web statique a aussi une autre particularité, l’intégralité du code qui la
compose va être interprété, compris directement par le navigateur, on dit que le code de la page programmée
est équivalent au code de la page affichée (page programmée = page affichée).
Les pages dites statiques portent en générale l’extension .html ou .htm.

8
Circuit d’une page Web statique

Qu’est-ce qu’une page Web dynamique (page dynamique)

Une page Web dynamique, est une page Web qui n’existe pas en tant que telle sur la machine (le serveur
Web) mais qui est créée seulement lors de sa demande par la machine, l’ordinateur qui veut l’affichée à
travers son navigateur web.
On dit alors que le serveur créé dynamiquement la page Internet à la demande (il met tout en œuvre pour créer
la page Web).
Rmq : Bien souvent la mécanique de construction des pages Web pour la création de site Internet est un CMS.
Les plus connus étant WordPress, Joomla, Drupal, PrestaShop, …
Contrairement à une page Web statique, la page Web créée dynamiquement ne contiendra donc pas toutes les
caractéristiques techniques (langages de programmations, …) qui ont servi à sa création. La page Web créée
ne contiendra donc que les caractéristiques (langages de programmation + texte) que le navigateur Web sera
capable d’interpréter (comprendre) pour que celle-ci puisse être affichée par celui-ci. On dit aussi que ces
pages Web sont sécurisées car les données, informations qu’elles contiennent ne sont que celles que l’on veut
transmettre lors de leur affichage au travers du navigateur.
Les pages dites dynamiques portent ben souvent l’extension .PHP, .ASPX ou d’autres encore.

Circuit d’une page Web Dynamique

9
 Circuit d’une page Web dynamique

Notion de client – serveur

La machine (l’ordinateur) sur laquelle est stockée ou par laquelle est créée une page Web en ligne ou sur un
réseau est appelée Serveur.
Rmq : un Serveur c’est un ordinateur qui répond à des caractéristiques d’utilisation bien spécifiques.
La machine (l’ordinateur) par laquelle est visualisée à travers le navigateur la page Web est appelée machine
du client (en abrégé on dit client).
On parle donc de relation Client – Serveur.

Client – Serveur
Différence entre une page Web statique (HTML) et page Web dynamique (PHP)

Différence entre une page Internet statique et une page Internet dynamique
Une page statique est affichée tel quelle à l’écran par le Navigateur, tandis que pour une page dynamique le
Serveur Web doit la générer pour qu’elle puisse existée et être affichée à l’écran par le Navigateur.

10