الدرس الثاني جدول + صورة

الصور والرسومات
إدراج صورة: الوسم الخاص بإدراج صورة و هو <IMG> وهو وسم مفردو الكلمة إختصار لكلمة (IMAGe ). لكن هل يكفي هذا لإدراج صورة؟ كلا، بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية له SRC لتحديد موقع واسم الصورة والكلمه إختصار(SouRCe) أي المصدر وتكون الصيغة كالاتي:-

إدراج صورة ذات وصله:-
بالطبع تستطيع أن تدرج صورة ذات وصله تشعبيه إلي صفحة أخري أو حتي إلي ملف و تكون الصيغة كالاتي:-

و تلاحظ أن الصورة لاتبدو مثل الصورة السابقه تمام !!.وهذا لان المستعرض أحاط الصورة بإطار (BORDER ) ليظهر أن هذه الصورة ذات وصله تشعبيه إلي صفحة أخري او ملف . بالطبع هذه الطريقه ليست دائما تلاقي ترحيب فلهذا من الممكن أن تتخلص من هذا الإطار بأن تضع هذه الخاصيه داخل كود أو شفرة إدراج الصورة "0"=border وفي أغلب الأحوال تكون قيمة الإطار ب 2 و تستطيع أن تقلل أو تزيدها كما تحب و بالطبع تستطيع أن تضع إطار للصورة التي لا تحتوي علي وصله كما في المثال التالي
<img border="6" src="go.gif">
الخواص الأساسيه للصورة:-
موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرة، مثلها مثل أي كلمة أو عبارة أخرى. ونستخدم الخاصية ALIGN وهي تأخذ القيم: BOTTOM, TOP, MIDDLE, LEFT, RIGHT

‎العرض والإرتفاع
إن الأبعاد الأساسية لأي صورة يمثل أمر هام جدا لإدراج صورة في صفحتك ولكن هل نستطيع أن نتحكم أيضاً في إظهار الصورة بالحجم الذي نريده؟!!! و الإجابه نعم . كيف؟ من خلال هذا الوسم بإضافة الخصائص HEIGHT, WIDTH متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين. ويكون الوسم بهذا الشكل

الوسم ALT
الخاصية التالية التي تستخدم مع <IMG> هي ALT وفيها نحدد نصاً بديلاً يظهر مكان الصورة.
<IMG SRC="bearbig.gif" ALT="A lovely bear دب جميل">

هوامش الصورة Image margins
لتحديد المسافة الفاصلة بين الصورة وبين النص الذي يجاورها. نستخدم لذلك الخصائص التالية:
VSPACE: لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.
HSPACE: لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.
وتكون صيغة الوسم بهذا الشكل

الجداول
TABLE>...<‎/TABLE> وسوم تعريف الجدول
<TR>...<‎/TR> وسوم تعريف الصف في الجدول
<TD> ....<‎/TD> وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية

خصائص الجدول
BORDER تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود

‎

WIDTH نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح
<TABLE WIDTH="600">‎
HEIGHT لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح مثلها مثل العرض تماما
‎<TABLE HEIGHT="500">‎
CELLSPACING لتحديد المسافة بين كل خلية من خلايا الجدول
CELLPADDING لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.
‎

ALIGN لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left
BGCOLOR ويستخدم لتحديد لون الخلفية للجدول

كيف يمكن ان تنشأ جدول بداخل جدول ؟ إن الإجابة علي هذا السؤال في غايه البساطة والسهوله فقط كل ما عليك إلا أن تحدد الجدول الكبير الذي سيحتوي بداخله الجدول الآخر