صور HTML
يمكن للصور تحسين تصميم ومظهر صفحة الويب.
مثال
<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 - تحدد المسار إلى الصورة
- بديل - يحدد نصًا بديلًا للصورة
بناء الجملة
<img src="url" alt="alternatetext">
سمة src
تحدد السمة المطلوبة srcالمسار (URL) للصورة.
ملاحظة: عندما يتم تحميل صفحة ويب ، فإن المتصفح ، في تلك اللحظة ، هو الذي يحصل على الصورة من خادم ويب ويدرجها في الصفحة. لذلك ، تأكد من بقاء الصورة بالفعل في نفس المكان بالنسبة إلى صفحة الويب ، وإلا سيحصل زوارك على رمز ارتباط معطل. يتم عرض رمز الارتباط المعطل altوالنص إذا لم يتمكن المتصفح من العثور على الصورة.
مثال
<img src="img_chania.jpg" alt="Flowers
in Chania">
سمة النص البديل
توفر السمة المطلوبة altنصًا بديلاً للصورة ، إذا كان المستخدم لسبب ما لا يمكنه عرضها (بسبب بطء الاتصال ، أو خطأ في السمة src ، أو إذا كان المستخدم يستخدم قارئ الشاشة).
يجب أن تصف قيمة altالسمة الصورة:
مثال
<img src="img_chania.jpg" alt="Flowers
in Chania">
إذا لم يتمكن المستعرض من العثور على صورة ، فسيعرض قيمة alt
السمة:
مثال
<img src="wrongname.gif" alt="Flowers
in Chania">
نصيحة: قارئ الشاشة هو برنامج يقرأ كود HTML ويسمح للمستخدم "بالاستماع" إلى المحتوى. تعد قارئات الشاشة مفيدة للأشخاص ضعاف البصر أو الذين يعانون من إعاقات التعلم.
حجم الصورة - العرض والارتفاع
يمكنك استخدام 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">
تحدد السمات والسمات دائمًا عرض الصورة widthوارتفاعها heightبالبكسل.
ملاحظة: حدد دائمًا عرض الصورة وارتفاعها. إذا لم يتم تحديد العرض والارتفاع ، فقد تومض صفحة الويب أثناء تحميل الصورة.
العرض والارتفاع ، أم النمط؟
جميع السمات width، heightو ، styleصالحة في 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.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.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>
نصيحة: لمعرفة المزيد حول CSS Float ، اقرأ CSS Float Tutorial .
تنسيقات الصور العامة
فيما يلي أنواع ملفات الصور الأكثر شيوعًا ، والمدعومة في جميع المتصفحات (Chrome ، و Edge ، و Firefox ، و Safari ، و Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
ملخص الفصل
- استخدم
<img>عنصر HTML لتعريف الصورة - استخدم
srcسمة HTML لتحديد عنوان URL للصورة - استخدم
altسمة HTML لتحديد نص بديل لصورة ، إذا كان لا يمكن عرضها - استخدم HTML والسمات أو CSS
widthوالخصائص لتحديد حجم الصورةheightwidthheight - استخدم
floatخاصية CSS للسماح للصورة بأن تطفو إلى اليسار أو اليمين
ملاحظة: يستغرق تحميل الصور الكبيرة وقتًا ، ويمكن أن يبطئ صفحة الويب الخاصة بك. استخدم الصور بعناية.
تمارين HTML
علامات صورة HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .