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 de l'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 l'habillage du texte autour de l'image. Il est en fait assez facile d'envelopper du texte en utilisant HTML . Notez que vous n'avez pas besoin d'utiliser CSS pour habiller le 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.

Envelopper le texte autour de l'image en utilisant 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 s'habille le long du côté droit de l'image, vous devez aligner l'image à gauche :

<img src="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".

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.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

C'est ça! Assez^(Pretty) facile non? La seule fois où vous voudriez utiliser CSS , c'est si vous voulez 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 :^(CSS)

<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^{(MARGIN CSS)} pour ajouter 10 pixels d'espace blanc 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 chiffres représentent TOP RIGHT BOTTOM LEFT . Donc, si vous voulez ajouter l'espace blanc à une image alignée à droite, vous feriez ceci :

<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 HTML pour effectuer cette tâche, mais encore une fois, cela peut ne pas bien fonctionner pour les sites réactifs.

Envelopper le texte autour de l'image à l'aide de CSS

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

<img src="IMAGE URL" alt="A photo" class="left" />

Même si j'ai inclus CSS directement dans la balise d'image dans l' exemple HTML , vous ne devriez plus jamais le faire 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 , il vous suffit d'attribuer une classe à la balise et de lui donner un nom. Dans mon exemple, j'ai nommé la classe left . Dans ma feuille de style, il me suffit d'ajouter le code suivant :

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

Comme vous pouvez le voir, j'ai ajouté 10 pixels de rembourrage 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. ^(IMG)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. Profitez!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create аn HTML pagе, evеrything flows linearlу, meaning оne block directly after another. All of my previous posts are an еxample of thіs, i.e. tеxt, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using 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.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

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.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

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

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

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

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

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

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Comment scanner un code QR sur iPhone et Android

• Comment imprimer des messages texte à partir d'Android

• Enregistrer une liste des processus en cours d'exécution dans un fichier texte sous Windows

• Comment télécharger des fichiers et afficher le code à partir de GitHub

• Rechercher dans plusieurs fichiers texte à la fois

• 8 des meilleures idées technologiques pour faire face à l'auto-isolement

• Comment épingler Text and Image à Clipboard History dans Windows 10

• Comment lier des zones de texte dans Adobe InDesign

• Comment ouvrir un fichier HTML dans Google Chrome

• Comment faire circuler du texte autour d'une image dans InDesign

• Comment afficher le code source d'un logiciel open source

• Comment ajouter Shadow à Text or Image dans GIMP

• SynWrite Editor: Free Text & Source Code Editor pour Windows 10

• Comment intégrer du HTML dans un document Google

• Comment garder votre PC Windows éveillé sans toucher la souris

• Extraire du texte à partir de fichiers PDF et image

• Comment créer une équipe dans Microsoft Teams

• Comment créer un code QR

• Supprimer instantanément les arrière-plans des images à l'aide de l'IA

• Comment Quickly Wrap Text dans Google Sheets?