Cet exercice propose d’utiliser les outils de développement et fonctionnalités offertes par les navigateurs pour récupérer des données présentes sur une page web afin d’en construire une autre.
Avant de commencer
Comment utiliser l’inspecteur de code sur Firefox (version 65) ?
- Ouvrez le menu de Firefox en cliquant sur le bouton en haut à droite.
- Choisissez l’option Développement Web puis Outils de développement pour afficher le panneau.
- Utilisez l’icône
pour activer l’inspecteur de code.
- Survolez les éléments de la page HTML et observez le contenu du panneau Outils de développement.
- Si vous cliquez l’élément survolé sera alors affiché dans la partie HTML.
Comment utiliser l’inspecteur de code sur Chrome (version 68) ?
- Ouvrez le menu de Chrome en cliquant sur le bouton en haut à droite.
- Choisissez l’option Plus d’outils puis Outils de développement pour afficher le panneau.
- Utilisez l’icône
pour activer l’inspecteur de code.
- Survolez les éléments de la page HTML et observez le contenu du panneau Outils de développement.
- Si vous cliquez l’élément survolé sera alors affiché dans la partie HTML.
Consignes de l’exercice
Créez un dossier racine local pour stocker les différents fichiers de l’exercice.
Créez une nouvelle page HTML sous le nom exo5_page1.html en prenant soin de bien placer votre fichier dans le dossier racine créé précédemment.
Saisissez la structure de base suivante dans la page que vous venez de créer :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Explorateur de code</title> </head> <body> </body> </html>
Ajoutez un titre de niveau 1 contenant le texte « Arizona Dream » et un titre de niveau deux contenant le texte « Synopsis ».
Afficher la solutionRécupérez le texte ci-dessous et ajoutez-le à la suite de votre page HTML en supprimant automatiquement toute la mise en forme (gras, italique, etc.).
Après la mort tragique de ses parents dans un accident de voiture, Axel Blackmar a tourné le dos à son passé. Trois ans plus tard, installé à New York, il a trouvé son équilibre et travaille pour le ministère de la Pêche et de la Chasse. Mais son oncle Léo le rappelle dans sa ville natale, en Arizona. Là, Axel va devenir le jouet des rêves de deux femmes qui ont vécu un passé terrible, de ceux de son oncle et peut-être des siens…
Afficher un indiceAfficher la solutionAjoutez un titre de niveau deux contenant le texte « Secret de tournage ».
Afficher la solutionRécupérez le texte ci-dessous et ajoutez-le à la suite de votre page HTML en conservant toute la mise en forme (les couleurs doivent donc être conservées pendant votre copier/coller).
Alors que la version d’origine, diffusée en Europe, a une durée de 142 minutes, le film sorti aux Etats-Unis en 1993 était amputé de quelques 23 minutes ! Cette situation fut ensuite partiellement résorbée, la version complète connaissant également, mais plus tardivement (janvier 1995) et de façon encore plus restreinte, les honneurs d’une sortie en salles. En revanche, seule la version courte est disponible en vidéo sur le territoire américain…
Afficher un indiceAfficher la solutionSi la question précédente à été bien traitée, le texte correspondant à la partie « Secret de tournage » contient 3 couleurs (du rouge, du orange et du violet). Uniformisez donc les couleurs en choisissant une seule des trois et en l’appliquant sur les trois textes (« version d’origine », « version complète » et « En revanche »).
Afficher la solutionAjoutez un titre de niveau deux contenant le texte « Images ».
Téléchargez l’image ci-dessous, enregistrez-la dans votre dossier racine et intégrez-la dans votre page.
Afficher la solutionTéléchargez l’image ci-dessous puis enregistrez-la dans votre dossier racine, afin de l’intégrer dans votre page. La méthode employée à la question précédente ne va pas forcément marcher…
Dimensionnez les deux images avec les mêmes dimensions que sur la page d’origine.
Afficher un indiceAfficher la solutionAjoutez un titre de niveau deux contenant le texte « Casting ».
Récupérez le tableau ci-dessous pour l’intégrer dans la page web.
Acteur | Personnage |
---|---|
Johnny Depp | Axel Blackmar |
Jerry Lewis | Leo Sweetie |
Faye Dunaway | Elaine Stalker |
Lili Taylor | Grace Stalker |
Vincent Gallo | Paul Leger |
Paulina Porizkova | Millie |
Michael J. Pollard | Paul |
Emir Kusturica | le client du bar |
Ajoutez un titre de niveau deux contenant le texte « Musiques ».
Téléchargez le fichier audio ci-dessous et intégrez-le dans votre page web. Attention, il s’agit bien de télécharger le fichier et pas simplement de copier/coller le code.
Afficher un indiceAfficher la solutionUne seconde musique est présente dans la page, mais le lecteur est invisible… Retrouvez-la et intégrez-la de manière visible à la suite de la précédente.
Afficher un indiceAfficher la solutionAjoutez un titre de niveau deux contenant le texte « Bande annonce ».
Retrouvez la bande-annonce du film sur un site comme Youtube ou Dailymotion et intégrez-la dans la page. Il s’agit d’avoir un lecteur permettant de visualiser la vidéo sur votre page et pas d’ajouter un lien vers la page de la vidéo sur Youtube ou Dailymotion !
Afficher un indiceAfficher la solutionSauf mention contraire*, l'article Inspecteur de code [HTML05] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.