Programmation Web
Licence 2 : Informatique (ISIL)
HTML
TP 1: HTML
Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB 03/03/2022
Programmation Web
TP 1: HTML
Plan
TP 1: HTML TP 2: CSS Mini-Projet
• Ex1: Structure d’un document HTML • A venir • A venir
• Ex2: Titre de la page
• Ex3: Elément "Bloc" vs Elément "En ligne"
Découverte des balises :
• Ex4: Les Titres
• Ex5: Les Paragraphes
• Ex6: Les Listes
• Ex7: Les Liens Hypertextes
• Ex8: Les Images
• Ex9: Les Tableaux
• Ex10: Les Conteneurs
2
Programmation Web
TP 1: HTML
Plan
À 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.
3
Programmation Web
TP 1: HTML
Exercice 1
Structure d’un document HTML
4
Programmation Web
TP 1: HTML
Exercice 1: Structure d’un document HTML
Rappel
Document HTML
<!DOCTYPE html>
<html>
<head> Un espace ou on mettra
E.x. Titre de la page, une sorte de configuration de
notre page
</head>
<body>
E.x. Paragraphes, Images..etc
"corps" qui va contenir tout
ce que vous souhaitez
</body> afficher sur la page WEB.
</html>
5
Programmation Web
TP 1: HTML
Exercice 1: Structure d’un document HTML
À vous HTML
<!DOCTYPE html>
1
Saisir le code HTML suivant, <html>
et l’enregistrer dans exo1.html. <head>
2 <title> Exo1 </title>
Procéder à l’indentation du code <meta charset="UTF-8"/>
saisi (voir le cours HTML (slide 22)).
</head>
3 <body>
Visualiser le résultat sur le
navigateur. ceci est le contenu de ma page
</body>
</html>
6
Programmation Web
TP 1: HTML
Exercice 2
Titre de la page
7
Programmation Web
TP 1: HTML
Exercice 2: Titre de la page
Rappel 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)
8
Programmation Web
TP 1: HTML
Exercice 2: Titre de la page
À vous
Apporter les modifications
nécessaires à exo1.html pour ceci est le contenu de ma page
changer le titre de la page.
9
Programmation Web
TP 1: HTML
Exercice 3
Element "Bloc"
vs
Element "En ligne"
10
Programmation Web
TP 1: HTML
Exercice 3: Element "Bloc" vs Element "En ligne"
Rappel
Distinction
Occupent toute la largeur N'occupent que la largeur nécessaire
disponible. ils sont positionnés à l'affichage du contenu, et ne
(par défaut) l'un sous l'autre. provoque pas de retour à la ligne.
Eléments Eléments
Bloc En ligne
Toute la largeur
11
Programmation Web
TP 1: HTML
Exercice 3: Element "Bloc" vs Element "En ligne"
À vous
1
Insérer les 2 éléments
HTML suivants au bon
endroit dans exo1.html
2
Sur le navigateur, utiliser les
outils de développement
pour inspecter et voir
l’espace qu’occupent les
éléments p, strong et em
3
Qu’est ce que vous
remarquez ?
12
Programmation Web
TP 1: HTML
Exercice 4
Découverte des balises HTML
Les Titres
13
Programmation Web
TP 1: HTML
Exercice 4: Les Titres
Rappel Les balises à utiliser
<h1> à <h6>
h1
h2
h3
h4
h5
h6
14
Programmation Web
TP 1: HTML
Exercice 4: Les Titres
À vous
1
Dans un fichier exo4.html,
créer une page HTML avec
des titres pour avoir le
rendu suivant:
2
Les éléments insérés sont-
ils de type "bloc" ou
"enligne" ?
15
Programmation Web
TP 1: HTML
Exercice 5
Découverte des balises HTML
Les Paragraphes
16
Programmation Web
TP 1: HTML
Exercice 5: Les Paragraphes
Rappel
Paragraphe 1
Paragraphe 2
Paragraphe 3
La balise à utiliser
<p>
17
Programmation Web
TP 1: HTML
Exercice 5: Les Paragraphes
À vous
1
Dans le fichier exo4.html,
apporter les modifications
nécessaires pour obtenir le
rendu suivant:
La première édition de la Coupe du monde se déroule en 1930 dans
trois stades de Montevideo, capitale de l'Uruguay. D'une capacité de
plus de 80 000 personnes, le Stade Centenario, qui est le plus grand des
! trois, n'est pas prêt pour le début de la compétition. Les premiers
Vous pouvez copier matchs de la compétition sont donc joués dans deux autres stades :
les paragraphes l'Estadio Pocitos et l'Estadio Gran Parque Central.
La plus faible affluence de la Coupe du monde est une rencontre entre
la Roumanie et le Pérou à l'Estadio Pocitos en 1930 où seulement 300
spectateurs se regroupent.
18
Programmation Web
TP 1: HTML
Exercice 5: Les Paragraphes
Rappel 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>
19
Programmation Web
TP 1: HTML
Exercice 5: Les Paragraphes
À vous
Dans le fichier exo4.html, La première édition de la Coupe du monde se déroule en 1930 dans
trois stades de Montevideo, capitale de l'Uruguay. D'une capacité de
utiliser les différentes plus de 80 000 personnes, le Stade Centenario, qui est le plus grand des
balises vues dans le slide trois, n'est pas prêt pour le début de la compétition. Les premiers
précédent, afin de mettre matchs de la compétition sont donc joués dans deux autres stades :
l'Estadio Pocitos et l'Estadio Gran Parque Central.
en valeur certains mots (à
vous de choisir). La plus faible affluence de la Coupe du monde est une rencontre entre
la Roumanie et le Pérou à l'Estadio Pocitos en 1930 où seulement 300
spectateurs se regroupent.
20
Programmation Web
TP 1: HTML
Exercice 6
Découverte des balises HTML
Les Listes
21
Programmation Web
TP 1: HTML
Exercice 6: Les Listes
Rappel
Liste à puces <ul> et <li>
Liste ordonnée <ol> et <li>
22
Programmation Web
TP 1: HTML
Exercice 6: Les Listes
À vous
La plus faible affluence de la Coupe du monde est une rencontre entre
la Roumanie et le Pérou à l'Estadio Pocitos en 1930 où seulement 300
spectateurs se regroupent.
Dans le fichier exo4.html, (à
• Stade Centenario (Montevideo)
la suite du paragraphe qui • Stadio Nazionale del PNF (Rome)
existe déjà), rajouter une • Stade olympique Yves-du-Manoir (Colombes)
ligne horizontale, puis une • Stade Maracanã (Rio de Janeiro)
liste à puces.
23
Programmation Web
TP 1: HTML
Exercice 6: Les Listes
À vous
La plus faible affluence de la Coupe du monde est une rencontre entre
la Roumanie et le Pérou à l'Estadio Pocitos en 1930 où seulement 300
spectateurs se regroupent.
• Stade Centenario (Montevideo)
• Stadio Nazionale del PNF (Rome)
• Stade olympique Yves-du-Manoir (Colombes)
• Stade Maracanã (Rio de Janeiro)
1. Uruguay 1930
Rajouter une liste 2. Italie 1934
numérotée. 3. France 1938
4. Brésil 1950
24
Programmation Web
TP 1: HTML
Exercice 7
Découverte des balises HTML
Les Liens Hypertextes
25
Programmation Web
TP 1: HTML
Exercice 7: Les Liens Hypertextes
Rappel La balise à utiliser
<a>
Attribut href Valeur= Page cible
26
Programmation Web
TP 1: HTML
Exercice 7: Les Liens Hypertextes
À vous
https://fr.wikipedia.org/wiki/Montevideo
La première édition de la Coupe du monde se déroule en 1930 dans
trois stades de Montevideo, capitale de l'Uruguay. D'une capacité de
Dans le fichier exo4.html, plus de 80 000 personnes, le Stade Centenario, qui est le plus grand des
rendre les mots suivants trois, n'est pas prêt pour le début de la compétition. Les premiers
comme des liens matchs de la compétition sont donc joués dans deux autres stades :
l'Estadio Pocitos et l'Estadio Gran Parque Central.
hypertextes. https://fr.wikipedia.org/wiki/Stade_Centenario
(les liens hypertextes La plus faible affluence de la Coupe du monde est une rencontre entre
correspondants sont fournies) la Roumanie et le Pérou à l'Estadio Pocitos en 1930 où seulement 300
spectateurs se regroupent.
27
Programmation Web
TP 1: HTML
Exercice 8
Découverte des balises HTML
Les images
28
Programmation Web
TP 1: HTML
Exercice 8: Les Images
Rappel
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 le Web
Vous utiliserez une URL (une adresse Web)
ex. https://www.blender.org/wp-content/uploads/2020/11/image-7-
480x270.jpeg
29
Programmation Web
TP 1: HTML
Exercice 8: Les Images
À vous
1. Uruguay 1930
2. Italie 1934
3. France 1938
4. Brésil 1950
stade1.jpg (disponible dans le dossier
Dans le fichier exo4.html, Ressource TP2)
rajouter une ligne
horizontale, puis les images joueur.jpg (disponible dans le dossier
suivantes. Ressource TP2/joueur)
(ne vous préoccupez pas de la
taille des images)
disponible sur l’URL suivante:
https://bit.ly/3GDxL3O
30
Programmation Web
TP 1: HTML
Exercice 9
Découverte des balises HTML
Les Tableaux
31
Programmation Web
TP 1: HTML
Exercice 9: Les Tableaux
Rappel
Balise à utiliser Insérer une ligne Insérer une colonne
<table> <tr> <td>
entête
<th>
32
Programmation Web
TP 1: HTML
Exercice 9: Les Images
À vous
1. Uruguay 1930
2. Italie 1934
3. France 1938
4. Brésil 1950
Année Droits TV Audience mondiale cumulée
1990 95 millions de francs suisses (60M €) 26,7 milliards de téléspectateurs
1994 110 millions de francs suisses (70M €) 32,1 milliards de téléspectateurs
Dans le fichier exo4.html,
rajouter une ligne 1998 135 millions de francs suisses (86M €) 33,4 milliards de téléspectateurs
horizontale, puis le tableau
suivant.
33
Programmation Web
TP 1: HTML
Exercice 10
Découverte des balises HTML
Les Conteneurs
34
Programmation Web
TP 1: HTML
Exercice 10: Les Conteneurs
La balise à utiliser
<div>
L’application d’un style pourra
alors se faire avec des feuilles
de style CSS (qu’on verra dans
le cours suivant)
35
Programmation Web
TP 1: HTML
Exercice 10: Les Conteneurs
À vous
Dans le fichier exo4.html,
rajouter une ligne
horizontale, puis les
éléments suivants dans un
conteneur div
36
Programmation Web
TP 1: HTML
Exercice 10: Les Conteneurs
À vous
1
Rajouter un style CSS au div,
comme suit: 2
Voyez-vous l’utilité des
conteneurs ?
37
Programmation Web
Licence 2 : Informatique (ISIL)
HTML
TP 1: HTML
1. Création d’un document HTML valide.
2. Modification de l’entête de la page Web.
3. Compréhension des éléments Bloc vs En ligne.
4. Découverte de certaines balises HTML (Textes, Listes,
Liens, Images, Tableaux, Conteneurs)
Dr. BOUBENIA Mohamed, Faculté d‘Informatique, USTHB 03/03/2022
