كود HTML لالتفاف النص حول الصورة

-HTML-لالتفاف-النص-حول-الصورة.jpg


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

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

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

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

قصاصات فنية للكمبيوتر

Lorem ipsum dolor sit amet، consectetur adipiscing elit. كان سريريًا حاملًا لأي شخص يمكنه وضع الموجات فوق الصوتية موريس. كرات للمبرمجين في الدراسات المنزلية. عندما يسحب أشعة على الفور من أعلى Super Bowl. أحدث صندوق دعاية هو حياة كرة القدم. برنامج Vitae TV chat. الأطفال لا يريدون العلم لتمويل الأعمال المنزلية الآن.

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

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

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

قصاصات فنية للكمبيوتر

Lorem ipsum dolor sit amet، consectetur adipiscing elit. كانت الحامل السريرية حاملاً لأي شخص يمكنه إجراء الموجات فوق الصوتية موريس. كرات للمبرمجين الجامعيين. عندما يسحب أشعة من Super Bowl على الفور. أحدث صندوق دعاية هو حياة كرة القدم. برنامج Vitae TV chat. الأطفال لا يريدون العلم لتمويل الأعمال المنزلية الآن.

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

هذا هو! بسيط جدا ، أليس كذلك؟ المرة الوحيدة التي تريد فيها استخدام CSS هي إضافة هوامش إلى الصور بحيث يكون هناك مسافة بين النص والصورة.

يمكنك إضافة هوامش إلى صورتك باستخدام رمز نمط CSS التالي:

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

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

تمثل الأرقام الأربعة أساسًا أعلى يمين أسفل اليسار. لذلك إذا كنت تريد إضافة مسافة بيضاء إلى الصورة المحاذية لليمين ، فيرجى القيام بما يلي:

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

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

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

أفضل طريقة لالتفاف نص حول صورة هي استخدام CSS. يوفر تحكمًا أفضل في التحبب في موضع العناصر ويعمل بشكل أفضل مع معايير الترميز الحديثة.

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

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

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

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

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

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

scroll to top