إضافة تسمية توضيحية على الويب ستبقى مع صورتها

إضافة تعليق HTML إلى صور الويب في 9 خطوات سهلة

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

9 خطوات لتعليق صورة HTML

أضف تسمية توضيحية للصورة وحركها معًا أينما تريد:

1. أضف صورة لصفحة الويب الخاصة بك.
2. في HTML لصفحة الويب الخاصة بك ، ضع علامة div حول الصورة:
3. إضافة سمة نمط لعلامة div:
   style = "" >
4. تعيين عرض div بنفس عرض الصورة ، مع خاصية نمط العرض :
   width: image width px؛ ">
5. بالنسبة إلى التسميات التوضيحية التي تكون أصغر قليلاً من النص المحيط ، أضف خاصية حجم الخط إلى نمط div:
   font-size: 80٪؛ ">
6. تبدو التسميات التوضيحية أفضل إذا تم توسيطها أسفل الصورة ، لذا أضف خاصية محاذاة النص إلى سمة النمط:
   text-align: center؛ "> < img src = "URL" alt = "نص بديل" width = "width" height = "height" />
7. وأخيرًا ، أضف مسافة إضافية صغيرة بين الصورة والتسمية التوضيحية ، وذلك بإضافة سمة نمط للصورة ذات خاصية نمط أسفل الحشو :
   style =" padding-bottom: 0.5em؛ " />

1. ثم أضف التسمية التوضيحية النصية مباشرة أسفل الصورة:
   هذه هي التسمية التوضيحية

حمّل صفحة الويب إلى خادمك واختبرها في المتصفح.

نصائح توضيحية

• Widths : يمكن أن تكون أبعاد CSS في العديد من القياسات المختلفة ، لذلك يجب عادةً تضمين نوع القياس. على سبيل المثال: العرض: 100 بكسل ؛ ومع ذلك ، فإن أبعاد صورة HTML تكون دائمًا بوحدات البكسل ، لذلك تترك المقياس متوقفًا. العرض = "100"
• إذا جعلت عرض div أوسع من عرض الصورة ، فقد تظهر التسمية التوضيحية بجوار الصورة. إذا كان هذا هو ما تريده ، فقم بإضافة علامة
  مباشرة قبل التسمية التوضيحية وبعد علامة الصورة.