ROYAUME DU MAROC
FORCES ARMEES ROYALES
MARINE ROYALE 1ème Année Cycle Licence
ECOLE ROYALE NAVALE
Travaux Pratiques 1
HTML
Exercice 1 : Créez une page HTML simple
1. Ouvrez votre éditeur de texte VS Code.
2. Créez un nouveau fichier et enregistrez-le sous le nom : [Link]
3. Ajoutez la structure minimale d’une page HTML5 :
<!DOCTYPE html>, <html>, <head>, <body>
4. Dans la balise <head>, ajoutez un titre de page avec la balise <title>.
5. Dans la balise <body>, ajoutez :
o Un titre principal avec la balise <h1>
o Un sous-titre avec <h2>
o Un paragraphe de texte avec <p>
o Une ligne horizontale avec <hr>
o Un saut de ligne avec <br>
6. Enregistrez le fichier et ouvrez-le dans un navigateur pour voir le résultat.
Exercice 2 : l’apparence du texte
1. Créez un nouveau fichier HTML (ou modifiez le fichier [Link]).
2. Dans le <body>, ajoutez un ou deux paragraphes avec la balise <p>.
3. À l’intérieur de ces paragraphes, modifiez le style de certaines parties du texte :
o Mettez un mot ou une phrase en gras avec la balise <b>.
o Mettez un mot en italique avec la balise <i>.
o Soulignez un mot avec la balise <u>.
o Barrez un mot avec la balise <s>.
4. Ajoutez également un commentaire HTML au début ou entre deux éléments.
Exercice 3 : Intégration d’images avec HTML
1. Téléchargez une image de votre choix.
2. Créez un dossier nommé (images) dans le même dossier que votre fichier HTML.
3. Placez l’image téléchargée dans ce dossier.
4. Ajoutez l’image à votre page HTML à l’aide de la balise <img>.
5. Spécifiez la largeur et la hauteur de l’image à l’aide des attributs width et height.
Page : 1 Année universitaire 2024-2025 [Link] Chaymae
ROYAUME DU MAROC
FORCES ARMEES ROYALES
MARINE ROYALE 1ème Année Cycle Licence
ECOLE ROYALE NAVALE
6. Ajoutez un texte alternatif avec l’attribut alt, qui sera affiché si l’image ne peut
pas être chargée.
Exercice 4 : les liens hypertextes
1. Ajoutez un lien vers le site Google ([Link] à l’aide de la
balise <a>.
2. Le lien doit s’ouvrir dans un nouvel onglet (target="_blank").
3. Créez un deuxième fichier HTML nommé [Link].
4. Dans votre page principale, ajoutez un lien vers cette nouvelle page.
NB
_self (par défaut) : Ouvre le lien dans le même onglet.
_blank : Ouvre le lien dans un nouvel onglet.
NB
l'attribut alt (alternative text) est utilisé pour fournir une description textuelle d’une
image. Il est affiché si l’image ne peut pas être chargée.
Exercice 5 : un lien sur une image
1. Réutilisez l’image que vous avez insérée dans l’exercice 3.
2. Transformez cette image en lien cliquable.
3. Lorsque l’utilisateur clique sur l’image, il est redirigé vers le site Google.
Exercice 6 : les titres, paragraphes, listes et liens
1. Ajoutez des titres avec les balises <h1>, <h2> et <h3>.
2. Insérez deux paragraphes contenant du texte descriptif.
3. Créez une liste non ordonnée comportant au moins 4 éléments (par exemple:
loisirs, outils, langages, etc.).
4. Créez une liste ordonnée en indiquant 3 étapes successives (par exemple : étapes
d’inscription, étapes de création de page...).
5. Ajoutez un lien externe vers un site de votre choix (Google, Wikipédia, etc.)
Page : 2 Année universitaire 2024-2025 [Link] Chaymae
ROYAUME DU MAROC
FORCES ARMEES ROYALES
MARINE ROYALE 1ème Année Cycle Licence
ECOLE ROYALE NAVALE
Exercice 7 : Tableaux
1. Créez un tableau représentant un planning hebdomadaire sur 3 jours (Lundi,
Mardi, Mercredi).
2. La première colonne représentera les heures (ex. : 08h–10h, 10h–12h, 14h–16h).
3. La première ligne contiendra les noms des jours en en-tête (<th>).
4. Utilisez :
o colspan pour fusionner des colonnes si un cours occupe plusieurs jours.
o rowspan pour fusionner des lignes si un cours dure plusieurs créneaux
horaires.
5. Remplissez le tableau avec des cours fictifs.
6. Affichez des bordures visibles autour du tableau et des cellules à l’aide de
l’attribut border="1" dans la balise <table>, <table border="1">
Page : 3 Année universitaire 2024-2025 [Link] Chaymae