Ma première page

# TP Introduction au langage HTML5 **Spécialité NSI - Première** --- ## Objectifs du TP - Comprendre l'architecture client-serveur et le protocole HTTP - Découvrir la structure d'une page HTML5 - Maîtriser les balises HTML essentielles - Créer une page web complète **Durée estimée** : 2h **Matériel** : PC + Navigateur (Firefox, Chrome) + Éditeur de code (VS Code, Notepad++) --- ## Partie A : Comment fonctionne le Web ? (20 min) ### A.1 L'architecture client-serveur Quand vous tapez une adresse web dans votre navigateur, que se passe-t-il ? ``` ┌─────────────┐ ┌─────────────┐ │ │ (1) Requête HTTP │ │ │ NAVIGATEUR │ ─────────────────────────► │ SERVEUR │ │ (Client) │ │ WEB │ │ │ ◄───────────────────────── │ │ │ │ (2) Réponse (code HTML) │ │ └─────────────┘ └─────────────┘ ``` 1. **Le client (navigateur)** envoie une **requête HTTP** au serveur 2. **Le serveur** renvoie le **code HTML** de la page demandée 3. **Le navigateur interprète** le code et affiche la page ### A.2 Le protocole HTTP **HTTP** (*HyperText Transfer Protocol*) est le protocole utilisé sur Internet depuis 1990 pour transférer des pages web. Une **URL** (*Uniform Resource Locator*) est l'adresse d'une ressource sur le web : ``` https://www.wikipedia.org/wiki/HTML └─┬─┘ └──────┬──────┘ └────┬────┘ protocole serveur chemin ``` ### A.3 Le HTML **HTML** (*HyperText Markup Language*) est un langage de **balisage** qui permet de structurer le contenu d'une page web : texte, images, liens... > **Important** : HTML structure le contenu (le fond), CSS gère l'apparence (la forme). **Exercice A.1** : Ouvrez n'importe quelle page web, faites un clic droit → "Afficher le code source". Observez la structure du code HTML. --- ## Partie B : Structure d'une page HTML5 (30 min) ### B.1 Les balises Les pages HTML sont composées de **balises** entourées de chevrons `< >`. Il existe deux types de balises : **Balises en paires** (ouvrante + fermante) : ```html Ceci est un titre ``` **Balises orphelines** (auto-fermantes) : ```html ``` ### B.2 Les attributs Les attributs complètent les balises avec des informations supplémentaires : ```html Contenu ``` Exemple : ```html ``` ### B.3 Structure de base d'une page HTML5 Créez un fichier `page.html` avec le code suivant : ```html Ma première page ``` | Élément | Rôle | |---------|------| | `` | Indique qu'il s'agit d'une page HTML5 | | `` | Balise racine, englobe tout le contenu | | `` | En-tête (métadonnées, titre, liens CSS) | | `` | Encodage des caractères (accents) | | `` | Titre affiché dans l'onglet du navigateur | | `<body>` | Corps de la page (contenu visible) | | `` | Commentaire (non affiché) | **Exercice B.1** : Créez le fichier `page.html`, ouvrez-le dans votre navigateur. Que voyez-vous ? --- ## Partie C : Organiser le contenu (40 min) ### C.1 Les paragraphes ```html <p>Ceci est un paragraphe.</p> <p>Ceci est un autre paragraphe.</p> ``` Pour un simple retour à la ligne dans un paragraphe : `<br />` ### C.2 Les titres HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` : ```html <h1>Titre principal</h1> <h2>Sous-titre</h2> <h3>Sous-sous-titre</h3> ``` > **Attention** : Ne confondez pas `<title>` (titre de l'onglet) et `<h1>` (titre dans la page). **Exercice C.1** : Dans votre fichier, ajoutez un titre `<h1>` et deux paragraphes dans le `<body>`. ### C.3 Mettre en valeur le texte ```html <p>Ce mot est <strong>important</strong>.</p> <p>Ce mot est <em>mis en valeur</em>.</p> <p>Ce mot est <mark>surligné</mark>.</p> ``` | Balise | Signification | Rendu par défaut | |--------|---------------|------------------| | `<strong>` | Important | **gras** | | `<em>` | Emphase | *italique* | | `<mark>` | Marqué | surligné | > **Note** : Ces balises indiquent le **sens** du texte, pas son apparence. L'apparence peut être modifiée en CSS. ### C.4 Les listes **Liste non ordonnée** (à puces) : ```html <ul> <li>Premier élément</li> <li>Deuxième élément</li> <li>Troisième élément</li> </ul> ``` **Liste ordonnée** (numérotée) : ```html <ol> <li>Première étape</li> <li>Deuxième étape</li> <li>Troisième étape</li> </ol> ``` **Exercice C.2** : Ajoutez une liste de vos 3 langages de programmation préférés. --- ## Partie D : Les liens (20 min) ### D.1 Lien vers un autre site (lien absolu) ```html <p>Visitez <a href="https://www.python.org">le site Python</a> !</p> ``` ### D.2 Lien vers une page de votre site (lien relatif) Si `page2.html` est dans le même dossier : ```html <a href="page2.html">Aller à la page 2</a> ``` Si `page2.html` est dans un sous-dossier `pages/` : ```html <a href="pages/page2.html">Aller à la page 2</a> ``` Si `page2.html` est dans le dossier parent : ```html <a href="../page2.html">Aller à la page 2</a> ``` ### D.3 Lien vers une ancre (même page) Pour créer un sommaire cliquable sur une longue page : ```html  <a href="#section2">Aller à la section 2</a>  <h2 id="section2">Section 2</h2> ``` **Exercice D.1** : Créez deux fichiers HTML qui se lient mutuellement. --- ## Partie E : Les images (15 min) ### E.1 Insérer une image ```html <img src="images/photo.jpg" alt="Description de l'image" /> ``` | Attribut | Rôle | Obligatoire | |----------|------|-------------| | `src` | Chemin vers l'image | Oui | | `alt` | Texte alternatif (accessibilité) | Oui | | `width` | Largeur en pixels | Non | | `height` | Hauteur en pixels | Non | ### E.2 Formats d'images pour le web | Format | Usage | |--------|-------| | **JPEG** (.jpg) | Photos | | **PNG** (.png) | Illustrations, logos, transparence | | **GIF** (.gif) | Animations simples | | **SVG** (.svg) | Icônes, logos vectoriels | | **WebP** (.webp) | Format moderne, bonne compression | ### E.3 Image cliquable ```html <a href="grande_image.jpg"> <img src="miniature.jpg" alt="Cliquez pour agrandir" /> </a> ``` **Exercice E.1** : Téléchargez une image, placez-la dans un dossier `images/` et insérez-la dans votre page. --- ## Partie F : Les tableaux (25 min) ### F.1 Structure de base ```html <table> <tr> <td>Ligne 1, Cellule 1</td> <td>Ligne 1, Cellule 2</td> </tr> <tr> <td>Ligne 2, Cellule 1</td> <td>Ligne 2, Cellule 2</td> </tr> </table> ``` | Balise | Rôle | |--------|------| | `<table>` | Définit le tableau | | `<tr>` | Définit une ligne (*table row*) | | `<td>` | Définit une cellule (*table data*) | | `<th>` | Définit une cellule d'en-tête (*table header*) | | `<caption>` | Titre du tableau | ### F.2 Tableau avec en-tête ```html <table> <caption>Liste des élèves</caption> <tr> <th>Nom</th> <th>Prénom</th> <th>Classe</th> </tr> <tr> <td>Dupont</td> <td>Marie</td> <td>1ère NSI</td> </tr> </table> ``` ### F.3 Fusion de cellules - `colspan="2"` : fusionne 2 cellules horizontalement - `rowspan="2"` : fusionne 2 cellules verticalement ```html <table> <tr> <td colspan="2">Cette cellule occupe 2 colonnes</td> </tr> <tr> <td>Cellule 1</td> <td>Cellule 2</td> </tr> </table> ``` **Exercice F.1** : Créez un tableau de votre emploi du temps (une journée). --- ## Partie G : Balises sémantiques HTML5 (10 min) HTML5 introduit des balises pour structurer une page de manière sémantique : ``` ┌─────────────────────────────────────┐ │ <header> │ ├─────────┬───────────────────────────┤ │ │ <section> │ │ <nav> │ ┌─────────┬─────────┐ │ │ │ │<article>│ <aside> │ │ │ │ └─────────┴─────────┘ │ ├─────────┴───────────────────────────┤ │ <footer> │ └─────────────────────────────────────┘ ``` | Balise | Usage | |--------|-------| | `<header>` | En-tête de page ou de section | | `<nav>` | Menu de navigation | | `<main>` | Contenu principal | | `<section>` | Section thématique | | `<article>` | Contenu autonome (article, post) | | `<aside>` | Contenu complémentaire (sidebar) | | `<footer>` | Pied de page | --- ## Projet final : Créer une page web thématique (30 min) ### Consignes Réalisez une page web sur un thème de votre choix (film, jeu vidéo, sport, artiste...). **Éléments obligatoires** : - [ ] Structure HTML5 valide - [ ] Un titre principal `<h1>` et au moins un sous-titre `<h2>` - [ ] Au moins 3 paragraphes de texte - [ ] Au moins 2 images - [ ] Une liste (ordonnée ou non) - [ ] Un tableau - [ ] Au moins un lien externe **Bonus** : - [ ] Utilisation des balises sémantiques (`<header>`, `<main>`, `<footer>`) - [ ] Un menu de navigation avec ancres - [ ] Plusieurs pages liées entre elles ### Organisation des fichiers ``` mon_site/ ├── index.html ├── page2.html └── images/ ├── image1.jpg └── image2.png ``` --- ## Résumé des balises essentielles | Catégorie | Balises | |-----------|---------| | **Structure** | `<!DOCTYPE>`, `<html>`, `<head>`, `<body>` | | **Métadonnées** | `<meta>`, `<title>` | | **Texte** | `<p>`, `<br>`, `<h1>`-`<h6>`, `<strong>`, `<em>` | | **Listes** | `<ul>`, `<ol>`, `<li>` | | **Liens** | `<a href="">` | | **Images** | `<img src="" alt="">` | | **Tableaux** | `<table>`, `<tr>`, `<td>`, `<th>` | | **Sémantique** | `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>` | --- ## Pour aller plus loin - **CSS Diner** : [flukeout.github.io](https://flukeout.github.io) - Apprendre les sélecteurs CSS - **Flexbox Froggy** : [flexboxfroggy.com](https://flexboxfroggy.com) - Apprendre Flexbox - **MDN Web Docs** : [developer.mozilla.org](https://developer.mozilla.org/fr/docs/Web/HTML) - Documentation de référence