Exercice 1/9

  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 1/9

Maintenant que vous connaissez les grands principes du positionnement en CSS, vous allez vous en servir afin de créer un layout de base. C'est-à-dire un modèle de page qui pourra servir comme structure de base pour un site web.

Vous allez reproduire en HTML/CSS le schéma illustré ci-contre.

Quelques précisions avant de commencer :

  • Vous connaissez la balise div pour créer des blocs et structurer une page web;
  • Le layout que vous allez mettre en page possède une structure HTML utilisant non pas la balise générique div mais de nouvelles balises HTML5 qui ont un sens sémantique, tout comme la balise p pour les paragraphes;
  • header : pour l'en-tête d'une page web;
  • footer : pour le pied de page;
  • nav : pour la navigation, contient généralement les liens du menu;
  • section : pour délimiter les parties thématiques d'un site web. Une section peut avoir elle-même un header ou un footer;
  • article : pour présenter du contenu;
  • aside : pour présenter des informations additionnelles;

Il n'y a pas de restrictions à proprement parler quant à l'organisations des balises : un article peut lui-même avoir un header et un footer, etc.

Commentaires les mieux notés

8 Commentaires

  • j.b11-24

    j.b11-24

    Le bouton soumettre ne fonctionne pas et j'ai une erreur "503 Service Unavailable No server is available to handle this request."

    le 06/09/2022 à 08h20

  • Patricio M

    Patricio M Admin

    Déconnecte-toi, ferme ton navigateur et recommence à nouveau. Je pense que cela doit fonctionner

    le 06/09/2022 à 08h24

  • vahan.barsamian

    vahan.barsamian

    bonjour, egalement 3eme ligne en partant du bas vous mettez dse au lieu des sur la ligne aside:...

    le 10/08/2017 à 04h59

  • mram

    mram Admin

    Bonjour, c'est corrigé merci .

    le 16/08/2017 à 06h17

  • mram

    mram Admin

    Merci, on corrige ça.

    le 05/07/2016 à 15h02

  • alexpers

    alexpers

    Juste pour vous dire qu'il y a une petite coquille : "Vous connaissez la balise div poru créer des blocs" > "pour" au lieu de "poru" :)

    le 05/07/2016 à 11h37

Pour publier un commentaire, vous devez vous connecter.
index.html
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Créer un layout de base avec HTML et CSS</title> </head> <body> <div> <img src="https://user.oc-static.com/files/343001_344000/343677.png"> </div> <p>Crédit : <a href="https://openclassrooms.com/fr/">OpenClassrooms</a></p> </body> </html>
http://localhost:8080