Kodokon kodokon.com

الروابط والصور

أنشئ روابط إلى صفحات أخرى واعرض الصور بالوسمين a وimg.

7 دقيقة · 3 أسئلة

افتح هذا الدرس في Kodokon

"HyperText" في HTML هي بالضبط القدرة على ربط الصفحات ببعضها البعض عبر الروابط. يُنشأ الرابط بالوسم <a> (اختصار لـ anchor أي مرساة). وتُحدَّد وجهته بالخاصية href (hypertext reference أي مرجع النص التشعبي)، التي تحتوي على URL: عنوان صفحة ويب، مثل https://en.wikipedia.org. ويصبح النص الموضوع بين <a> و</a> قابلًا للنقر.

HTML
<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>
رابط إلى موقع آخر، ثم رابط إلى صفحة في موقعك أنت.

لعرض صورة، تستخدم الوسم <img>. وهو وسم ذاتي الإغلاق: لا محتوى له ولا وسم إغلاق - إذ يتّسع كل شيء داخل الوسم نفسه. وثمة خاصيتان أساسيتان. الخاصية src (source أي المصدر) تُحدّد موضع ملف الصورة. والخاصية alt (alternative text أي النص البديل) تصف الصورة بالكلمات: يُعرض هذا النص إن فشل تحميل الصورة، وتقرأه بصوت مرتفع قارئاتُ الشاشة التي يستخدمها المكفوفون وضعاف البصر.

HTML
<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">
ثلاث صور: src يُعطي الملف، وalt يصفه بالكلمات.

يمكنك الجمع بين الاثنين: صورة موضوعة داخل عنصر <a> تصبح قابلة للنقر. وهذا بالضبط ما تفعله شعارات المواقع - فهي تُعيدك إلى الصفحة الرئيسية عندما تنقر عليها.

HTML
<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>
صورة قابلة للنقر: يوضع عنصر img داخل عنصر a.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

  1. أي خاصية تحتوي على عنوان وجهة الرابط؟
    • src
    • href
    • alt
    • lang
  2. ما وظيفة الخاصية alt في صورة؟
    • وصف الصورة إن لم تُعرض
    • تحديد حجم الصورة
    • إعطاء عنوان ملف الصورة
  3. هل للوسم <img> وسم إغلاق؟
    • نعم، يجب دائمًا كتابة </img>
    • لا، إنه وسم ذاتي الإغلاق
    • فقط إن كانت الصورة كبيرة