الفصل الثالث

التعامل مع الصور وملفات الملتميديا

العلامة<img>

تستخدم العلامة<img> في إدراج الصور في صفحات الويب, والعلامة <img> من العلامات التي تحتوي على حد واحد فقط, أي أنه ليس لها حد بداية وحد نهاية، بداخل<img……> يتم وضع خواص الصورة التي يتم إضافتها إلى صفحة الويب, من حيث حجم الصورة وعرضها وارتفاعها، واسم الصورة, والمسار الذي يستخدمه المتصفح في الوصول إلى الصورة, وكذلك النص البديل الذي يظهر في حالة فشل المتصفح في فتح الصورة, والكود التالي يستخدم في وضع الصورة في المستند:

في الكود السابقdog هو اسم الصورة, وjpg. هو امتداد الصورة, ولكي يستطيع المتصفح أن يقوم بعرض الصورة في صفحة الويب يجب أن تقوم بكتابة اسم الصورة وامتداداها بشكل صحيح، وفي حالة وجود خطأ في اسم الصورة أو امتدادها لايستطيع المتصفح إظهار الصورة في صفحة الويب, لاحظ أيضاً أن اسم الصورة وامتدادها موضوع بين علامتين التنصيص”  “, لاحظ في الكود أيضاً أن كلمةsrc معناها هو مصدر الصورة الذي يقوم المتصفح بالبحث فيه للوصول غلى الصورة التي سيقوم بوضعها في صفحة الويب، والمثال التالي يوضح كيفية إضافة الصورة إلى المستند:

1. قم بتشغيل برنامجnotepad واكتب به نص ملفhtmlكما في الشكل التالي:
2. قم بحفظ المستند بامتدادhtml. وقم بفتح المستند في متصفح الإنترنت ويتم وضع الصورة بداخل صفحة الويب, وتظهر الصورة في الصفحة, كما في الشكل التالي:
3. ولعل السؤال الذي يدور بذهنك الأن هو, أين يجب أن أضع الصورة حتى يستطيع المتصفح إظهارها في صفحة الويب؟ والإجابة على هذا السؤال بسيطة للغاية, هي أنه يجب أن تقوم بوضع الصورة في المسار الذي قمت بتحديده للصورة في الكود الخاص بوضع الصورة في صفحة الويب, ففي المثال السابق كان الكود الخاص بوضع الصورة في صفحة الويب كما يلي:

وفي الكود السابق ثم نقم بإخبار المتصفح عن أي مسار توجد به الصورة, وبالتالي يقوم المتصفح بالبحث عن الصورة في نفس المسار الموجود به صفحة الويب, فإن وجدها قام بفتحها في الصفحة, كما حدث في المثال, وإن لم يجدها لن يستطيع المتصفح أن يقوم بفتح الصورة لعدم وجودها في المكان المفترض أن توجد فيه الصورة, ومعنى ذلك هو أنه لو لم تقم بتحديد مكان الصورة فإن المتصفح يفترض أن الصورة موجودة في نفس المجلد الموجود فيه صفحة الويب. ولكن إذا كانت الصورة التي تريد فتحها في صفحة الويب موجودة في مجلد آخر كيف يقوم المتصفح بفتحها, في هذه الحالة يجب أن تقوم بكاتبة المسار إلى المجلد الموجود فيه الصورة في الكود حتى يستطيع المتصفح الوصول إلى الصورة ويتم كتابة المسار إلى المجلد الموجود فيه الصورة بإحدى طريقتين: إما أن تقوم بكتابة المسار إلى المجلد الموجود فيه الصورة من البداية, بمعنى تحديد البارتيشن الموجود فيه الصورة, والمجلد الأساسي الموجود فيه المجلد الفرعي الذي يحتوي على الصورة, واسم هذا المجلد الفرعي الذي يحتوي على الصورة كما يلي:

أما لو كانت موجودة الصورة موجودة في مجلد الفرعي في نفس لبمجلد الموجود فيه صفحة الويب, هذا المجلد يسمىimages (على سبيل المثال), في هذه الحالة يتم كتابة اسم المجلد متبوعاً بالشرطة المائلة/, ثم كتابة اسم الصورة وامتدادها , كما يلي: