Aller au contenu principal

Un site complet

On vous demande d'améliorer un site Internet sur l'observation des oiseaux.

Améliorer la structure du site Web​

  • Nous allons définir les zones du site Web :
    • l'en-tête,
    • le menu de navigation,
    • et le contenu principal.

Point de départ​

  • Pour commencer, veuillez décompressez l'archive assets.zip sur votre ordinateur, dans votre dossier "Documents".

  • assets.zip contient les fichiers nécessaires :

    • le fichier HTML dans lequel vous allez ajouter des balises pour la structure de la page,
    • le fichier CSS pour le style de la page,
    • les images utilisées dans la page.

Améliorer la mise en page​

La page devra contenir​

  • un entête sur toute la largeur de la page avec le titre de la page,
  • le logo du site et le menu de navigation.
  • Le titre et le logo apparaîtront côte à côte,
  • et la navigation sera juste au-dessous du menu,
  • une zone de contenu principal avec 2 colonnes :
    • un bloc principal avec le texte de bienvenue
    • et une barre latérale avec des vignettes d'images,
  • un pied de page avec les informations de droits d'auteur et les crédits.

Consignes​

Vous devez ajouter les balises appropriées pour :

  1. l'entête ;
  2. le menu de navigation ;
  3. le contenu principal ;
  4. le texte de bienvenue ;
  5. la barre latérale avec les images ;
  6. le pied de page.
  7. appliquer les styles à la page, en ajoutant un élément <link> pour intégrer le fichier CSS fourni.

Valider son code HTML​

  • Utilisez le W3C HTML validator pour valider votre HTML.
  • Vous aurez des points bonus si la validation est bonne.

    La ligne googleapis est une ligne utilisée pour importer des polices personnalisées dans la page, à partir du service Google Fonts. Elle ne sera pas validée, donc ne vous en inquiétez pas.

Conseils et astuces​

  • Il n'est pas nécessaire de connaître le CSS pour faire cet exercice,
  • vous avez juste besoin de placer les CSS fournies dans l'élément HTML.
  • Si vous êtes bloqué et ne voyez pas où mettre tel élément,
  • vous pouvez dessiner l'organisation des blocs sur une feuille.

Valider son code HTML​

Exemple​

  • Le TP terminé devra afficher :

    • une page Web unique sur l'observation des oiseaux,
    • avec des couleurs vertes
    • comprenant un entête "Observons les oiseaux",
    • des photos d'oiseaux
    • et un message de bienvenue.

  • Voici un exemple qui s'affiche lorsque le TP est terminé.