تضيف الصور الحياة إلى صفحات الويب وتلفت انتباه المشاهدين. توفر التسميات التوضيحية معلومات إضافية حول صور الويب الخاصة بك ، ولكن قد يصعب إضافتها إلى صفحات الويب بدون مهارات HTML و CSS المتقدمة. إليك طريقة موثوقة لإضافة تعليق بسيط وجذاب إلى الصورة التي تبقى مع الصورة أينما تحركها على صفحة الويب.
خطوات لتصميم صورة HTML
-
أضف صورة لصفحة الويب الخاصة بك.
-
في HTML لصفحة الويب الخاصة بك ، ضع علامة div حول الصورة:
-
إضافة سمة نمط لعلامة div:
على غرار = ""> -
اضبط عرض div بنفس عرض الصورة ، مع خاصية نمط العرض:
-
بالنسبة إلى التسميات التوضيحية التي تكون أصغر قليلاً من النص المحيط ، قم بإضافة خاصية حجم الخط إلى نمط div:
-
تبدو التسميات التوضيحية أفضل إذا تم توسيطها أسفل الصورة ، لذا أضف خاصية محاذاة النص إلى سمة النمط:
-
وأخيرًا ، أضف مسافة إضافية صغيرة بين الصورة والتسمية التوضيحية ، عن طريق إضافة سمة نمط إلى الصورة باستخدام خاصية نمط الحشو السفلي:
على غرار = "الحشو القاع: 0.5em." />
-
ثم أضف التسمية التوضيحية النصية أسفل الصورة مباشرة:
حمّل صفحة الويب إلى خادمك واختبرها في المتصفح.
نصائح توضيحية
- يمكن أن تكون أبعاد CSS في العديد من القياسات المختلفة ، لذلك يجب عليك عادةً تضمين نوع القياس. فمثلا:
العرض: 100بكسل; ومع ذلك ، فإن أبعاد صورة HTML تكون دائمًا بوحدات البكسل ، لذلك تترك المقياس متوقفًا.
العرض = "100"
- إذا جعلت عرض div أوسع من عرض الصورة ، فقد تظهر التسمية التوضيحية بجوار الصورة. إذا كان هذا ما تريده ، فقم بإضافة
مباشرةً قبل التسمية التوضيحية وبعد علامة الصورة.
