منتديات التطوير و الاشهار
 دورة HTML5 و CSS3 : الـدرس الســـادس 15KrP
منتديات التطوير و الاشهار
 دورة HTML5 و CSS3 : الـدرس الســـادس 15KrP
منتديات التطوير و الاشهار
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات التطوير و الاشهار

منتديات التطوير و الاشهار
 
الرئيسيةالرئيسية  البوابةالبوابة  أحدث الصورأحدث الصور  التسجيلالتسجيل  دخولدخول  

 

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

اذهب الى الأسفل 
4 مشترك
كاتب الموضوعرسالة
manotec
‎عضو ‎جديـد
‎عضو ‎جديـد
manotec


ذكر
عدد المساهمات : 3
نقاط نشاط : 9
السٌّمعَة : 0
العمر : 28

 دورة HTML5 و CSS3 : الـدرس الســـادس Empty
مُساهمةموضوع: دورة HTML5 و CSS3 : الـدرس الســـادس    دورة HTML5 و CSS3 : الـدرس الســـادس Emptyالأربعاء ديسمبر 05, 2012 6:07 pm



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


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

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

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





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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

أو Joint Photographic Expert Group

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


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


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

الامتداد PNG

___________________

Portable Network Graphics

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


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

__________________________

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

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


______________________

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

الامتداد GIF

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



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

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

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



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

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

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

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

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

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

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

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

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

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

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



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

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


الرجوع الى أعلى الصفحة اذهب الى الأسفل
lovecab
‎عضو ‎نشـيط
‎عضو ‎نشـيط
lovecab


ذكر
عدد المساهمات : 1619
نقاط نشاط : 1639
السٌّمعَة : 0
العمر : 32

 دورة HTML5 و CSS3 : الـدرس الســـادس Empty
مُساهمةموضوع: رد: دورة HTML5 و CSS3 : الـدرس الســـادس    دورة HTML5 و CSS3 : الـدرس الســـادس Emptyالأربعاء ديسمبر 05, 2012 6:16 pm

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

تحياتي
الرجوع الى أعلى الصفحة اذهب الى الأسفل
الصقر
‎عضو ‎نشـيط
‎عضو ‎نشـيط
الصقر


ذكر
عدد المساهمات : 3730
نقاط نشاط : 4154
السٌّمعَة : 0
العمر : 33

 دورة HTML5 و CSS3 : الـدرس الســـادس Empty
مُساهمةموضوع: رد: دورة HTML5 و CSS3 : الـدرس الســـادس    دورة HTML5 و CSS3 : الـدرس الســـادس Emptyالخميس يناير 03, 2013 6:19 am

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

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

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

تقبل مروري

وشكرا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
nader12
‎عضو ‎نشـيط
‎عضو ‎نشـيط
nader12


عدد المساهمات : 1822
نقاط نشاط : 4616
السٌّمعَة : 0

 دورة HTML5 و CSS3 : الـدرس الســـادس Empty
مُساهمةموضوع: رد: دورة HTML5 و CSS3 : الـدرس الســـادس    دورة HTML5 و CSS3 : الـدرس الســـادس Emptyالثلاثاء يونيو 04, 2013 11:25 am

جزاك لله كل خيرا اخي و بانتظار ابداعك الجديد و تسلم اناملك المبدعة و الفنانة خيو
اخوكم نادر
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
دورة HTML5 و CSS3 : الـدرس الســـادس
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» 【ツ】 موقع يحتوي ع دورات في css . css3 .html5 وغيرها ►••
» أقوي استايلات العام للجيل الرابع , الإصدار -XMedia Darkness- with *CSS3 Fonts
»  دورة تعلم php - الدرس 15
» دورة تعلم php - الدرس 31
» دورة تعلم php - الدرس 47

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات التطوير و الاشهار :: منتديات الكمبيوتر و الانترنت :: برمجة المواقع و المنتديات-
انتقل الى: