288 lines
7.8 KiB
Markdown
288 lines
7.8 KiB
Markdown
|
# 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-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>.
|