الدرس 3: الروابط والصور | المستوى الثاني

👨‍💻

كتبه: فريق أكاديمية البرمجة

🔍 لماذا الروابط والصور مهمان في تصميم الويب؟

في بناء أي موقع ويب، الروابط (<a>) والصور (<img>) هما العنصران الأساسيان اللي بيحوّل صفحة نصية جامدة لموقع تفاعلي جذاب. من خلال 8 سنوات خبرة في تطوير المواقع، لاحظت إن المبتدئين بيوقعوا في نفس الأخطاء في هذين العنصرين — وده اللي خلانا نكتب الدرس ده بشكل مفصل.

في الدرس ده هنتعلم:

✅ أنواع الروابط المختلفة واستخداماتها
✅ كيفية إدراج الصور بشكل احترافي
✅ أفضل الممارسات لتحسين SEO والوصولية
✅ أخطاء شائعة وكيف نتجنبها

⚠️ نصيحة من خبرة: 70% من مشاكل SEO في المواقع الجديدة بتكون بسبب روابط مكسورة أو صور بدون وصف (alt). اقرأ الدرس ده كويس عشان تتجنب المشاكل دي من الأول!

🔗 الروابط (Links) — وسم <a>

الوسم <a> (اختصار لـ Anchor) هو العنصر الأساسي اللي بيخليك تنتقل من صفحة لصفحة. بس مش كل روابط زي بعض — فيه أنواع مختلفة لاستخدامات مختلفة.

1️⃣ الروابط الخارجية (External Links)

لما تربط بموقع تاني، لازم تستخدم الرابط الكامل (Absolute URL) وتضيف target="_blank" عشان يفتح في تبويب جديد — ده بيحافظ على زائرك في موقعك.

<!-- ✅ صح: رابط خارجي يفتح في نافذة جديدة -->
<a href="https://developer.mozilla.org/ar/docs/Web/HTML" 
   target="_blank"
   rel="noopener noreferrer">
    دليل MDN للـ HTML
</a>
        

💡 لماذا rel="noopener noreferrer"؟ الخاصية دي بتمنع الموقع اللي بتربط بيه من التحكم في صفحتك (لأسباب أمنية) وبتمنع تسريب بيانات المتصفح. جوجل بتعتبرها أفضل ممارسة لكل الروابط الخارجية.

2️⃣ الروابط الداخلية (Internal Links)

الروابط الداخلية بتربط صفحات موقعك ببعضها. دي مهمة جدًا لـ SEO لأنها بتوزع "القوة" بين صفحات موقعك وتساعد Googlebot يفهرس كل الصفحات.

<!-- ✅ صح: رابط داخلي نسبي -->
<a href="about.html">من نحن</a>

<!-- ✅ صح: رابط داخلي في مجلد فرعي -->
<a href="lessons/level2lesson2.html">الدرس السابق</a>

<!-- ❌ خطأ: استخدام الرابط الكامل للروابط الداخلية -->
<!-- href="https://mysite.com/about.html" -->
        

3️⃣ روابط البريد الإلكتروني والهاتف

دول بيفتحوا تطبيق البريد أو الهاتف مباشرة — مفيدين جدًا في صفحات التواصل.

<!-- ✅ رابط بريد إلكتروني -->
<a href="mailto:librarybook32.com">
    راسلنا عبر البريد
</a>

<!-- ✅ رابط هاتف (يفتح في الموبايل) -->
<a href="tel:+201229068356">
    📞 01229068356
</a>

<!-- ✅ رابط واتساب مباشر -->
<a href="https://wa.me/201229068356" 
   target="_blank">
    💬 تواصل عبر واتساب
</a>
        

4️⃣ الروابط المؤشرة (Anchor Links)

بتستخدم للتنقل لقسم معين في نفس الصفحة — مفيدة في المقالات الطويلة أو صفحات الأسئلة الشائعة.

<!-- رابط للقسم -->
<a href="#best-practices">اذهب لأفضل الممارسات</a>

<!-- القسم المستهدف -->
<section id="best-practices">
    <h2>أفضل الممارسات</h2>
    <p>...</p>
</section>
        

🖼️ الصور في HTML — وسم <img>

الوسم <img> هو وسم منفرد (self-closing) يعني مالوش وسم إغلاق. الصور بتعمل 60% من حجم صفحة الويب المتوسط، فلازم نتعلم نستخدمها بشكل صح.

التركيبة الأساسية

<!-- ✅ الصورة الأساسية -->
<img src="images/logo.png" 
     alt="شعار أكاديمية البرمجة - منصة تعليم عربية">

<!-- ✅ مع تحديد الأبعاد (يحسن الأداء) -->
<img src="images/hero-banner.jpg" 
     alt="صورة لطالب يتعلم البرمجة على الكمبيوتر" 
     width="800" 
     height="400"
     loading="lazy">
        

🌟 لماذا loading="lazy" مهم؟ الخاصية دي بتخلي الصورة تتحمل لما المستخدم يوصل لها (مش من أول الصفحة). ده بيحسن سرعة التحميل بشكل كبير — وجوجل بتحب المواقع السريعة!

الصور المتجاوبة (Responsive Images)

في 2026، 65% من زيارات المواقع بتكون من الموبايل. لازم الصور تتكيف مع حجم الشاشة.

<!-- ✅ صورة متجاوبة باستخدام CSS -->
<style>
    .responsive-img {
        max-width: 100%;
        height: auto;
        display: block;
    }
</style>

<img src="images/tutorial.jpg" 
     alt="لقطة شاشة من الكود في Visual Studio Code"
     class="responsive-img">
        

صورة مع رابط (Linked Image)

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

<!-- ✅ صورة داخل رابط -->
<a href="https://librarybook32.com">
    <img src="images/logo.png" 
         alt="شعار أكاديمية البرمجة - اضغط للرجوع للرئيسية"
         width="150">
</a>
        

💡 أفضل الممارسات من خبرة 8 سنوات

📋 قائمة التحقق قبل نشر أي صفحة:

✅ كل صورة ليها alt وصفي (مش "صورة" أو "image1")
✅ الروابط الخارجية فيها target="_blank" و rel="noopener"
✅ اختبرت كل الروابط بالضغط عليها
✅ الصور في مجلد images/ منظم
✅ أسماء الملفات وصفية: html-links-lesson.jpg مش IMG_1234.jpg
✅ حجم الصور مضغوط (أقل من 200KB للويب)
✅ استخدمت loading="lazy" للصور اللي تحت الفولد

❌ أخطاء شائعة يجب تجنبها:

الخطأ ❌	الصح ✅	السبب
`alt="صورة"`	`alt="لقطة شاشة لكود HTML يوضح وسم الروابط"`	الوصف العام بيفقد قيمة SEO والوصولية
رابط خارجي بدون `target="_blank"`	إضافة `target="_blank"` + `rel="noopener"`	يحافظ على الزائر في موقعك
صور بأحجام كبيرة	ضغط الصور + استخدام `loading="lazy"`	يحسن سرعة التحميل (Core Web Vitals)
روابط مكسورة (404)	فحص دوري باستخدام أدوات مثل Screaming Frog	تأثر سلبي على SEO وتجربة المستخدم

🎯 تمرين عملي: بناء صفحة "من نحن"

طبق اللي اتعلمته في درس عملي. حاول تبني صفحة about.html بسيطة تحتوي على:

صورة شخصية ليك (أو صورة توضيحية) مع alt وصفي
روابط لصفحات التواصل الاجتماعي (خارجية مع target="_blank")
رابط بريد إلكتروني ورابط واتساب
رابط داخلي يرجع للصفحة الرئيسية
صورة شعار الموقع تكون رابط للرئيسية

<!-- مثال لصفحة من نحن -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>من نحن - أكاديمية البرمجة</title>
</head>
<body>
    <a href="index.html">
        <img src="images/logo.png" 
             alt="شعار أكاديمية البرمجة" width="120">
    </a>
    
    <h1>من نحن</h1>
    <img src="images/team.jpg" 
         alt="فريق أكاديمية البرمجة أثناء جلسة تعليمية"
         width="400" loading="lazy">
    
    <p>تواصل معنا:</p>
    <a href="mailto:librarybook32.com">📧 راسلنا</a>
    <a href="https://wa.me/201229068356" target="_blank">💬 واتساب</a>
</body>
</html>
        

📖 الدرس القادم: الجداول والنماذج

هنتعلم كيف نبني جداول منظمة ونماذج تفاعلية (forms) لجمع بيانات المستخدمين. استعد للتمرين العملي! 🚀

🔗 الروابط والصور في HTML: دليل شامل مع أمثلة عملية