Aller au contenu

Exercice 3 : Navigation avec iframes

Objectif

Comprendre l'utilisation des balises <iframe> pour intégrer des contenus HTML dans une page web et créer une navigation multi-pages basique.

Création du dossier de l'exercice

Avant de commencer cet exercice : créer le dossier de l'exercice.

1
2
# sous Git bash
mkdir -p exercice-3

Avec VS Code :

  • Ctrl+Shift+P > Create Folder
  • Ou sélectionnez le dossier parent dans l'explorateur de fichiers puis entrez le nom du nouveau dossier : exercice-3
  • Ou faites un clic droit sur le dossier parent > New Folder > entrez le nom : exercice-3
  • Ou File > New Folder > entrez le nom : 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

Checklist avant de soumettre

  • Fichiers créés : index.html, header.html, navigation.html, accueil.html, apropos.html, contact.html, iframe-styles.css
  • Structure avec 3 iframes (header, navigation, contenu)
  • Navigation interactive fonctionnelle (liens avec target)
  • Styles CSS appliqués (sans bordures, ombres)
  • Attributs title et sandbox ajoutés

Ouvrez le terminal intégré Ctrl+'

1
2
3
4
5
6
git status
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

Dans VS Code, utilisez l'interface graphique pour ajouter, committer et pousser vos changements:

  1. Cliquez sur l'icône "Source Control" dans la barre latérale
  2. Ajoutez vos changements en cliquant sur le signe "+"
  3. Commitez vos changements en saisissant un message de commit
  4. Poussez vos changements en cliquant sur l'icône "Push"

Ajout de captures d'écran dans la PR Feedback

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Pull requests" > Ouvrir une pull request "Feedback"

  3. Ajoutez un commentaire dans la PR avec le texte suivant :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    ## Exercice 3 : Navigation avec iframes

### Ce qui a été réalisé

- [x] Création de `exercice-3/index.html` (page principale)
- [x] Création de `exercice-3/header.html`
- [x] Création de `exercice-3/navigation.html`
- [x] Création de `exercice-3/accueil.html`
- [x] Création de `exercice-3/apropos.html`
- [x] Création de `exercice-3/contact.html`
- [x] Création de `exercice-3/iframe-styles.css`
- [x] Structure avec 3 iframes (header, navigation, contenu)
- [x] Navigation interactive avec attribut `target`
- [x] Liens fonctionnels : Accueil, À propos, Contact
- [x] Attributs `name` sur les iframes
- [x] Attributs `title` pour l'accessibilité
- [x] Attributs `sandbox` pour la sécurité
- [x] Attribut `loading="lazy"` pour les performances
- [x] CSS : suppression bordures, ajout ombres, mise en page harmonieuse

### Captures d'écran

#### Vue d'ensemble avec les 3 iframes

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Structure avec iframes](URL_de_votre_capture)

#### Navigation interactive


<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Clic sur lien menu](URL_de_votre_capture)

#### Page "À propos" chargée

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Iframe contenu](URL_de_votre_capture)

#### Vue responsive (optionnel)

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Responsive](URL_de_votre_capture)

### Points techniques

- HTML : `<iframe>` avec attributs `name`, `title`, `sandbox`, `loading`
- Navigation : `<a target="nom_iframe">` pour charger contenu dans iframe spécifique
- CSS : layout avec dimensions fixes ou flexibles pour les iframes

### Questions pour l'enseignant

- (optionnel) Listez vos questions ici

  4. Ajoutez vos captures d'écran en glissant-déposant les images dans le champ de description

  5. Cliquez sur "Create pull request"
  6. N'oubliez pas : Ne cliquez PAS sur "Merge pull request" !

Captures d'écran à inclure dans votre PR

  • Vue d'ensemble de la page avec les 3 iframes
  • Navigation : clic sur un lien du menu
  • Page "À propos" chargée dans l'iframe principale
  • Démonstration responsive (optionnel)

13. Evaluation

Pour lancer l'évaluation automatique, créez une "tag" sur votre branche main avec le nom exercice3 et poussez-la sur GitHub.

1
git tag exercice3 && git push origin exercice3

Voir Classroom50

Vous trouverez un exemple de commande pour créer la "tag" dans la page du devoir du TP (Assignment) sur Classroom50.