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.

### 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>` :

```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-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-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-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.
Refonte des TP Web pour SNT seconde 2026-03-02 10:11:03 +01:00			`# 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 `<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>` :

			```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;` \|

			`---`

passage des cours en CC BY-SA 2026-08-11 23:29:16 +02:00			`<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-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-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.`