Refonte des TP Web pour SNT seconde
- Corrige les erreurs CSS (radius-border, prefixes vendeur obsoletes) - Corrige la typo "La ciel" et les balises dt→dl dans index.html - Ajoute les vrais liens Wikipedia pour les grands noms - Harmonise les references au lycee Charlotte Perriand - Met a jour l'annee dans INTRODUCTION.md (2024→2025) - Remplace les anciens TP (PDFs niveau NSI/BTS) par 3 nouveaux TP adaptes : - TP1 : Decouverte du HTML (structure, balises, CSS) - TP2 : Experience utilisateur (analyse UX, bonnes pratiques) - TP3 : Ma premiere page web en CSS (mini-projet progressif) - Ajoute le schema client/serveur et les templates de demarrage TP3 - Supprime les anciens TP 2/3/4 et intro.pdf (gardes en NSI) - Met a jour le README avec le nouveau sommaire Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
274
sequences/web/tp/tp1_decouverte_html.md
Normal file
274
sequences/web/tp/tp1_decouverte_html.md
Normal file
@@ -0,0 +1,274 @@
|
||||
# TP 1 : Decouverte du HTML
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Objectifs
|
||||
|
||||
- Comprendre la structure de base d'une page HTML5
|
||||
- Decouvrir les principales balises HTML
|
||||
- Savoir modifier le contenu d'une page web
|
||||
- Comprendre le lien entre HTML et CSS
|
||||
|
||||
---
|
||||
|
||||
## Partie 1 : Mise en situation (5 min)
|
||||
|
||||
### Qu'est-ce qu'une page web ?
|
||||
|
||||
Quand vous consultez un site web, votre **navigateur** (Chrome, Firefox, Edge...) recoit du **code** depuis un **serveur** et l'interprete pour afficher la page.
|
||||
|
||||
|
||||
|
||||
Ce code est principalement ecrit en deux langages :
|
||||
- **HTML** (HyperText Markup Language) : definit le **contenu** (texte, images, liens...)
|
||||
- **CSS** (Cascading Style Sheets) : definit la **mise en forme** (couleurs, tailles, polices...)
|
||||
|
||||
### A vous !
|
||||
|
||||
Ouvrez le site du lycee dans votre navigateur. Faites un **clic droit** sur la page, puis choisissez **"Afficher le code source"**.
|
||||
|
||||
Vous voyez le code HTML de la page ! C'est ce code que le navigateur interprete pour produire ce que vous voyez a l'ecran.
|
||||
|
||||
---
|
||||
|
||||
## Partie 2 : Structure de base d'une page HTML5 (10 min)
|
||||
|
||||
### Ouvrir le fichier
|
||||
|
||||
1. Lancez **Notepad++**
|
||||
2. Ouvrez le fichier `tp/1/index.html`
|
||||
3. Ouvrez egalement ce meme fichier dans votre navigateur (double-clic dessus)
|
||||
|
||||
### La structure HTML5
|
||||
|
||||
Toute page HTML5 respecte cette structure de base :
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Titre de la page</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Le contenu visible de la page -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
| Element | Role |
|
||||
|---------|------|
|
||||
| `<!DOCTYPE html>` | Indique qu'il s'agit d'une page HTML5 |
|
||||
| `<html>` | Balise principale qui englobe tout le contenu |
|
||||
| `<head>` | En-tete : informations pour le navigateur (non affichees) |
|
||||
| `<meta charset="utf-8" />` | Encodage des caracteres (accents, etc.) |
|
||||
| `<title>` | Titre affiche dans l'onglet du navigateur |
|
||||
| `<body>` | Corps de la page : tout ce qui est affiche |
|
||||
|
||||
### Exercice 2.1
|
||||
|
||||
En observant le fichier `index.html` dans Notepad++ :
|
||||
|
||||
1. Reperer les lignes correspondant au conteneur d'en-tete (`<head>`).
|
||||
2. Quel est le titre de la page ? Ou apparait-il dans le navigateur ?
|
||||
3. Modifier ce titre et rafraichir la page dans le navigateur (touche F5). Que constatez-vous ?
|
||||
4. Que se passe-t-il si vous supprimez la ligne `<meta charset="utf-8" />` ? (Testez puis remettez-la !)
|
||||
|
||||
---
|
||||
|
||||
## Partie 3 : Les balises de contenu
|
||||
|
||||
### Les titres
|
||||
|
||||
HTML propose 6 niveaux de titres, de `<h1>` (le plus grand) a `<h6>` (le plus petit) :
|
||||
|
||||
```html
|
||||
<h1>Titre principal</h1>
|
||||
<h2>Sous-titre</h2>
|
||||
<h3>Sous-sous-titre</h3>
|
||||
```
|
||||
|
||||
### Exercice 3.1
|
||||
|
||||
Dans le fichier `index.html`, changez le `<h1>` en `<h2>`. Observez le resultat dans le navigateur. Remettez `<h1>`.
|
||||
|
||||
### Les paragraphes et la mise en forme
|
||||
|
||||
```html
|
||||
<p>Ceci est un paragraphe.</p>
|
||||
<p>Voici du texte <strong>en gras</strong> et du texte <em>en italique</em>.</p>
|
||||
```
|
||||
|
||||
| Balise | Effet | Exemple |
|
||||
|--------|-------|---------|
|
||||
| `<p>` | Paragraphe | `<p>Un texte.</p>` |
|
||||
| `<strong>` | Texte important (gras) | `<strong>important</strong>` |
|
||||
| `<em>` | Texte mis en valeur (italique) | `<em>attention</em>` |
|
||||
| `<br />` | Retour a la ligne | `Ligne 1<br />Ligne 2` |
|
||||
| `<hr />` | Ligne horizontale de separation | `<hr />` |
|
||||
|
||||
> **Bonne pratique** : Utilisez `<strong>` plutot que `<b>` et `<em>` plutot que `<i>`. Ces balises sont plus modernes et accessibles.
|
||||
|
||||
### Exercice 3.2
|
||||
|
||||
Dans le fichier `index.html`, reperer la phrase avec "Le ciel est bleu comme la mer". Comment le mot "mer" est-il mis en gras ?
|
||||
|
||||
### Les listes
|
||||
|
||||
```html
|
||||
<!-- Liste non ordonnee (puces) -->
|
||||
<ul>
|
||||
<li>Premier element</li>
|
||||
<li>Deuxieme element</li>
|
||||
</ul>
|
||||
|
||||
<!-- Liste ordonnee (numerotee) -->
|
||||
<ol>
|
||||
<li>Etape 1</li>
|
||||
<li>Etape 2</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
### Les liens hypertextes
|
||||
|
||||
Les liens permettent de naviguer entre les pages. C'est le principe fondamental du Web !
|
||||
|
||||
```html
|
||||
<a href="https://fr.wikipedia.org">Aller sur Wikipedia</a>
|
||||
```
|
||||
|
||||
- `href` : l'adresse (URL) vers laquelle le lien pointe
|
||||
- Le texte entre `<a>` et `</a>` : ce qui est affiche et cliquable
|
||||
|
||||
### Les images
|
||||
|
||||
```html
|
||||
<img src="images/photo.jpg" alt="Description de l'image" />
|
||||
```
|
||||
|
||||
- `src` : chemin vers le fichier image
|
||||
- `alt` : texte alternatif (affiche si l'image ne charge pas, utile pour l'accessibilite)
|
||||
|
||||
### Exercice 3.3
|
||||
|
||||
Dans le fichier `index.html`, observez la section "Les grands noms de l'informatique" :
|
||||
|
||||
1. Combien de liens y a-t-il dans cette liste ?
|
||||
2. Cliquez sur un lien. Vers quelle page mene-t-il ?
|
||||
3. Quel attribut contient l'adresse du lien ?
|
||||
4. Quel attribut affiche une info-bulle au survol de la souris ?
|
||||
|
||||
### Les tableaux
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<th>En-tete 1</th>
|
||||
<th>En-tete 2</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donnee 1</td>
|
||||
<td>Donnee 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
| Balise | Role |
|
||||
|--------|------|
|
||||
| `<table>` | Definit le tableau |
|
||||
| `<tr>` | Definit une ligne (table row) |
|
||||
| `<th>` | Cellule d'en-tete (table header) |
|
||||
| `<td>` | Cellule de donnees (table data) |
|
||||
|
||||
---
|
||||
|
||||
## Partie 4 : Decouvrir le CSS
|
||||
|
||||
### Le lien entre HTML et CSS
|
||||
|
||||
Dans le `<head>` du fichier `index.html`, reperer cette ligne :
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
```
|
||||
|
||||
C'est elle qui relie la page HTML a sa feuille de style CSS.
|
||||
|
||||
### Exercice 4.1
|
||||
|
||||
1. Supprimez cette ligne dans Notepad++, sauvegardez, et rafraichissez la page. Que se passe-t-il ?
|
||||
2. Remettez la ligne et sauvegardez.
|
||||
|
||||
### Le fichier CSS
|
||||
|
||||
Ouvrez le fichier `tp/1/style.css` dans Notepad++. Le CSS fonctionne ainsi :
|
||||
|
||||
```css
|
||||
selecteur {
|
||||
propriete: valeur;
|
||||
}
|
||||
```
|
||||
|
||||
Exemple :
|
||||
```css
|
||||
h1 {
|
||||
color: blue; /* couleur du texte */
|
||||
font-size: 32px; /* taille du texte */
|
||||
background-color: #76d7c4; /* couleur de fond */
|
||||
}
|
||||
```
|
||||
|
||||
### Exercice 4.2
|
||||
|
||||
1. Dans `style.css`, trouvez la regle qui s'applique aux balises `<h1>`. Quelle est la couleur du texte ?
|
||||
2. Modifiez la couleur du `<h1>` en bleu (`color: blue;`). Sauvegardez et rafraichissez.
|
||||
3. Dans le CSS, ajoutez une regle pour les paragraphes :
|
||||
|
||||
```css
|
||||
p {
|
||||
color: darkgreen;
|
||||
font-size: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
4. Sauvegardez et observez le resultat.
|
||||
|
||||
> **Pour choisir des couleurs** : vous pouvez utiliser des noms (`red`, `blue`, `navy`...) ou des codes hexadecimaux (`#FF0000`, `#0000FF`...). Voir : https://htmlcolorcodes.com/fr/
|
||||
|
||||
---
|
||||
|
||||
## Partie 5 : Synthese (10 min)
|
||||
|
||||
### Exercice final : Completer le tableau des balises
|
||||
|
||||
Dans le fichier `tp/1/index.html`, vous trouverez un tableau intitule "Les balises HTML que j'ai decouvertes". Les deux premieres lignes sont deja remplies.
|
||||
|
||||
**Completez les lignes restantes** en vous aidant de ce que vous avez appris durant ce TP.
|
||||
|
||||
Pour chaque balise, indiquez :
|
||||
- Sa **description** (a quoi elle sert)
|
||||
- Un **exemple d'utilisation** (un petit bout de code)
|
||||
|
||||
Les balises a completer : `<h1>` a `<h6>`, `<br />`, `<strong>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<table>`, `<a>`, `<img />`, `<hr />`.
|
||||
|
||||
### Aide
|
||||
|
||||
| Balise | Description |
|
||||
|--------|-------------|
|
||||
| `<h1>` a `<h6>` | Titres de niveau 1 (le plus grand) a 6 (le plus petit) |
|
||||
| `<br />` | Retour a la ligne |
|
||||
| `<strong>` | Texte important, affiche en gras |
|
||||
| `<ul>` | Liste non ordonnee (a puces) |
|
||||
| `<ol>` | Liste ordonnee (numerotee) |
|
||||
| `<li>` | Element d'une liste |
|
||||
| `<dl>` | Liste de definitions |
|
||||
| `<table>` | Tableau |
|
||||
| `<a>` | Lien hypertexte |
|
||||
| `<img />` | Image |
|
||||
| `<hr />` | Ligne horizontale de separation |
|
||||
|
||||
---
|
||||
|
||||
<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>.
|
||||
Reference in New Issue
Block a user