تلعب الصور دوراً هاماً في تحسين تصميم ومظهر صفحات الويب.
<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> بإنشاء مساحة احتواء للصورة المشار إليها.
علامة <img> فارغة، فهي تحتوي على سمات فقط، وليس لها علامة إغلاق.
تحتوي علامة <img> على صفتين مطلوبتين:
- src: تحدد مسار الصورة.
- alt: تحدد نصًا بديلًا للصورة.
مثال:
<img src="url" alt="alternatetext">سمة src
تحدد سمة src المطلوبة المسار (URL) إلى الصورة.
ملاحظة: عندما يتم تحميل صفحة ويب، يكون المتصفح، في تلك اللحظة، هو الذي يحصل على الصورة من خادم ويب ويدرجها في الصفحة. لذلك، تأكد من أن الصورة تبقى في نفس المكان بالنسبة إلى صفحة الويب، وإلا سيحصل زوارك على رمز ارتباط معطل. يظهر رمز الارتباط المعطل ونص البديل إذا تعذر على المتصفح العثور على الصورة.
مثال:
<img src="img_chania.jpg" alt="Flowers in Chania">سمة alt
توفر سمة alt المطلوبة نصًا بديلاً للصورة، إذا تعذر على المستخدم عرضها لسبب ما (بسبب بطء الاتصال أو وجود خطأ في سمة src أو إذا كان المستخدم يستخدم قارئ شاشة).
يجب أن تصف قيمة سمة alt الصورة:
مثال:
<img src="img_chania.jpg" alt="Flowers in Chania">إذا تعذر على المتصفح العثور على صورة، فسيعرض قيمة سمة alt:
مثال:
<img src="wrongname.gif" alt="Flowers in Chania">نصيحة:
قارئ الشاشة هو برنامج كمبيوتر يقرأ رمز HTML ويسمح للمستخدم “بالاستماع” إلى المحتوى. تعتبر برامج قراءة الشاشة مفيدة للأشخاص الذين يعانون من إعاقات بصرية أو صعوبات في التعلم.
من خلال توفير نص بديل للصور باستخدام سمة alt، فإنك تجعلها قابلة للوصول إلى الجميع، بما في ذلك الأشخاص الذين يستخدمون برامج قراءة الشاشة.
حجم الصورة – العرض والارتفاع
يمكنك استخدام سمة style لتحديد عرض وارتفاع الصورة.
مثال:
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">بدلاً من ذلك، يمكنك استخدام سمات width و height:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">تحدد سمات العرض والارتفاع دائمًا عرض وارتفاع الصورة بالبكسل.
ملاحظة: حدد دائمًا عرض وارتفاع الصورة. إذا لم يتم تحديد العرض والارتفاع، فقد تومض صفحة الويب أثناء تحميل الصورة.
العرض والارتفاع، أم نمط؟
كل من سمات العرض والارتفاع والنمط صالحة في HTML.
ومع ذلك، نوصي باستخدام سمة style. إنها تمنع أوراق الأنماط من تغيير حجم الصور:
<!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;">الصور على خادم آخر / موقع ويب آخر
تشير بعض مواقع الويب إلى صورة موجودة على خادم آخر.
للإشارة إلى صورة على خادم آخر، يجب عليك تحديد عنوان URL مطلق (كامل) في سمة src:
مثال:
<img src="https://www.example.com/image.jpg" alt="Example.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;">
</a>تعويم الصورة
يمكنك استخدام خاصية 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):
| الاختصار | تنسيق الملف | امتداد الملف |
|---|---|---|
| APNG | رسومات متحركة محمولة للشبكة | .apng |
| GIF | تنسيق تبادل الرسومات | .gif |
| ICO | رمز Microsoft | .ico, .cur |
| JPEG | صورة مجموعة خبراء التصوير الفوتوغرافي المشتركة | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | رسومات شبكة محمولة | .png |
| SVG | رسومات قابلة للتطوير | .svg |
ملخص الفصل
- استخدم عنصر HTML
<img>لتعريف صورة. - استخدم سمة HTML
srcلتحديد عنوان URL للصورة. - استخدم سمة HTML
altلتحديد نص بديل للصورة إذا لم تتمكن من عرضها. - استخدم سمات HTML
widthوheightأو خصائص CSSwidthوheightلتحديد حجم الصورة. - استخدم خاصية CSS
floatلجعل الصورة تطفو إلى اليسار أو اليمين. - ملاحظة: يستغرق تحميل الصور الكبيرة وقتًا، ويمكن أن يؤدي ذلك إلى إبطاء صفحة الويب. استخدم الصور بحذر.
