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

  • 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" :)

  • mram Administrateur

    Merci, on corrige ça.

  • vahan.barsamian

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

  • aymenbarka-62

    bonjour, svp j'ai un probleme , je clic sur soumettre mais il ne passe pas pour le prochain exercice

4 Commentaires

  • 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 à 15h37

  • mram

    mram Administrateur

    Merci, on corrige ça.

    le 05/07/2016 à 19h02

  • 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 à 08h59

  • mram

    mram Administrateur

    Bonjour, c'est corrigé merci .

    le 16/08/2017 à 10h17

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>