Exercice 3 : Navigation avec iframes¶

1
2
3
4
5

git checkout main
git pull origin main
git checkout -b exercice-3
mkdir exercice-3
cd exercice-3

1. Créer la structure de base avec iframes¶

• Créez une page principale appelée index.html qui utilisera des balises <iframe> pour intégrer différents contenus.

• La page doit contenir une mise en page avec trois sections principales :

  • Un en-tête fixe en haut de la page
  • Une barre latérale de navigation à gauche
  • Une zone de contenu principale à droite

2. Créer les pages HTML à intégrer¶

• Créez au moins 4 pages HTML distinctes :
• header.html: un en-tête avec le titre du site et un logo
• navigation.html: un menu de navigation avec des liens
• accueil.html: une page d'accueil avec du contenu de bienvenue
• apropos.html: une page "À propos" avec des informations sur le site
• contact.html: une page de contact avec des informations de contact

3. Intégrer les iframes dans la page principale¶

• Dans index.html, utilisez des balises <iframe> pour afficher :

  • L'en-tête dans une iframe fixe en haut
  • Le menu de navigation dans une iframe sur le côté gauche
  • Le contenu principal dans une iframe au centre

• Configurez les attributs des iframes :

  • Définissez la largeur et la hauteur appropriées
  • Utilisez l'attribut name pour identifier chaque iframe
  • Ajoutez des attributs title pour l'accessibilité

4. Créer une navigation interactive¶

• Dans navigation.html, créez des liens qui chargeront différentes pages dans l'iframe de contenu principal.
• Utilisez l'attribut target pour spécifier quelle iframe doit afficher le contenu cliqué.
• Ajoutez au moins 3 liens : Accueil, À propos, et Contact.

5. Styliser avec CSS¶

• Créez un fichier CSS nommé iframe-styles.css.
• Appliquez les styles suivants :
  • Supprimez les bordures par défaut des iframes
  • Ajustez les dimensions des iframes pour créer une mise en page harmonieuse
  • Ajoutez des ombres ou des bordures subtiles pour délimiter visuellement les sections
  • Assurez-vous que la mise en page est responsive

6. Considérations de sécurité et performance¶

• Ajoutez l'attribut sandbox aux iframes pour contrôler les permissions
• Utilisez l'attribut loading="lazy" pour optimiser les performances
• Assurez-vous que toutes les iframes ont un attribut title descriptif pour l'accessibilité

7. Livraison de l'exercice¶

1
2
3
4
5

git add .
git commit -m "feat(exercice-3): structure HTML avec iframes"
# git commit -m "feat(exercice-3): navigation interactive entre pages"
# git commit -m "style(exercice-3): CSS pour mise en page harmonieuse"
git push origin exercice-3