الصور داخل لغة HTML

ما هي HTML Images ؟


يُمكن للصور تحسين التصميم وظهور صفحة الويب.
مثال:
<img src="pic_trulli.jpg" alt="Italian Trulli">
مثال:
<img src="img_girl.jpg" alt="Girl in a jacket">
مثال:

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

كيفية وضع الصور داخل لغة HTML

في لغة HTML، يتم تعريف الصور بإستخدام الوسم <img>.
الوسم <img> يكون فارغاً، وتحتوي على سمات فقط ولا تحتوي على علامة إغلاق.
تُحدد السمة src عنوان URL "عنوان الويب" للصورة.
مثال:
<img src="url">

السمة البديلة The alt Attribute

تُوفر سمة alt نصاً بديلاً لصورة ما، إذا لم يتمكن المُستخدم لسبب ما من مشاهدته "بسبب بطء الإتصال أو وجود خطأ في السمة src أو إذا كان المستخدم يستخدم قارئ الشاشة".
يجب أن تصف قيمة سمة alt الصورة.
مثال:

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

إذا تعذر على المتصفح العثور على صورة، فسيعرض قيمة سمة alt.
مثال:

<img src="wrongname.gif" alt="Flowers in Chania">

ملاحظة: سمة alt مطلوبة، صفحة الويب لن يتم التحقق منها بشكل صحيح بدونها.

حجم الصورة - العرض والارتفاع

يُمكنك إستخدام سمة النمط لتحديد عرض وإرتفاع الصورة.
مثال:

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
بدلاً من ذلك، يُمكنك إستخدام سمات العرض والإرتفاع بدون إستخدام الوسم style.
مثال:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

تُحدد سمات العرض والإرتفاع دائماً عرض وإرتفاع الصورة بالبكسل pixels.
ملاحظة: حدد دائماً عرض وإرتفاع الصورة.
إذا لم يتم تحديد العرض والطول، فقد تومض الصفحة أثناء تحميل الصورة.

Width and Height, or Style 

تكون سمات العرض والإرتفاع والنمط صالحة داخل لغة HTML5.
ومع ذلك، فإننا نقترح إستخدام سمة النمط style attribute.
تمنع أوراق الأنماط style 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>


الصور في مجلد آخر

إذا لم تكن الصورة مُحددة، يتوقع المتصفح العثور على الصورة في نفس المجلد مثل صفحة الويب.
ومع ذلك، فمن الشائع تخزين الصور في مجلد فرعي.
يجب تضمين إسم المجلد في وسم src.
مثال:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

الصور في سيرفر أخر

تُخزن بعض مواقع الويب صورها على خوادم الصور.
في الواقع، يُمكنك الوصول إلى الصور من أي عنوان ويب في العالم.
مثال:

<img src="https://www.t3lemonline.com/images/logo.jpg" alt="t3lemonline.com">

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

تسمح لغة HTML بإضافة الصور المتحركة GIF.
مثال:

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

الصور كروابط

لإستخدام صورة كحلقة وصل، ضع وسم <img> داخل وسم <a>.
مثال:

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


ملاحظة:  يتم إضافة Border 0: لمنع IE9 والإصدارات الأقدم من عرض حد حول الصورة عندما تكون الصورة رابطاً.

الصور العائمة

إستخدم خاصية 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>


خرائط الصور

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

<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>


ترتبط السمة name للعلامة <map> بسمة usemap للعنصر <img> وتنشئ علاقة بين الصورة والخريطة.
يحتوي عنصر <map> على عدد من العلامات <area> ، التي تحدد المناطق القابلة للنقر في خريطة الصورة.

صورة الخلفية

لإضافة صورة خلفية على عنصر HTML، قم بإستخدام الخاصية background-image.
لإضافة صورة خلفية على صفحة ويب، حدد خاصية صورة الخلفية في عنصر BODY.
مثال:

<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>


لإضافة صورة خلفية في فقرة، قم بتعيين خاصية صورة الخلفية على عنصر P.
مثال:

<body>
<p style="background-image:url('clouds.jpg')">...
</p>
</body>


The <picture> Element

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

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

</picture>


أظهر صورة واحدة إذا كانت نافذة المتصفح (viewport) هي بحد أدنى 650 بيكسل،
وصورة أخرى إن لم تكن ولكن أكبر من 465 بكسل.
ملاحظة: حدد دائمًا عنصر <img> كعنصر تابع آخر لعنصر <picture>.
يتم إستخدام عنصر <img> من قبل المتصفحات التي لا تدعم العنصر <picture>، أو إذا لم تتطابق أي من العلامات <source>.

ملخص الفصل الصور داخل لغة HTML

  • إستخدم عنصر HTML img لتحديد صورة
  • إستخدم السمة HTML src لتعريف عنوان URL الخاص بالصورة.
  • إستخدم سمة alt لتعريف نص بديل لصورة ما، إذا تعذر عرض الصورة.
  • إستخدم سمات العرض والإرتفاع HTML لتحديد حجم الصورة.
  • إستخدم خصائص العرض والارتفاع في CSS لتحديد حجم الصورة بدلاً من ذلك.
  • إستخدم خاصية Float CSS للسماح للصورة بالطفو.
  • إستخدم عنصر HTML map لتحديد خريطة الصورة.
  • إستخدم عنصر HTML area لتحديد المناطق القابلة للنقر في خريطة الصورة.
  • إستخدم سمة usemap لعنصر HTML img للتركيز على مخطط الصورة.
  • إستخدم عنصر HTML picture لعرض صور مختلفة لأجهزة مختلفة.
  • ملاحظة: يستغرق تحميل الصور وقتاً.
  • يُمكن للصور الكبيرة أن تبطئ صفحتك.
  • إستخدم الصور بعناية.

0 التعليقات

إرسال تعليق