🖼️ كيف تضيف الصور إلى موقعك الإلكتروني باستخدام HTML؟

في الدروس السابقة، تعلمنا كيفية بناء الهيكل الأساسي لصفحة الويب وإضافة النصوص والعناوين والروابط. اليوم، سنخطو خطوة مهمة وجميلة لجعل موقعك أكثر حيوية وجاذبية: إضافة الصور! تخيل موقعاً إلكترونياً بدون صور... سيكون مملًا جداً، أليس كذلك؟ الصور هي التي تعطي الروح والمظهر البصري لصفحاتك.

في هذا الدرس، سنتعرف على الوسم المسؤول عن إدراج الصور، وكيف نتحكم في مصدرها وحجمها، ونفهم لماذا يعتبر النص البديل (Alt Text) من أهم الممارسات في تطوير الويب. هيا بنا نبدأ! 🚀

🔍 الوسم السحري: <img>

الوسم المستخدم لإضافة صورة في HTML هو <img>. هذا الوسم له خاصية فريدة: إنه وسم ذاتي الإغلاق (self-closing). هذا يعني أنه لا يحتاج إلى وسم إغلاق </img>، بل نكتبه هكذا:

<img>

لكن... هذه الصيغة غير كافية. الوسم <img> وحده لا يعرف أي صورة يجب أن يعرض! 🤔 نحتاج إلى إخبار المتصفح: "أين توجد ملف الصورة الذي أريد عرضه؟". هنا يأتي دور السمات (Attributes).

📍 السمة الأهم: src (المصدر)

السمة src هي اختصار لـ Source، أي "المصدر". وظيفتها هي تحديد مسار (Path) ملف الصورة الذي نريد عرضه.

كيف نحدد المسار؟

  1. صورة على جهازك (في نفس مجلد الملف HTML): إذا كان ملف الصورة (مثلاً myphoto.jpg) موجوداً في نفس المجلد الذي يوجد فيه ملف index.html، نكتب اسم الملف فقط. 
    <img src="myphoto.jpg">
  2. صورة في مجلد فرعي: إذا كانت الصورة داخل مجلد فرعي اسمه images، نكتب المسار كاملاً. 
    <img src="images/logo.png">
  3. صورة من الإنترنت (رابط URL): يمكننا استخدام رابط مباشر للصورة من أي موقع على الويب. 
    <img src="https://www.example.com/picture.jpg">

💡 ملاحظة مهمة: عند رفع موقعك على استضافة حقيقية، يجب أن تكون جميع الصور جزءاً من ملفات مشروعك (الطريقتان 1 و 2). استخدام روابط خارجية (الطريقة 3) غير موثوق لأنه إذا اختفى الرابط، ستختفي صورتك من موقعك!

🗣️ السمة الذهبية: alt (النص البديل)

السمة alt هي اختصار لـ Alternative Text، أي "النص البديل". هذه السمة مهمة جداً لعدة أسباب:

  • إمكانية الوصول (Accessibility): تقرأ برامج قارئ الشاشة (Screen Readers) النص الموجود في alt للأشخاص ضعاف البصر لوصف الصورة.
  • فشل تحميل الصورة: إذا فشل تحميل الصورة لسبب ما (مسار خاطئ، اتصال بطيء)، سيظهر النص البديل مكانها.
  • تحسين محركات البحث (SEO): تساعد محركات البحث مثل جوجل على فهم محتوى الصورة وفهرستها بشكل صحيح.
<img src="cat.jpg" alt="قطة بيضاء لطيفة تلعب بكرة صوف">
<img src="company-logo.png" alt="Codex Academy">

📌 قاعدة ذهبية: اكتب وصفاً مختصراً ودقيقاً لما تحتويه الصورة. إذا كانت الصورة decorative فقط (مثل زخرفة)، يمكنك ترك alt فارغاً: alt="".

📐 التحكم في الحجم: width و height

يمكننا التحكم في عرض (width) و ارتفاع (height) الصورة المعروضة باستخدام السمتين بنفس الاسم. القيمة تُعطى عادةً بوحدة البكسل (pixels).

<!-- صورة بعرض 300 بكسل وارتفاع 200 بكسل -->
<img src="landscape.jpg" alt="منظر طبيعي" width="300" height="200">

<!-- صورة بعرض 150 بكسل (سيحسب المتصفح الارتفاع تلقائياً للحفاظ على التناسب) -->
<img src="icon.png" alt="أيقونة" width="150">

⚠️ تحذير: تغيير الأبعاد هنا يغير فقط حجم العرض على الشاشة، ولكن حجم ملف الصورة الأصلي يبقى كما هو. لتحسين أداء الموقع، من الأفضل دائماً تعديل حجم الصورة الأصلية باستخدام برامج التصميم (مثل Photoshop أو GIMP) لتكون بالحجم المناسب قبل رفعها لموقعك، ثم استخدام width و height للضبط الدقيق إذا لزم الأمر.

🧩 مثال عملي متكامل

لنجمع كل ما تعلمناه في مثال واحد. سننشئ صفحة بسيطة تعرض معلومات عن منتج مع صورة.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>متجر - قهوة خاصة</title>
</head>
<body>
    <h1>قهوة المميزة ☕</h1>
    <p>استمتع بأجود أنواع حبوب البن المحمصة حديثاً.</p>

    <!-- هنا نضيف الصورة مع جميع السمات المهمة -->
    <img src="products/coffee-bag.jpg" alt="كيس قهوة البني الفاتح مع ملصق ذهبي" width="400" height="300">

    <p>السعر: 45 ريال فقط.</p>
    <a href="order.html">اطلب الآن</a>
</body>
</html>

🎯 الخلاصة

لقد أصبحت الآن تعرف أساسيات إضافة الصور في HTML! تذكر دائماً:

  1. الوسم هو <img> (ذاتي الإغلاق).
  2. السمة src إلزامية لتحديد مصدر الصورة.
  3. السمة alt مهمة جداً للوصولية وSEO، ولا تهملها.
  4. يمكنك استخدام width و height للتحكم في حجم العرض، ولكن حافظ على تناسب الأبعاد.

🔮 ماذا سنتعلم في الدرس القادم؟

الآن وقد أصبح موقعنا يحتوي على نصوص وروابط وصور، حان الوقت لتنظيم هذه المحتويات وترتيبها بطريقة جميلة ومنطقية! 🧱 في الدرس القادم، سندخل إلى عالم الجداول (Tables) في HTML. سنتعلم كيف ننشئ جدولاً بسيطاً لعرض البيانات بشكل منظم، مثل جدول المواعيد، أو قائمة الأسعار، أو معلومات المنتجات. استعد لتعلم الوسوم <table> و <tr> و <td>!