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
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
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>
Ajouter un titre de niveau un contenant le texte « Arizona Dream ».
Ajoutez un titre de niveau deux contenant le texte « Synopsis ».
Copiez/collez 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 indiceAjoutez un titre de niveau deux contenant le texte « Secret de tournage ».
Copiez/collez 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 indiceSi 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 »).
Ajoutez un titre de niveau deux contenant le texte « Images ».
En utilisant le menu contextuel de votre navigateur (clique droit sur l’image), récupérez l’image ci-dessous afin de l’intégrer dans votre page.
Récupérez l’image ci-dessous afin de l’intégrer dans votre page La méthode employée à la question précédente ne vas pas forcément marcher…
Dimensionnez les deux images avec les mêmes dimensions que sur la page d’origine.
Afficher un indiceAjoutez 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 ».
Récupérez la musique ci-dessous et intégrez-la dans la page web.
Une 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 indiceAjoutez 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 bien 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 indice