الصور يمكن تحسن تصميم ومظهر صفحة الويب.
<img src="platformspot.jpg" alt="platformspot">
HTML الصور
في HTML ، يتم تعريف الصور بـ <img>
و src تحدد سمة URL (عنوان ويب) :
<img src="url">
السمة alt
alt هي نص بديل للصورة، إذا كان المستخدم لسبب ما لا يمكن مشاهدته (بسبب اتصال بطيء، خطأ في سمة src، أو إذا كان المستخدم يستخدم قارئ الشاشة).
altيجب أن تصف قيمة السمة للصورة:
<img src="platformspot.jpg" alt="platformspot">
إذا تعذر على المستعرض العثور على الصورة ، فسيعرض قيمة alt :
<img src="platformspot.gif" alt="platformspot">
ملاحظة: لن يتم التحقق من صحة صفحة الويب بشكل صحيح بدونها.
حجم الصورة – العرض والارتفاع
يمكنك استخدام style لتحديد عرض الصورة وارتفاعها.
<img src="platformspot.jpg" alt="platformspot" style="width:500px;height:600px;">
بدلا من ذلك، يمكنك استخدام widthو height:
<img src="platformspot.jpg" alt="platformspot" 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;">
الصور على خادم آخر
تخزن بعض مواقع الويب صورها على خوادم أخرى.
في الواقع ، يمكنك الوصول إلى الصور من أي عنوان ويب في العالم:
<img src="https://www.platformspot.com/images/platformspot.jpg" alt="platformspot.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 للسماح للصورة بأن تطفو إلى اليمين أو إلى يسار النص:
<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>بـ<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>
HTML <picture> العنصر
<picture> هي لإضافة المزيد من المرونة عند تحديد موارد الصورة.
<picture> تحتوي على عنصر عددا من <مصدر> العناصر في اشارة الى مصادر صورة مختلفة لكل منهما. بهذه الطريقة ، يمكن للمتصفح اختيار الصورة التي تناسب العرض الحالي و / أو الجهاز الحالي.
كل <source> له سمات تصف متى تكون صورتهم هي الأنسب.
سيستخدم المتصفح <source> الأول مع مطابقة قيم السمات ، ويتجاهل أي من <source> التالية .
أظهر صورة واحدة إذا كانت نافذة المتصفح (viewport) هي 650 بكسل كحد أدنى ، وصورة أخرى إن لم تكن ، ولكنها أكبر من 465 بكسل.
<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>
ملاحظة: حدد دائمًا <img> باعتباره العنصر الفرعي الأخير <picture>. و <img>يستخدم عنصر من المتصفحات التي لا تدعم <picture>، أو إذا كان أي من <source> مطابقة.
قارئات شاشة HTML
قارئ الشاشة هو برنامج يقرأ كود HTML ، ويقوم بتحويل النص ، ويسمح للمستخدم “بالاستماع” إلى المحتوى. تكون قارئات الشاشة مفيدة للأشخاص الذين يعانون من ضعف البصر أو تعطيل التعلم.
ملخص الفصل
- استخدم
<img>لتعريف صورة - استخدم
srcلتحديد عنوان URL للصورة - استخدم
altلتعريف نص بديل لصورة ما ، إذا كان لا يمكن عرضها - استخدام
widthوheightلتحديد حجم الصورة - استخدم
floatللسماح بتعويم الصورة - استخدم
<map>لتحديد خريطة للصور - استخدم
<area>لتحديد المناطق القابلة للنقر في خريطة الصورة - استخدم سمة
<img>وusemapللإشارة إلى خريطة الصورة - استخدم
<picture>لإظهار صور مختلفة للأجهزة المختلفة
ملاحظة: تحميل الصور يستغرق وقتا. الصور الكبيرة يمكن أن تبطئ صفحتك. استخدم الصور بعناية.
العلامات
| السمة | الوصف |
|---|---|
| <img> | يحدد الصورة |
| <map> | يحدد صورة كخريطة |
| <area> | يحدد مساحة قابلة للنقر داخل خريطة الصور |
| <picture> | يحدد موارد الصورة المتعددة |
2 Comments