¶ Construire une page Web
¶ Le langage HTML
Le langage HTML est un langage de description utilisé pour construire la structure et le contenu d'une page Web. Le code HTML est écrit dans un fichier texte qu'on peut éditer avec un éditeur de texte comme Notepad++ ou Bracket.
C'est un langage qui utilise des balises comme <p>, <h1> ou <div>.
L'objectif de cette activité de construire votre première page web autour de votre film préféré.
¶ Exercice 1 - Mise en place du HTML
Dans ce premier exercice, nous nous intéresserons au langage HTML pour mettre en place la structure, les textes et les images.
Question 1 - Dans votre répertoire personnel, créer un dossier TP2_HTML_CSS dans le dossier Travail 
SNT Séquence 1
Question 2 - Afficher les extensions de noms de ficher. Pour cela, il faut :
- Cliquer sur l'onglet
Affichage - Cocher la case
Extensions de noms de fichieren haut de la fenêtre.
Question 2 - Dans le dossier TP2_HTML_CSS, créer un nouveau fichier texte. Renommer ce fichier en index.html.
Pour créer un nouveau fichier, il suffit de faire Clic-droit
Question 3 - Ouvrir le fichier index.html avec l'éditeur de texte NotePad++. Pour cela, faites Clic-droit Edit with NotePad++.
Le logiciel NotePad++ est un éditeur de texte utilisé pour créer des programmes informatiques et des sites Web.
¶ Exercice 2 - Ajouter des balises HTML
Question 1 - Depuis NotePad++ et dans le fichier index.html, copier/coller le code suivant. Il correspond la structure minimale pour construire une page Web.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon document</title>
</head>
<body>
</body>
</html>
Pour voir vos modifications, il suffit enregistrer votre travail Ctrl + S et d'ouvrir le fichier
index.htmlavec un navigateur Web.
Question 2 - Modifier le titre de votre page Web.
Question 3 - Ajouter un titre de niveau 1 pour afficher le titre du film.
Question 4 - Ajouter une image avec l'affiche du film.
Question 5 - Ajouter un titre de niveau 2 avec le texte « Informations générales du film ».
Question 6 - Ajouter une liste non-ordonnée pour afficher les informations du film. Vous pouvez vous aider des sites Allociné et Imdb pour retrouver les informations de votre film.
Question 7 - Ajouter un titre de niveau 2 avec le texte « Bande d'annonce du film ».
Question 8 - Ajouter la vidéo de la bande d'annonce du film. Pour cela :
- Aller sur le site Youtube.com
- Rechercher la vidéo de la bande d'annonce.
- Cliquer sur Partager Intégrer.
- Sélectionner le code qui commence par
<iframe>et copiez-le. - Coller le code en dessous du titre
Bande d'annoncedans votre fichierindex.html.
<iframe width="560" height="315" src="https://youtube.com/..."></iframe>
Votre page doit ressembler à celle ci-dessous :
Question 9 - Ajouter les balises nécessaires pour afficher un titre et les liens vers Allociné et Imdb.
Question 10 - Ajouter les balises nécessaires pour afficher 5 autres films du même réalisateur.
Question 11 - Tout en bas de votre page, ajouter un paragraphe avec cette phrase : « Ce site est réalisé par prénom nom en seconde X du Lycée Gustave Eiffel ».
Appeler votre enseignant pour valider votre exercice.
Votre site doit ressembler à ça : Voir le site d'exemple
