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

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.
2. Ajouter un lien (<a>) pointant vers un site que vous aimez (par exemple, vers Wikipédia ou YouTube).
3. Ajouter une image (<img>) avec une description alternative (l’attribut alt).

CSS

Memento CSS

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

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

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 !