1) On observe des pages web, comme celle-ci, en observant leur « code source » à l’aide d’un « Ctrl-U ».
2) Cours : une page html (HyperText Markup Language) a une structure de base qui ressemble à celle-ci :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
...
<!-- Le reste du contenu -->
...
</body>
</html>
C’est un langage de balises.
3) Lire le tutoriel de Mozilla sur les balises en cliquant ici
4) Créer une page web, à l’aide d’un éditeur de texte. Je suggère Notepad++ sous Windows.
Copier la structure de base
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
...
<!-- Le reste du contenu -->
...
</body>
</html>
et enregistrer sous « index.html » par exemple dans son dossier « devoirs » dans le dossier « classe » sur le réseau du lycée. Dans type de fichier, choisir évidemment HyperText Markup Language File .html !
Modifier le « Titre de la page » dans la balise
<title>Titre de la page</title>
et observer le changement en ouvrant cette page dans un navigateur. On préférera Mozilla Firefox à Internet Explorer !
5) Agrémenter cette page web, à l’aide de l’éditeur de texte Notepad++.
On utilisera le tutoriel de Mozilla sur les balises (cliquer ici) pour
- Rajouter des paragraphes et du texte à l’intérieur des paragraphes en le mettant en forme avec des passages en gras, en italique…
- Rajouter un lien pointant vers cette page (celle que vous êtes en train de lire)
- Rajouter une image
- Rajouter une liste non ordonnée
6) Fin des tests ! Le TP lui même :
- Créer une page
film.html dans le dossier « devoirs » dans le dossier « classe » sur le réseau du lycée.
- Capturer ou enregistrer une des images du film Imitation Game vu en janvier dernier. La sauvegarder en .png dans le même dossier que
film.html sous image.png
- Ajouter cette image dans un paragraphe dans votre page
film.html
- Expliquer ce que vous avez aimé dans une liste non ordonnée
- Mettre en forme !
!!!
