لغة html/css - الصور

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

الفهرس

1. مختلف أنواع الصور .
2. إدخال الصورة .

---

مختلف أنواع الصور

هل تعرف ما هي أنواع الصور ؟
الصور أنواع ، يتميز كل نوع بخصائص و مميزاة مختلفة إنطلاقا من جودة الصورة وصولا إلى الإستخدامات ، و لكل نوع من الصور إمتداد مختلف ، كـ png و gif و jpeg ....
كمثال ، يوفر لك برنامج Paint الإختيار بين مختلف أنواع الصور لتحديد النوع الذي تريد حفظ الصورة به .

بعض الأنواع أفضل من الأخرى و ذلك حسب إستعمالات الصورة ( رسوم متحركة ، صورة ، رسم هندسي ... ) . و من جهة أخرى : إن كان لديك ألبوم من الصور التي لا تهم الدقة الكبيرة في تفاصيلها ( صور عائلية ) فالإمتداد المناسب لها هو jpeg ، أما إن كانت لديك مجموعة من الأيقونات المختلفة لملفات حاسوبك فالأحسن إستعمال gif ، أما إذا كانت لديك مجموعة من الصور الهندسية التي تلعب الدقة فيها عاملا أساسيا فيمكنك إستخدام png .
سنتعرف فيما يلي على بعض الأنواع الأكثر إستعمالا في الإنترنت :

JPEG
الصور من النوع jpeg - Joint Photographic Expert Group واسعة الإنتشار في الإنترنت ، فهذا النوع من الصور يعمل على تصغير حجم الصورة حيث يدعم 16 مليون لون مختلف .
هذا النوع من الصور معروف بالإمتداد JPEG أو JPG ، و إليك هذه الصورة كمثال عن هذا النوع .

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

png
النوع png - Portable Network Graphics هو الأفضل على الإطلاق ، يجمع بين الجودة العالية و الحجم الصغير ، و هو يتوفر على خاصية جميلة و هو أنه يستطيع أن يجعل الصورة شفافة أو كالزجاج تستطيع رؤية ما ورائها .

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

يتوفر الـpng بإصدارين حسب عدد الألوان التي يتحملها :

• png 8 bits : يدعم بالضبط 256 لونا .
• png 24 bits : يتحمل 16 مليون لون ( كالـjpeg تماما ) .

هذه الصورة مثال لـpng تتميز بخلفية شفافة :

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

إذا كان png يدعم 16 مايون لون كالـjpeg و زيادة على ذلك يتميز بالخلفيات الشفافة ، فما غرضي بالـjpeg بما أن الـpng يتوفر على كل شيء ؟

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

Gif

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

• النوع png محصور بـ 256 لون فقط ( في حين png يدعم 16 مليون لون ) .
• يتميز الـGif بشيء واحد جعله لا يختفي مع الزمن و هو قدرته على تحريك الصورة :

كل نوع يصلح لصورة ما

• صورة ملتقطة : إستعمل JPEG .
• صورة لا تحتوي على ألوان كثيرة : إستعمل الـPNG 8 bits أو الـGIF .
• صورة تحتوي على ألوان كثيرة : إستعمل الـ PNG .
• صورة متحركة : إستخدم الـ GIF .

أخطاء يجب تجنبها

تجنب الأنواع الأخرى
الأنواع الأخرى من الصور غير مذكورة هنا ، ذلك لأنها لم تخصص للويب ، فالنوع BITMAP أو PSD يتوفران على أحجام كبيرة و الـ PSD لا يستطيع أن يعرض في المتصفح ، فإن وجدت طريقة لجعل هذه الأنواع من الظهور على المتصفح فتأكد أن تحميل صفحتك سيستغرق وقتا طويلا .

أحسن تسمية صورك

لكي تتجنب بعض المشاكل ، رود نفسك من الان على حفظ صورك بأحرف صغيرة ( minuscule ) و بدون فراغ بين الكلمات ، مثال : my_picture.png

يمكنك تعويض الفراغات بالعلامة ' _ '

---

إدخال الصورة

لنعد الان إلى كودات HTML و لنتعرف كيف ندخل الصورة في صفحتنا  .

إدخال الصورة
ما هو العنصر الجميل الذي سندخل به الصورة ؟ إنه عنصر </ img> .

إنه عنصر مغلق ( مثل </ br> ) ، أي لا يحتاج لوسمين : وسم البداية و النهاية ، فكما تعلمنا في الفصل الثاني العناصر المغلقة تتكون من وسم وحيد ، و العنصر </ img> مغلق ، فلإدخال لا نحتاج إلى تحديد مجال بوسمين بل يكفي وضع الوسم في مكان محدد لتظهر الصورة في المتصفح بذلك المكان .

العنصر يجب أن يتوفر على سمتين ضروريتين :

• src : إنها تحدد مكان الصورة التي تريد عرضها . يمكنك إدخال عنوان الصورة إما بصفة مطلقة absolute ( مثل http://www.site.com/image.png ) أو بصفة relative كما سنفعل بعد قليل ( مثل 'src='images/image.png ) ، تماما كما رأينا في فصل الروابط .
• alt : هذه السمة تحدد ما يسمى النص البديل . يجب دائما أن نضع نصا بديلا للصورة ، هذا النص يظهر عندما لا تظهر الصورة في المتصفح ، إن لم يتمكن المتصفح من تحميلها ( هذا يقع ) ، أو أن المستخدم لديه سرعة نت ضعيفة فقام بتعطيل ظهور الصور لتسريع التصفح قليلا .

يمكن أن نضع عنصر الصورة بين النصوص ، و داخل أي عنصر و ذلك حسب رغبتنا .

<p> هذه صورة ملتقطة من وسط غابة خضراء : <br />
<img src="http://3asq.blogspot.com/photo_de_nature.jpg" alt=" صورة لغابة خضراء" /></p>

 هذه صورة ملتقطة من وسط غابة خضراء :

إدخال صورة أمل سهل كما ترى ، فهو مثل الروابط يمكن أن تضيفها في أي مكان ترغب فيه  .
الصعوبة الكبرى ( إذا إعتبرناها صعوبة ) هي إختيار نوع الصورة ، فالصورة السابقة ملتقطة بكاميرا لذا النوع الأفضل لها هو jpg .

أعيد مرة أخرى : تجنب أخذ العلامات و الأحرف الكبيرة و المساحات الفارغة في إسم ملفاتك . إليك رابط قد يخلق لك بعض المشاكل : " Images de site/Mon Image.png " .
يجب حذف المساحات الفارغة و تعويضها بالعلامة " _ " ، إحذف كل العلامات الغريبة و أكتب كل الأحرف صغيرة في إسم الصورة : " images_de_site/mon_image.png " .
إعلم أنه إن لم تظهر صورتك في المتصفح أنك أخطأت في إدخالها أو أن إسمها يحتوي على ما قلناه سابقا . 


إضافة فقاعة معلومات ( infobulle )
السمة التي تجعل فقاعة المعلومات تظهر عند تمرير مؤشر الفأرة فوق الصورة هي title ، ليس على الصور فحسب بل على الروابط و على النصوص و على كل العناصر ، هذه السمة إختارية على عكس src ، إذن يمكنك التخلي عنها  ، لكن لا بد أن تعرفها أولا .

لنجربها على الصورة السابقة حيث بدل أن نكتب الجملة فوق الصورة سنكتبها داخل السمة title لتظهر في الفقاعة .

<img src="http://3asq.blogspot.com/photo_de_nature.jpg" alt="صورة لغابة خضراء" title="هذه صورة ملتقطة من وسط غابة خضراء"/>

الان ضع مؤشر الفأرة فوق الصورة :



هناك سمتين أخريين إختياررين :

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

<img src="http://3asq.blogspot.com/photo_de_nature.jpg" alt="صورة لغابة خضراء" title="هذه صورة ملتقطة من وسط غابة خضراء" width="120px" height="100px"/>

النتيجة :



هكذا تستطيع التحكم في صورك كما ينبغي  .

إن كانت لديك صور كبيرة فلا أنصحك أن تصغر حجمها في موقعك باستخدام السمتين height و width لأن ذلك سيبطأ من موقعك ، رغم أن أبعاد الصورة تصغر إلا أن حجمها يبقى كبيرا ، لذلك حاول أن تصغر الصورة باستخدام برنامج رسم ما ، و هذا سيكون أفظل .

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

<a href="images/photo_de_nature.jpg">
<img src="mini_images/mini_photo_de_nature.jpg" alt="صورة لغابة خضراء" title="هذه صورة ملتقطة من وسط غابة خضراء" />
</a>

النتيجة : ( أنقر على الصورة )

ها قد إنتهينا من هذا الفصل ترقب الفصل القادم  .

→ الفصل التالي الفصل السابق ←