Skip to main content

Introduction à HTML

Choisissez votre classe

Salut ! Prêt à plonger dans l’univers du développement web ? On commence par les bases avec le HTML, le langage qui structure le contenu de tes pages web. HTML, ça veut dire HyperText Markup Language, et c’est ce qui permet de dire au navigateur : “Voici un titre, là un paragraphe, et ici une image.”

Point important

En tant que futur développeur, tu dois t'habituer aux documentations qui sont la source de toutes tes connaissances ! La documentation officielle pour le HTML, CSS et JAVASCRIPT est MDN.
Tu peux y accéder à ce lien https://developer.mozilla.org/fr/
-> Je te mettrais également à chaque balise le lien de la documentation dans laquelle tu trouveras tous les détails 😉

La structure de base​

Avant de commencer à coder, voyons ce à quoi ressemble un squelette de page HTML. C’est un peu comme la charpente d’une maison. Voici un exemple basique :

html
<!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>Bienvenue sur ma première page web</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

Les éléments HTML​

Maintenant, plongeons un peu plus dans les détails. Chaque balise HTML a une fonction spécifique.

Les titres et paragraphes :​

html
<h1>Ceci est un Titre de niveau 1</h1>
<p>Ceci est un paragraphe de texte.</p>

Les listes :​

html
<ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
</ul>

Les liens hypertextes :​

html
<a href="https://www.example.com" target="_blank">Visiter Example</a>

Si tu souhaites intégrer des images, alors voici comment faire.

Intégration d'une image​

Tu veux créer une image ? Facile !

html
<img src="image.jpg" alt="Une belle image">

Rappel toi que tu as deux façon de préciser la src de ton image : soit par une url web, soit par le chemin si l'image est en local.

Exemple avec un chemin (fictif bien entendu) :

html
<img src="/chemin/demonimage/image.jpg" alt="Une belle image">

Exemple avec une url :

html
<img src="https://images.unsplash.com/photo-1726452244167-ace3d3abe01a?q=80&w=3125&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Une belle image">