HTML & CSS • المستوى الأول • الدرس 3
العودة لفهرس المستوىالروابط التشعبية والصور (Links & Images)
أهداف الدرس العلمية
- إنشاء الروابط بوسم
<a>مع الخاصيةhref. - التحكم في فتح الروابط في تبويب جديد باستخدام
target="_blank". - إدراج الصور بوسم
<img>واستخدامsrcوalt. - فهم أهمية
altفي تحسين إمكانية الوصول ومحركات البحث SEO.
1. الروابط التشعبية (Hyperlinks)
الروابط هي جوهر شبكة الويب المترابطة. يُستخدم الوسم <a> (اختصار Anchor) لتوجيه المستخدمين إلى صفحة أخرى أو موقع خارجي، بفضل خاصية href.
html
<a href="https://google.com">زيارة جوجل</a>
<a href="https://nahdaai.com" target="_blank">فتح نهضة في تبويب جديد</a>💡 خاصية target="_blank": تُجبر المتصفح على فتح الرابط في نافذة أو تبويب جديد.
2. إدراج الصور وخصائصها (Images)
خاصية المصدر src
تحدد رابط أو مسار الصورة المراد عرضها.
النص البديل alt
يصف محتوى الصورة عند تعذر تحميلها، مهم لقارئات الشاشة ولـ SEO.
مثال كامل لإدراج صورة مع رابط:
html
<a href="https://nahdaai.com">
<img src="https://picsum.photos/200" alt="صورة توضيحية للمنصة" width="200" />
</a> التطبيق العملي المباشر
تحدي الدرس الثالث: ربط الصفحات وعرض الصور
- إنشاء رابط
<a>يوجه إلى https://nahdaai.com ويفتح في تبويب جديد مع النص: زيارة منصة نهضة. - إدراج صورة
<img>من https://picsum.photos/200 مع النص البديل صورة الشعار.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 12, Col 1UTF-8Spaces: 2
184 chars