Note préliminaire : les manipulations suivantes doivent être réalisé sans utiliser l'Intelligence Artificiel, celle-ci est autorisée seulement sur la dernière partie "Ajouter un peu de JavaScript"
Créer le dossier de travail
Créer des sous-dossiers
medias → pour stocker images et vidéoscss → pour stocker la feuille de styleCréer le fichier HTML
index.html dans Atelier et copiez-y le code suivant :<!DOCTYPE html>
<html>
<head>
<title>Mon Film Préféré</title>
</head>
<body>
<h1>TITRE DU FILM</h1>
<img src="" /> <!-- Affiche du film (à insérer) -->
<br />
Informations générales
Année de Sortie : <br />
Réalisateur : <br />
Acteurs Principaux : <br />
Genre : <br />
Résumé
<!-- utiliser <p> -->
Bande-Annonce du Film
<!-- à insérer -->
Sources des informations et médias
</body>
</html>
Enregistrer vos modifications.
Double-cliquez sur index.html pour l’ouvrir dans un navigateur.
Faites les modifications sur votre fichier html progressivement.
A chacune des modifications apportées, enregistrer votre fichier puis actualiser l'aperçu dans votre navigateur pour vérifier vos modifications.
Cette page sera composée d'un gros titre (le titre du film) puis de 4 titres de niveau inférieur. Pour ces 4 derniers, on utilisera la balise <h2>
Transformez les sections en <h2> :
<h2>Informations générales</h2>
<h2>Résumé</h2>
<h2>Bande-Annonce</h2>
<h2>Sources</h2>
Rechercher sur internet la balise permettant de mettre "en gras" du texte et appliquer cette mise en forme sur les items de la partie Informations générales : Année de sortie, Réalisateur, Acteurs principaux, Genre.
Remplissez les informations générales à partir de site web.
Les acteurs principaux (3 suffisent) doivent apparaitre sous forme de liste à puces (aidez vous d'une recherche sur le Web:
Téléchargez l’affiche du film depuis un site web.
Placez-la dans le dossier medias et nommez-la affiche.jpg ou affiche.png.
Modifiez la balise <img> :
<img src="medias/affiche.jpg" />
💡 si besoin, vous pouvez redimensionner :
<img src="medias/affiche.jpg" width="300" />
Depuis YouTube : Partager → Intégrer → Copier le code <iframe>
Dans les options de l'iframe, pensez à activé le mode confidentialité avancé.
Collez-le sous le titre Bande-Annonce.
Activez le mode confidentialité avancé.
Exemple :
<iframe width="560" height="315" src="https://www.youtube.com/..." frameborder="0" allowfullscreen></iframe>
Ajoutez vos sources dans la section Sources des informations et médias sous forme de lien hypertexte.
Syntaxe (à adapter en fonction de vos sources) :
<a href="https://www.imdb.com">IMDb</a>
Ajoutez vos sources dans la section Sources des informations et médias.
Créez un fichier monstyle.css dans le dossier css :
body { background-color: pink; }
h1 { color: blue; }
h2 { font-variant: small-caps; color: green; }
strong { background-color: gold; }
Liez-le en ajoutant ce code dans le <head> de votre page HTML :
<link href="css/monstyle.css" rel="stylesheet" type="text/css" />
Visualisez le rendu et personnalisez les couleurs à votre goût.
JavaScript permet d’animer la page, ajouter un script permettant d'afficher l'heure en temps réel sur la page.
L'utilisation de l'IA est autorisée sur cette partie.
Vérifiez votre code : indentation, balises fermées, retours à la ligne de manière à avoir un code "propre" dans sa mise en forme.