دورة HTML5 و CSS3 : الـدرس الســـادس

السلام عليكم ورحمة الله وبركاته ،،

مرحبا بكم في درس جديد من دروس الدورة

سندرس اليوم كل ما يتعلق بالـصور ..

وأتمنى أن ينتبه معي الجميع اليوم رغم أن الأمر يبدو نوعا ما تافه

لكن للصور تأثير في سرعة تحميل الصفحات ولا أحد يتمنى أن يكون موقعه بطيئ

لهدا سوف نشاهد اليوم العديد من الأمور المهمة

بداية كما تعلمون هناك العديد من الامتدادت الخاصة بالصور ويمكنكم مشاهدتها

من خلال برنامج الرسم في نظام تشغيلكم ... واليك الامتددات الأكثر انتشارا

وفي الحقيقة قبل أن نتحدث عن الامتدادت يجب أن نتحدث أولا عن أنواع الصور

فهناك صور عادية وهناك صور متحركة وهناك أشكال هندسية ..

وان شاء الله سنفصل كل شيء وسنتحدث عن الامتداد لمناسب لكل نوع

وأيضا من المهم التدكير بكون الصورة في الأصل مجموعة أكواد تتكون من الأصفار والوحدات وأنني عندما أعرض لك

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

ودعونا نبدأ الحديث عن الامتدادت :

سنبدأ بالامتداد JPEG

أو Joint Photographic Expert Group

امتداد
جد معروف ومتداول في النت وهدا الامتداد أتى لكي يخفف من حجم الصور معلوم
أن صورة من هدا الامتداد يمكنها أن تحتوي على 16 مليون لون مختلف بخصوص صور
هدا الامتداد فهي تحمل اما .jpg أو .jpeg

وما يعيب
الامتداد أن الصورة لا تكون بدقة عالية لكن هدا طبيعي لان حجم الصور يكون
صغيرا بالتالي وأصلا هدا الامتداد يستعمل لصغر حجم الصور ..

الامتداد PNG

___________________

Portable Network Graphics

هو
امتداد معروف هو الاخر وهو من أحدث الامتدادت أتى بالعديد من الخصائص من
بينها الشفافية أتى لينافس الامتداد GIF وأصبح الان أكثر الامتدادت انتشارا
على الانترنت وهو مخصص في الغالب للصور عالية الدقة وخاصة الأشكال
الهندسية ولهدا الامتداد صنفان

PNG 8 bits ويسمح بـ 256 لون مختلف فقط و PNG 24 bits والدي يسمح بـ16 مليون لون مختلف

__________________________

فقط
كملحوظة صغيرة الصورة ذات الامتداد JPEG يتم تحميلها بشكل سريع مقارنة مع
PNG لهدا يوصى أن الصور التي لا تتطلب دقة عالية يتم تحميلها بامتداد JPEG
وبشكل عام يتم تخصيص PNG للرسوم المصورة أو الأشكال الهندسية كما قلت

______________________

الامتداد GIF

هو من أقدم الامتدادت الموجودة ويستعمل كثيرا لكنني أنصحكم بـPNG بدل منه لكن ما يميزGIF عن باقي الامتدادات هو الصور المتحركة ..

بخلاصة من أجل الصور أنصحكم باستعمال JPEG ومن أجل الاشكال الهندسية والرسوم المصورة PNG ومن أجل الصور المتحركة GIF

بينما باقي الامتدادت لا ينصح بها ولا تليق ولا تصلح لانشاء المواقع ... لان سلبياتها عديدة وعديدة ..

الان نمر لطريقة اضافة الصور عن طريق الكود

سوف نستعمل هدا الغرض الوسم </img> مع الخصائص التالية src و alt

src = من أجلل اضافة عنوان أو مكان الصورة الموجودة على حاسوبنا

alt = من أجل اضافة اسم مضاف للصورة ووهي خاصة مهمة للغاية كما أنه من خلال يمكنك أرشفة مواقعكم بشكل جيد مواقع البحث

أو في حالة عدم ظهور الصورة سيتم كتابة دلك الاسم المضاف

مثلا لدي صورة اسمها nature.jgp وموجودة في ملف اسمه images

لاضافة هده الصورة :

ويمكنكم التجريب بصراحة اضافة الصور أمر بسيط للغاية لكن الأهم والأهم هو اختيار الامتداد المناسب كما شرحت

لكم أعلاه وأيضا اختيار أسماء واضحة للصور فلا يجب أن تكون هناك رموز غريبة للأسماء .. يجب أن تكون أسماء واضحة

أمر آخر يمكننا اضافة الخاصية title والتي شاهدناها في الدرس السابق وهي تقوم بنفس الأمر تماما

الى هنا أكون قد أنهيت الدرس

لا تنسو الدعاء لي وجزاكم الله خيرا وفي آمان الله

ما شاء الله
موضوع في غاية التنظيم و الروعة
شكرا لك اخي الكريم
واصل بهذا النشاط

تحياتي

موضوع في غاية التنظيم و التنسيق

شكرا لك على الموضوع الرائع و المتميز

لك الف عافية اخي الكريم

تقبل مروري

وشكرا

جزاك لله كل خيرا اخي و بانتظار ابداعك الجديد و تسلم اناملك المبدعة و الفنانة خيو
اخوكم نادر

» 【ツ】 موقع يحتوي ع دورات في css . css3 .html5 وغيرها ►••
» أقوي استايلات العام للجيل الرابع , الإصدار -XMedia Darkness- with *CSS3 Fonts
» دورة تعلم php - الدرس 6
» دورة تعلم php - الدرس 22
» دورة تعلم php - الدرس 38