الصور في HTML

يمكن للصور تحسين تصميم ومظهر صفحة الويب.


بناء جملة صور HTML

في HTML، يتم تعريف الصور باستخدام العلامة.<img>

العلامة فارغة، وتحتوي على سمات فقط، وليس لها علامة إغلاق.<img>

تحدد السمة عنوان URL (عنوان الويب) للصورة:src<img src=”url“>


سمة alt

توفر السمة نص بديل لصورة، إذا كان المستخدم لسبب ما لا يمكن عرضه (بسبب اتصال بطيء أو خطأ في سمة src، أو إذا كان المستخدم يستخدم قارئ شاشة او يواجه مشاكل في الرؤيه أو من المكفوفين)

يجب أن تصف قيمة السمة الصورة

مثل

<img src="https://vlive.xyz/AanoN" alt="لوحة ل فان جوخ بعنوان ليلة النجوم" width="400" height="300">

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

مثل

<img src="https://vlive.xyz/AanoN5" alt="لوحة ل فان جوخ بعنوان ليلة النجوم" width="400" height="300"> 

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


حجم الصورة – العرض والارتفاع باستخدام css

يمكنك استخدام السمة style لتحديد عرض الصورة وارتفاعها.

مثال

<img src="https://vlive.xyz/AanoN" alt="لوحة ل فان جوخ بعنوان ليلة النجوم" style="width:400px;height:300px"> 

بدلا من ذلك، يمكنك استخدام السمات width | height

مثل

<img src="https://vlive.xyz/AanoN" alt="لوحة ل فان جوخ بعنوان ليلة النجوم" width="400" height="300"> 

تحدد السمات و دائما عرض الصورة وارتفاعها بالبكسل.widthheight

ملاحظة: حدد دائما عرض الصورة وارتفاعها. إذا لم يتم تحديد العرض والارتفاع، فقد تومض الصفحة أثناء تحميل الصورة.


العرض والارتفاع، أو النمط؟

السمات width height style جميعهم صالحين

ومع ذلك، نقترح استخدام السمة style يمنع css من تغيير حجم الصور

مثال

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

<img src="https://vlive.xyz/AanoN" alt="صورة لوحة فان جوخ" width="150" height="150">
<img src="https://vlive.xyz/AanoN" alt="صورة لوحة فان جوخ" style="width:150px;height:150px;">

</body>
</html>

في المثال السابق منعت css من تغيير عرض الصورة


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

إذا لم يتم تحديد المكان، يتوقع المستعرض العثور على الصورة في نفس المجلد مثل صفحة الويب.

ومع ذلك، من الشائع تخزين الصور في مجلد فرعي. يجب عليك ثم تضمين اسم المجلد في السمة src

مثال

<img src="./images/html5.gif" alt="صورة للغات برمجة ويب" style="width:128px;height:128px;">

الصور على خادم آخر

بعض المواقع على شبكة الإنترنت تخزين صورهم على خوادم الصور.

في الواقع ، يمكنك الوصول إلى الصور من أي عنوان ويب في العالم:

مثل

<img src="https://vlive.xyz/AanoN" alt="لوحة ل فان جوخ بعنوان ليلة النجوم" style="width:400px;height:300px"> 

يمكنك قراءة المزيد حول مسارات الملفات في الفصل مسارات ملف HTML.


صور متحركة

يسمح HTML صور GIF المتحركة:

مثل

<img src="../../img/web-developer.gif" alt="صورة للغات برمجة ويب" style="width:68px;height:68px;">

صورة عائمة

استخدم الخاصية float للسماح للصورة بالطفو إلى اليمين أو إلى يسار النص CSS

مثال

<p><img src="../../img/web-developer.gif" alt="صورة للغات برمجة ويب" style="float:right;width:62px;height:62px;">
    تطفو الصورة لليمين</p>
    
<p><img src="../../img/web-developer.gif" alt="صورة للغات برمجة ويب" style="float:left;width:62px;height:62px;">
    تطفو الصورة لليسار</p>

صورة خلفية

لإضافة صورة خلفية على عنصر HTML، استخدم خاصية background-image

مثل

<!DOCTYPE html>
<html>
<body style="background-image:url('../../img/StarryNight.jpg')">
<h2>صورة خلفية</h2>
<p>لاخظ صورة الخلفية.</p>
</body>
</html>

لإضافة صورة خلفية على فقرة، حدد خاصية صورة الخلفية على العنصر


قارئات شاشة HTML

ثم قارئ الشاشة هو برنامج يقرأ رمز HTML، ويحوله الي نص، ويسمح للمستخدم ب “الاستماع” إلى المحتوى. تعد قارئات الشاشة مفيدة للأشخاص المكفوفين أو ضعاف البصر أو ذوي الإعاقة التعليمية.


ملخص الفصل

  • استخدام عنصر HTML لتعريف صورة<img>
  • واستخدام سمة HTML لتعريف عنوان URL للصورةsrc
  • استخدام سمة alt لتعريف نص بديل لصورة ما، إذا تعذر عرضها
  • واستخدام HTML والسمات لتعريف حجم الصورةwidthheight
  • استخدام width height والخصائص لتحديد حجم الصورة
  • استخدام الخاصية float للسماح للصورة تطفو
  • واستخدم عنصر HTML لعرض صور مختلفة للأجهزة المختلفة<picture>