21/02/2024
تعلم أساسيات HTML

الدرس الثالث عشر – الصور فى HTML شرح مفصل بالأمثلة

يمكن للصور أن تحسن من مظهر موقعك ، ولإضافة الصور فى صفحة HTML نستخدم العنصر <img> . الصور لا يتم إدراجها فعليا فى صفحة الويب ، ولكن يتم ربطها بالصفحة . فعندما نستخدم <img> يتم انشاء مساحة كافية للصورة في صفحة الويب.

العنصر <img> هو عنصر فارغ يحتوى على سمات فقط بداخله وليس له وسم اغلاق. ويكون له سمتين ريئسيتين:

  • src – ويتم فيها تحديد مسار تخزين الصورة على السيرفر
  • alt – يتم تحديد فيه النص البديل للصورة

الصور في HTML – الصيغة:

<img src="url" alt="alternatetext">

الصور في HTML – السمة src

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

مثال:

 <img src="img_chania.jpg" alt="Flowers in Chania"> 

الصورة فى مجلد آخر

إذا كانت الصورة في مجلد فرعي فيجب تضمين اسم المجلد فى السمة src كما فى المثال التالي:

 <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> 

الصورة على سيرفر آخر أو على موقع آخر

في بعض الأحيان يتم ادراج صورة من سيرفر خارجي في الصفحة. لعمل ذلك يجب اضافة اللينك كامل URL في السمة src كما في المثال التالي:

 <img src="https://www.gaawy.com/images/gaawy_green.jpg" alt="localhost/gaawy"> 

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


الصور في HTML – السمة alt

هى أيضا سمة أساسية للعنصر <img> . حيث يتم عن طريقها اضافة النص البديل للصورة. في حالة عدم ظهور الصورة للمستخدم لأي سبب كان. سواء (اتصال انترنت بطئ – خطأ فى السمة src – المستخدم يستخدم قارئ الشاشة أو أي سبب آخر). يجب ان القيمة التي يتم ادخالها للسمة alt ان تصف الصورة.

مثال:

 <img src="img_chania.jpg" alt="Flowers in Chania"> 

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


الصور في HTML – حجم الصورة – العرض والارتفاع Width and Height

يمكن استخدام السمة style لتحديد عرض وارتفاع الصورة باستخدام css. أو يمكن استخدام السمات width و height مباشرة لتحديد حجم الصور (دائما تكون بالبكسل). يجب تحديد العرض والارتفاع للصورة لإنه إذا لم يتم تحديدهم يمكن للصورة أن تفسد تنسيق الصفحة عندما يتم تحميلها فى المتصفح.

مثال:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> 

الصور في HTML – متى نتستخدم Width و Height ومتى نستخدم Style ؟

كلاهما يصلح للاستخدام فى HTML . ولكن استخدام السمة style يمنع styles sheets من التغيير فى حجم الصورة.

مثال:

 <!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html> 

الصور المتحركة

تسمح لك HTML أن تدرج صور متحركة بامتداد gif كما في المثال التالي:

 <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> 

الصور في HTML – استخدام الصورة كلينك أو رابط

لاستخدام الصورة كرابط، ضع العنصر <img> داخل العنصر <a> كما في المثال التالي:

 <a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a> 

الصور الطافية Float

استخدم الخاصية float في CSS لجعل الصورة تطفو إلى اليمين أو إلى اليسار للنص كما في المثال التالي:

 <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p> 

الامتدادات الشائعة للصور

هذه أكثر أنواع الصور شيوعا، والتي تكون مدعومة في المتصفحات (Chrome, Edge, Firefox, Safari, Opera).

  • jpg – jpeg – jfif – pjpeg – pjp (Joint Photographic Expert Group image)
  • png (Portable Network Graphics)
  • gif (Graphics Interchange Format)
  • apng (Animated Portable Network Graphics)
  • ico – cur (Microsoft Icon)
  • svg (Scalable Vector Graphics)

ملحوظة: اضافة صور كبيرة الحجم قد يجعل تحميل صفحة الويب الخاصة بك بطئ، استخدم الصور بحذر.


تقسيم الصورة إلى مساحات قابلة لعمل كليك عليها HTML Image Maps

لتقسيم الصورة نستخدم العنصر <map> ويتم تحديد فيه المساحات المراد تقسيمها لمساحة واحدة أو أكثر باستخدام العنصر <area> كما في المثال التالي:

 <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map> 

عند الضغط على المساحة المحدد بها “Computer” سيتم نقل المستخدم إلى صفحة معينة. وعند الضغط على المساحة المحدد بها “Phone” سيتم نقل المستخدم إلى صفحة أخرى. وعند الضغط على المساحة المحدد بها “Coffee” سيتم نقل المستخدم إلى صفحة أخرى.


كيف نفعل ذلك؟

الفكرة عبارة عن أننا نقوم بتنفيذ اجراء معين طبقا للضغط على مكان معين في الصورة. فكل ما نحتاج إليه هو صورة وبعض أكواد HTML تصف أماكن الضغط على الصورة.

أولا: الصورة

الصورة المدرجة نستخدم فيها العنصر <img> . الاختلاف الوحيد هو أنه يجب اضافة السمة usemap والقيمة الخاصة بها لابد أن تبدأ بـ # متبوعة بالاسم الذي ستختاره لاستخدامه في تقسيم الصورة. كما في المثال التالي:


<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

ثانيا: إنشاء Image Map

نقوم بإضافة العنصر <map> الذي سنستخدمه لتقسيم الصورة، والذي سيكون مربوط بالصورة باستخدام الاسم الذي تم تحديده في الخطوة السابقة. كما في المثال التالي:


<map name="workmap">

ثالثا: تحديد المساحات

لتحديد المساحات القابلة للنقر عليها نستخدم العنصر <area> . ويجب تحديد الشكل القابل للنقر عليه من الأشكال التالية:

  • rect – شكل مربع (اختصار لـ rectangular)
  • circle – شكل دائري (اختصار لـ circular)
  • poly – شكل مضلع (اختصال لـ polygonal)
  • default – المنطقة كلها

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

الشكل المربع “shape=”rect

الاحداثيات هنا تكون عبارة عن قيمتين، واحدة للمحور الأفقي x-axis ، والأخرى للمحور الرأسي y-axis . فستكون الاحداثيات المحددة للنقطة الموضحة في الصورة التالية 34,44 . والتي ستكون موجودة في 34 بكسل من اليسار و 44 بكسل من الأعلى.

النقطة 34,44

والنقطة في الاحداثيات 270,350 والموجودة في 270 بكسل من اليسار و 350 بكسل من الأعلى كما هو موضح في الصورة التالية:

النقطة 270,350

الآن لديك البيانات كاملة لعمل مربع قابل للنقر عليه، كما في المثال التالي:

 <area shape="rect" coords="34, 44, 270, 350" href="computer.htm"> 

هذه هي المساحة القابلة للنقر عليها والتي سترسل المستخدم إلى الصفحة “computer.htm” كما في الصورة التالية:

الصور في HTML
الشكل المربع الذي تم تحديده

الشكل الدائري “Shape=”circle

لإضافة شكل دائري يجب أولا تحديد احداثيات مركز الدائرة. النقطة 337,300 كما هو موضح في الصورة التالية:

النقطة 337,300

الآن سنقوم بتحديد قيمة نصف قطر الدائرة. قيمتها 44 بكسل كما في هو موضح في الصورة التالية:

نصف القطر 44 بكسل

الآن لديك بيانات كاملة لعمل مساحة دائرية قابلة للنقر عليها كما في المثال التالي:

 <area shape="circle" coords="337, 300, 44" href="coffee.htm"> 

هذه المساحة القابلة للنقر عليها سوف ترسل المستخدم إلى الصفحة “coffee.htm” كما هو موضح في الصورة التالية:

الصور في HTML
الشكل الدائري الذي تم تحديده

الشكل المضلع “Shape=”poly

يحتوي الشكل المضلع على العديد من نقاط الإحداثيات، والتي تكون الشكل عن طريق خطوط مستقيمة. والتي يمكن عن طريقها إنشاء أي شكل. سنقوم بعمل شكل كرواسون قابل للنقر عليه كمثال.

الصور في HTML
استخدام المضلع لتحديد شكل الكراواسون قابل للنقر عليه

الاحداثيات تكون زوجية، أحدها أفقي x-axis والآخر رأسي y-axis كما في المثال التالي:

 <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm"> 

المساحة التي تكون قابلة للنقر عليها سوف ترسل المستخدم إلى الصفحة “croissant.htm”.


الصور في HTML – الجافا سكربت و Image Map

المساحة القابلة للنقر عليها يمكن أيضا أن تقوم بتفعيل function للجافا سكربت، قم بإضافة الحدث onclick للعنصر <area> لتنفيذ ال function الخاصة بالجافا سكربت. كما هو موضح في المثال التالي:

 <map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script> 

استخدام الصورة كخلفية في HTML

يمكن استخدام صورة لعمل خلفية لأى عنصر HTML . لإضافة الصورة كخلفية للعنصر نستخدم السمة style والخاصية background-image (كود CSS). كما في المثال التالي:

 <div style="background-image: url('img_girl.jpg');"> 

يمكن أيضا اضافة الصورة كخلفية في العنصر <style> في القسم <head> كما في المثال التالي:

 <style>
div {
  background-image: url('img_girl.jpg');
}
</style> 

أو إضافة الصورة كخلفية للصفحة ككل في العنصر <body> كما في المثال التالي:

 <style>
body {
  background-image: url('img_girl.jpg');
}
</style> 

الصور في HTML – تكرار الخلفية

إذا كانت الصورة أصغر من العنصر، ستكرر الصورة نفسها افقيا ورأسيا حتى تملأ مساحة العنصر بالكامل. ولتجنب ذلك التكرار نستخدم الخاصية background-repeat ونضع بها القيمة no-repeat . كما في المثال التالي:

 <style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style> 

الصور في HTML – الصورة كخلفية تغطي العنصر بالكامل

لتحقيق ذلك نستخدم الخاصية backgroud-size ونضع بها القيمة cover.
أيضا للتأكد أن العنصر يكون دائما مغطى بالخلفية بالكامل نستخدم الخاصية background-attachment ونض بها القيمة fixed.
بهذه الطريقة الصورة في الخلفية سوف تغطي العنصر بالكامل مع الحفاظ على أبعادها بدون إطالة أو مط.
كما في المثال التالي:

 <style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style> 

مط الصورة في الخلفية Stretch

إذا أردت مط الصورة stretch لملئ العنصر بالكامل نستخدم الخاصية background-size ونضع بها القيمة 100% 100%. عند استخدام هذه الطريقة سيتم مط الصورة لملئ العنصر بالكامل ويظهر ذلك واضحا عند تصغير النافذة وتكبيرها أو تغيير حجمها. كما في المثال التالي:

 <style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style> 

عنصر الصورة <picture>

يعطي هذا العنصر مرونة أكثر للمبرمج لتحديد موارد الصورة. حيث يحتوى العنصر <picture> على واحد أو أكثر من العنصر <source> كل واحد فيها يشير إلى صور مختلفة من خلال السمة srcset . بهذه الطريقة يمكن اختيار الصورة المناسبة لطريقة العرض الحالية للمستخدم أو الجهاز. كل واحدة من العنصر <source> تحتوي على السمة media والتي تحدد الصورة الأنسب. كما في المثال التالي:

 <picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture> 

ملحوظة: قم دائما بتحديد العنصر <img> كـ آخر عنصر فرعي من <picture> . العنصر <img> يتم استخدامه من قبل المتصفحات التي لا تدعم العنصر <picture> . أو في حالة إذا كانت ليست أي من <source> تطابق الشروط المحددة.

متى نستخدم العنصر <picture> ؟

يوجد حالتين لاستخدام <picture> :

1- Bandwidth

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

2- دعم التنسيق

بعض المتصفحات أو الأجهزة قد لا تدعم كل التنسيقات المستخدمة في عناصر <picture>. يمكنك اضافة صور لكل التنسيقات ، حيث سيقوم المتصفح باستخدام أول تنسيق يستطيع التعرف عليه. وسيقوم بتجاهل باقى التنسيقات التالية.

مثال:
 <picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture> 


روابط أو لينكات كورس تعلم أساسيات البرمجة بلغة HTML باللغة العربية كاملة

  1. مقدمة فى HTML لغة البرمجة الرئيسية لإنشاء صفحات الويب
  2. محرر النصوص الأداة الرئيسية لكتابة أكواد HTML
  3. الأكواد الأساسية فى HTML ومحتويات الملف الرئيسي
  4. االسمات (Attributes) لإضافة معلومات لعناصر HTML
  5. العناوين Headings فى HTML العناصر <h1> حتى <h6>
  6. الفقرات Paragraphs لعمل كتلة من النص فى HTML
  7. تصميم صفحات HTML بواسطة CSS وتنسيقها بطرق مختلفة
  8. تنسيق النص فى HTML باستخدام العناصر لعرض النص بطريقة خاصة
  9. الاقتباس فى HTML بالعنصر blockquote و q و abbr و cite و bdo
  10. كيفية التعليق داخل كود HTML وأهميته للمبرمج
  11. الألوان فى HTML وكيفية اضافتها بـ 6 طرق مختلفة
  12. الروابط أو اللينكات (Links) للتنقل بين صفحات HTML
  13. الصور فى HTML شرح مفصل بالأمثلة
  14. الجداول HTML Tables شرح مفصل باللغة العربية بالأمثلة
  15. القوائم HTML Lists شرح مفصل باللغة العربية بالأمثلة
  16. أنواع العناصر Block و inline فى HTML والفرق بينهما
  17. شرح السمة class والسمة id فى HTMl والفرق بينهما
  18. شرح الإطارات HTML Iframes باللغة العربية
  19. HTML Forms – شرح الفورم باللغة العربية بالتفصيل

admin

المشرف العام على موقع gaawy

View all posts by admin →