انتقل إلى محتوى الدرس

Title Attribute in Image in HTML خاصية العنوان Title داخل الصورة في لغة HTML

في هذا الدرس، ستتعلم كيفية التعامل مع الصور في HTML، بما في ذلك كيفية بناء الجملة لإضافة الصور وخصائصها مثل [src] و [alt] و [title]، ومعرفة الفرق بينها، بالإضافة إلى ضبط أبعاد الصور واستخدامها كرابط واضافة الصور المتحركة. سنستعرض أيضاً عنصر <picture> وكيفية استخدامه بفعالية.
1 صفوف تعليمية
لغة HTML
35,364 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكن إضافة نص يظهر عند الوقوف بالمؤشر على الصورة باستخدام السمة [title]، التي تُستخدم لإضافة معلومات إضافية مثل التلميحات عن محتوى الصورة أو عنوانها. اجعل التلميح قصيرًا ومرتبطًا بالصورة عند الحاجة؛ إضافة اسم الموقع ليست شرطًا.

تختلف السمة [title] عن النص البديل [alt text]: فالنص البديل يعبر عن محتوى الصورة، بينما يوفر [title] وصفًا إضافيًا للعناصر غير الواضحة. ومن الضروري اختيار نص بديل يعبر بوضوح عن الصورة، ويمكن استعمال [title] لمعلومة إضافية غير أساسية. لا يعتمد عليه وحده لأنه قد لا يظهر باللمس أو لوحة المفاتيح أو بعض التقنيات المساعدة، ولا يحل محل alt.

خاصية العنوان Title داخل الصورة في لغة HTML

Title Syntax

طريقة كتابة خاصية [title] لإضافة عنوان للصورة.

HTML
<img title="value">

Title Attribute

ضع مؤشر الفأرة على الصورة التالية وانتظر قليلاً حتى يظهر النص الموجود داخل خاصية [title].

HTML Title Attribute

خاصية title مع الصور في لغة HTML.

HTML
<img  src="https://www.closetag.com/images/contents/image/1650718020_82231.jpg" style="width:100%;height:auto" alt="Natural" title="Mountain" >