مرحباً بكم في الدرس الثالث من دورة HTML للمستوى المبتدئ

أهلاً بك أيها المبرمج الصاعد! في الدروس السابقة، تعلمنا كيف نبني هيكل الصفحة وكيف نكتب النصوص وننسقها. اليوم، سننتقل إلى خطوة تجعل صفحات الويب أكثر تفاعلية وحيوية: سننتقل للحديث عن الروابط (Links) والصور (Images).

العالم الخارجي: إضافة الروابط باستخدام الوسم a

لغة الإنترنت قائمة على الانتقال من صفحة إلى أخرى. لكي تقوم بإنشاء رابط يوجه المستخدم إلى موقع آخر (مثل جوجل أو يوتيوب) أو إلى صفحة أخرى داخل موقعك، نستخدم الوسم <a> والذي يرمز إلى (Anchor).

هذا الوسم يأتي مع خاصية (Attribute) أساسية جداً تُدعى href، وهي المسؤولة عن تحديد وجهة الرابط.

<a href="https://www.google.com" target="_blank" rel="nofollow">اضغط هنا لزيارة موقع جوجل</a>

ملاحظة هامة للمبتدئين: استخدمنا في الكود أعلاه سمة target="_blank" لكي يتم فتح الرابط في تبويب جديد، واستخدمنا rel="nofollow" كمعيار تقني للروابط الخارجية.

يمكنك قراءة المزيد عن الروابط وكيفية توثيقها رسمياً عبر زيارة موثق MDN الرسمي للغة HTML.

إضافة البصريات: إدراج الصور باستخدام الوسم img

ما هي صفحة الويب بدون صور؟ بالطبع ستكون باهتة. لإدراج صورة في صفحة HTML، نستخدم الوسم <img>. يتميز هذا الوسم بأنه "وسم فارغ" (Empty element)، أي أنه لا يحتاج إلى وسم إغلاق مثل باقي الوسوم.

يعتمد الوسم <img> على خاصيتين أساسيتين:

• src: وتحديد مسار أو رابط الصورة المراد إظهارها.
• alt: وهو وصف نصي يظهر في حال لم يتم تحميل الصورة، وهو مفيد جداً وضعء بصري وضع ضعاف البصر ومحركات البحث.

<img src="my-image.jpg" alt="صورة توضيحية لشرح لغة HTML">

خلاصة الدرس

في هذا الدرس، تعلمت كيف تربط صفحاتك بالعالم الخارجي عبر الروابط، وكيف تثري محتواك بصئياً عبر إدراج الصور. استمر في التدرب على هذه الوسوم، ونلقاك في الدرس القادم حيث سنناقش تنظيم المحترم باستخدام الجداول والقوائم!