Historique des conversations
Chargement...
Chapitre 9 : Les iframes en HTML
Chapitre 9 : Les iframes en HTML
Définition
Une <iframe> permet d’intégrer un contenu externe (page web, carte, vidéo, etc.) dans une page HTML.
Syntaxe de base
<iframe src="https://www.example.com" width="600" height="400"></iframe>Elle affiche la page example.com dans un cadre de 600 x 400 pixels.
Exemple : intégrer une vidéo YouTube
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>Exemple : intégrer une carte Google Maps
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!..."
width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy"></iframe>Précautions
- Certains sites bloquent l’intégration via iframe (protection X-Frame-Options).
- Utiliser des tailles adaptées à l’affichage.
- Ne pas abuser des iframes pour des contenus essentiels.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 9
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Iframe basique
Atelier #1Intègre la page 'https://example.com' dans un cadre de 500x300 pixels.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<iframe src="https://example.com" width="500" height="300"></iframe>
#2 — Bordure
Atelier #2Comment supprimer la bordure par défaut d'une iframe (attribut ou CSS) ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<iframe src="page.html" style="border:none;"></iframe>
#3 — Youtube
Atelier #3Quel est le code type pour intégrer une vidéo Youtube ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
#4 — Cible de lien (Target)
Atelier #4Donne le nom 'monCadre' à une iframe et crée un lien qui s'ouvre dedans.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<iframe name="monCadre" src=""></iframe>
<a href="https://example.com" target="monCadre">Ouvrir dans l'iframe</a>
#5 — Sécurité
Atelier #5Quel attribut permet de restreindre les actions dans une iframe (ex: sandbox) ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<iframe src="page.html" sandbox></iframe>