SNT/sequences/web/tp/tp3_css_ma_page.md

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.

!!! question "A faire"

1. **Modifiez le titre** de la page (balise `<title>`) 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> :

<link rel="stylesheet" href="tp3_style.css" />

Le CSS s'ecrit sous cette forme :

selecteur {
    propriete: valeur;
}

Le selecteur cible un element HTML. La propriete definit ce qu'on modifie. La valeur definit comment on le modifie.

!!! question "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     | |
|  +---------------+ |
+--------------------+

!!! question "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.

!!! question "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;
}
```

---

!!! question "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;

---

Ces cours sont mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.