Cours développement Web
Niveau débutant
Activité Numéro 2 : Eléments de réponse
Chers apprenants,
Voici quelques conseils et recommandations pour vous aider à réaliser les exercices de
la semaine portant sur l'introduction aux balises HTML.
Choix de l'éditeur de texte
Je vous recommande d'utiliser Notepad++ ou Visual Studio Code (VS Code) pour écrire
votre code HTML. Ces outils sont simples à utiliser et permettent d'identifier les erreurs
rapidement grâce à la coloration syntaxique.
Lien de téléchargement de Notepad++
Lien de téléchargement de Notepad++ :
[Link]
Lien de téléchargement de Visual Studio Code
Lien de téléchargement de VsCode :
[Link]
Méthode d'exécution et vérification du code
1. Écriture du code : Après avoir suivi les instructions de chaque exercice,
enregistrez le fichier avec l'extension .html dans votre dossier dédié.
2. Exécution du code : Une fois le fichier enregistré, ouvrez-le (en faisant une double
clic) dans un navigateur web (par exemple, Chrome ou Firefox) pour visualiser le
résultat de votre travail.
3. Vérification des résultats : Comparez le résultat affiché dans le navigateur avec
les consignes de l'exercice pour vérifier que tout est conforme.
Auto-évaluation
• Affichage dans le navigateur : Assurez-vous que chaque élément (texte, image,
lien) s'affiche correctement et fonctionne comme demandé.
• Organisation des fichiers : Veillez à nommer vos fichiers correctement et à les
organiser dans des dossiers comme indiqué dans chaque exercice.
Éléments de réponse pour chaque exercice
Exercice 1 : Création d'une Page de Base
1. Créez un dossier nommé "Exercice1" sur votre ordinateur.
2. À l'intérieur du dossier, créez un fichier HTML nommé "[Link]".
3. Ouvrez le fichier dans un éditeur de texte.
4. Créez la structure de base en utilisant les balises <html>, <head> et <body>.
5. À l'intérieur de la balise <body>, ajoutez un titre principal avec la balise <h1> : "Ma
Page de Base HTML".
6. Enregistrez et visualisez dans le navigateur.
Éléments de réponse :
Vérification :
Ouvrez "[Link]" dans votre navigateur. Vous devriez voir un titre avec "Ma Page de
Base HTML" s'afficher en grand.
Exercice 2 : Ajout de Texte et de Liens
1. Reprenez le fichier "[Link]" créé précédemment.
2. Ajoutez quelques paragraphes de texte avec la balise <p> dans la balise <body>.
3. Créez un lien vers une page Web externe en utilisant <a> avec l'attribut href.
4. Ajoutez un lien vers une adresse e-mail en utilisant <a> avec
href="[Link]
5. Testez les liens en cliquant dessus.
Éléments de réponse :
Vérification :
Testez les liens dans votre navigateur. Le lien externe doit vous rediriger vers la page
spécifiée, et le lien "mailto" doit ouvrir votre client de messagerie.
Exercice 3 : Utilisation des Images
1. Créez un nouveau fichier HTML nommé "[Link]".
2. Ajoutez la structure de base HTML.
3. À l'intérieur de la balise <body>, insérez une image avec la balise <img>, en utilisant
le chemin correct vers une image sur votre ordinateur.
4. Ajoutez un texte alternatif à l'image avec l'attribut alt.
5. Visualisez dans le navigateur.
Éléments de réponse :
Vérification :
L'image doit s'afficher dans le navigateur. Si l'image ne se charge pas, vous devez vérifier
l’emplacement de votre fichier image, mais le texte alternatif apparaîtra à la place.
Exercice 4 : Création d'une Liste
1. Créez un nouveau fichier HTML nommé "[Link]".
2. Ajoutez la structure de base HTML.
3. À l'intérieur de la balise <body>, créez une liste non ordonnée avec <ul> et quelques
éléments de liste <li>.
4. Créez une liste ordonnée avec <ol> et ajoutez des éléments de liste.
5. Visualisez dans le navigateur.
Éléments de réponse :
Vérification :
La liste non ordonnée apparaîtra avec des puces, et la liste ordonnée avec des numéros.
Exercice 5 : Création d'un Tableau Simple
1. Créez un nouveau fichier HTML nommé "[Link]".
2. Ajoutez la structure de base HTML.
3. À l'intérieur de la balise <body>, créez un tableau avec <table>. Utilisez des balises
<tr> pour les lignes et <td> pour les cellules.
4. Remplissez le tableau avec des données simples.
5. Visualisez dans le navigateur.
Éléments de réponse :
Vérification :
Le tableau doit s'afficher avec un bord autour des cellules.
Exercice 6 : Exercice synthèse
1. À l'intérieur du dossier, créez un fichier HTML nommé "[Link]".
2. Ouvrez le fichier HTML dans un éditeur de texte.
3. Utilisez les balises HTML que vous avez apprises dans le cours pour créer une
structure de base.
4. À l'intérieur de la balise <head>, ajoutez un titre à votre page.
5. Ajouter des balises <méta> et spécifiez des valeurs appropriées.
6. Dans la balise <body>, créez un en-tête avec une balise <h1> contenant un titre
pour votre page.
7. Ajoutez un paragraphe de texte descriptif en utilisant la balise <p>.
8. Créez une liste non ordonnée avec quelques éléments en utilisant la balise <ul>
et des balises <li>.
9. Insérez une image en utilisant la balise <img>. Assurez-vous de spécifier le chemin
correct de l'image et ajoutez un texte alternatif avec l'attribut alt.
10. Ajoutez un lien hypertexte vers une deuxième page web et qui contient la même
image.
11. Créez un tableau de cinq lignes et de quatre colonnes.
12. Fusionner la deuxième et la troisième colonne de la deuxième ligne.
13. Fusionner les lignes numéro 4 et 5 de la première colonne.
14. Remplissez le tableau avec des données simples.
15. Enregistrez le fichier et ouvrez-le dans un navigateur pour vérifier le résultat.
Éléments de réponse :
Vérification :
Le fichier "[Link]" doit afficher tous les éléments appris dans les exercices
précédents.
