6 :XHTML (الصور) .

الصور

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

أنواع الصور و إمتداداتها.
هناك أنواع كثيرة للصور و كل واحدة من هذه الأنواع لها إمتداد مختلف و حجم و شكل خاص بها.
كل الصور التي تستعمل في صفحات الويب من النوع الخفيف و الصغير في الحجم، الشيء الذي يجعل صفحاتنا سريعة التحميل و يمكن تلخيص هذه الأنواع في :
jpg : و هذا النوع خاص بالصور التي تحمل كثير من الألوان كالخلفيات و معظم هذه الصور لها إمتداد .jpg
و ها هو مثال لصورة ذات إمتداد jpg :



rasta boy.jpg

png 8-bits : هذا النوع من الصور يستعمل بالنسبة للصور التي لا تحتوي على ألوان كثيرة حيث أنه لا يدعم سوى 256 لون على عكس jpg التي تدعم ملايين الألوان، الجانب الإجابي فيها و الذي يعتبر ثورة في عالم الصور هو انتاج صور ذات خلفيات شفافة و هي مناسبة للصور التي تحمل أشكال بسيطة و غير معقدة، و هي تحمل الإمتداد .png مثل :


flower.png

png 24-bits : مثل ال png 8 bits- و لكن على عكسها تدعم ملايين الألوان و هي الأفضل حاليا بالنسبة للويب، المشكلة أن IE6 مزال لا يدعمها بشكل جيد حيث يزيل الخلفية الشفافة و يضع مكانها خلفية بيضاء مائلة إلى البني.
مثال لصورة png 24-bits :


car.png

gif : هي صور ذات خلفيات شفافة، تدعم 256 لون فقط تحمل الإمتداد .gif بالإضافة إلى دعم الصور المتحركة مثل :


inarabic.gif

ملاحظة : يفضل إستعمال png بدل gif لأنها أصغر حجما و أكثر جودة.
بعد التعرف على أنواع الصور نبدء العمل التطبيقي إن شاء الله.

إضافة صورة
من أجل إضافة صورة إلى الصفحة يوفر لنا ال XHTML الوسم <img /> و كما هو واضح فهو وسم فردي مثل <br /> و <hr />.
بالإضافة إلى خاصيتين و هما :
src : و هنا نضع رابط الصور و كل ما قلناه عن الروابط المطلقة مثل http://www.islamstory.com/img/logo.gif و النسبية مثل img/logo.gif ينطبق عليه تماما.
alt : و هنا نضع نص بحيث يظهر مكان الصورة إذا تعذر على المتصفح إظهارها و لها مهام أخرى ليس هناك المجال لذكرها.
قد يقول البعض لماذا أضيف نص إلى الصورة ألا تكفي الصورة؟.
أجل و لكن لإنشاء صفحة XHTML تحترم المعيير العالمية يجب وضع الخاصية alt في الوسم <img />.
مثال للتوضيح أكثر :
كود:XHTML

<p>This is a picture</p>
<img src="img/flower.png" alt="a flower" />

شاهد المثال
تحذير : من الأفضل أن لا تحتوي أسماء الصور أو المجلدات على فراغات و يستحسن أن تستبدل بالرمز _ كذلك الرموز الغريبة مثل é و à إلخ... بالنسبة لمستعملي اللغة الفرنسية. و أن تكون بالحروف الصغيرة (Small lettres).
و لكن إذا أردت أن أضع الصورة يمين النص أو يساره، ماذا على أن أفعل؟.
اقلب الشاشة مثلا، لا كنت أمزح، المهم هناك خاصية رأيناها سابقا مع الفقرات و النصوص و هي تعمل أيضا مع الصور و هي align. و هي تأخذ نفس القيم التي ذكرانا سابقا باستثناء justify.
تذكير : left لليسار و right لليمين و center للوسط.
و بالطبع المثال ضروري للتوضيح أكثر.
كود:XHTML

<img src="img/flower.png" alt="a flower" align="right" />
<p>we have noticed that there are a few website that give lessons on Arabic and well explained. So we have decided to create this website</p>

شاهد المثال
كما هو مبين في المثال الصورة ستظهر في اليمين.

تحديد أبعاد الصورة
من أجل تحديد أبعاد صورة نستعمل الخاصيتين
• width لتحديد العرض.
• و height لتحديد الإرتفاع.
مثال لكيفية تحديد أبعاد صورة :
كود:XHTML

<p>This is a picture</p>
<img src="img/flower.png" alt="a flower" />
<p>This is a picture with the height of 100px and width of 100px</p>
<img src="img/flower.png" alt="a flower" width="100" height="100" />

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

صورة على شكل رابط
الأن سنقوم بدمج ما رأيناة في الجزء السابق عن الروابط مع ما رأيناه في هذا الجزء أي الصور، لإنشاء صورة على شكل رابط.
الأمر بسيط جدا، سنقوم أولا بإنشاء الرابط ثم نضع مكان نص الرابط وسم الصورة التي نريد أن نجعل منها رابطا.
مثال لصورة على شكل رابط.
كود:XHTML

<a href="http://www.islamstory.com"><img src="img/islamstory.gif" alt="ISlamStory" /></a>

شاهد المثال
قم بتجربة الكود تم إضغط على الصور و ستأخدك إلى موقع قصة الإسلام بالمناسبة هو موقع رائع و أنصح الجميع بزيارته.
المشكلة أن الرابط يضيف إلى الصورة إطار أزرق و هذا ليس جميلا البتة، لحسن الحظ كل شيء له حل تقريبا في ال XHTML، يوفر لنا ال XHTML خاصية تدعى border و هي المسئولة عن حجم الإطار و يكفي أن تعطيها القيمة 0 ليختفي تماما ليصبح الكود على الشكل التالي.
كود:XHTML

<a href="http://www.islamstory.com"><img src="img/islamstory.gif" alt="ISlamStory" border="0" /></a>

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