Titre de ma page

# Le HTML > Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu des pages web. Il définit ce que contient une page : texte, images, liens, etc. --------- ## Qu'est-ce que le HTML ? Le HTML n'est **pas un langage de programmation** : c'est un **langage de description** (ou de balisage). Il ne permet pas de faire des calculs, des boucles ou des conditions comme Python. Son rôle est de **structurer** le contenu d'une page web. ### Principe des balises Le HTML fonctionne avec des **balises** (tags en anglais). Une balise est un mot-clé entouré de chevrons `< >`. La plupart des balises fonctionnent **par paires** : - Une balise **ouvrante** : `` - Une balise **fermante** : `` (avec un slash `/`) ```html

Ceci est un paragraphe

``` Certaines balises sont **auto-fermantes** (elles n'ont pas de contenu) : ```html

``` ### Les attributs Les balises peuvent avoir des **attributs** qui apportent des informations supplémentaires : ```html Contenu ``` Exemples : ```html Lien vers Google Description de l'image

``` --------- ## Structure d'une page HTML5 Toute page HTML5 doit respecter une structure minimale : ```html Titre de ma page ``` ### Explication de chaque élément | Élément | Rôle | |---------|------| | `` | Indique au navigateur qu'il s'agit d'un document HTML5 | | `` | Élément racine, contient toute la page. L'attribut `lang` précise la langue | | `` | En-tête du document (métadonnées, titre, liens CSS...). **Non visible** | | `` | Définit l'encodage des caractères (UTF-8 pour les accents) | | `` | Titre affiché dans l'onglet du navigateur | | `<body>` | Corps du document. **Contenu visible** de la page | ### Arborescence HTML Une page HTML forme une **arborescence** (structure en arbre) : ``` html ├── head │ ├── meta │ └── title └── body ├── h1 ├── p └── ... ``` Les éléments à l'intérieur d'autres éléments sont appelés **enfants**. L'élément qui les contient est leur **parent**. --------- ## Les balises de texte ### Titres HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` (le moins important) : ```html <h1>Titre principal</h1> <h2>Titre de section</h2> <h3>Sous-titre</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6> ``` > **Bonne pratique** : Une page ne devrait avoir qu'un seul `<h1>`. Les titres doivent être hiérarchiques (pas de `<h3>` après un `<h1>` sans `<h2>` entre les deux). ### Paragraphes et mise en forme ```html <p>Un paragraphe de texte.</p> <strong>Texte important (gras)</strong> <em>Texte mis en emphase (italique)</em> <mark>Texte surligné</mark> <del>Texte barré</del> <sub>Texte en indice</sub> (comme H<sub>2</sub>O) <sup>Texte en exposant</sup> (comme 2<sup>3</sup>) ``` ### Retour à la ligne et séparation ```html <br>  <hr>  ``` --------- ## Les liens hypertextes Les liens sont créés avec la balise `<a>` (anchor = ancre) : ```html <a href="https://www.exemple.fr">Texte du lien</a> ``` ### Attributs importants | Attribut | Rôle | |----------|------| | `href` | URL de destination (obligatoire) | | `target="_blank"` | Ouvre le lien dans un nouvel onglet | | `title` | Info-bulle au survol | ### Types de liens ```html  <a href="https://www.google.fr">Google</a>  <a href="contact.html">Page contact</a>  <a href="documents/rapport.pdf">Télécharger le PDF</a>  <a href="#section2">Aller à la section 2</a>  <a href="mailto:contact@exemple.fr">Envoyer un email</a> ``` ### Créer une ancre Pour créer un point d'ancrage dans la page : ```html <h2 id="section2">Section 2</h2> ``` Le lien `<a href="#section2">` amènera directement à cet élément. --------- ## Les images Les images sont insérées avec la balise `<img>` (auto-fermante) : ```html <img src="chemin/vers/image.jpg" alt="Description de l'image"> ``` ### Attributs obligatoires | Attribut | Rôle | |----------|------| | `src` | Chemin vers l'image (obligatoire) | | `alt` | Texte alternatif si l'image ne charge pas (obligatoire pour l'accessibilité) | ### Attributs optionnels ```html <img src="photo.jpg" alt="Photo de vacances" width="400" height="300"> ``` ### Formats d'images courants | Format | Extension | Utilisation | |--------|-----------|-------------| | JPEG | .jpg, .jpeg | Photos | | PNG | .png | Images avec transparence | | GIF | .gif | Animations simples | | SVG | .svg | Images vectorielles | | WebP | .webp | Format moderne (compression optimisée) | ### Image cliquable (lien) ```html <a href="https://www.exemple.fr"> <img src="logo.png" alt="Logo"> </a> ``` --------- ## 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> ``` Rendu : - Premier élément - Deuxième élément - Troisième élément ### Liste ordonnée (numérotée) ```html <ol> <li>Premier élément</li> <li>Deuxième élément</li> <li>Troisième élément</li> </ol> ``` Rendu : 1. Premier élément 2. Deuxième élément 3. Troisième élément ### Liste de définitions ```html <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl> ``` ### Listes imbriquées ```html <ul> <li>Fruits <ul> <li>Pomme</li> <li>Banane</li> </ul> </li> <li>Légumes</li> </ul> ``` --------- ## Les tableaux Les tableaux servent à présenter des données tabulaires (et non pour la mise en page !). ```html <table> <thead> <tr> <th>Nom</th> <th>Prénom</th> <th>Âge</th> </tr> </thead> <tbody> <tr> <td>Dupont</td> <td>Jean</td> <td>25</td> </tr> <tr> <td>Martin</td> <td>Marie</td> <td>30</td> </tr> </tbody> </table> ``` ### Structure d'un tableau | Balise | Rôle | |--------|------| | `<table>` | Conteneur du tableau | | `<thead>` | En-tête du tableau | | `<tbody>` | Corps du tableau | | `<tfoot>` | Pied du tableau (optionnel) | | `<tr>` | Ligne (table row) | | `<th>` | Cellule d'en-tête (table header) | | `<td>` | Cellule de données (table data) | ### Fusionner des cellules ```html  <td colspan="2">Cellule sur 2 colonnes</td>  <td rowspan="3">Cellule sur 3 lignes</td> ``` --------- ## Les balises sémantiques HTML5 HTML5 introduit des balises **sémantiques** qui donnent du sens à la structure : ```html <header>  <nav>  <main>  <article>  <section>  <aside>  <footer>  ``` ### Exemple de structure sémantique ```html <body> <header> <h1>Mon Site</h1> <nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <main> <article> <h2>Mon premier article</h2> <p>Contenu de l'article...</p> </article> </main> <aside> <h3>À propos</h3> <p>Informations complémentaires</p> </aside> <footer> <p>© 2024 - Mon Site</p> </footer> </body> ``` ### Pourquoi utiliser les balises sémantiques ? 1. **Accessibilité** : Les lecteurs d'écran comprennent mieux la structure 2. **SEO** : Les moteurs de recherche indexent mieux le contenu 3. **Maintenabilité** : Le code est plus lisible et compréhensible --------- ## Les formulaires Les formulaires permettent de collecter des informations auprès de l'utilisateur. ### Structure de base ```html <form action="traitement.php" method="post">  <button type="submit">Envoyer</button> </form> ``` | Attribut | Rôle | |----------|------| | `action` | URL vers laquelle les données seront envoyées | | `method` | Méthode HTTP (`get` ou `post`) | ### Les champs de saisie ```html  <input type="text" name="nom" placeholder="Votre nom">  <input type="email" name="email" placeholder="votre@email.fr">  <input type="password" name="mdp">  <input type="number" name="age" min="0" max="120">  <input type="date" name="naissance">  <input type="checkbox" name="newsletter" id="news"> <label for="news">S'inscrire à la newsletter</label>  <input type="radio" name="genre" value="homme" id="h"> <label for="h">Homme</label> <input type="radio" name="genre" value="femme" id="f"> <label for="f">Femme</label>  <textarea name="message" rows="5" cols="30"></textarea>  <select name="pays"> <option value="fr">France</option> <option value="be">Belgique</option> <option value="ch">Suisse</option> </select> ``` ### Les labels Les `<label>` améliorent l'accessibilité et l'ergonomie : ```html <label for="prenom">Prénom :</label> <input type="text" id="prenom" name="prenom"> ``` L'attribut `for` du label doit correspondre à l'`id` du champ. ### Attributs utiles des inputs | Attribut | Rôle | |----------|------| | `required` | Champ obligatoire | | `placeholder` | Texte d'indication (grisé) | | `value` | Valeur par défaut | | `disabled` | Champ désactivé | | `readonly` | Champ en lecture seule | | `maxlength` | Nombre max de caractères | --------- ## Les commentaires Les commentaires ne sont pas affichés par le navigateur : ```html   ``` > **Utilité** : Documenter le code, désactiver temporairement du code, organiser les sections. --------- ## Les caractères spéciaux Certains caractères doivent être encodés en HTML : | Caractère | Code HTML | Nom | |-----------|-----------|-----| | `<` | `<` | Less than | | `>` | `>` | Greater than | | `&` | `&` | Ampersand | | `"` | `"` | Quote | | ` ` (espace insécable) | ` ` | Non-breaking space | | `©` | `©` | Copyright | | `€` | `€` | Euro | --------- ## Bonnes pratiques 1. **Toujours indenter** le code pour une meilleure lisibilité 2. **Utiliser des noms de fichiers** en minuscules, sans accents ni espaces 3. **Valider son code** avec le validateur W3C : https://validator.w3.org/ 4. **Utiliser les balises sémantiques** plutôt que des `<div>` partout 5. **Toujours mettre un `alt`** sur les images 6. **Séparer structure (HTML) et présentation (CSS)** --------- ## Exercices ### Exercice 1 : Structure de base Créez une page HTML5 valide contenant : - Un titre de page "Ma première page" - Un titre principal `<h1>` "Bienvenue" - Un paragraphe de présentation - Un lien vers Google ### Exercice 2 : Les listes Créez une page présentant : - Une liste non ordonnée de vos 5 films préférés - Une liste ordonnée des étapes pour faire des pâtes ### Exercice 3 : Images et liens Créez une page contenant : - Une image de votre choix avec un texte alternatif approprié - Un lien vers Wikipédia qui s'ouvre dans un nouvel onglet - L'image doit être cliquable et mener vers la source de l'image ### Exercice 4 : Tableau Créez un tableau HTML présentant les informations suivantes : | Matière | Coefficient | Moyenne | |---------|-------------|---------| | Maths | 4 | 14 | | NSI | 4 | 16 | | Français | 3 | 12 | ### Exercice 5 : Formulaire Créez un formulaire d'inscription contenant : - Un champ pour le nom (obligatoire) - Un champ pour l'email (obligatoire) - Un champ pour le mot de passe - Une case à cocher pour accepter les CGU - Un bouton d'envoi ### Exercice 6 : Page complète Créez une page web complète sur un sujet de votre choix avec : - Une structure sémantique (header, nav, main, footer) - Un menu de navigation avec au moins 3 liens - Un article avec titre, paragraphes et une image - Un tableau récapitulatif - Un pied de page avec copyright > **[Voir la correction](./CORRECTION.md)** --------- ## Ressources - [MDN - HTML](https://developer.mozilla.org/fr/docs/Web/HTML) : Documentation complète - [W3Schools - HTML](https://www.w3schools.com/html/) : Tutoriels et exemples - [Validateur W3C](https://validator.w3.org/) : Vérifier la validité du code --------- Auteur : Florian Mathieu Licence CC BY NC <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 />Ce cours est 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>.