إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

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

5 تعليقات

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

الفهرس
  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>

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



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

تعليقات بلوجر

  1. مثري للعقول , جميل جداً سلمت يداك و لا عدمنا جديدك الشيق دوماً

    ردحذف
  2. متألق كالعادة، بعض المعلومات كنت على علم بها.
    بقراءة تدونتك وطدت علاقتي بالصور :)

    ردحذف
  3. ممكن بعد اذنك يا استاذ عاشق

    انا عامل مدونه لخدمات بلوجر واضافات وكده وكنت عاوز اعملى صوره شخصيه تظهرلى فى التعليقات ممكن تقولى طريقه اصمم بيها الصوره وشكرا

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة