🚀 Initiation au HTML : Votre Premier Pas sur le Web !

Salut les futurs magiciens du web !

Je suis super content de vous guider dans le monde fascinant du HTML. C’est le langage secret (enfin, pas si secret que ça) qui donne vie à toutes les pages que vous visitez sur internet. Imaginez-vous en train de construire votre propre château sur la toile ! C’est un peu ça, le HTML.

📜 Petite histoire pour les curieux : D’où vient ce HTML ?

Au début, internet, c’était un peu comme une bibliothèque géante avec des documents tous mélangés, sans vraie mise en page. Difficile de s’y retrouver ! C’est là qu’un gars super intelligent, Tim Berners-Lee (retenez ce nom, c’est une star !), s’est dit en 1989-1991 : « Et si on inventait un langage pour structurer tous ces documents, les relier entre eux et les rendre faciles à lire ? »

Et boom ! Le HTML (pour HyperText Markup Language) est né ! C’était d’abord très simple, mais ça a révolutionné la façon dont nous partageons l’information. Depuis, il a évolué avec des versions comme HTML2, HTML3.2, HTML4, XHTML et surtout HTML5, la version qu’on utilise majoritairement aujourd’hui. Chaque nouvelle version apporte son lot de super-pouvoirs pour créer des sites toujours plus beaux et interactifs.

🏷️ Les Tags : Les briques de votre château !

Alors, le HTML, comment ça marche ? C’est super simple : tout est basé sur des balises ou tags. Imaginez que chaque tag est une petite brique avec une étiquette qui dit à votre navigateur web (Chrome, Firefox, Edge, etc.) : « Ça, c’est un titre ! », « Ça, c’est un paragraphe ! », « Ça, c’est une image ! ».

La plupart des tags fonctionnent par paire : une balise ouvrante et une balise fermante. Ça ressemble à ça :

<p>Ceci est un paragraphe.</p>

<p> : C’est la balise ouvrante. Elle dit : « Ok, un paragraphe commence ici ! »
</p> : C’est la balise fermante. Le slash / indique qu’elle ferme le paragraphe.

Entre les deux, vous mettez votre contenu ! Facile, non ?

Il existe aussi des tags auto-fermants (ou orphelins) qui n’ont pas de contenu entre une balise ouvrante et fermante, car ils se suffisent à eux-mêmes. Par exemple, pour une image ou un saut de ligne :

<img src="image.jpg" alt="Description de l'image"> `

🏗️ La Structure de Base : L’armature de votre page web

Chaque page HTML a une structure de base un peu comme le squelette d’un corps humain. Elle est essentielle pour que le navigateur comprenne ce qu’il doit afficher. Voici ce à quoi elle ressemble :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Titre de ma page</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- C'est ici que tout le contenu visible de votre page ira ! -->
</body>
</html>

Décortiquons ça ensemble :

<!DOCTYPE html> : C’est la première ligne et elle est très importante ! Elle indique au navigateur que c’est un document HTML5. Pensez-y comme à une carte d’identité pour votre page.
<html lang="fr"> … </html> : C’est la balise racine. Elle englobe tout le contenu de votre page HTML. L’attribut lang="fr" indique que le contenu est en français, c’est utile pour les moteurs de recherche et l’accessibilité.
<head> … </head> : C’est la tête de votre page. Pas de panique, le contenu ici n’est pas visible directement sur la page. C’est là qu’on met des informations pour le navigateur : le titre de l’onglet (<title>), le type d’encodage des caractères (<meta charset="UTF-8"> pour gérer les accents), des liens vers des feuilles de style CSS, etc.
<body> … </body> : Et voici le corps ! C’est la partie la plus excitante, car c’est tout ce qui est visible par les utilisateurs de votre site : vos titres, vos paragraphes, vos images, vos vidéos, bref, tout votre contenu.

👋 Votre première page web : Le fameux “Hello World” !

Maintenant que vous connaissez les bases, on va créer notre toute première page web ! C’est une tradition en informatique, on commence souvent par un “Hello World” (Bonjour le Monde !).

Ouvrez un éditeur de texte (comme Visual Studio Code, Notepad++ ou même le Bloc-notes).

Copiez-collez ce code :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Page Web</title>
</head>
<body>
    <h1>Bonjour le Monde !</h1>
    <p>Ceci est ma toute première page web en HTML. Trop cool, non ? 😎</p>
    <p>Je suis super excité de continuer à apprendre !</p>
</body>
</html>

Enregistrez ce fichier sous le nom index.html (ou ma_page.html, l’important est l’extension .html !). Choisissez un dossier facile à retrouver.

Maintenant, la magie ! Allez dans le dossier où vous avez enregistré votre fichier et double-cliquez dessus. Il devrait s’ouvrir dans votre navigateur web par défaut. Et voilà ! Votre “Bonjour le Monde” est là !

Mission accomplie pour aujourd’hui ! Vous avez fait vos premiers pas sur le web. Prêts pour la suite de l’aventure ?