HTML pour les (futurs) pros du Web : Votre première page, facile comme bonjour !

Salut les amis ! 👋 Bienvenue dans le monde merveilleux du HTML, le squelette de toutes les pages web que vous visitez tous les jours ! Imaginez le web comme une gigantesque ville : HTML, c’est comme les fondations, les murs et la structure de chaque bâtiment. Sans lui, pas de site web ! Prêt à construire votre première baraque digitale ? C’est parti !

🏗️ Les Briques de Base : Structure d’une page HTML

Toute page HTML commence par un peu de magie. Voici le minimum vital :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Super Page Web</title>
</head>
<body>
    <!-- C'est ici que tout le contenu visible va se trouver ! -->
    <h1>Bienvenue sur ma page !</h1>
    <p>Ceci est un paragraphe.</p>
</body>
</html>

<!DOCTYPE html> : C’est comme dire au navigateur : “Hey, je suis un document HTML moderne !”. Indispensable !
<html lang="fr"> : C’est le conteneur principal de toute votre page. lang="fr" indique juste que le contenu est en français (utile pour l’accessibilité).
<head> : C’est la tête de votre document. Il contient des infos pour le navigateur (comme le titre de l’onglet, les liens vers les feuilles de style CSS, etc.). Invisible pour l’utilisateur, mais crucial.
- <title> : Le texte qui apparaît dans l’onglet de votre navigateur. Super important pour le référencement !
<body> : C’est le corps de votre document. Tout ce que vous voyez sur la page (texte, images, liens) se trouve ici ! C’est notre terrain de jeu principal.

✒️ Le Texte en Folie : Titres et Paragraphes

Pour organiser votre texte, c’est comme un journal : des titres, des sous-titres et des paragraphes.

<h1> à <h6> : Les titres. <h1> est le titre le plus important (le titre principal de votre page, un seul par page, c’est la règle d’or !), <h6> le moins important. C’est comme les niveaux de titres dans Word.
```
<h1>Titre Principal</h1>
<h2>Sous-titre important</h2>
<h3>Encore un sous-titre</h3>
```

<p> : Pour les paragraphes. Simple, efficace. Chaque <p> est un bloc de texte. Pratique pour aérer !

<p>Ceci est mon premier paragraphe. J'adore le HTML !</p>
<p>Voici un deuxième paragraphe. Il est aussi super cool.</p>

🏋️ Un peu de Style : Mettre en gras et en italique

Pour mettre en valeur du texte, deux balises magiques (entre autres !) :

<b> (ou <strong>) : Pour mettre du texte en gras. <strong> est préférable car il signifie “important” sémantiquement.

<i> (ou <em>) : Pour mettre du texte en italique. <em> signifie “emphase” sémantiquement, c’est aussi le préféré des puristes !

<p>Ceci est un texte <b>très important</b>. Mais ce texte est <i>encore plus intéressant</i>.</p>
<p>Avec les versions sémantiques : Le code est <strong>vital</strong> pour la survie du web, et les balises sont <em>passionnantes</em>.</p>

🔗 La Toile : Les Liens Hypertextes (`<a>`)

C’est la magie d’Internet ! Les liens vous permettent de naviguer d’une page à l’autre. Imaginez ça comme des portes qui mènent à d’autres pièces ou d’autres maisons.

<a> (pour “anchor”) : C’est la balise du lien. Elle a besoin d’un attribut href pour savoir où aller.
- href : L’adresse de la page cible (URL).
```
<p>Visitez mon site préféré : <a href="https://www.google.com">Google</a> !</p>
<p>Ou un autre site cool : <a href="https://www.wikipedia.org" target="_blank">Wikipédia</a> (s'ouvre dans un nouvel onglet !)</p>
```
- target="_blank" : Pour ouvrir le lien dans un nouvel onglet. Très pratique !

🖼️ Les Photos du Web : Les Images (`<img>`)

Une page sans images, c’est un peu triste, non ? <img> est là pour ça. Attention, c’est une balise “auto-fermante”, elle n’a pas de balise de fin comme <p></p>.

<img> : La balise image. Elle a besoin de deux attributs essentiels :
- src : L’adresse de votre image (le chemin vers le fichier).
- alt : Le texte alternatif. Super important pour l’accessibilité (si l’image ne charge pas ou pour les malvoyants) et le référencement !
```
<img src="./images/mon_image.jpg" alt="Une photo de mon chat qui code.">
<img src="https://picsum.photos/200/300" alt="Image aléatoire">
```
Conseil : Mettez vos images dans un dossier images pour garder tout propre !

📝 Ranger ses Idées : Les Listes (`<ul>`, `<ol>`, `<li>`)

Pour présenter des infos sous forme de listes, HTML est super organisé !

<ul> (unordered list) : Pour une liste non ordonnée (avec des puces). Comme votre liste de courses.
<ol> (ordered list) : Pour une liste ordonnée (avec des numéros). Comme les étapes d’une recette.

<li> (list item) : Chaque élément de la liste, qu’elle soit ordonnée ou non.

<h3>Mes films préférés :</h3>
<ul>
    <li>Le Seigneur des Anneaux</li>
    <li>Matrix</li>
    <li>Interstellar</li>
</ul>

<h3>Étapes pour faire un café :</h3>
<ol>
    <li>Mettre de l'eau dans la bouilloire.</li>
    <li>Faire chauffer l'eau.</li>
    <li>Mettre le café dans la tasse.</li>
    <li>Verser l'eau chaude.</li>
</ol>

📊 Organiser les Données : Les Tableaux (`<table>`, `<tr>`, `<td>`, `<th>`)

Besoin de présenter des données sous forme de grille ? Les tableaux sont là pour ça, comme un tableur Excel version HTML !

<table> : Le conteneur principal du tableau.
<tr> (table row) : Une ligne du tableau.
<th> (table header) : Une cellule d’en-tête (en gras par défaut).

<td> (table data) : Une cellule de données normale.

<h3>Tableau de mes notes :</h3>
<table>
    <tr>
        <th>Matière</th>
        <th>Note</th>
        <th>Commentaire</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>18/20</td>
        <td>Excellent !</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>15/20</td>
        <td>Bon début.</td>
    </tr>
</table>

📦 Les Boîtes Magiques : `<div>` et `<span>`

Ces deux-là sont les balises “fourre-tout” les plus utilisées. Elles ne changent rien visuellement toutes seules, mais elles sont essentielles pour organiser votre contenu et le styliser avec le CSS plus tard.

<div> (division) : C’est comme une grande boîte invisible qui contient d’autres éléments. Idéale pour regrouper des sections entières de votre page (un menu, un pied de page, un article complet).
- div est un élément de type bloc : il prend toute la largeur disponible et crée un saut de ligne après lui.
```
<div style="background-color: lightblue; padding: 10px;">
    <h2>Section bleue</h2>
    <p>Ce paragraphe est à l'intérieur de la boîte bleue.</p>
</div>
<div style="background-color: lightgreen; padding: 10px;">
    <p>Ceci est une autre boîte.</p>
</div>
```
<span> : C’est comme une petite boîte invisible, utile pour cibler une partie de texte spécifique ou de petits éléments. Idéale pour changer la couleur d’un mot, par exemple.
- span est un élément de type inline : il ne crée pas de saut de ligne et prend juste la largeur de son contenu.
```
<p>J'adore apprendre le <span style="color: red; font-weight: bold;">HTML</span>, c'est vraiment chouette !</p>
```
Astuce de pro : Au début, c’est déroutant. Mais dès que vous ferez du CSS, vous ne pourrez plus vous passer de div et span pour “enrober” et styliser vos éléments !

🥳 C’est déjà pas mal !

Voilà, vous avez maintenant les bases pour commencer à créer des pages web simples. Entraînez-vous, explorez, et n’ayez pas peur de faire des erreurs, c’est comme ça qu’on apprend le mieux ! Le HTML, c’est le début d’une aventure incroyable dans le monde du développement web. Bravo !

HTML pour les (futurs) pros du Web : Votre première page, facile comme bonjour !

🏗️ Les Briques de Base : Structure d’une page HTML

✒️ Le Texte en Folie : Titres et Paragraphes

🏋️ Un peu de Style : Mettre en gras et en italique

🔗 La Toile : Les Liens Hypertextes (<a>)

🖼️ Les Photos du Web : Les Images (<img>)

📝 Ranger ses Idées : Les Listes (<ul>, <ol>, <li>)

📊 Organiser les Données : Les Tableaux (<table>, <tr>, <td>, <th>)

📦 Les Boîtes Magiques : <div> et <span>