Introduction à HTML

Avant tout : pourquoi apprendre ça ?

Tu veux créer un site web. Pour ça, on commence par HTML.

HTML est la base de tout site web. Sans lui, rien n'existe. Pas de texte, pas d'images, pas de liens. Juste une page blanche. Bonne nouvelle : HTML est très facile à apprendre.

C'est quoi le HTML ?

HTML signifie HyperText Markup Language. Grand mot, idée simple.

Imagine un document Word. Tu mets un titre en gros, un paragraphe, une image. HTML, c'est pareil — mais pour les pages web. Tu "étiquettes" chaque partie de ton texte pour dire au navigateur ce que c'est.

HTML n'est pas de la programmation. Pas de calculs, pas de logique. Tu décris juste le contenu. C'est tout.

À quoi ça sert concrètement ?

Google, Wikipedia, YouTube — tout est fait avec HTML. Chaque article, chaque titre, chaque lien que tu cliques : c'est du HTML.

Apprendre HTML, c'est apprendre la langue du web. Cette compétence existe depuis 1991. Elle sera là dans 30 ans.

Comment fonctionne le web ?

Quand tu tapes une adresse dans Chrome ou Firefox, voici ce qui se passe :

1. Ton navigateur envoie une demande à un serveur dans le monde.
2. Ce serveur répond avec un fichier HTML.
3. Ton navigateur lit ce fichier et l'affiche comme une page web.

Ce fichier HTML, c'est exactement ce que tu vas créer. Un simple fichier texte avec des mots-clés spéciaux.

Les balises : le concept clé

Le truc le plus important en HTML : les balises.

Une balise, c'est un mot entre chevrons < >. Exemple : <p>. Ce "p" veut dire "paragraphe". On dit au navigateur : "ce qui suit est un paragraphe".

La plupart des balises vont par paires : une balise ouvrante qui dit "ça commence ici", et une balise fermante qui dit "ça s'arrête là". La balise fermante a un / avant le nom.

<!-- Un paragraphe : balise ouvrante + contenu + balise fermante -->
<p>Bonjour, je suis un paragraphe.</p>

<!-- Un titre principal -->
<h1>Je suis un titre principal.</h1>

<!-- Du texte en gras -->
<strong>Ce texte est important (affiché en gras).</strong>

Décortiquons la première ligne :

• <p> — balise ouvrante. Dit : "un paragraphe commence ici".
• Bonjour, je suis un paragraphe. — le contenu affiché à l'écran.
• </p> — balise fermante. Dit : "le paragraphe s'arrête ici".

Tu "enveloppes" ton contenu entre deux balises. Simple.

Les balises sans fermeture

Certaines balises n'ont pas de balise fermante. Elles n'entourent rien. Elles font juste une action toutes seules.

Exemple : un saut de ligne. Il n'y a rien à "entourer". C'est juste : "saute une ligne ici".

<br>   <!-- saut de ligne — rien à "entourer" -->
<img>  <!-- une image — on indique juste où elle est -->
<hr>   <!-- une ligne de séparation horizontale -->

Les attributs : donner plus d'infos

Parfois, une balise a besoin d'infos supplémentaires. On appelle ça des attributs.

Imagine que tu donnes une adresse à quelqu'un. Tu ne dis pas juste "va là-bas". Tu précises : "va au 12 rue de la Paix". Pour un lien HTML, c'est pareil. Tu précises : "voici un lien vers cette adresse".

Les attributs s'écrivent dans la balise ouvrante. Format : nom="valeur".

<!-- href = "hyper reference" — l'adresse du lien -->
<a href="https://monminilab.fr">Visiter MonMiniLab</a>

<!-- src = "source" — où se trouve l'image -->
<!-- alt = texte de remplacement si l'image ne charge pas -->
<img src="photo.jpg" alt="Ma photo de profil">

Dans le premier exemple :

• <a> — balise de lien ("anchor" = ancre en anglais).
• href="https://monminilab.fr" — l'attribut qui dit "où va ce lien".
• Visiter MonMiniLab — le texte cliquable affiché à l'écran.
• </a> — fin du lien.

HTML, CSS et JavaScript : à quoi sert chacun ?

Ces trois outils font une page web ensemble. Imagine une maison :

• HTML — les murs, le toit, les pièces. La structure. Sans ça, rien n'existe.
• CSS — la peinture, les rideaux, la déco. Ce qui rend la maison belle.
• JavaScript — l'électricité et la plomberie. Les interrupteurs, le robinet — ce qui "marche".

Dans ce module, on apprend HTML et CSS. On construit la maison et on la décore. JavaScript viendra plus tard.