- But: Placer les balises de base de la structure d'une page web.
- Utilisez Firefox (pas Chrome).
- Testez votre page après chaque modification.
- Toutes les balises sont des balises avec contenu.
- Ne passez à l'étape suivante que si la page vous l'a indiqué.
- Si une bordure jaune clignotante apparaît, c'est que des éléments sont mal placés.
- Téléchargez le dossier compressé dans votre espace de travail sur le disque D.
- Décompressez le fichier pour obtenir le dossier
rds. - Ouvrez le dossier
rds(et le fichierindex.html) dans VSCode.
- Dans la balise
<body>ajoutez un attributclassdont la valeur est "etape1". Visionnez le résultat. - Dans le contenu de l'élément
<body>, ajoutez un élément<div>ayant un attributclassdont la valeur est "interface". Visionnez les changements. Une version gris pâle de la page devrait être apparue. - Dans le contenu de cet élément interface, ajoutez 3 éléments : un
<div>de classe "content", un<footer>et un<header>. Faites attention de les placer dans le bon ordre logique! - Si la page est complète, passez à l'étape suivante.
- Changez la classe du
<body>pour "etape2". - Dans le
<header>, ajoutez dans cet ordre :- une
<section> - un
<nav> - une
<section>avec la classe "logo" - une
<section>avec leid"resultats"
- une
- Dans le
<div>de classe "content" :- Ajoutez 3 balises
<section>ayant la classe "colonne". - Aux balises
<section>, ajoutez respectivement dans cet ordre les classes "gauche", "centre" et "droite". Chaque balise devrait donc avoir une classe double.
- Ajoutez 3 balises
- Dans le
<footer>- Ajoutez un
<nav>. - Ajoutez un
<div>ayant l'attributidavec la valeur "copyright"
- Ajoutez un
- La page devrait vous indiquer que vous avez terminé.
Vous pouvez télécharger la solution pour comparer vos résultats.