حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

شرح إدراج الصور HTML

الوسم <img> (الصور)

بعد أن أتقنا العناصر الأساسية لبناء "المحتوى النصي" (Textual Content) و "الترابطي" (Hyperlinks) في الدروس السابقة، ننتقل الآن إلى أحد أهم مكونات الويب الحديث: الوسائط المرئية. لا تكتمل صفحة الويب الحديثة تقريباً بدون صور.

هذا الدرس مخصص بالكامل لشرح الوسم <img>، وهو الوسم المسؤول عن "تضمين" الصور داخل مستند HTML. سنتناول بالتفصيل الخصائص الإلزامية (Attributes) التي يتطلبها، والفرق الحاسم بين أنواع مسارات الصور، وأهمية الخصائص الداعمة لإمكانية الوصول، وكيفية التحكم في أبعاد الصور، وأخيراً كيفية تحويل الصور إلى روابط تشعبية.

التعريف الأساسي: الوسم <img>

الوسم <img> هو اختصار لكلمة "Image" (صورة).

هذا الوسم يُستخدم لتضمين صورة في صفحة الويب. من المهم أن نفهم أن الصور لا يتم "إدراجها" تقنياً داخل ملف HTML (كما تفعل في مستند Word). بدلاً من ذلك، ملف HTML "يرتبط" بملف الصورة، ويقوم المتصفح بطلب (Request) هذا الملف من المصدر (الخادم) وعرضه في المكان الذي تم تحديد الوسم فيه.

الوسم <img> هو "وسم فارغ" (Empty Tag) أو "ذاتي الإغلاق" (Self-closing).

هذا يعني أنه لا يحتوي على محتوى نصي داخلي ولا يتطلب وسم إغلاق </img>. إنه يتكون من وسم فتح واحد فقط يحمل جميع المعلومات التي يحتاجها في شكل "خصائص" (Attributes).

خصائص الوسم <img>: فارغ وسَطري

كما ذكرنا، الوسم <img> "فارغ"، لذا فإن صيغته البسيطة هي <img> (أو <img /> في معيار XHTML الأقدم، وكلا الصيغتين تعملان في HTML5).

الخاصية الثانية المهمة هي أنه، افتراضيًا، يُعد "عنصرًا سطريًا" (Inline-level element)، تماماً مثل <a> أو <strong>.

ماذا يعني كونه "سطريًا"؟

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

هذا يسمح لنا بوضع الصور جنباً إلى جنب، أو وضع صورة صغيرة بجوار نص، دون كسر تدفق المحتوى (على عكس <p> الذي يبدأ دائمًا سطراً جديداً).

الخاصية الإلزامية الأولى: src (Source)

الوسم <img> بدون خصائص لا قيمة له. الخاصية الأهم على الإطلاق والتي لا يعمل الوسم بدونها هي src.

src هو اختصار لكلمة "Source" (المصدر).

قيمة هذه الخاصية هي "مسار" (Path) أو "عنوان URL" لملف الصورة الذي نريد عرضه. هذا يخبر المتصفح "أين" يجد الصورة ليقوم بتحميلها وعرضها.

الصيغة: <img src="مسار_الصورة_هنا">

إذا كان المسار خاطئاً أو لا يمكن الوصول إليه، سيفشل المتصفح في عرض الصورة، وسيُظهر "أيقونة صورة مكسورة" (Broken Image Icon).

الخاصية الإلزامية الثانية: alt (Alternative Text)

هذه الخاصية "إلزامية" تقنياً واحترافياً مثل src تماماً. الوسم <img> المكتوب بدون alt يُعتبر كوداً غير مكتمل وغير احترافي.

alt هو اختصار لكلمة "Alternative" (بديل).

قيمة هذه الخاصية هي "نص وصفي" يشرح ما تحتويه الصورة.

لماذا هي إلزامية؟ لها دوران حاسمان:

  1. إمكانية الوصول (Accessibility): وهو السبب الأهم. المستخدمون الذين يعانون من ضعف البصر ويستخدمون "قارئات الشاشة" (Screen Readers) لا يمكنهم رؤية الصورة. بدلاً من ذلك، سيقوم قارئ الشاشة بقراءة النص الموجود داخل الخاصية alt بصوت عالٍ، مما يمنح المستخدم فهماً لسياق الصفحة.
  2. النص البديل (Fallback): إذا فشل تحميل الصورة لأي سبب (خطأ في المسار src، اتصال إنترنت بطيء، أو أن الخادم معطل)، سيقوم المتصفح بعرض النص المكتوب في alt بدلاً من أيقونة الصورة المكسورة، مما يعطي المستخدم فكرة عما كان من المفترض أن يراه.

ملاحظة هامة: إذا كانت الصورة "تزيينية" بحتة (Decorative) وليس لها معنى دلالي (مثل فاصل منمق)، فإن أفضل ممارسة هي "تضمين الخاصية alt ولكن تركها فارغة": alt="". هذا يخبر قارئ الشاشة أن يتجاهل هذه الصورة تماماً لأنها غير مهمة.

مثال (1): الإدراج الأساسي (src و alt)

يوضح هذا المثال البنية الأساسية الكاملة لإدراج صورة، باستخدام الخاصيتين الإلزاميتين src و alt. سنستخدم "مساراً مطلقاً" (URL كامل) كمثال لضمان عمله.

مثال (1): الإدراج الأساسي للصورة 

<body>

    <h2>مثال على صورة</h2>
    
    <p>
        هذا النص يسبق الصورة. 
        <!-- الوسم التالي هو وسم سطري (inline) -->
        <img 
            src="https://via.placeholder.com/150" 
            alt="صورة رمادية بحجم 150x150 بيكسل"
        >
        هذا النص يلي الصورة.
    </p>

</body>

النتيجة المتوقعة:

ستظهر الفقرة، وستتدفق الصورة مع النص (لأنها inline)، وسيظهر النص الذي يليها في نفس السطر (إذا كان هناك متسع). إذا حاولت "كسر" الرابط (بتغيير src إلى اسم خاطئ)، سيختفي المربع الرمادي ويظهر النص "صورة رمادية بحجم 150x150 بيكسل".

فهم مسارات الصور (Paths): المطلق مقابل النسبي

هذا هو الجزء الأكثر أهمية بعد alt، وهو مصدر شائع للأخطاء. قيمة src هي "مسار". والمسارات نوعان:

النوع الأول: المسارات المطلقة (Absolute Paths)

المسار المطلق هو عنوان URL كامل على الإنترنت، كما استخدمناه في المثال (1).

الصيغة: يبدأ دائمًا بـ https:// أو http://.

مثال: src="https://www.example.com/images/logo.png"

  • متى يُستخدم: عند عرض صور من "مواقع أخرى" (Hotlinking) أو من شبكات توصيل المحتوى (CDNs).
  • المخاطر: أنت لا تملك هذه الصورة. إذا قام الموقع الأصلي بحذفها أو تغيير اسمها، ستتعطل الصورة في موقعك.

النوع الثاني: المسارات النسبية (Relative Paths)

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

المسار النسبي يصف موقع الصورة "نسبة إلى" موقع ملف HTML الحالي.

لماذا هو أفضل؟
لأنه يجعل موقعك "قابلاً للنقل". يمكنك نقل مجلد المشروع بالكامل من حاسوبك إلى خادم ويب، وستظل جميع الروابط تعمل لأنها "نسبية" لبعضها البعض.

أهم قواعد المسارات النسبية:

  • src="image.jpg": تعني أن الصورة موجودة في "نفس المجلد" الموجود به ملف HTML.
  • src="images/image.jpg": تعني أن الصورة موجودة داخل مجلد فرعي اسمه images (وهو الأسلوب الموصى به لتنظيم الملفات).
  • src="../image.jpg": النقطتان (..) تعني "الصعود مستوى واحد لأعلى". أي اخرج من المجلد الحالي، وابحث عن الصورة في المجلد "الأب".

مثال (2): استخدام المسارات النسبية (هيكل المشروع)

لنفترض أن هيكل ملفات المشروع الخاص بك كالتالي: 

/MyProject/
    index.html
    /images/
        logo.png
        banner.jpg
    /pages/
        about.html

سنرى كيف نستدعي الصور من ملفات مختلفة:

مثال (2): المسارات النسبية 

<!-- هذا الكود موجود داخل ملف "index.html" -->
<body>
    <h1>الصفحة الرئيسية</h1>
    
    <!-- المسار بسيط لأنه في مجلد فرعي -->
    <img src="images/logo.png" alt="شعار الشركة">
</body>


<!-- ... في ملف آخر ... -->


<!-- هذا الكود موجود داخل ملف "pages/about.html" -->
<body>
    <h1>صفحة من نحن</h1>
    
    <!-- 
      يجب أن نصعد "لأعلى" (..) للخروج من مجلد "pages"
      ثم ندخل إلى مجلد "images" 
    -->
    <img src="../images/banner.jpg" alt="بانر صفحة من نحن">
</body>

التحكم بالأبعاد: الخاصيتان width و height

بالإضافة إلى src و alt، يمكنك (ويُفضل) تحديد أبعاد الصورة باستخدام الخاصيتين width (العرض) و height (الارتفاع).

تأخذ هذه الخصائص "أرقاماً صحيحة" تُمثل عدد "البيكسلات" (Pixels).

الصيغة: <img src="..." alt="..." width="300" height="150">

لماذا نستخدمها؟ (مهم جداً):
إذا لم تحدد الأبعاد، فإن المتصفح لا يعرف حجم الصورة حتى يبدأ في تحميلها. هذا يؤدي إلى "قفز" المحتوى أو "انزياح التخطيط" (Layout Shift) عندما تظهر الصورة فجأة، وهو ما يسبب تجربة مستخدم سيئة.

عندما تضع width="300" و height="150"، فإن المتصفح "يحجز" مساحة مستطيلة بهذا الحجم في الصفحة حتى قبل تحميل الصورة، مما يجعل الصفحة مستقرة.

ملاحظة حديثة: الطريقة الأفضل للتحكم في الأبعاد (خاصة لجعل الصور "متجاوبة" - Responsive) هي عبر CSS. ولكن حتى عند استخدام CSS، فإن تحديد width و height في HTML يظل ممارسة جيدة لمنع انزياح المحتوى.

مثال (3): تحديد الأبعاد وتجنب "انزياح المحتوى"

مثال (3): استخدام width و height 

<body>

    <h2>صورة بأبعاد محددة</h2>
    <p>سيقوم المتصفح بحجز مساحة 400x200 لهذه الصورة.</p>
    
    <img 
        src="images/banner.jpg" 
        alt="بانر كبير" 
        width="400" 
        height="200"
    >
    
    <p>هذه الفقرة ستظهر دائمًا أسفل المساحة المحجوزة، ولن "تقفز" عند تحميل الصورة.</p>

</body>

تحذير: الحفاظ على نسبة العرض إلى الارتفاع (Aspect Ratio)

يجب توخي الحذر الشديد عند استخدام width و height. إذا كانت أبعاد صورتك الأصلية هي 600x300 (نسبة 2:1)، وقمت بتعيينها في HTML كـ width="300" height="300" (نسبة 1:1)، فإن المتصفح سيقوم "بضغط" (Squash) أو "تمديد" (Stretch) الصورة لتناسب الأبعاد الجديدة، مما يؤدي إلى "تشويه" (Distortion) الصورة.

القاعدة: تأكد دائمًا من أن الأبعاد التي تضعها في HTML تحافظ على نفس "نسبة العرض إلى الارتفاع" (Aspect Ratio) للصورة الأصلية.

(نصيحة احترافية): في CSS الحديثة، يمكننا تحديد width فقط (أو height فقط)، وسيقوم المتصفح بحساب البعد الآخر تلقائيًا للحفاظ على النسبة.

الخاصية title: النص التوضيحي (Tooltip)

هذه خاصية اختيارية شائعة. الوسم title (يُستخدم مع العديد من الوسوم، وليس <img> فقط) يوفر "معلومات إضافية" حول العنصر.

السلوك: في معظم المتصفحات المكتبية، سيظهر النص الموجود داخل title كـ "تلميح" (Tooltip) صغير عندما يقوم المستخدم بـ "تمرير" (Hover) مؤشر الماوس فوق الصورة لثانية أو ثانيتين.

الفرق الحاسم بين alt و title:

  • alt (بديل): يُستخدم "بدلاً" من الصورة (عندما تفشل أو لقارئات الشاشة). يصف "ما هي" الصورة.
  • title (عنوان): يُستخدم "بالإضافة إلى" الصورة. يضيف "معلومة إضافية" أو سياقاً.

لا يجب الاعتماد على title لعرض معلومات هامة، لأن مستخدمي الهواتف (الذين لا يملكون "مؤشر ماوس") قد لا يرونه أبداً.

مثال (4): الفرق بين alt و title

مثال (4): alt مقابل title 

<body>

    <p>مرر الماوس فوق الصورة لرؤية التلميح.</p>
    
    <img 
        src="images/logo.png" 
        width="100"
        alt="شعار الشركة، وهو عبارة عن دائرة زرقاء" 
        title="شعارنا الرسمي منذ عام 2020"
    >

</body>

في هذا المثال:
- إذا فشل تحميل الصورة، سيظهر النص: "شعار الشركة، وهو عبارة عن دائرة زرقاء".
- إذا نجح تحميل الصورة ومررت الماوس فوقها، سيظهر تلميح: "شعارنا الرسمي منذ عام 2020".

تحويل الصور إلى روابط (Nesting)

من الشائع جداً جعل الصورة بأكملها قابلة للنقر (مثل شعار الموقع الذي يعود بك إلى الصفحة الرئيسية).

لقد تعلمنا أن <a> (الرابط) هو عنصر سطري (Inline) وأن <img> (الصورة) هو أيضاً عنصر سطري. العناصر السطرية يمكن تداخلها (Nesting).

القاعدة:
لجعل الصورة رابطاً، نقوم بـ "تغليف" وسم <img> "بالكامل" داخل وسم <a>.

<a href="..."><img src="..." alt="..."></a>

هنا، المحتوى القابل للنقر (الذي يقع بين <a> و </a>) لم يعد نصاً، بل أصبح الصورة نفسها.

مثال (5): صورة قابلة للنقر (Image Link)

يوضح هذا المثال كيفية استخدام شعار (Logo) كرابط يعود إلى الصفحة الرئيسية (index.html).

مثال (5): صورة كرابط تشعبي 

<body>

    <h1>مرحباً بك في صفحة "من نحن"</h1>
    
    <!-- عند النقر على هذه الصورة، سيعود المستخدم إلى index.html -->
    <a href="index.html">
        <img 
            src="images/logo.png" 
            alt="العودة إلى الصفحة الرئيسية" 
            width="150" 
            height="50"
        >
    </a>
    
    <p>نحن شركة متخصصة في... (إلخ)</p>

</body>

(ملخص الدرس):
1. الوسم <img> هو وسم "فارغ" (ذاتي الإغلاق) و "سطري" (Inline).
2. الخاصية src (المصدر) "إلزامية" وتحدد مسار ملف الصورة.
3. الخاصية alt (النص البديل) "إلزامية" وتصف الصورة (لإمكانية الوصول وكأمان عند فشل التحميل).
4. استخدم "المسارات النسبية" (images/pic.jpg) للصور داخل مشروعك، و "المسارات المطلقة" (https://...) للصور الخارجية.
5. استخدم width و height لتحديد الأبعاد (بالبيكسل) لتجنب "انزياح المحتوى" (Layout Shift).
6. الخاصية title اختيارية وتُضيف "تلميح" (Tooltip) عند تمرير الماوس.
7. لجعل الصورة رابطاً، قم بتغليف وسم <img> بالكامل داخل وسم <a>.