HTML

الصور و الرسومات

أھلاً وسھلاً بك إلى الدرس الخامس من درس تعلم HTML .

في ھذا الدرس سنقوم الان بشرح جميع الوسومات الخاصة بالصور والرسومات و خصائصها مع مجموعة من الأمثلة و النتائج

<IMG> أولى الوسوم التي سنتطرق اليها هو الوسم الخاص بالصور:

<IMG SRC="nom_image.jpg">

هناك طريقتين لتعريف المسلك الخاص بالصور،:

الحالة الأولى:أن تكون الصورة غير موجودة في نفس المجلد او الملف الموجود به ملف HTML

نقوم في ھذه الحالة بكتابة إسم المجلد او الملف تم نتبعه إشارة / ثم اسم الصورة الخاصة بنا

الحالة الثانیة: أن تكون الصورة تتواجد بنفس المجلد او الملف الموجود به ملف HTML

وفي ھذه الحالة نكتب .. (نقطتین) لتوجیھ المتصفح للخروج من المجلد الفرعي الحالي (حیث یوجد ملف HTML (ومن ثم الدخول إلى المجلد images حیث توجد الصورة. وبشكل عام، مھما كانت مواقع تواجد الملفات فإن عملیة تحدید مواقعھا والوصول إلیھا لا تخرج عن نطاق ھذا النمط من الشیفرة. أي كتابة النقطتین للخروج من مجلد فرعي، وكتابة اسم المجلد الذي یجب الدخول إلیھ.

<IMG SRC="mon_image.jpg" HEIGHT="70" WIDTH="120">

الخاصیة التالیة التي تستخدم مع <IMG>ھي ALT وفیھا نحدد نصاً بدیلاً یظھر
مكان الصورة. وھذا النص یلاحظ خصوصاً عندما یكون خیار “إظھار الصور تلقائیاً”
غیر فعال في المتصفح. كما تستطیع ملاحظتھ في الفترة التي تسبق تحمیل الصور
وخاصة في المواقع بطیئة التحمیل.

<IMG SRC="image.jpg" ALT="The Dome Of The Rock">

عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظھورھا یتحدد بالطبع حسب ترتیب
ورودھا في الفقرة، مثلھا مثل أي كلمة أو عبارة أخرى. ونستخدم الخاصیة ALIGN
لتحدید محاذاة الصورة مع النص المرافق لھا أو لنقل بعبارة أخرى: تحدید موقع النص
الذي یلیھا بالنسبة لھا وھي تأخذ القیم:

,MIDDLE, TOP, BOTTOM, LEFT, RIGHT

والآن بعد أن قمنا بتحدید محاذاة الصورة نحتاج إلى تحدید المسافة الفاصلة بینھا وبین النص الذي یجاورھا. ونستخدم لذلك الخصائص التالیة:

VSPACE :لتحدید المسافة العمودیة الفاصلة بین النص والحافتین العلیا والسفلى للصورة.

HSPACE :لتحدید المسافة الأفقیة الفاصلة بین النص والحافتین الیمنى والیسرى للصورة.

آخر خاصیة تستخدم مع الوسم IMG ھي BORDER و تتجلى وظیفتھا

في إضافة إطار حول الصورة كما تمكنك من التحكم بسُمكِها. وھذه الخاصیة تستخدم بشكل خاص عند
استعمال الصورة كرابط. ویتم التحكم بالسُمك من خلال إسناد رقم یمثل السُمك
بالبیكسل. والقیمة الإفتراضیة له من 0 و تعني أنه لا یوجد إطار حول الصورة.
مثلاٌ لإضافة إطار سُمكه 5 بیكسل نكتب الشیفرة على الشكل التالی:

<IMG SRC="image.jpg" BORDER="5">

والآن حان الوقت لكي نناقش معاً بعض الأمور التي تتعلق بالصور والرسومات بشكل عام.