هل تحتاج إلى رمز التفاف النص حول الصورة؟ عادةً عند إنشاء صفحة HTML ، يتدفق كل شيء بشكل خطي ، مما يعني كتلة واحدة تلو الأخرى مباشرة. جميع مشاركاتي السابقة هي مثال على ذلك ، أي نص ، ثم صورة ، ثم نص ، إلخ.

قد ترغب أحيانًا في تضمين نص بجوار صورة بدلاً من أسفلها. يسمى هذا التفاف النص حول الصورة. في الواقع ، من السهل إلى حد ما التفاف النص باستخدام HTML . لاحظ أنه ليس عليك استخدام CSS من أجل التفاف النص.

ومع ذلك ، توصي W3C^(W3C) هذه الأيام باستخدام CSS بدلاً من HTML لهذه الأنواع من المهام. سأذكر كلتا الطريقتين أدناه ، ولكن إذا استطعت ، فمن الأفضل استخدام CSS لأنه أكثر قابلية للتكيف مع تصميمات مواقع الويب سريعة الاستجابة.

التفاف النص حول الصورة باستخدام HTML

Lorem ipsum dolor sit amet، consectetur adipiscing elit. اقتباس^(Fusce) القول المأثور ، والحمل شديد للغاية. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Aliquam a felis vitae augue lobortis القول المأثور. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

من أجل التفاف النص على طول الجانب الأيمن من الصورة ، يجب عليك محاذاة الصورة إلى اليسار:

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

إذا كنت تريد أن يظهر النص على اليسار وتظهر الصورة في أقصى اليمين ، فقط قم بتغيير معلمة المحاذاة إلى "اليمين".

Lorem ipsum dolor sit amet، consectetur adipiscing elit. اقتباس^(Fusce) القول المأثور ، والحمل شديد للغاية. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Aliquam a felis vitae augue lobortis القول المأثور. 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>

هذا هو! سهل جدا أليس كذلك؟ ^(Pretty)المرة الوحيدة التي تريد فيها استخدام 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 ، فلا يجب عليك فعل ذلك بعد الآن. بدلاً من ذلك ، يجب أن يكون لديك ملف منفصل يسمى ورقة الأنماط التي تحتوي على جميع أكواد CSS الخاصة بك.^(CSS)

في علامة IMG ، يمكنك ببساطة تعيين فئة للعلامة وإعطائها اسمًا. في المثال الخاص بي ، قمت بتسمية الفصل على اليسار^(left) . في ورقة الأنماط الخاصة بي ، كل ما علي فعله هو إضافة الكود التالي:

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

كما ترى ، أضفت 10 بكسل من المساحة المتروكة إلى الجانب الأيمن من الصورة المحاذية لليسار. لقد استخدمت أيضًا خاصية الطفو لنقل الصورة خارج التدفق الطبيعي للمستند ووضعها على الجانب الأيسر من الحاوية الأصلية.

كما ترى ، فهو أنظف بكثير من إضافة كل هذه التعليمات البرمجية إلى علامة IMG نفسها. من السهل أيضًا إدارتها ويمكنك استخدام المزيد من خصائص CSS لتخصيص المظهر على صفحة الويب الخاصة بك. إذا كان لديك أي أسئلة ، فلا تتردد في التعليق. يتمتع!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when yоu create аn HTML page, everything flows linearly, meaning one block directly after another. All of my prevіous posts are an example of this, i.e. text, then picture, then text, еtc.

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

• كيفية مسح رمز الاستجابة السريعة ضوئيًا على iPhone و Android

• كيفية طباعة الرسائل النصية من Android

• احفظ قائمة العمليات الجارية في ملف نصي في Windows

• كيفية تنزيل الملفات وعرض التعليمات البرمجية من جيثب

• البحث داخل ملفات نصية متعددة مرة واحدة

• كيفية فتح ملف مغلق عند استخدامه من قبل برنامج آخر

• كيفية تحديث Raspberry Pi

• كيفية تحديد النص في برنامج فوتوشوب

• كيفية عرض التعليمات البرمجية المصدر لجزء مفتوح المصدر من البرنامج

• كيفية التقاط لقطات الشاشة على Nintendo Switch

• كيفية Quickly Wrap Text في Google Sheets؟

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

• كيف تصنع الكمبيوتر المحمول الخاص بك

• إعادة توجيه الإخراج من سطر أوامر Windows إلى ملف نصي

• قم بإزالة تسميات النص من أيقونات سطح المكتب في Windows 7/8/10

• كيفية عمل رمز الاستجابة السريعة

• 2 أدوات لإجراء عمليات البحث العكسي عن الصور عبر الإنترنت

• كيفية تدوير النص والصور في برنامج فوتوشوب

• قم بإيقاف تشغيل التحكم في حساب المستخدم (UAC) لتطبيق معين

• كيفية تعطيل مفتاح الويندوز