TP1 - Prise en main

Objectifs

1. Comprendre la structure des pages web ;
2. Manipuler différentes balises.

TP

L'ensemble du TP se fait sur le logiciel Notepad++ (téléchargeable ici) OU BIEN avec l'éditeur VisualStudio Code (téléchargable ici).

Memento de balises

Un mémento sur les balises à utiliser ainsi que leurs attributs est disponible sur ce lien.

HTML

✏️Exercices

1
Créer une page HTML simple qui contient :
• Un titre principal (<h1>) indiquant : "Bienvenue sur ma page".
• Un paragraphe (<p>) décrivant vos passions ou intérêts.
• Une liste à puces (<ul>) contenant trois choses que vous aimez.
Fait
2
Ajouter un lien (<a>) pointant vers un site que vous aimez (par exemple, vers Wikipédia ou YouTube).
Fait
3
Ajouter une image (<img>) avec une description alternative (l’attribut alt).
Fait

CSS

Memento CSS

Un mémento des propriétés CSS est disponible sur ce lien.

✏️Exercices

1
Créer un fichier exercice1.css, et rajouter dans la page HTML précédente la balise permettant d'importer ce fichier.
Fait
2
Changer la couleur de fond de la page en rouge.
Fait
3
Aligner tous les titres au centre de la page, en les mettant en gras.
Fait
4
Mettre les liens en bleu.
Fait
5
Ajouter une bordure autour d'une image, de taille 2px, solid de couleur vert.
Fait

Page web perso

Vous allez écrire une page web recensant différent éléments sur vous-même, en utilisant les balises vues en classe. Vous pouvez inscrire les éléments que vous souhaitez (même si ce n’est pas vous), à partir du moment où vous utilisez les balises suivantes :

• Faire des listes ;
• Insérer des images ;
• Mettre des hyperliens ;
• Faire des tableaux ;
• Mettre des titres ;
• Changer les effets du texte (gras ...).

Il faudra imbriquer des balises, c’est-à-dire par exemple :

• Mettre des listes dans des listes ;
• Mettre des images dans des tableaux ;
• Mettre des éléments dans des listes (tableau, image ...).

Vous rajouterez également du CSS pour embellir votre page du mieux possible !