برای پیچیدن متن دور یک تصویر به کد نیاز دارید؟ به طور معمول هنگامی که یک صفحه HTML ایجاد می کنید ، همه چیز به صورت خطی جریان می یابد، یعنی یک بلوک مستقیماً پس از دیگری. تمام پست های قبلی من یک نمونه از این موارد است، یعنی متن، سپس تصویر، سپس متن و ....

گاهی اوقات ممکن است بخواهید متنی را در کنار یک تصویر به جای زیر آن اضافه کنید. به این کار پیچیدن متن در اطراف تصویر می گویند. در واقع پیچیده کردن متن با استفاده از HTML^(HTML) بسیار آسان است . توجه داشته باشید که برای بسته بندی متن نیازی به استفاده از CSS ندارید.^(CSS)

با این حال، این روزها W3C استفاده از CSS را به جای HTML برای این نوع کارها توصیه می کند. من هر دو روش را در زیر ذکر می کنم، اما اگر می توانید، بهتر است از CSS استفاده کنید زیرا سازگاری بیشتری با طراحی های وب سایت واکنش گرا دارد.

با استفاده از HTML، متن را به دور تصویر بپیچید

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. ساژیتیس^(Duis) وز وز می کند. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie^(Curabitur) posuere laoreet. Ut pellentesque nunc در lorem egestas non imperdiet enim congue.

برای اینکه متن در امتداد سمت راست تصویر قرار گیرد، باید تصویر را در سمت چپ تراز کنید:

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

اگر می خواهید متن در سمت چپ و تصویر در سمت راست نمایش داده شود، فقط پارامتر align را به "راست" تغییر دهید.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. ساژیتیس^(Duis) وز وز می کند. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie^(Curabitur) posuere laoreet. Ut pellentesque nunc در lorem egestas non imperdiet enim congue.

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

خودشه! خیلی^(Pretty) راحت درسته؟ تنها زمانی که می‌خواهید از CSS استفاده کنید این است که می‌خواهید حاشیه‌هایی به عکس‌ها اضافه کنید، به طوری که بین متن و تصویر فاصله وجود داشته باشد.

با استفاده از کدهای استایل CSS^(CSS) زیر می‌توانید حاشیه‌هایی را به یک عکس اضافه کنید :

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

کد بالا از عنصر MARGIN CSS برای اضافه کردن 10 پیکسل فضای خالی در سمت راست تصویر استفاده می کند. از آنجایی که تصویر را به سمت چپ تراز کرده ایم، می خواهیم فضای خالی را به سمت راست اضافه کنیم.

اساساً، چهار عدد نشان دهنده TOP RIGHT BOTTOM LEFT هستند. بنابراین اگر می خواهید فضای سفید را به یک تصویر راست چین اضافه کنید، این کار را انجام دهید:

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

بنابراین استفاده از HTML برای انجام این کار نسبتاً ساده است، اما بار دیگر، ممکن است برای سایت‌های واکنش‌گرا به خوبی کار نکند.

با استفاده از CSS، متن را به دور تصویر بپیچید

بهترین راه برای قرار دادن متن در اطراف یک تصویر استفاده از CSS است. این به شما کنترل دانه ریز بیشتری بر روی موقعیت عناصر می دهد و با استانداردهای کدگذاری مدرن بهتر کار می کند.

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

حتی اگر من CSS را مستقیماً در تگ تصویر در مثال HTML قرار دادم، شما واقعاً دیگر هرگز نباید این کار را انجام دهید. در عوض، شما باید یک فایل جداگانه به نام stylesheet داشته باشید که تمام کدهای CSS^(CSS) شما را در خود جای دهد.

در تگ IMG ، شما به سادگی یک کلاس به تگ اختصاص می دهید و نامی برای آن می گذارید. در مثالم، نام کلاس چپ را^(left) گذاشتم . در شیوه نامه من، تنها کاری که باید انجام دهم این است که کد زیر را اضافه کنم:

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

همانطور که می بینید، من 10 پیکسل به سمت راست تصویر تراز چپ اضافه کردم. من همچنین از ویژگی float برای خارج کردن تصویر از جریان عادی سند و قرار دادن آن در سمت چپ ظرف اصلی استفاده کردم.

همانطور که می بینید، بسیار تمیزتر از افزودن همه آن کد به خود تگ IMG است. ^(IMG)همچنین مدیریت آن آسان تر است و می توانید از ویژگی های CSS بسیار بیشتری برای سفارشی کردن ظاهر صفحه وب خود استفاده کنید. اگر سوالی دارید، در کامنت بگذارید. لذت بردن!

HTML Code to Wrap Text Around Image

Need thе code to wraр text around аn image? Normally when you create an HΤML page, everything flоwѕ lіnearly, meaning onе block directly after another. All of my previous posts are an example of this, і.e. text, 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

• چگونه یک کد QR را در آیفون و اندروید اسکن کنیم

• نحوه چاپ پیام های متنی از اندروید

• فهرستی از فرآیندهای در حال اجرا را در یک فایل متنی در ویندوز ذخیره کنید

• نحوه دانلود فایل ها و مشاهده کد از GitHub

• در چند فایل متنی به طور همزمان جستجو کنید

• نحوه باز کردن فایل های تصویری EPS در ویندوز

• یک نسخه پشتیبان از تصویر سیستم ویندوز 10 ایجاد کنید

• نحوه غیرفعال کردن کلید ویندوز

• چگونه Text and Image به Clipboard History به Clipboard History در Windows 10

• 8 تا از بهترین ایده های فنی برای مقابله با انزوا

• چگونه Quickly Wrap Text در Google Sheets؟

• نحوه ترسیم طرح کلی متن در فتوشاپ

• Convert Text به HTML or XHTML با MarkdownPad برای MarkdownPad برای Windows PC

• متن را از فایل های PDF و تصویر استخراج کنید

• 2 ابزار برای انجام جستجوی عکس معکوس آنلاین

• نحوه به روز رسانی Raspberry Pi

• نحوه گرفتن اسکرین شات در نینتندو سوییچ

• رفع «دستگاه نمی تواند شروع شود. (کد 10)” خطا

• چگونه کامپیوتر خود را وادار کنید که متن را با صدای بلند بخواند

• نقد و بررسی کتاب - راهنمای گیک برای ویندوز 8