فقرة فرعية #9 من درس: الصور في لغة HTML

Image as a Link in HTML استخدام الصور كرابط في لغة HTML

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

1 صفوف تعليمية

لغة HTML

35,364 مشاهدة

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

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

لغة HTML قائمة على العناصر المتداخلة [nested elements]، لكن لكل عنصر قواعد تحدد ما يجوز وضعه بداخله. يجوز هنا وضع img داخل a، مع أن img عنصر فارغ لا يملك علامة إغلاق.

طريقة استخدام الصور كرابط في لغة HTML:

يمكنك استخدام العنصر الخاص بالروابط [<a href="Value"></a>]، وهو عنصر متداخل، لاستبدال النص بصورة. هذا يسمح للمستخدم بالانتقال من الصفحة الحالية إلى صفحة أخرى بالنقر على الصورة بدلاً من النص.

Image as a Link

في هذا المثال، توضع الصورة بين علامات الفتح والإغلاق لعنصر <a>، وعند الضغط عليها، ستنتقل إلى الصفحة المحددة في قيمة [href].

HTML

<a href="https://www.closetag.com/tutorials/html">
  <img src="/images/mountain.jpg" alt="HTML tutorial">
</a>

جرّب بنفسك

Image as a Link with Target

في هذا المثال، أُضيفت صورة كرابط باستخدام <a> لفتح الصفحة في علامة تبويب جديدة باستخدام ["target="_blank].