يوضح هذا المنشور كيفية كتابة تعليق أسفل الصورة.
كيف تكتب تسمية توضيحية تحت صورة؟
لكتابة تعليق أسفل صورة ، سنوفر طرقًا مختلفة مذكورة أدناه:
- الطريقة الأولى: كيفية إضافة تسمية توضيحية للصورة باستخدام HTML '
' جزء؟ - الطريقة الثانية: كيفية إضافة تسمية توضيحية للصورة باستخدام ' ' جزء؟
الطريقة الأولى: كيفية إضافة تسمية توضيحية للصورة باستخدام عنصر HTML '
'؟ لإضافة تعليق على الصورة ، اتبع الإرشادات التالية:
- أولاً ، أضف ' <تكوين> '، والذي يتم استخدامه لتمثيل محتوى قائم بذاته ، مع تسمية توضيحية اختيارية.
- بعد ذلك ، أدخل '
'علامة داخل الفقرة' ' بطاقة شعار. أضف الصورة من خلال استخدام ' src ' ينسب. ال ' كل شيء تعرض خاصية 'المحتوى المضاف إذا لم يتم عرض الصورة لسبب ما.
- اضبط عرض الصورة على أنه ' 200 بكسل '.
- ثم '
'العلامة لإضافة التسمية التوضيحية للصورة. علاوة على ذلك ، أضف التسمية التوضيحية بين علامتي ' ':
<ص >= 'TSL.png' كل شيء = 'منشئو محتوى TSL' العرض = '200' >
>يمكنك أن ترى أنه تم عرض الصورة مع التسمية التوضيحية المحددة:
الآن ، انتقل إلى الطريقة الثانية لإضافة التسمية التوضيحية باستخدام CSS.
الطريقة 2: كيفية إضافة تسمية توضيحية للصورة باستخدام عنصر '
'؟لإضافة التسمية التوضيحية للصورة باستخدام '
'، جرب التعليمات المقدمة:
- إنشاء ' 'وإضافة سمة فئة بالاسم' حامل الصورة '.
- إضافة علامة العنوان ' 'لإدخال العنوان ونمط العنوان وفقًا لاختيارك.
- أضف عنصر '
' آخر وأدخل علامة ''مع' src '،' كل شيء ' و ' العرض 'بين حاوية div.
- أضف '
' ثالثًا باسم الفئة ' صورة توضيحية '. ثم قدم التسمية التوضيحية بين علامتي ''. وعلاوة على ذلك، فإن '
'العنصر' لإضافة فاصل سطر واحد: <فئة div = 'حامل الصورة' >
<نمط h2 = 'اللون: rgb (95 ، 31 ، 245)' > صورة HTML >
= 'TSL.png' كل شيء = 'منشئو محتوى TSL' العرض = '200' >
<فئة div = 'صورة توضيحية' > <ر > منشئو محتوى TSL >
>
>يمكن ملاحظة أنه تمت إضافة التسمية التوضيحية للصورة بنجاح:
الآن ، دعنا ننتقل إلى قسم CSS لتطبيق الخصائص.
نمط '. image-holder' في CSS
أولاً ، قم بالوصول إلى '
'عنصر له فئة' حامل صورة '. بعد ذلك ، قم بتطبيق خصائص CSS التالية: حامل صورة {
وضع : نسبيا ؛
ارتفاع : 100 بكسل ؛
العرض : 200 بكسل ؛
حافة : تلقاءي ؛
}تفاصيل الخصائص المذكورة أعلاه موضحة أدناه:
- ال ' وضع 'تم تعيينه كـ' نسبيا 'لتحديد الموضع الأصلي للعنصر الذي يظل في تدفق المستند ، تمامًا مثل القيمة الثابتة.
- ثم، ' ارتفاع 'لتحديد ارتفاع العنصر.
- ال ' العرض 'تحدد الخاصية حجم العنصر في العرض.
- ال ' حافة 'تم تعيينه كـ' تلقاءي 'لتعيين المساحة تلقائيًا حول العنصر.
أسلوب التسمية في CSS
في هذه الخطوة ، سنصل إلى الفئتين باسم ' حامل الصورة ' و ' صورة توضيحية 'وتطبيق خصائص CSS التالية:
حامل صورة .img-caption {
وضع : مطلق ؛
محاذاة النص : المركز ؛
وزن الخط : بالخط العريض ؛
العرض : 200 بكسل ؛
ارتفاع : 50 بكسل ؛
اليسار : 0 بكسل ؛
اللون : #f80909 ؛
معرفتي : RGB ( 140 و 166 و 253 ) ؛
}وصف العقارات المذكورة أعلاه كالتالي:
- ال ' محاذاة النص 'تم تعيين الخاصية' على أنها ' المركز 'لمحاذاة موضع النص في المركز.
- التالي، ' وزن الخط 'تم تخصيصه كـ' بالخط العريض 'لتعيين خط التسمية التوضيحية للصورة.
- ثم ' اللون 'يتم استخدام الخاصية لتحديد لون العنصر الذي تم الوصول إليه.
- ال ' معرفتي 'تحدد الخاصية لون خلفية العنصر.
- خصائص أخرى ، بما في ذلك ' وضع '،' ارتفاع '، و ' العرض 'تستخدم أيضًا لتطبيق الوظائف ذات الصلة.
انتاج |
لقد ناقشنا طرق كتابة التعليق تحت صورة.
استنتاج
لكتابة تعليق أسفل صورة ، يمكن للمستخدمين إما استخدام '
'عنصر أو بسيط' ' وعاء. لاستخدام '' ، أضف أولاً ' 'لتضمين الصورة داخل' <تكوين> '، إذن ، استخدم عنصر'
'وأضف تعليقًا بين علاماته. في الطريقة الثانية ، يمكن للمستخدمين ببساطة استخدام ' 'وتطبيق خصائص CSS مختلفة لتجميل التسمية التوضيحية. لقد أوضح هذا المنشور طرق كتابة التعليق أسفل الصورة.