Manipuler le HTML et le CSS Durée : 1,5 h

Seconde Thème 3 – Le Web : TP1 Page 1/2

Objectif : Etudier et manipuler une page HTML simple

Matériel : PC avec connexion à internet, éditeur de texte (Notepad ++ ), navigateur Mozilla Firefox

 Le HTML permet de structurer une page web et d’y mettre du contenu.

 Le CSS est dédié à la mise en forme de la page.

La programmation se fait avec un éditeur de texte (ici Notepad++) et un navigateur (ici Firefox) pour visualiser
le résultat.

ETAPE 1 : Comment exécuter et essayer le fichier.html ?

1. Créez un nouveau dossier nommé Theme 3 – Le Web dans votre dossier personnel SNT.
Puis créez un dossier TP1 dans ce dossier.
2. Téléchargez les 3 fichiers (index.html, style.css et image_sedan.png) et rangez-les donc dans ce
nouveau dossier \SNT\Theme 3 – Le Web\TP1\…

3. Ouvrez la page index.html (cliquez deux fois sur son nom). Assurez-vous que c’est bien le
navigateur Firefox qui ouvre ce fichier par défaut, sinon faire en sorte que ce soit bien votre
navigateur par défaut.

ETAPE 2 : Etudier la page web

Faites un clic droit dans la page, puis choisissez Examiner l’élement dans le menu déroulant
SNT Manipuler le HTML et le CSS
TP Page 2/2

3. Double-cliquez entre les balises <h1> et </h1> ou faites un clic droit, puis choisissez Modifier
comme HTML et modifiez le titre de la page. Validez en cliquant ailleurs dans l’inspecteur ou
sur la page. Ctrl + R permet de retrouver la page initiale.

4. En utilisant le menu {} Editeur de style du navigateur,vous avez accès la partie CSS, modifier la
couleur de fond de la page aqua par une autre couleur (il suffit de taper une lettre et des noms
de couleur vous seront proposés).

ETAPE 3 : Modifier la page HTML et sa présentation. Ne pas oublier d’indiquer le

langage utilisé : HTML ou CSS
5. Ouvrez les fichiers index.html puis style.css avec Notepad++. selon le fichier

6. Complétez le fichier index.html par des informations figurants dans le fichier Château de
Sedan.docx

7. Compléter aussi le pied de page avec vos « nom prénom ».

8. Aidez-vous de l’inspecteur pour effectuer différentes modifications. Une fois votre choix validé,
copiez-collez la ligne ou la partie concernée dans les fichiers index.html ou style.css et les
sauvegarder.