Dans une page web moderne, on rencontre souvent des « conteneurs ». Cela peut s’apparenter à une boite/bloc dans laquelle on mettra du texte et de l’image, ou encore d'autres boites/blocs.
Cette boite/bloc pourra avoir des propriétés particulières (couleur, position, taille) que l'on pourra paramétrer avec CSS.
Mais en attendant de pouvoir faire du beau, il faut structurer son code html, c'est à dire créer des blocs avec des balises spécifiques.
Voici un exemple de structure :
1.2. Voici deux exemples, dans lesquels les blocs, poutant identiques au niveau nommage, ne sont pas au même endroit :
L'objectif final va être de réaliser le site suivant. Dans cette partie, vous allez seulement coder la "structure" de la page web.
Sur la partie droite, on voit le découpage en blocs.
Votre travail va donc consister à compléter le code HTML pour indiquer les différents blocs (header, nav, ...) avant de traiter l'ensemble avec CSS.
2.1. Récupérez le fichier "index6-debut.html". Ce fichier contient le code html de la page web des minions, code que vous allez compléter.
2.2. Dans le code HTML, placez une balise <div>...</div> qui "encadre" tout le code visible de votre page.
2.3. Placez les balises <header>...</header>, les balises <nav>...</nav> et les balises <footer>...</footer>
2.4. Placez les balises <article>...</article> autour de chaque biographie de minion.
2.5. Placez une balise <div>...</div> qui "encadre" les 3 articles.
2.6. Ajoutez un commentaire en face de chaque balise de bloc que vous venez d'ajouter. Par exemple, vous pouvez indiquer "Début du menu" en face de <nav> et "Fin du menu" en face de </nav>.
2.6. Effectuez la validation W3C. Vérifiez l'indentation, l'orthographe, la grammaire, les commentaires.
2.7. Créer un fichier .zip contenant tout votre dossier HTML-CSS et envoyez-le à votre professeur.