دورة تعلم لغة HTML (الدرس التاسع)

دورة تعلم لغة HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغةHTML

الدرس التاسع

ألن يكون رائعاً إذا تمكنت من وضع صورة في موقعك؟ في الحقيقة سيكون هذا رائعا ويمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد:

مثال 1:
كود بلغة HTML:
<img src="logo.png" alt="logo" />

كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟
لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.
"logo.png" هو اسم ملف الصورة الذي تريد وضعها في صفحتك، و".png" هو نوع ملف الصورة، تماماً مثل اللاحقة ".htm" تزظهر أن الملف هو وثيقة HTML، ".png" تخبر المتصفح أن الملف هو صورة، هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
صور GIF تستخدم عادة للرسومات، أما JPEG فتستخدم للصور الفوتوغرافية،هذا لسببين، الأول صور GIF يمكنها أن تحوي فقط 256 لوناً، بينما JPEG يمكنها أن تحوي ملايين الألوان، والسبب الثاني هو أن GIF هي صيغة ملف أفضل لضغط الصور البسيطة أما JPEG فهي أفضل للصور المعقدة التي تحوي تفاصيل كثيرة، وكلما زاد ضغط الصورة صغر حجمها، وهذا يعني أن صفحتك ستظهر بسرعة أكبر، وربما تعرف من خبرتك في المواقع أن الصفحات الثقيلة يمكنها أن تكون بطيئة بشكل كبير لدرجة تزعج الزائر.
في الماضي كانتا صيغة الصورة GIF وJPEG الأكثر استخداماً في صفحات المواقع، مؤخراً صيغة الصور PNG بدأت تكتسب شهرة أكثر وأكثر على حساب صيغة GIF، صيغة PNG تحوي عدة طرق تجمع بين مميزات GIF وJPEG، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.

من أين آتي بالصور؟

إذا أردت أن تقوم بإنشاء صورك الخاصة فأنت بحاجة إلى برنامج محرر صور، محرر الصور هو أحد أهم الأدوات التي تحتاجها لإنشاء مواقع جميلة.
للأسف ليس هناك محرر صور يأتي مع نظام ويندوز أو مع أنظمة التشغيل الأخرى، لذلك عليك أن تشتري برنامج باينت شوب برو أو فوتوشوب أو مايكروميديا فايروركس، وهي أفضل محررات الصور في السوق.
عموماً، كما قلنا سابقاً، ليس من الضروري أن تشتري برامج غالية السعر لإنجاز هذا الدرس، الآن يمكنك إنزال برنامج جيد لتحرير الصور يسمى IfranView وهو برنامج مجاني ولا يكلف شيئاً.
أو يمكنك إنزال الصور من مواقع مختلفة، لكن احذر من مخالفة قوانين حقوق النشر، مع ذلك، من المفيد أن تعرف كيف تقوم بإنزال الصور:
إضغط بالزر الأيمن على أي صورة في أي موقع.
اختر "Save picture as..." في القائمة التي ستظهر لك.
اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".
إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:


الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك.

هل هذا كل ما أحتاجه لمعرفته حول الصور؟

هناك أشياء أخرى يجب أن تعرفها حول الصور، أولاً يمكنك أن تقوم بإضافة صورة من مجلد آخر أو حتى من موقع آخر:

مثال 2:
كود بلغة HTML:
<img src="images/logo.png" />

مثال 3:
كود بلغة HTML:
<img src="http://m3lomadelivery/upload/download.php?img=888" />

ثانياً، يمكن للصور أن تكون روابط:

مثال 4:
كود بلغة HTML:
<a href="http://www.html.net">
<img src="logo.png" /></a>


هل هناك أية خصائص يجب أن أعرفها؟

 

عندما تريد وضع صورة فأنت تحتاج خاصية src التي تخبر المتصفح عن مكان الصور، بجانب ذلك هناك عدد من الخصائص التي يمكن أن تكون مفيدة عند إضافة الصور
خاصية alt تستخدم لتعطي وصفاً بديلاً للصورة إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة، هذه الخاصية مهمة خصوصاً لمن يعاني من أي إعاقة بصرية، وهي كذلك مفيدة في حال لم تظهر الصور بسرعة كافية، لذلك استخدم دائماً خاصية alt:

مثال 5:
كود بلغة HTML:
<img src="logo.png" alt="m3lomadelivery logo" />

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

.................................................................