Code HTML pour envelopper le texte autour de l’image

21 décembre 2020 telephonetecno

Besoin du code pour envelopper du texte autour d’une image? Normalement, lorsque vous créez une page HTML, tout se déroule de manière linéaire, c’est-à-dire un bloc directement après l’autre. Tous mes messages précédents en sont un exemple, c’est-à-dire du texte, puis une image, puis du texte, etc.

Parfois, vous souhaiterez peut-être inclure du texte à côté d’une image plutôt qu’en dessous. C’est ce qu’on appelle le texte d’habillage autour de l’image. Il est en fait assez facile d’encapsuler du texte en utilisant HTML. Notez que vous n’avez pas besoin d’utiliser CSS pour envelopper du texte.

Cependant, de nos jours, le W3C recommande d’utiliser CSS au lieu de HTML pour ce type de tâches. Je mentionnerai les deux méthodes ci-dessous, mais si vous le pouvez, il est préférable d’utiliser CSS car il est plus adaptable aux conceptions de sites Web réactifs.

Habillage du texte autour de l’image à l’aide de HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Pour que le texte soit enveloppé le long du côté droit de l’image, vous devez aligner l’image vers la gauche:

<img src="https://helpdeskgeek.com/how-to/image-text-wrap-css-html/IMAGE URL" align="left" /><p>Your text goes here.</p>

Si vous voulez que le texte apparaisse à gauche et que l’image apparaisse à l’extrême droite, changez simplement le paramètre d’alignement sur «droite».

<img src="https://helpdeskgeek.com/how-to/image-text-wrap-css-html/IMAGE URL" align="right" /><p>Your text goes here.</p>

C’est ça! Assez facile non? Le seul moment où vous voudriez utiliser CSS est si vous souhaitez ajouter des marges aux images, de sorte qu’il y ait un espace entre le texte et l’image.

Vous pouvez ajouter des marges à une image en utilisant le code de style CSS suivant:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Le code ci-dessus utilise l’élément CSS MARGIN pour ajouter 10 pixels d’espaces blancs sur le côté droit de l’image. Puisque nous avons aligné l’image à gauche, nous voulons ajouter l’espace blanc à droite.

Fondamentalement, les quatre nombres représentent EN HAUT DROIT EN BAS À GAUCHE. Donc, si vous souhaitez ajouter un espace blanc à une image alignée à droite, procédez comme suit:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Il est donc assez simple d’utiliser du HTML pour effectuer cette tâche, mais encore une fois, cela peut ne pas fonctionner correctement pour les sites réactifs.

Envelopper le texte autour de l’image en utilisant CSS

La meilleure façon d’habiller du texte autour d’une image est d’utiliser CSS. Cela vous donne un contrôle plus fin sur le positionnement des éléments et fonctionne mieux avec les normes de codage modernes.

<img src="https://helpdeskgeek.com/how-to/image-text-wrap-css-html/IMAGE URL" alt="A photo" class="left" />

Même si j’ai inclus CSS directement dans la balise image de l’exemple HTML, vous ne devriez plus jamais faire cela non plus. Au lieu de cela, vous devriez avoir un fichier séparé appelé feuille de style qui contient tout votre code CSS.

Dans la balise IMG, vous attribuez simplement une classe à la balise et lui donnez un nom. Dans mon exemple, j’ai nommé la classe la gauche. Dans ma feuille de style, il ne me reste plus qu’à ajouter le code suivant:

.left {
 float: left;
 padding: 0 10px 0 0;}

Comme vous pouvez le voir, j’ai ajouté 10px de remplissage sur le côté droit de l’image alignée à gauche. J’ai également utilisé la propriété float pour déplacer l’image hors du flux normal du document et la placer sur le côté gauche du conteneur parent.

Comme vous pouvez le voir, c’est beaucoup plus propre que d’ajouter tout ce code à la balise IMG elle-même. Il est également plus facile à gérer et vous pouvez utiliser beaucoup plus de propriétés CSS pour personnaliser l’apparence de votre page Web. Si vous avez des questions, n’hésitez pas à commenter. Prendre plaisir!

Habillage du texte autour de l’image à l’aide de HTML

Envelopper le texte autour de l’image en utilisant CSS

Vous pourrez aussi aimer