الروابط والصور — أساسيات HTML

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

الرابط `<a>`

<a href="https://developer.mozilla.org">مرجع MDN</a>

نص الرابط يجب أن يصف وجهته: "مرجع MDN" أوضح من "اضغط هنا"، خاصة لمستخدمي قارئات الشاشة الذين يتصفحون قائمة الروابط فقط.

المسارات: مطلقة ونسبية

افترض هذا الهيكل:

my-site/
├── index.html
├── about.html
├── images/
│   └── logo.png
└── blog/
    └── post.html

| من الملف | إلى | المسار |

|---|---|---|

| index.html | about.html | about.html |

| index.html | logo.png | images/logo.png |

| blog/post.html | index.html | ../index.html (.. = المجلد الأعلى) |

| أي صفحة | جذر الموقع | /about.html (يبدأ بـ / من جذر النطاق) |

| موقع آخر | — | https://... (مسار مطلق) |

⚠️ المسار الذي يبدأ بـ / يعمل على خادم حقيقي لكنه لا يعمل عند فتح الملف مباشرة من القرص (file://). أثناء التعلم استخدم المسارات النسبية.

⚠️ الخوادم غالباً حساسة لحالة الأحرف: Logo.png ليس logo.png.

أنواع روابط أخرى

<a href="#contact">انتقل لقسم التواصل</a>       <!-- رابط داخل الصفحة -->
<h2 id="contact">تواصل معنا</h2>

<a href="mailto:hello@example.com">راسلنا</a>
<a href="tel:+9647700000000">اتصل بنا</a>
<a href="files/cv.pdf" download>تحميل السيرة الذاتية</a>

الفتح في تبويب جديد

<a href="https://example.com" target="_blank" rel="noopener noreferrer">مثال (تبويب جديد)</a>

rel="noopener" يمنع الصفحة الجديدة من التحكم في صفحتك (المتصفحات الحديثة تفعله تلقائياً لكن كتابته أوضح وأأمن للمتصفحات القديمة). لا تفتح كل الروابط في تبويب جديد؛ دع المستخدم يقرر.

الصورة `<img>`

<img src="images/baghdad.jpg" alt="نهر دجلة في بغداد وقت الغروب" width="800" height="533" loading="lazy">

| الخاصية | لماذا |

|---|---|

| src | مسار الصورة |

| alt | إلزامية: وصف للصورة لمن لا يراها (قارئ الشاشة، فشل التحميل، محركات البحث) |

| width / height | يحجز المتصفح المساحة قبل التحميل فلا "تقفز" الصفحة |

| loading="lazy" | لا تُحمّل الصورة حتى يقترب المستخدم منها — صفحة أسرع |

كيف تكتب alt جيداً؟

- صِف ما يهم في سياق الصفحة، لا "صورة" أو اسم الملف.

- صورة زخرفية بلا معنى: alt="" (فارغة لكن موجودة) فيتجاهلها قارئ الشاشة.

- صورة داخل رابط: alt يصف وجهة الرابط ("الصفحة الرئيسية لـ Kodax").

الصيغ

| الصيغة | الاستخدام |

|---|---|

| JPG | الصور الفوتوغرافية |

| PNG | صور بشفافية أو حواف حادة |

| SVG | الشعارات والأيقونات (متجهة، لا تفقد الجودة) |

| WebP / AVIF | صيغ حديثة بحجم أصغر بكثير |

الصورة مع تعليق

<figure>
    <img src="images/chart.png" alt="نمو المستخدمين من 100 إلى 5000 خلال 2025" width="600" height="400">
    <figcaption>شكل 1: نمو المستخدمين خلال 2025</figcaption>
</figure>

تمرين

أنشئ مجلداً فيه index.html و about.html ومجلد images. اربط الصفحتين ببعضهما بمسارات نسبية، وأضف صورة بـ alt وصفي وأبعاد، ورابطاً داخلياً يقفز لأسفل الصفحة.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>الروابط والصور</title>
</head>
<body>
    <h1 id="top">مدن عراقية</h1>
    <nav>
        <a href="#baghdad">بغداد</a> |
        <a href="#basra">البصرة</a>
    </nav>

    <h2 id="baghdad">بغداد</h2>
    <figure>
        <img src="images/baghdad.jpg" alt="نهر دجلة في بغداد وقت الغروب" width="600" height="400" loading="lazy">
        <figcaption>نهر دجلة وسط بغداد</figcaption>
    </figure>

    <h2 id="basra">البصرة</h2>
    <p>اقرأ المزيد في <a href="https://ar.wikipedia.org/wiki/البصرة" target="_blank" rel="noopener noreferrer">ويكيبيديا</a>.</p>

    <p><a href="mailto:hello@example.com">راسلنا</a> أو <a href="#top">العودة للأعلى</a></p>
</body>
</html>