Pravan Cours Ch2-1 HTML

Master 1 : Informatique (BIG-DATA)
Programmation Avancée (PRAVAN)
Chapitre 2
Site Statique
HTML
Dr. BOUBENIA Mohamed

mo.boubenia@gmail.com
28/10/2021
Où sommes nous ?
Les bases de données Chapitre 5 Chapitre 4 Site dynamique
Serveur
Web
Base de données
Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

HTML CSS
Chapitre 3 Chapitre 1
Interactivité Navigateur
(programmation JavaScript Introduction
côté client)
2
Plan de cette séance
1. Rappel
1. Notions de base du Web
2. Les bases du HTML (Principe des balises)
3. Structure d’un document HTML
4. Utilisation des balises HTML
3

1
Rappel
4
1- Rappel
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
5
1- Rappel
Vous devez
apprendre à écrire
un document HTML
Si vous voulez créer

une page Web…
6
1- Rappel
Vu en TP
1. Notions de base du WebBienvenue sur le site Bingo!

1. Du texte brut 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)
7
1- Rappel
Vu en TP
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
8
1- Rappel
Vu en TP
Ces choses sont ce
1. Notions de qu’on appelle : <h1>Bienvenue sur le site Bingo!</h1>
Les balises HTML
base du Web
<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
Il existe plusieurs balises, La balise strong a servi à mettre
chacune servant un but précis. le mot formation en gras
Le HTML est un
langage de Balisage
9

- Le principe des balises.
- La structure d’un document HTML.
10
2- Le principe des balises HTML

Pour comprendre le principe de fonctionnement des

balises, reprenons notre exemple de la dernière fois:
11
2- Principe des balises HTML
Le texte "Bienvenue sur le site
Bingo!" est entouré de deux
Texte balises h1.
2 Balises
12
Le navigateur
va voir que le texte est mis entre deux balises h1,
et il va appliquer une transformation à l'affichage.
Pour cette balise H1, la transformation consiste à
mettre en gras, et en grand.
13
il va voir qu'il est mis entre deux balises

em, et il va appliquer une transformation
à l'affichage.
C’est quoi la transformation appliqué ?
14
Syntaxe
(logique de fonctionnement)
Balise Balise
Ouvrante Contenu Fermante
<nom_balise> Texte </nom_balise>
Barre oblique
Un élément HTML
Cet élément HTML est formé d'une:
• Balise ouvrante, qui indique le commencement de l'élément.
• D'une balise fermante: qui indique la fin de l'élément. Cette balise fermante porte le même nom
que la balise ouvrante, sauf qu'elle doit commencé par une barre oblique.
• Et finalement, l'élément a aussi un contenu.
15
Syntaxe
Balise Balise
Ouvrante Contenu Fermante
<nom_balise> Texte </nom_balise>
Petite
Analogie ( Texte )
Pour mieux vous rapprocher
l'idée, essayez de voir ça comme
lorsque vous mettez un texte
entre parenthèse. Vous mettez Parenthèse Parenthèse
une parenthèse ouvrante, et une Ouvrante Fermante
parenthèse fermante et au milieu
vous mettez un contenu.
16
Syntaxe
Des éléments HTML

imbriqués
<balise_A> Texte <balise_B> Texte </balise_B> Texte </balise_A>
Petite
( )
Vous pouvez aussi faire des
Analogie Texte ( Texte ) Texte imbrications avec les éléments
HTML:
L'autre logique à comprendre
c'est que, comme avec les
Des parenthèses
parenthèses, vous pouvez faire
des imbrications, comme suit… imbriquées
17
Syntaxe dans cet exemple, l'élément de balise_B est
(logique de fonctionnement) imbriquée dans l'élément de balise_A.
Des éléments HTML

imbriqués

<balise_A>
Petite
( )
Vous pouvez aussi faire des
Analogie Texte ( Texte ) Texte imbrications avec les éléments
HTML:
L'autre logique à comprendre
c'est que, comme avec les
Des parenthèses
parenthèses, vous pouvez faire
des imbrications, comme suit… imbriquées
Mais, Vous devez suivre
une règle simple !
18
Règle à suivre pour l’imbrication Il ne doit pas y avoir de chevauchement
Des parenthèses
Et des accolades
( Texte { Texte } Texte )
( Texte { Texte ) Texte }
Même chose avec
les éléments HTML
<balise_A> Texte <balise_B> Texte </balise_A> Texte </balise_B>
19
Règle à suivre pour l’imbrication On peut avoir plusieurs niveaux d’imbrication
<balise_A> Texte <balise_B> Texte <balise_C> Texte </balise_C> Texte </balise_B> Texte </balise_A>
Cependant, avec plusieurs niveaux

d'imbrication, vous remarquerez que les
imbrications deviennent difficilement lisibles.
20
Règle à suivre pour l’imbrication Code sur plusieurs ligne…pour une meilleure lisibilité
<balise_A> Texte <balise_B> Texte <balise_C> Texte </balise_C> Texte </balise_B> Texte </balise_A>
<balise_A>
Texte
Difficilement
<balise_B> lisible
Texte
<balise_C> Texte </balise_C>
Texte Plus
</balise_B> lisible
Texte
</balise_A>
21
L’indentation Vous remarquerez aussi qu'on fait exprès des décalages dans le contenue des éléments afin qu'on
puisse mieux lire les imbrications. C'est ce qu'on appelle l'indentation.
Code Code
Indenté Non Indenté
<balise_A> <balise_A>
Texte Texte
<balise_B> <balise_B>
Texte Texte
<balise_C> Texte </balise_C> <balise_C> Texte </balise_C>
Texte Texte
</balise_B> </balise_B>
Texte Texte
</balise_A> </balise_A>
22
Maintenant que vous compris la logique

de fonctionnement des balises….
Quelques distinctions…
23
Distinction n°1: Elément avec contenu vs Elément sans contenu (vide)
Balise Balise
Ouvrante Contenu Fermante Exemples
Elément
avec <h1> text </h1>
contenu <nom_balise> Texte </nom_balise> <em> text </em>
Elément <nom_balise/>
vide
Balise Auto-fermante
il existe des élément qui n’ont pas besoin
d'avoir un contenu. 24
Distinction n°2:
Eléments Eléments
Bloc En ligne
25
Distinction n°2: Elément Bloc vs Elément En ligne
Occupent toute la largeur

disponible. ils sont positionnés
(par défaut) l'un sous l'autre.
Eléments
Bloc
Toute la largeur
26
N'occupent que la largeur

nécessaire à l'affichage du
contenu, et ne provoque pas
de retour à la ligne.
Eléments Eléments
Bloc En ligne
Toute la largeur
27
Elément
Bloc
De plus… Règle d’imbrication

Eléments
vous devez aussi savoir, que de façon générale: En ligne
on peut mettre un ou plusieurs éléments "en ligne"
à l'intérieur d'un élément bloc, En revanche, on
peut pas mettre un élément bloc (ou "en ligne") à
l'intérieur d'un élément "en-ligne".
28
Exemple
29
Exemple
La balise p sert
à mettre des
paragraphes.
Elle est de type

bloc.
Et donc, à l'affichage,
les deux éléments
s'afficheront l'un au-
dessous de l'autre.
30
Elles ne s'appliquent
Distinction n°2: Elément Bloc vs Elément En ligne que sur leur contenu,
Les balises strong et em et ne provoquent pas
sont de type en-ligne
Exemple de retour à la ligne.
La balise p sert
à mettre des
paragraphes.
Elle est de type

bloc.
31
Exemple p : est de type bloc

Strong : est de type en-ligne
<p> <strong>
Texte <strong> Texte </strong> Texte Texte <p> Texte </p> Texte
</p> </strong>
Correct Incorrect
Par la suite, quand on verra de plus près le fonctionnement de chaque

balise, vous comprendrez mieux quelles sont les imbrications que vous
pouvez faire et celles que vous ne pouvez pas faire.
32

3
Structure d’un document HTML
Maintenant que nous avons compris le principe de
fonctionnement des balises, nous allons voir comment
on utilise des balises pour structurer un document HTML.
33
3- Structure d’un document HTML
Rappelez-vous,
jusqu’à présent…
1. Notions deDocument
base du Web
HTML
Et nous avons directement écrit

les éléments HTML qu'on
souhaitait afficher, ceci afin de Page Web
faire simple et pour que vous
puissiez comprendre.
34
Document HTML
Non Valide
Car
Ne respecte
Pas la Structure
Normalisée d'un
document HTML
Page Web
35
Un document HTML valide

Respecte la structure suivante…
36
Document HTML
<html>
</html> Tout d'abord on met l'élément HTML
37
Document HTML
<html>
…et à l'intérieur on met 2 autres
<head>
éléments, à savoir l'élément "head"
</head>
et l'élément "body".
<body>
</body>
</html>
38
Document HTML
<html> Ces 3 éléments

<head> sont le minimum que
</head> tout document HTML doit
<body> contenir
</body>
</html>
39
HTML
Document HTML
<html>
<head>
Le contenant
</head>
de tout le code
<body>
de la page
</body>
(il est la racine du document)
</html>
40
HTML
Document HTML
head
<html>
<head> Un espace ou on mettra
</head> une sorte de configuration de
<body> notre page:
</body> - Titre
</html> - Mots clés, Métadonnées
- Des références vers
des fichiers CSS
….
(ne vont pas apparaitre dans le
contenu de la page Web)
41
HTML
Document HTML
head body
<html>
<head> "corps" qui va contenir tout
</head> ce que vous souhaitez
<body> afficher sur la page WEB.
</body>
</html>
42
HTML
Document HTML
head body
<html>
<head>
</head> p p
<body>
<p>
Bienvenue sur <strong>Bingo</strong>, le site
de <em>formation</em>.
</p>
<p> Aujourd’hui nous allons parler de HTML. </p>
Exemple
</body>
</html>
43
Remarquez La racine
HTML
Document HTML
head body
<html>
<head>
</head> …. p p
<body>
<p>
…. ….
Bienvenue sur <strong>Bingo</strong>, le site
de <em>formation</em>. Un modèle en ARBRE
</p>
<p> Aujourd’hui nous allons parler de HTML. </p>
</body>
Le DOM: Document Object Model
</html>
Une notion importante lorsqu’on parlera de la
programmation côté client avec JavaScript
44
Document HTML
<html>
<head> Il existe différents types de
</head> balises, chacune servant un but
<body> bien précis.
Contenu de la page Web
Ex:
Titres, Paragraphes,
Images, Listes, etc.
</body> En utilisant des balises précises.
</html>
>> On va les voir dans la suite
45
4
Utilisation des balises HTML
Nous n'allons voir que les balises
les plus fréquemment utilisées.
On essayera de voir d’autres en TP
46
4- Utilisation des balises HTML
1- Les paragraphes
Balises relatives au
2- Les titres Texte et à sa mise en forme
3- Les listes
4- Les liens hypertextes
5- Les images
6- Les tableaux
7- Les conteneurs
8- Les conteneurs sémantiques

47
4.1
Balises relatives au
Texte et à sa mise en forme
48
Nous allons suivre
cet exemple:
49
Des Titres
Mis en évidence
avec une grande
police et en gras.
50
Les balises à utiliser
1- Les titres
<h1> à <h6>
h1
h2
h3
h4
En pratique
h5
Vous aurez souvent besoin
d'utiliser ces variantes à différents h6
endroits dans votre page.
Sont de type bloc

51
52
Les paragraphes
53
2- Les paragraphes
54
2- Les paragraphes
Paragraphe 1
Paragraphe 2
Paragraphe 3
55
2- Les paragraphes
Paragraphe 1
Paragraphe 2
Paragraphe 3
La balise à utiliser
Est type bloc

<p>
56
2- Les paragraphes Remarque
2
Sont ignorés
par le navigateur
HTML
1
Les sauts
de ligne
57
2- Les paragraphes Les sauts de lignes
<br/>
HTML
Pour forcer <br/>

<br/>
le navigateur à faire un <br/>
saut de ligne
58
2- Les paragraphes D’autres balises pour mettre en valeur le texte Mettre en Gras
<strong>
Mettre en Italique
<em>
Mettre en Petit
<small>
Mettre en Exposant
<sup>
Mettre en Indice
<sub>
59
<strong>
Mettre en Italique
<em>
Mettre en Petit
<small>
Mettre en Exposant
<sup>
Mettre en Indice
<sub>
60
2- Les paragraphes D’autres balises pour mettre en valeur le texte
<strong>
Mettre en Italique
<em>
Mettre en Petit
<small>
Mettre en Exposant
<sup>
Mettre en Indice
<sub>
61
<strong>
Mettre en Italique
<em>
Mettre en Petit
<small>
Mettre en Exposant
<sup>
Mettre en Indice
<sub>
62
<strong>
Mettre en Italique
<em>
Mettre en Petit
<small>
Mettre en Exposant
<sup>
Mettre en Indice
<sub>
63
<strong>
Mettre en Italique
<em>
Mettre en Petit
<small>
Mettre en Exposant
<sup>
Mettre en Indice
<sub>
64
<strong>
Mettre en Italique
<em>
Mettre en Petit
<small>
Mettre en Exposant
<sup>
Sont de Mettre en Indice
de type en-ligne <sub>
65
66
Liste
67
3- Les listes
Liste à puces <ul> et <li>
Liste ordonnée <ol> et <li>
Sont de type bloc 68

69
Liens
Hypertextes
70
Vous voulez le rendre cliquable
71
https://www.blender.org/download/ Vous voulez le rendre cliquable
72
4- Les liens hypertextes type en-ligne <a>
Attribut href Valeur= Page cible
Balise Ouvrante Contenu Balise Fermante
• Chaque élément HTML peut avoir un ou

<nom_balise <attribut>="valeur" > Texte </nom_balise> plusieurs attributs.
• Certains attributs sont spécifiques à
certains types de balises (on verra par la
Nom Attribut suite).
Sa valeur
73
74
Images
<img/>
75
5- Les images
Elément img
Attribut Le chemin vers

src l’image
(veut dire
"source")
76
5- Les images
Elément img
Les images à afficher peuvent se trouver:

Le chemin vers Sur votre ordinateur.
Attribut Vous utiliserez un chemin absolu vers le
src l’image fichier.
(veut dire ex. C:\Users\Public\Pictures\
Sample Pictures\Desert.jpg
"source")
Ou un chemin relatif (si on est déjà dans
le dossier "sample pictures"):
ex. Desert.jpg
Ou Sur Internet.
Vous utiliserez une URL (une adresse Web)
ex. https://www.blender.org/wp-content/uploads/2020/11/image-7-
480x270.jpeg
77
5- Les images
Image local
Image sur le Web, en utilisant l’URL
78
79
Tableau
Balise à utiliser
<table>
80
6- Les tableaux
81
6- Les tableaux Colonne 1 Colonne 2
(entête) Ligne 1
Ligne 2
Ligne 3
Ligne 4
Ligne 5
Tableau
82
6- Les tableaux
Balise à utiliser
<table>
83
6- Les tableaux
Balise à utiliser
<table> Ligne 1
Insérer une ligne

<tr>
84
6- Les tableaux Colonne 1
Balise à utiliser
<table> Ligne 1
Insérer une ligne

<tr>
Insérer une colonne
<td>
85
6- Les tableaux Colonne 1 Colonne 2
Balise à utiliser
<table> Ligne 1
Insérer une ligne

<tr>
Insérer une colonne
<td>
86
6- Les tableaux
87
6- Les tableaux Variante possible
(entête) Ligne 1
entête
<th>
88
89
On peut utiliser des conteneurs pour
rassembler plusieurs éléments HTML dans un
Conteneurs même groupe, en vue, par exemple de leur
appliquer un style commun
<div>
90
6- Les conteneurs
<div>
L’application d’un style pourra

alors se faire avec des feuilles
de style CSS (qu’on verra dans
le cours suivant)
91
6- Les conteneurs Autre utilisation Le découpage de la page Web (donner un Layout (disposition) à la page)
Mais d’autres découpages

plus compliqués peuvent
être choisis
Exemple:
Un header (entête)
Une barre de navigation
Un contenu principal
Une barre latérale (side-bar)
Un footer (pied de page)
92
Ces balises permette de donner du sens
7- Les conteneurs Sémantiques Possibles depuis la version HTML5 aux balises. Un sens qui pourra être
exploité par les moteurs de recherche
HTML 4 HTML 5
Exemple: Exemple:
Un header (entête) Evolution dans <header> Un header (entête)
Une barre de navigation <nav> Une barre de navigation
Un contenu principal
les versions De HTML <main> Un contenu principal
Une barre latérale (side-bar) <aside> Une barre latérale (side-bar)
Un footer (pied de page) <footer> Un footer (pied de page)
93
Evolution des versions du HTML 2 Comment fait le navigateur pour reconnaitre la version qu’on veut
utiliser dans notre document HTML
• 1991: HTML Tags
La DocType
• 1995-1996: HTML 2.0
• 1997: HTML 3.2. et 4.01 Exemple
• 2000-2006: XHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
• 2007 à nos jours: HTML5 Pour HTML 4.01
<!DOCTYPE html>
Dans chaque nouvelle version, Pour HTML5
il y a des balises qui sont
abandonnées, et d’autres qui Où mettre cette docType ? Au début du document HTML
sont rajoutées (nouvelles)
1 <!DOCTYPE html>
<html>
<head> Ce document utilise donc
</head> la version HTML5
<body>
</body>
</html>
94
Résumé
Document HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Balises à mettre dans
Ex:
Images, Listes, Tableaux
</body>
etc.
En utilisant des balises précises.
</html>
Mais il existe d’autres balises

95
Résumé Pour découvrir les autres balises, visitez la page :
https://www.w3schools.com/tags/ref_byfunc.asp
Document HTML
<html>
<head>
</head>
<body>
Ex:
</body>
etc.
</html>

96
Résumé
Document HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Ex:
</body>
etc.
</html>

97
Document HTML
<!DOCTYPE html>
<html>
l’élément HEAD
<head> Un espace ou on mettra
une sorte de configuration de notre page:
- Titre
- Mots clés, Méta-informations
- Des références vers des fichiers CSS
</head> ….
<body> (Appelés aussi "méta-données" de la page, et qui ne
vont pas apparaitre dans le contenu de la page Web)
Paragraphes, Titres, Images..etc
</body>
</html>
98
Balises à mettre dans la partie HEAD
<title> :Titre du document, obligatoire

<link> : Relations vers des ressources externes
<style> : Styles CSS embarqués dans le document
<script> : Scripts embarqués dans le document
<meta> : Méta-informations
(Exemple: l'encodage à utiliser, la sémantique)
99
HTML n’est pas un langage de

programmation. Il ne permet pas de
programmer des instructions, mais seulement
de décrire statiquement un contenu.
Par la suite, on verra que tout ce qui est programmation

côté client pourra se faire à l’aide de JavaScript, qui est
quant à lui un langage de programmation.
100
Liens utiles
W3Schools
https://www.w3schools.com/
Mozilla Developer Network

https://developer.mozilla.org/fr/docs/Learn/HTML
Ma chaine Youtube (Bingo Web Academy)

https://youtube.com/playlist?list=PL6OcOlxBo0fDTwv7McJpGwq_t35PM6z70
101
La suite ?
1- Les paragraphes
2- Les titres
3- Les listes

En TP
5- Les images
6- Les tableaux
7- Les conteneurs
8- Les conteneurs sémantiques

Un site Statique
102
La suite ? Prochain cours
Les bases de données Chapitre 5 Chapitre 4 Site dynamique
Serveur
Web
Base de données
Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

HTML CSS
Chapitre 3 Chapitre 1
Interactivité Navigateur
(programmation JavaScript Introduction
côté client)
103
Merci
104

Pravan Cours Ch2-1 HTML

Transféré par

Informations du document

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

Pravan Cours Ch2-1 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Master 1 : Informatique (BIG-DATA)

Programmation Avancée (PRAVAN)

Dr. BOUBENIA Mohamed

Les bases de données Chapitre 5 Chapitre 4 Site dynamique

Single Page App (SPA) Chapitre 6 Chapitre 2 Site statique

1. Notions de base du Web

Si vous voulez créer

1. Notions de base du WebBienvenue sur le site Bingo!

Bienvenu sur le site Bingo! Bingo est un site

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

1. Notions de base du Web

- La structure d’un document HTML.

2- Le principe des balises HTML

Pour comprendre le principe de fonctionnement des

1. Notions de base du Web

il va voir qu'il est mis entre deux balises

<nom_balise> Texte </nom_balise>

<nom_balise> Texte </nom_balise>

Des éléments HTML

<balise_A> Texte <balise_B> Texte </balise_B> Texte </balise_A>

Des éléments HTML

<balise_A> Texte <balise_B> Texte </balise_B> Texte </balise_A>

<balise_A> Texte <balise_B> Texte </balise_A> Texte </balise_B>

Cependant, avec plusieurs niveaux

Maintenant que vous compris la logique

Occupent toute la largeur

N'occupent que la largeur

De plus… Règle d’imbrication

Elle est de type

Elle est de type

Exemple p : est de type bloc

Par la suite, quand on verra de plus près le fonctionnement de chaque

1. Notions de base du Web

Et nous avons directement écrit

Un document HTML valide

<html> Ces 3 éléments

>> On va les voir dans la suite

4- Les liens hypertextes

8- Les conteneurs sémantiques

Sont de type bloc

Est type bloc

Pour forcer <br/>

Liste à puces <ul> et <li>

Liste ordonnée <ol> et <li>

Sont de type bloc 68

Vous voulez le rendre cliquable

https://www.blender.org/download/ Vous voulez le rendre cliquable

Attribut href Valeur= Page cible

Balise Ouvrante Contenu Balise Fermante

• Chaque élément HTML peut avoir un ou

Attribut Le chemin vers

Les images à afficher peuvent se trouver:

Image sur le Web, en utilisant l’URL

Insérer une ligne

Insérer une ligne

Insérer une ligne

L’application d’un style pourra

Mais d’autres découpages

• 2000-2006: XHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Mais il existe d’autres balises

Mais il existe d’autres balises

Mais il existe d’autres balises

<title> :Titre du document, obligatoire

HTML n’est pas un langage de