Programmation Web

Licence 2 : Informatique (ISIL)

WWW

TP 0:
Notions de base

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB 26/02/2022

Programmation Web TP 0:
Plan Notions de base

• Rappel
1. Notions de base du Web
• Exercice 1: Notre première page Web
• Exercice 2: Rajoutons du HTML
• Exercice 3: Utilisation d’un éditeur de texte
• Exercice 4: Inspection du code HTML
• Exercice 5: Rôle du navigateur
• Exercice 6: Structure d’un site Web
Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB
2
Programmation Web TP 0:
Plan Notions de base

À vous

Quand vous verrez « A vous » dans un slide,

ça veut dire que c’est à vous de pratiquer.
Sinon, pour le reste, contentez-vous de lire
seulement.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

3
Programmation Web TP 0:
Notions de base

Rappel

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

4
Programmation Web TP 0:
Rappel Notions de base

Serveur
Web
3
2 Répond
Demande en envoyant
la page Web la page Web.
(un document HTML) Le Navigateur
a interprété le code HTML
Le Navigateur

1 4
Lit le document HTML
Vous saisissez
Et il vous affiche la
l’adresse du Site
page Web.

Vous
Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB
5
Programmation Web TP 0:
Rappel Notions de base

Vous devez
apprendre à écrire
un document HTML

Si vous voulez créer

une page Web…

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

6
Programmation Web TP 0:
Notions de base

Exercice 1:
Nous allons créer
notre première page Web.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

7
Programmation Web TP 0:
Notions de base

Mais avant cela,

une petite configuration à faire !

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

8
Programmation Web TP 0:
Pré-requis Notions de base

Configuration
But: Affichage des extensions de fichiers.

• Vous aurez besoin de faire petite

configuration pour travailler
confortablement.
• Cette configuration a pour but l'affichage
Sans Avec
des extensions de fichiers. affichage
affichage
• Vous n’aurez à la faire qu’une seule fois.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

9
Programmation Web TP 0:
Pré-requis: Affichage des extensions de fichiers Notions de base

1. Rendez-vous sur votre explorateur de

fichiers.
2. Puis appuyez sur la touche ALT.
3. Ce qui affichera la barre d'outils

4. Puis allez dans outils, options des

dossiers, onglet affichage

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB 1

Programmation Web TP 0:
Pré-requis: Affichage des extensions de fichiers Notions de base

• Cherchez et décochez l'options

Masquez les extensions.
• Enfin cliquez sur OK.

• Remarquez maintenant que les

extensions des fichiers sont bien
affichées.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

11
Programmation Web TP 0:
Notions de base

Revenons à l’exercice !

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

12
Programmation Web TP 0:
Exercice 1: Notre première page Web Notions de base

Bienvenue sur le site Bingo !

Une page Web

très basique
qui ressemblera à ça

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB 1

13
Programmation Web TP 0:
Exercice 1: Notre première page Web Notions de base

À vous
1. Ouvrir l’outil Bloc-notes.
Bienvenue sur le site Bingo !

2. Mettre dedans notre texte (Bienvenue sur le site Bingo ! )

Exo1.html
3. Enregistrer le document sous « Exo1.html »

4. Ouvrir la page sur le navigateur. Bienvenue sur le site Bingo !

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

14
Programmation Web TP 0:
Notions de base

Exercice 2:
Rajoutons du HTML

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

15
Programmation Web TP 0:
Exercice 2: HTML Notions de base

Bienvenue sur le site Bingo !

3. Mettre que du
texte ne suffira pas !

1. Notre première page Web

est basique.

2. Et elle est encore loin

de ressembler à cette page.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

16
Programmation Web TP 0:
Exercice 2: HTML Notions de base

1. Notions
1. Dude base du Web
texte brut
Bienvenue sur le site Bingo!
Bingo est un site de formation.

Bienvenu sur le site Bingo! Bingo est un site

2. Rien de spécial sur de formation
le navigateur (simple affichage)

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

17
Programmation Web TP 0:
Exercice 2: HTML Notions de base

1. Notions de base du Web <h1>Bienvenue sur le site Bingo!</h1>

<hr/>
Bingo est un site de <strong>formation</strong>.
2.
On doit rajouter
Des choses dans notre
document source
(maPage.html)

1.
Si on veut obtenir
une page qui
ressemble à ça

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

18
Programmation Web TP 0:
Exercice 2: HTML Notions de base

1. Notions de base du Web <h1>Bienvenue sur le site Bingo!</h1>

<hr/>
Bingo est un site de <strong>formation</strong>.
Ces choses sont ce
qu’on appelle :
Les balises HTML

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

19
Programmation Web TP 0:
Exercice 2: HTML Notions de base

1. Notions de base du Web <h1>Bienvenue sur le site Bingo!</h1>

<hr/>
Bingo est un site de <strong>formation</strong>.

La balise h1 a servi
à mettre un titre

La balise hr a servi à
mettre un ligne
horizontale
La balise strong a servi à mettre
le mot formation en gras

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB 2

20
Programmation Web TP 0:
Exercice 2: HTML Notions de base

<h1>Bienvenue sur le site Bingo!</h1>

<hr/>
Bingo est un site de <strong>formation</strong>.

… et Il existe beaucoup d’autres

balises qui servent à faire
d’autres types de formatage.

Le HTML est un
langage de Balisage

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

21
Programmation Web TP 0:
Exercice 2: HTML Notions de base

À vous
• Reproduire le même exemple
dans un fichier: Exo2.html
<h1>Bienvenue sur le site Bingo!</h1>
<hr/>
Bingo est un site de <strong>formation</strong>.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

22
Programmation Web TP 0:
Notions de base

Exercice 3:
Utilisation
d’un éditeur de texte

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

23
Programmation Web TP 0:
Exercice 3: Utilisation d’un éditeur de texte Notions de base

1. Pour écrire un document <h1>Bienvenue sur le site Bingo!</h1>

HTML, nous avons eu besoin d’un <hr/>
éditeur de texte. Bingo est un site de <strong>formation</strong>.

Pour cela, nous avons utilisé

l’outil "bloc-notes".

2. Mais dans cet atelier, nous

n'allons pas utiliser le bloc-notes, Bienvenu sur le site
mais plutôt l'outil NotePad++ Bingo.
(qui est un éditeur de texte un
peu plus sophistiqué). Bloc-notes

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB Notepad ++

24
Programmation Web TP 0:
Exercice 3: Utilisation d’un éditeur de texte Notions de base

À vous Procédez à l’installation de Notepad++

Le fichier d’installation est attaché au slide (sinon le télécharger) !
Double cliquez ici ->

Suivez les étapes :

25
Programmation Web TP 0:
Exercice 3: Utilisation d’un éditeur de texte Notions de base

À vous Ouvrez un fichier HTML avec Notepad++

Une fois l'installation terminée, vous pourrez

ouvrir n'importe quel fichier html comme suit:
faites clique droit sur le fichier, et choisissiez
"Edit with Notepad++"
et le fichier HTML s'ouvre avec Notepad++.

Remarquez déjà comment

Notepad++ prend le soin de mettre
en évidence les balises en leur
donnant une couleur différente. Si les balises ne sont pas
colorées chez vous, alors…
Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB
26
Programmation Web TP 0:
Exercice 3: Utilisation d’un éditeur de texte Notions de base

À vous Coloration syntaxique

Si les balises ne sont pas colorées

chez vous, alors, allez dans
"langage", puis choisissez HTML.

Vous verrez, par la suite, quand on

commencera à travailler sur de gros
fichiers HTML, qu’il est plus
confortable d'avoir les balises colorées,
au lieu de travailler sur un code
unicolor.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

27
Programmation Web TP 0:
Exercice 3: Utilisation d’un éditeur de texte Notions de base

À vous Plus de visibilité

L'autre option sur Notepad++, c'est

que vous pouvez agrandir le texte,
afin d'avoir une meilleure visibilité.

Il vous suffira simplement de cliquer

sur le texte, et de maintenir la
touche Control (CTRL) enfoncée,
tout en faisant des scrolls avec votre
souris.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

28
Programmation Web TP 0:
Notions de base

Exercice 4:
Inspection du code HTML

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

29
Programmation Web TP 0:
Rappel Notions de base

Rappelez-vous, le navigateur
(l’application cliente qu’on
utilise) reçoit un fichier HTML
(notre page Web) Serveur
Web
3
2 Répond
Demande en envoyant
la page Web la page Web.
(un document HTML) Le Navigateur
a interprété le code HTML
Le Navigateur

1 4
Lit le document HTML
Vous saisissez
Et il vous affiche la
l’adresse du Site
Remarque: pour l’instant, il page Web.
n’y a pas de serveur Web.
Tout se passe en local sur Vous
notre même machine !
30
Programmation Web TP 0:
Exercice 4: Inspection du code HTML Notions de base

À vous

1. Ouvrez la page Exo2.html, sur le

navigateur.

2. Faites CTRL+U pour voir le code

HTML.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

31
Programmation Web TP 0:
Rappel 4:
Exercice Inspection du code HTML Notions de base
Il existe un autre moyen pour voir le code HTML en même temps que la
À vous page Web (voici un exemple sur le navigateur Chrome).

Vous pouvez aussi faire

clique-droit sur la page, puis Une fenêtre s’affiche pour
"Inspecter" montrer le code HTML

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

32
Programmation Web TP 0:
Notions de base

Exercice 5:
Rôle du navigateur

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

33
Programmation Web TP 0:
Rappel Notions de base

Serveur
Web
3
2 Répond
Demande en envoyant
la page Web la page Web.
(un document HTML) Le Navigateur
a interprété le code HTML
Le Navigateur

La navigateur se contente
1 4
d’interpréter le code HTML Lit le document HTML
Vous saisissez
qu’il reçoit, et d’afficher la Et il vous affiche la
l’adresse du Site
page Web. page Web.

Vous
Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB
34
Programmation Web TP 0:
Rappel 5:
Exercice Rôle du navigateur Notions de base

À vous

1. Ouvrez la fenêtre d’inspection

du code HTML, et positionnez vous
sur l’onglet "Network".

2. Actualisez la page. Vous verrez

apparaitre le fichier HTML que le
navigateur reçoit.

Par la suite, lorsqu’on travaillera sur

vrai site Web, vous verrez que le
navigateur reçoit d’autres fichiers,
comme: les fichiers css, les images,
les script JavaScript, etc.

35
Programmation Web TP 0:
Rappel 5:
Exercice Rôle du navigateur Notions de base

À vous Edition du code HTML

1. Ouvrez la fenêtre d’inspection 2. Modifiez le texte contenu entre 3. Rafraichissez la page, et

du code HTML, et positionnez vous les balises <h1></h1> (en double remarquez que les changements
sur l’onglet "Elements". cliquant): disparaissent:

Pourquoi à votre avis ?

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB
36
Programmation Web TP 0:
Notions de base

Exercice 6:
Structure d’un Site Web

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB

37
Programmation Web TP 0:
Rappel Notions de base

C’est quoi un site Web ?

Liens externes

…et parfois des liens dits «externes», c'est-à-

dire de pages hébergées par un autre serveur.
Un site web est un ensemble de pages Web
stockés sur un ordinateur. Un site web est
habituellement architecturé autour d'une Liens internes
page centrale, appelée «page d'accueil» et
proposant des liens vers un ensemble d'autres
pages hébergées sur le même serveur,…
38
Programmation Web TP 0:
Rappel 6: Structure d’un Site Web
Exercice Notions de base

À vous 1. Ouvrez la page index.html sur

votre navigateur.

Dans le dossier "Ressources

TP0" , vous trouverez un site
constitué de 3 pages.

2. Naviguez vers les autres pages (internes et

externes) en cliquant sur les liens proposés.

3. Observez à chaque fois les changements

dans l’onglet "Network"

Qu’est ce que vous remarquez ?

39
Programmation Web
Licence 2 : Informatique (ISIL)

WWW
TP 1: Notions de base (Résumé):
1. Utilisation d'un éditeur de texte adapté (coloration).
2. Création d'une page web contenant un code HTML.
3. Compréhension du rôle du navigateur.
4. Inspection du code HTML.
5. Inspection du flux réseau sur le navigateur.
6. Structure d’un site Web.

Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB 26/02/2022