الدرس 3: الصور والروابط في HTML

في هذا الدرس سنتعلم كيفية إدراج الصور داخل الصفحة وكيفية إنشاء روابط تنقل المستخدم إلى صفحات أو مواقع أخرى.

1. وسم الصورة <img>

يُستخدم لعرض صورة داخل الصفحة. لا يحتاج وسم <img> إلى وسم إغلاق، ويجب أن يحتوي على خاصية src لتحديد مسار الصورة، وalt لوصفها:

<img src="image.jpg" alt="وصف الصورة">

مثال:

<img src="cat.jpg" alt="قطة لطيفة" width="300">

2. خاصية alt

تُستخدم لعرض نص بديل إذا لم تظهر الصورة، وتساعد في تحسين الوصول وتجربة المستخدم.

3. وسم الرابط <a>

يُستخدم لإنشاء رابط نصي أو رابط حول صورة. الخاصية الأساسية فيه هي href لتحديد وجهة الرابط:

<a href="https://www.example.com">اذهب إلى Example</a>

يمكنك جعل الصورة نفسها رابطًا:

<a href="https://www.example.com">
  <img src="cat.jpg" alt="قطة لطيفة">
</a>

4. فتح الرابط في تبويب جديد

لجعل الرابط يفتح في نافذة أو تبويب جديد، نستخدم الخاصية target="_blank":

<a href="https://www.google.com" target="_blank">افتح جوجل في تبويب جديد</a>

5. روابط داخل الصفحة (Anchor)

يمكنك إنشاء روابط تنقلك لأجزاء مختلفة داخل نفس الصفحة باستخدام خاصية id:

<a href="#section1">اذهب إلى القسم 1</a>

ثم تضع الوسم التالي في المكان الذي تريد الوصول إليه:

<h2 id="section1">القسم 1</h2>

خاتمة

تعلم الصور والروابط أساسي لبناء صفحات ويب جذابة وتفاعلية. استخدم هذه العناصر لتزيين موقعك وتسهيل تنقل الزوار بين الصفحات.

🎥 شاهد الفيديو على يوتيوب