--- # Documentation HTML > HTML (HyperText Markup Language) est le langage standard utilisé pour créer des pages Web. Il définit la structure et le contenu d'une page Web en utilisant divers éléments et attributs. ## Table des matières 1. [Introduction à HTML](#introduction) 2. [Principes de base d'HTML](#html-basics) 1. [Structure HTML](#html-structure) 2. [Balises HTML](#html-tags) 3. [Attributs HTML](#html-attributes) 3. [Éléments HTML Courants](#common-html-elements) 4. [Formulaires HTML](#html-forms) 5. [Conclusion](#conclusion) ## Introduction à HTML <a name="introduction"></a> HTML est le fondement du développement Web, fournissant la structure de base des pages Web. Il se compose de divers éléments, chacun ayant un objectif spécifique. ## Principes de base d'HTML <a name="html-basics"></a> ### Structure HTML <a name="html-structure"></a> Un document HTML de base a la structure suivante : ```html <!DOCTYPE html> <html> <head> <title>Titre de la page</title> </head> <body> <!-- Le contenu va ici --> </body> </html> ``` - `<!DOCTYPE html>` : Déclaration de la version HTML utilisée. - `<html>` : L'élément racine qui encapsule l'ensemble du contenu HTML. - `<head>` : Contient les métadonnées, les liens vers les feuilles de style et le titre de la page. - `<body>` : Contient le contenu visible de la page Web. ### Balises HTML <a name="html-tags"></a> Les balises HTML sont utilisées pour définir différents éléments dans une page Web. Les balises ont une ouverture `<balise>` et une fermeture `</balise>`. Exemple : ```html <p>Ceci est un paragraphe.</p> ``` ### Attributs HTML <a name="html-attributes"></a> Les attributs HTML fournissent des informations supplémentaires sur un élément. Les attributs sont ajoutés à la balise d'ouverture. Exemple : ```html <a href="https://example.com">Cliquez ici</a> ``` ## Éléments HTML Courants <a name="common-html-elements"></a> > Voici une explication des balises HTML couramment utilisées, ainsi que leur utilisation typique : 1. **`<html>`** : - Cette balise représente le conteneur racine de tout le contenu HTML sur une page. - Elle englobe toutes les autres balises HTML. 2. **`<head>`** : - Contient des éléments de métadonnées pour la page tels que le titre, les liens vers des feuilles de style, les scripts, etc. - Ces informations sont importantes pour le navigateur mais ne sont pas directement affichées à l'utilisateur. 3. **`<title>`** : - Définit le titre de la page, qui est affiché dans l'onglet du navigateur ou dans la barre de titre de la fenêtre du navigateur. 4. **`<body>`** : - Contient tout le contenu visible de la page web, y compris le texte, les images, les liens, les formulaires, etc. - C'est là que l'utilisateur voit le contenu de la page. 5. **`<div>`** : - Utilisé pour créer des divisions ou des sections dans une page HTML. - Permet d'appliquer des styles CSS et d'organiser le contenu de manière structurée. 6. **`<p>`** : - Utilisé pour représenter un paragraphe de texte. - Les éléments `<p>` créent une nouvelle ligne avant et après le texte. 7. **`<a>`** : - Crée un lien hypertexte vers une autre page ou une ressource en ligne. - L'attribut `href` définit l'URL vers laquelle le lien pointe. 8. **`<img>`** : - Permet d'afficher une image sur la page. - L'attribut `src` spécifie l'emplacement de l'image. 9. **`<ul>`** et **`<ol>`** : - `<ul>` représente une liste non ordonnée, où les éléments de liste sont affichés avec des puces. - `<ol>` représente une liste ordonnée, où les éléments de liste sont numérotés. 10. **`<li>`** : - Utilisé à l'intérieur de `<ul>` (liste non ordonnée) ou `<ol>` (liste ordonnée) pour définir un élément de liste. 11. **`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`** : - Ces balises définissent des en-têtes de différents niveaux (du plus important `<h1>` au moins important `<h6>`). - Utilisées pour structurer le contenu de la page et améliorer l'accessibilité. 12. **`<form>`** : - Utilisé pour créer un formulaire qui collecte les données de l'utilisateur. - Contient divers éléments de formulaire tels que `<input>`, `<textarea>`, `<button>`, etc. Ces balises forment la structure de base d'une page HTML et sont essentielles pour créer une page web fonctionnelle et bien structurée. ## Formulaires HTML <a name="html-forms"></a> Les formulaires HTML sont utilisés pour collecter les saisies des utilisateurs. Les éléments de formulaire de base incluent `<input>`, `<textarea>`, `<button>`, `<select>`, etc. Exemple :100: 1. **`<html>`**, **`<head>`**, **`<title>`**, et **`<body>`** : ```html <!DOCTYPE html> <html> <head> <title>Mon site Web</title> </head> <body> <h1>Bienvenue sur mon site Web</h1> <p>Ceci est un paragraphe de texte.</p> </body> </html> ``` 2. **`<div>`** : ```html <div> <p>Ceci est du contenu dans une division.</p> </div> ``` 3. **`<a>`** : ```html <a href="https://www.example.com">Visitez Example.com</a> ``` 4. **`<img>`** : ```html <img src="chemin_vers_votre_image.jpg" alt="Texte alternatif"> ``` 5. **`<ul>`** : ```html <ul> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> </ul> ``` 6. **`<ol>`** : ```html <ol> <li>Étape 1</li> <li>Étape 2</li> <li>Étape 3</li> </ol> ``` 7. **`<h1>`, `<h2>`, `<h3>`** : ```html <h1>Ceci est un titre de niveau 1</h1> <h2>Ceci est un titre de niveau 2</h2> <h3>Ceci est un titre de niveau 3</h3> ``` 8. **`<span>`**: ``` <span>Ceci est du contenu dans une division</span> ``` 9. **`<form>`** : ```html <form> <label for="username">Nom d'utilisateur :</label> <input type="text" id="username" name="username"> <br><br> <input type="submit" value="Soumettre"> </form> ``` 10. **`<table>`** : ```html <table border="1"> <thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> <th>Colonne 3</th> </tr> </thead> <tbody> <tr> <td>Ligne 1, Colonne 1</td> <td>Ligne 1, Colonne 2</td> <td>Ligne 1, Colonne 3</td> </tr> <tr> <td>Ligne 2, Colonne 1</td> <td>Ligne 2, Colonne 2</td> <td>Ligne 2, Colonne 3</td> </tr> </tbody> </table> ``` > Voici des exemples d'ajout des types pour les balises `<input>` dans un formulaire HTML : 1. **Texte simple (`text`) :** ```html <input type="text" name="nom" placeholder="Entrez votre nom"> ``` 2. **Mot de passe (`password`) :** ```html <input type="password" name="mot_de_passe" placeholder="Entrez votre mot de passe"> ``` 3. **Zone de texte (`textarea`) :** ```html <textarea name="commentaire" rows="4" cols="50" placeholder="Écrivez votre commentaire ici"></textarea> ``` 4. **Case à cocher (`checkbox`) :** ```html <input type="checkbox" name="accepter" value="accepte"> <label for="accepter">J'accepte les conditions.</label> ``` 5. **Bouton radio (`radio`) :** ```html <input type="radio" name="genre" value="homme"> <label for="homme">Homme</label> <input type="radio" name="genre" value="femme"> <label for="femme">Femme</label> ``` 6. **Menu déroulant (`select`) :** ```html <select name="pays"> <option value="france">France</option> <option value="espagne">Espagne</option> <option value="italie">Italie</option> </select> ``` 7. **Bouton (`button`) :** ```html <button type="submit">Envoyer</button> ``` > Les balises `<meta>` sont utilisées pour fournir des métadonnées et des informations sur la page HTML. Voici quelques exemples courants d'utilisation de balises `<meta>` avec différents attributs : 1. **Charset (`charset`) :** Cette balise définit l'encodage de caractères utilisé par la page. ```html <meta charset="UTF-8"> ``` 2. **Viewport (`viewport`) :** Cette balise spécifie comment le contenu doit s'ajuster à la largeur de l'appareil. ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 3. **Auteur (`author`) :** Cette balise spécifie l'auteur de la page. ```html <meta name="author" content="Nom de l'auteur"> ``` 4. **Description (`description`) :** Cette balise spécifie la description de la page. ```html <meta name="description" content="Description de la page"> ``` 5. **Mots-clés (`keywords`) :** Cette balise spécifie les mots-clés liés à la page. ```html <meta name="keywords" content="mot1, mot2, mot3"> ``` 6. **Rafraîchissement automatique (`refresh`) :** Cette balise actualise automatiquement la page après un certain laps de temps (en secondes). ```html <meta http-equiv="refresh" content="5"> ``` Ces balises `<meta>` sont utilisées pour fournir des informations supplémentaires aux navigateurs et aux moteurs de recherche sur la structure et le contenu de la page. Elles sont essentielles pour améliorer l'accessibilité et l'affichage correct de votre site web.