# TP 3 : Ma premiere page web en CSS --- ## Objectifs - Creer une page web personnelle en HTML - Decouvrir le CSS pour la mise en forme - Appliquer des couleurs, des polices, des bordures et des marges - Decouvrir les balises semantiques HTML5 --- ## Presentation du projet Vous allez creer **votre propre page web** sur le theme de votre choix : - Un sport - Un artiste ou un genre de musique - Un pays ou une destination de voyage - Un jeu video - Tout autre sujet qui vous passionne ! Vous partirez d'un fichier HTML de base (`tp3_template.html`) et d'un fichier CSS (`tp3_style.css`) que vous allez completer etape par etape. ### Preparation 1. Ouvrez les fichiers `tp3_template.html` et `tp3_style.css` dans **Notepad++** 2. Ouvrez `tp3_template.html` dans votre navigateur 3. A chaque modification, sauvegardez dans Notepad++ (Ctrl+S) puis rafraichissez le navigateur (F5) --- ## Etape 1 : La structure HTML (15 min) ### Consigne Ouvrez le fichier `tp3_template.html`. Vous verrez une structure de base deja en place. Votre travail est de **remplir le contenu** selon votre theme. ### A faire 1. **Modifiez le titre** de la page (balise ``) avec le nom de votre sujet 2. **Modifiez le titre principal** (`<h1>`) avec le nom de votre sujet 3. **Redigez le premier paragraphe** : presentez votre sujet en 2-3 phrases 4. **Completez la section "Pourquoi j'aime..."** : - Modifiez le sous-titre `<h2>` - Ajoutez au moins **3 elements** dans la liste `<ul>` 5. **Ajoutez une image** : - Trouvez une image libre de droits sur Internet - Enregistrez-la dans le meme dossier que votre fichier HTML - Completez la balise `<img>` avec le bon chemin et une description 6. **Ajoutez des liens** : - Dans la section "Pour en savoir plus", ajoutez au moins **2 liens** vers des sites en rapport avec votre sujet ### Verifiez ! Sauvegardez et rafraichissez le navigateur. Votre page doit afficher : - Un titre - Un paragraphe de presentation - Une liste a puces - Une image - Des liens cliquables --- ## Etape 2 : Decouvrir le CSS (15 min) ### Comment ca marche ? Le fichier `tp3_style.css` est deja lie a votre page HTML grace a cette ligne dans le `<head>` : ```html <link rel="stylesheet" href="tp3_style.css" /> ``` Le CSS s'ecrit sous cette forme : ```css selecteur { propriete: valeur; } ``` Le **selecteur** cible un element HTML. La **propriete** definit ce qu'on modifie. La **valeur** definit comment on le modifie. ### A faire Ouvrez `tp3_style.css` et effectuez les modifications suivantes : **1. Couleur de fond de la page** Trouvez la regle `body` et modifiez la couleur de fond (`background-color`). Choisissez une couleur qui correspond a votre theme ! Exemples de couleurs : - `#f0f8ff` (bleu tres clair) - `#fff8dc` (creme) - `#f0fff0` (vert tres clair) - `#fff0f5` (rose tres clair) > Outil pratique : https://htmlcolorcodes.com/fr/ **2. Couleur et police du titre** Modifiez la regle `h1` : - Changez la couleur du texte avec `color` - Changez la police avec `font-family` (exemples : `Arial`, `Georgia`, `Verdana`, `"Trebuchet MS"`) **3. Couleur du texte** Modifiez la regle `p` pour changer la couleur des paragraphes. **4. Style des liens** Modifiez la regle `a` pour changer la couleur des liens. Essayez aussi d'enlever le soulignement : ```css a { color: darkorange; text-decoration: none; } ``` ### Verifiez ! Votre page devrait maintenant avoir : - Une couleur de fond personnalisee - Un titre colore avec une police de votre choix - Des paragraphes d'une couleur harmonieuse - Des liens d'une couleur differente --- ## Etape 3 : Ameliorer la presentation (15 min) ### Les marges En CSS, deux proprietes controlent l'espace autour des elements : - **`margin`** : espace **exterieur** (entre l'element et ses voisins) - **`padding`** : espace **interieur** (entre le bord de l'element et son contenu) ``` +------ margin ------+ | +--- padding ---+ | | | Contenu | | | +---------------+ | +--------------------+ ``` ### A faire **1. Ajoutez du padding au body** pour que le contenu ne colle pas aux bords : ```css body { /* ... vos proprietes existantes ... */ padding: 20px 40px; } ``` **2. Ajoutez une bordure et un fond au titre** : ```css h1 { /* ... vos proprietes existantes ... */ background-color: #333; color: white; padding: 15px; border-radius: 8px; text-align: center; } ``` **3. Mettez en forme l'image** : ```css img { border: 3px solid #333; border-radius: 10px; max-width: 400px; } ``` `max-width: 400px` empeche l'image d'etre trop grande. `border-radius` arrondit les coins. **4. Stylisez la liste** : Ajoutez cette regle dans votre CSS : ```css ul { background-color: #eee; padding: 15px 30px; border-radius: 5px; } ``` ### Verifiez ! Votre page devrait maintenant etre bien plus agreable visuellement, avec des espaces, des bordures et des couleurs harmonieuses. --- ## Etape 4 : Les sections HTML5 (15 min) ### Introduction aux balises semantiques HTML5 propose des balises qui donnent du **sens** a la structure de la page : | Balise | Role | |--------|------| | `<header>` | En-tete de la page (titre, logo, banniere) | | `<nav>` | Zone de navigation (menu, liens principaux) | | `<main>` | Contenu principal de la page | | `<footer>` | Pied de page (auteur, mentions, liens secondaires) | Ces balises fonctionnent comme des `<div>` mais elles indiquent clairement le role de chaque section. ### A faire Dans votre fichier HTML, reorganisez votre page avec ces balises : 1. **Entourez votre titre `<h1>` avec `<header>`** : ```html <header> <h1>Mon sujet</h1> </header> ``` 2. **Ajoutez un `<footer>` en bas de page** : ```html <footer> <p>Page creee par [votre prenom] - SNT 2025</p> </footer> ``` 3. **Stylisez le footer** dans votre CSS : ```css footer { background-color: #333; color: white; text-align: center; padding: 10px; margin-top: 30px; border-radius: 5px; } ``` --- ## Bonus : Creer une deuxieme page Si vous avez termine en avance, voici un defi supplementaire : 1. **Creez un nouveau fichier** `page2.html` avec la meme structure de base (copiez `tp3_template.html`) 2. **Liez-le au meme CSS** (`tp3_style.css`) 3. **Ajoutez du contenu** sur un aspect precis de votre sujet (par exemple : les regles d'un sport, la discographie d'un artiste, les personnages d'un jeu video...) 4. **Reliez les deux pages** avec des liens : - Dans `tp3_template.html`, ajoutez : `<a href="page2.html">Voir la page 2</a>` - Dans `page2.html`, ajoutez : `<a href="tp3_template.html">Retour a l'accueil</a>` Felicitations, vous avez cree votre premier **site web** de plusieurs pages ! --- ## Recapitulatif des proprietes CSS vues dans ce TP | Propriete | Effet | Exemple | |-----------|-------|---------| | `background-color` | Couleur de fond | `background-color: #f0f0f0;` | | `color` | Couleur du texte | `color: navy;` | | `font-family` | Police de caracteres | `font-family: Arial;` | | `font-size` | Taille du texte | `font-size: 18px;` | | `text-align` | Alignement du texte | `text-align: center;` | | `text-decoration` | Decoration (soulignement...) | `text-decoration: none;` | | `padding` | Espace interieur | `padding: 10px;` | | `margin` | Espace exterieur | `margin: 20px;` | | `border` | Bordure | `border: 2px solid black;` | | `border-radius` | Coins arrondis | `border-radius: 8px;` | | `max-width` | Largeur maximale | `max-width: 400px;` | --- <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.