HTML - Éléments de_bloc et en_ligne

Salut les futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant des éléments de bloc et en ligne en HTML. En tant que votre professeur d'informatique du coin, je suis là pour vous guider dans ce voyage avec pleins d'exemples et d'explications. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et c'est parti pour le codage !

Éléments de_bloc

Imaginez que vous construisez une maison en briques LEGO. Certaines de ces briques sont grandes et occupent une rangée entière par elles-mêmes. Ces briques sont comme les éléments de bloc en HTML. Ils commencent sur une nouvelle ligne et occupent la largeur totale disponible.

Regardons quelques éléments de bloc courants :

<div>J'ai un élément de bloc</div>
<p>J'ai aussi un élément de bloc</p>
<h1>J'ai un titre et je suis aussi un élément de bloc !</h1>

Lorsque vous exécutez ce code, chaque élément apparaîtra sur une nouvelle ligne. C'est comme s'ils disaient : "J'ai besoin de mon propre espace, merci beaucoup !"

Voici un tableau de quelques éléments de bloc courants :

Élément	Description
<div>	Un conteneur à usage général
<p>	Un paragraphe
<h1> à <h6>	Des titres
<ul>	Une liste non ordonnée
<ol>	Une liste ordonnée
<li>	Un élément de liste

Éléments en_ligne

Maintenant, pensons aux petites pièces LEGO qui peuvent s'empiler côte à côte sur la même rangée. Ceux-ci sont comme les éléments en ligne en HTML. Ils n'occupent que la largeur nécessaire et ne commencent pas sur une nouvelle ligne.

Voici un exemple :

<span>J'ai un élément en ligne</span>
<a href="#">Je suis un lien et aussi en ligne</a>
<strong>J'ai du texte en gras et je suis aussi en ligne !</strong>

Ces éléments apparaîtront tous sur la même ligne (si il y a assez de place).

Voici un tableau de quelques éléments en ligne courants :

Élément	Description
<span>	Un conteneur en ligne à usage général
<a>	Un hyperlien
<strong>	Du texte en gras
<em>	Du texte en italique
<img>	Une image
<br>	Un saut de ligne

Groupement des éléments HTML de_bloc et en_ligne

Maintenant que nous comprenons les éléments de bloc et en ligne, voyons comment les regrouper ensemble. C'est comme organiser vos pièces LEGO dans différentes compartiments d'une boîte à outils.

Groupement avec la balise <div>

La balise <div> est comme une grande boîte dans laquelle vous pouvez mettre plusieurs éléments ensemble. C'est un élément de bloc lui-même, donc il commence sur une nouvelle ligne.

Voyons un exemple :

<div style="background-color: lightblue; padding: 20px;">
<h2>Bienvenue sur mon site Web</h2>
<p>Ceci est un paragraphe à l'intérieur d'un div.</p>
<p>Voici un autre paragraphe avec <span style="color: red;">du texte rouge</span>.</p>
</div>

Dans cet exemple, nous avons regroupé un titre et deux paragraphes à l'intérieur d'un <div>. Nous avons également ajouté un style pour le rendre visuellement distinct. Le <span> à l'intérieur du second paragraphe est un élément en ligne que nous avons utilisé pour changer la couleur desome texte.

Groupement avec la balise <span>

La balise <span> est comme un petit conteneur clair que vous pouvez utiliser pour regrouper des éléments en ligne ou même des parties de texte à l'intérieur d'un élément de bloc.

Voici un exemple :

<p>
J'aime les couleurs <span style="color: blue;">bleue</span> et
<span style="color: green;">verte</span>.
</p>

Dans ce cas, nous avons utilisé <span> pour appliquer des couleurs différentes à des mots spécifiques à l'intérieur d'un paragraphe.

Souvenez-vous, <div> est pour regrouper les éléments de niveau de bloc (ou créer des groupes de niveau de bloc), tandis que <span> est pour regrouper les éléments en ligne ou des parties de texte.

Mettre tout ensemble

Maintenant, combinons ce que nous avons appris dans un exemple plus complexe :

<div style="background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc;">
<h1>Mon blog personnel</h1>
<div style="margin-bottom: 20px;">
<h2>Dernier article : La joie de coder</h2>
<p>
Le codage est comme résoudre des puzzles. C'est desafiant, mais
<span style="font-weight: bold; color: #ff6600;">incroyablement satisfaisant</span>
lorsque vous arrivez enfin à faire fonctionner votre programme !
</p>
</div>
<div>
<h3>Liens rapides</h3>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

Dans cet exemple, nous avons créé une mise en page simple de blog en utilisant divers éléments de bloc et en ligne. Nous avons utilisé des balises <div> pour regrouper du contenu similaire, <span> pour styliser des parties spécifiques de texte, et un mélange d'autres éléments de bloc et en ligne pour structurer notre contenu.

Souvenez-vous, HTML est comme construire avec LEGO. Commencez avec les blocs de base, et avant de vous en rendre compte, vous créerez des structures incroyables ! Continuez à pratiquer et n'ayez pas peur d'expérimenter. C'est ainsi que nous avons tous appris !

Bonne programmation, futurs mages web ! ?‍♂️?

Credits: Image by storyset