TP3 : Création d’une page Web statique en HTML
Module : Digital Skills – Semestre 1
Thème : Technologies web de base (HTML)
Exercice 1 : Structure de base d’une page HTML
Objectif : Créer la structure minimale d’une page Web en HTML.
Consignes :
1. Créez un nouveau dossier sur votre Bureau et nommez-le TP_HTML.
2. Ouvrez un éditeur de texte (Bloc-notes, Notepad++, VS Code, etc.).
3. Dans ce dossier, créez un fichier nommé [Link].
4. Rédigez dans ce fichier la structure minimale d’une page HTML contenant :
— la déclaration du type de document ;
— la balise principale html avec l’attribut de langue ;
— une section head contenant l’encodage et le titre de la page ;
— une section body (vide pour l’instant).
5. Enregistrez le fichier puis ouvrez-le dans un navigateur (double-clic).
< !DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>
</body>
</html>
Exercice 2 : Titres et paragraphes
Objectif : Ajouter du contenu textuel dans une page HTML en utilisant des titres et des paragraphes.
Consignes :
1. Ouvrez votre fichier [Link] créé à l’exercice précédent.
2. Dans la section body, ajoutez :
— un titre principal de niveau 1 présentant votre page ;
1
— un paragraphe décrivant brièvement l’objectif de votre page web.
3. Enregistrez votre fichier.
4. Ouvrez ou actualisez votre page dans le navigateur afin de vérifier l’affichage.
<h1>Bienvenue dans ma première page Web</h1>
<p>
Ceci est un paragraphe de présentation qui explique l’objectif de ma page web.
Il s’agit d’un exercice du module Digital Skills pour apprendre les bases du HTML.
</p>
Exercice 3 : Sous-titres et texte descriptif
Objectif : Structurer le contenu d’une page HTML en utilisant des sous-titres de différents niveaux.
Consignes :
1. Dans votre fichier [Link], ajoutez sous le contenu précédent :
— un sous-titre de niveau 2 intitulé « 1. Présentation » ;
— un paragraphe décrivant qui vous êtes (étudiant, formation, etc.) ;
— un sous-titre de niveau 3 intitulé « 1.1 Mes objectifs » ;
— un paragraphe expliquant vos objectifs pour ce module (exemples : apprendre HTML, créer
une page web, comprendre la structure d’un document, etc.).
2. Enregistrez le fichier puis actualisez votre page dans le navigateur.
<h2>1. Présentation</h2>
<p>
Je suis étudiant et j’apprends les bases du développement web dans le cadre du module Digital Skills.
Ce TP me permet de découvrir comment organiser le contenu d’une page HTML.
</p>
<h3>1.1 Mes objectifs</h3>
<p>
Mes objectifs sont de comprendre la structure d’une page HTML, d’apprendre à ajouter du texte et
d’être capable de créer une page web simple et bien organisée.
</p>
Exercice 4 : Insérer une image dans la page
Objectif : Apprendre à insérer une image dans une page HTML et comprendre l’importance du nom
du fichier et de son emplacement.
Consignes :
1. Téléchargez une image (photo personnelle, logo, etc.) sur votre ordinateur.
2. Placez cette image dans le même dossier que votre fichier [Link].
3. Renommez l’image avec un nom simple, par exemple [Link] (sans espace, sans accent).
4. Dans votre fichier [Link], sous les exercices précédents, ajoutez :
— un titre de niveau 2 présentant la section, par exemple : « Ma photo » ;
— l’affichage de l’image avec une largeur d’environ 200 pixels et un texte alternatif (attribut
alt) décrivant l’image.
2
5. Enregistrez le fichier puis actualisez la page dans le navigateur.
<h2>Ma photo</h2>
<img src="[Link]" alt="Ma photo personnelle" width="200">
Exercice 5 : Listes ordonnées et non ordonnées
Objectif : Utiliser les listes en HTML pour organiser des informations sous forme d’éléments.
Consignes :
1. Ouvrez votre fichier [Link] et placez-vous sous la partie précédente.
2. Ajoutez une nouvelle section contenant :
— un titre de niveau 2 intitulé « Mes passions » ;
— une liste non ordonnée présentant au moins trois de vos passions ou centres d’intérêt
(sport, musique, lecture, etc.) ;
3. Ajoutez ensuite une deuxième section contenant :
— un titre de niveau 2 intitulé « Mes objectifs cette année » ;
— une liste ordonnée présentant au moins trois objectifs pour cette année universitaire.
4. Enregistrez votre fichier puis actualisez votre page dans le navigateur.
<h2>Mes passions</h2>
<ul>
<li>Sport</li>
<li>Lecture</li>
<li>Informatique</li>
</ul>
<h2>Mes objectifs cette année</h2>
<ol>
<li>Réussir tous mes modules.</li>
<li>Améliorer mes compétences en informatique.</li>
<li>Créer un petit site web personnel.</li>
</ol>
Exercice 6 : Ajouter un lien hypertexte
Objectif : Apprendre à insérer un lien hypertexte dans une page HTML et à l’ouvrir dans un nouvel
onglet.
Consignes :
1. Ouvrez votre fichier [Link].
2. Sous les exercices précédents, ajoutez une nouvelle section comprenant :
— un titre de niveau 2 intitulé « Liens utiles » ;
— un lien hypertexte pointant vers un site utile pour vos études (exemples : Google, Wikipédia,
une plateforme universitaire, etc.).
3. Le lien doit s’ouvrir dans un nouvel onglet du navigateur (utilisez l’attribut target="_blank").
4. Enregistrez votre fichier puis actualisez votre page dans le navigateur.
3
<h2>Liens utiles</h2>
<p>
<a href="https ://[Link]" target="_blank">
Rechercher sur Google
</a>
</p>
Exercice 7 : Créer un tableau en HTML
Objectif : Apprendre à structurer des données sous forme de tableau dans une page HTML.
Consignes :
1. Dans votre fichier [Link], ajoutez une nouvelle section.
2. Insérez un titre de niveau 2 intitulé « Mon planning de la semaine ».
3. Créez un tableau simple contenant :
— une ligne d’en-tête (les titres des colonnes) ;
— au moins trois lignes de données représentant votre planning (exemples : cours, TP, révisions,
sport, etc.).
4. Le tableau doit contenir au minimum deux colonnes :
— Jour ;
— Activité.
5. Enregistrez votre fichier puis actualisez votre page dans le navigateur.
<h2>Mon planning de la semaine</h2>
<table border="1">
<tr>
<th>Jour</th>
<th>Activité</th>
</tr>
<tr>
<td>Lundi</td>
<td>Cours magistraux</td>
</tr>
<tr>
<td>Mardi</td>
<td>Travaux pratiques</td>
</tr>
<tr>
<td>Mercredi</td>
<td>Révisions</td>
</tr>
</table>
Exercice 8 : Ajouter un pied de page
Objectif : Ajouter un élément de bas de page pour finaliser la structure d’une page HTML.
Consignes :
4
1. Dans votre fichier [Link], tout en bas du document, ajoutez une nouvelle section représen-
tant le pied de page.
2. Le pied de page doit contenir :
— un texte simple, par exemple une mention de droits d’auteur ;
— l’année en cours.
3. Utilisez la balise footer pour structurer cette partie.
4. Enregistrez votre fichier puis actualisez votre page dans le navigateur.
Exercice 8 : Ajouter un pied de page
Objectif : Ajouter un élément de bas de page pour finaliser la structure d’une page HTML.
Consignes :
1. Dans votre fichier [Link], tout en bas du document, ajoutez une nouvelle section représen-
tant le pied de page.
2. Le pied de page doit contenir :
— un texte simple, par exemple une mention de droits d’auteur ;
— l’année en cours.
3. Utilisez la balise footer pour structurer cette partie.
4. Enregistrez votre fichier puis actualisez votre page dans le navigateur.
<footer>
<p> © ; 2025 - Ma première page web</p>
</footer>