Programmation Avancée
(PRAVAN)
Master 1 : Informatique (BIG-DATA)
HTML CSS
TP 2:
HTML/CSS
Dr. BOUBENIA Mohamed, Faculté d’Informatique, USTHB 15/10/2023
Programmation Avancée (PRAVAN) TP 2:
Plan HTML/CSS
Part1: HTML Part2: CSS Mini-Projet
• Ex1: Structure d’un document HTML • 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 Avancée
(PRAVAN)
Master 1 : Informatique (BIG-DATA)
HTML CSS
TP 2: HTML (part 1)
Dr. BOUBENIA Mohamed, Département d‘Informatique, USTHB 15/10/2023
Programmation Avancée (PRAVAN) TP 2:
Plan HTML/CSS
À 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.
4
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 1
Structure d’un document HTML
5
Programmation Avancée (PRAVAN) TP 2:
Exercice 1: Structure d’un document HTML HTML/CSS
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>
6
Programmation Avancée (PRAVAN) TP 2:
Exercice 1: Structure d’un document HTML HTML/CSS
À 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>
7
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 2
Titre de la page
8
Programmation Avancée (PRAVAN) TP 2:
Exercice 2: Titre de la page HTML/CSS
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)
9
Programmation Avancée (PRAVAN) TP 2:
Exercice 2: Titre de la page HTML/CSS
À vous
Apporter les modifications
nécessaires à exo1.html pour ceci est le contenu de ma page
changer le titre de la page.
1
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 3
Element "Bloc"
vs
Element "En ligne"
11
Programmation Avancée (PRAVAN) TP 2:
Exercice 3: Element "Bloc" vs Element "En ligne" HTML/CSS
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
12
Programmation Avancée (PRAVAN) TP 2:
Exercice 3: Element "Bloc" vs Element "En ligne" HTML/CSS
À 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 ?
13
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 4
Découverte des balises HTML
Les Titres
14
Programmation Avancée (PRAVAN) TP 2:
Exercice 4: Les Titres HTML/CSS
Rappel Les balises à utiliser
<h1> à <h6>
h1
h2
h3
h4
h5
h6
15
Programmation Avancée (PRAVAN) TP 2:
Exercice 4: Les Titres HTML/CSS
À 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" ?
16
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 5
Découverte des balises HTML
Les Paragraphes
17
Programmation Avancée (PRAVAN) TP 2:
Exercice 5: Les Paragraphes HTML/CSS
Rappel
Paragraphe 1
Paragraphe 2
Paragraphe 3
La balise à utiliser
<p>
18
Programmation Avancée (PRAVAN) TP 2:
Exercice 5: Les Paragraphes HTML/CSS
À 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.
19
Programmation Avancée (PRAVAN) TP 2:
Exercice 5: Les Paragraphes HTML/CSS
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>
20
Programmation Avancée (PRAVAN) TP 2:
Exercice 5: Les Paragraphes HTML/CSS
À 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.
21
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 6
Découverte des balises HTML
Les Listes
22
Programmation Avancée (PRAVAN) TP 2:
Exercice 6: Les Listes HTML/CSS
Rappel
Liste à puces <ul> et <li>
Liste ordonnée <ol> et <li>
23
Programmation Avancée (PRAVAN) TP 2:
Exercice 6: Les Listes HTML/CSS
À 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.
24
Programmation Avancée (PRAVAN) TP 2:
Exercice 6: Les Listes HTML/CSS
À 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
25
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 7
Découverte des balises HTML
Les Liens Hypertextes
26
Programmation Avancée (PRAVAN) TP 2:
Exercice 7: Les Liens Hypertextes HTML/CSS
Rappel La balise à utiliser
<a>
Attribut href Valeur= Page cible
27
Programmation Avancée (PRAVAN) TP 2:
Exercice 7: Les Liens Hypertextes HTML/CSS
À 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.
28
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 8
Découverte des balises HTML
Les images/Vidéo/Son
29
Programmation Avancée (PRAVAN) TP 2:
Exercice 8: Les Images/Vidéo/Son HTML/CSS
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
30
Programmation Avancée (PRAVAN) TP 2:
Exercice 8: Les Images/Vidéo/Son HTML/CSS
À 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
31
Programmation Avancée (PRAVAN) TP 2:
Exercice 8: Les Images/Vidéo/Son HTML/CSS
À vous
Dans le fichier exo4.html,
rajouter une ligne
horizontale, puis la vidéo et
le son disponibles dans le
dossier ressources.
32
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 9
Découverte des balises HTML
Les Tableaux
33
Programmation Avancée (PRAVAN) TP 2:
Exercice 9: Les Tableaux HTML/CSS
Rappel
Balise à utiliser Insérer une ligne Insérer une colonne
<table> <tr> <td>
entête
<th>
34
Programmation Avancée (PRAVAN) TP 2:
Exercice 9: Les Images HTML/CSS
À 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.
35
Programmation Avancée (PRAVAN) TP 2:
HTML/CSS
Part1: HTML
Exercice 10
Découverte des balises HTML
Les Conteneurs
36
Programmation Avancée (PRAVAN) TP 2:
Exercice 10: Les Conteneurs HTML/CSS
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)
37
Programmation Avancée (PRAVAN) TP 2:
Exercice 10: Les Conteneurs HTML/CSS
À vous
Dans le fichier exo4.html,
rajouter une ligne
horizontale, puis les
éléments suivants dans un
conteneur div
38
Programmation Avancée (PRAVAN) TP 2:
Exercice 10: Les Conteneurs HTML/CSS
À vous
1
Rajouter un style CSS au div,
comme suit: 2
Voyez-vous l’utilité des
conteneurs ?
39
Programmation Avancée
(PRAVAN)
Master 1 : Informatique (BIG-DATA)
HTML CSS
TP 2: HTML (part 1)
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, Département d‘Informatique, USTHB 15/10/2023
Programmation Avancée
(PRAVAN)
Master 1 : Informatique (BIG-DATA)
HTML CSS
TP 2: CSS (part 2)
Dr. BOUBENIA Mohamed, Département d‘Informatique, USTHB 15/10/2023
