الصور HTML Images

الدرس السابق الدرس التالي
الصور HTML Images 
يمكن للصور تحسين تصميم ومظهر صفحة الويب.
تركيب صور HTML
تستخدم علامة <img> لتضمين صورة في صفحة ويب.
لا يتم إدراج الصور تقنيًا في صفحة الويب ؛ الصور مرتبطة بصفحات الويب. تنشئ علامة <img> مساحة تعليق للصورة المشار إليها.
علامة <img> فارغة وتحتوي على سمات فقط ولا تحتوي على علامة إغلاق.
تحتوي العلامة <img> على سمتين مطلوبتين:
  • src - تحدد المسار إلى الصورة
  • النص البديل (alt) - يحدد نصًا بديلًا للصورة
بناء الجملة
<img src="url" alt="alternatetext">
السمة (Attribute) src 
تحدد سمة src المطلوبة المسار (URL) للصورة.

ملاحظة: عندما يتم تحميل صفحة ويب ، فإن المتصفح ، في تلك اللحظة ، هو الذي يحصل على الصورة من خادم الويب ويدرجها في الصفحة. لذلك ، تأكد من بقاء الصورة بالفعل في نفس المكان بالنسبة إلى صفحة الويب ، وإلا سيحصل زوارك على رمز ارتباط معطل. يظهر رمز الارتباط المعطل والنص البديل (alt) إذا لم يتمكن المستعرض من العثور على الصورة.

مثال
  
<!DOCTYPE html>
<html>
<body>  
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="النص البديل هنا" width="460" height="345">

</body>
</html>
سمة النص البديل (alt Attribute)
توفر السمة alt المطلوبة نصًا بديلاً للصورة ، إذا كان المستخدم لسبب ما لا يمكنه عرضها (بسبب بطء الاتصال ، أو خطأ في السمة src ، أو إذا كان المستخدم يستخدم قارئ الشاشة).

يجب أن تصف قيمة سمة النص البديل الصورة:
مثال
  
<img src="img_chania.jpg" alt="النص البديل ">
نصيحة: قارئ الشاشة هو برنامج يقرأ كود HTML ، ويسمح للمستخدم "بالاستماع" إلى المحتوى. تعد قارئات الشاشة مفيدة للأشخاص ضعاف البصر أو الذين يعانون من إعاقات التعلم.

حجم الصورة - العرض والارتفاع
يمكنك استخدام سمة النمط (style attribute) لتحديد عرض الصورة وارتفاعها.

مثال
<!DOCTYPE html>
<html>
<body>

<h2>حجم الصور</h2>

<p> نستخدم هنا سمة النمط لتحديد عرض الصورة وارتفاعها :</p>

<img src="img_girl.jpg" alt="وصف الصورة يكون واضح" style="width:500px;height:600px;">

</body>
</html>
بدلاً من ذلك ، يمكنك استخدام سمات العرض والارتفاع: 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="Girl in a jacket" width="500" height="600">
تحدد سمات العرض والارتفاع دائمًا عرض الصورة وارتفاعها بالبكسل.

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

العرض والارتفاع ، أو النمط؟
جميع سمات العرض والارتفاع والنمط صالحة في HTML.
ومع ذلك ، نقترح استخدام سمة النمط (style).لانه  يمنع أوراق الأنماط من تغيير حجم الصور:

مثال
<!DOCTYPE html>
<html>
<head>
<style>
/* %يضبط هذا النمط عرض كل الصور على 100: */
img {
  width: 100%;
}
</style>
</head>
<body>

<h2>سمات أو نمط العرض / الارتفاع?</h2>

<p>تستخدم الصورة الأولى سمة العرض (مضبوطة على 128 بكسل) ، لكن النمط في قسم الرأس يتجاوزها ، ويضبط العرض على 100٪.</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="HTML5 Icon" width="128" height="128">

<p>تستخدم الصورة الثانية سمة النمط (style) لتعيين العرض على 128 بكسل ، ولن يتم تجاوز ذلك بالنمط في قسم الرأس:</p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMbyEcrLMbZ2M2bVAXCUyHH1sVSgWUvScpwm0E-GLzw6FakfA9eyGfCNBrRNkn14aSIOu0J3ogxscGyEUw91fYIFvwmpxEyOXMs3V_uaCVSafgCnKuLyFWW6S1B82sCchrp5BOusRCE5s/w1600/19.png" alt="HTML5 Icon" style="width:128px;height:128px;">
ملاحظات حول الصور الخارجية: قد تكون الصور الخارجية محمية بحقوق النشر. إذا لم تحصل على إذن لاستخدامه ، فقد تنتهك قوانين حقوق النشر. بالإضافة إلى ذلك ، لا يمكنك التحكم في الصور الخارجية ؛ يمكن إزالته أو تغييره فجأة.

(Animated Images) صور متحركة
يسمح HTML بصور GIF المتحركة:

مثال
  
<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>

<p>يسمح HTML بتحريك الصور:</p>

<img src="https://www.w3schools.com/html/programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>
إستخدام الصورة كارتباط
لاستخدام صورة كرابط ، ضع علامة <img> داخل علامة <a>

مثال
<a href="default.html">
  <img src="https://www.blogger.com/img/logo_blogger_40px.png" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
ssdsd
صورة عائمة
استخدم خاصية CSS float للسماح للصورة بأن تطفو إلى يمين أو يسار النص:

مثال
  
<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>تعويم الصورة إلى اليمين:</strong></p>

<p>
<img src="https://www.blogger.com/img/logo_blogger_40px.png" alt="Smiley face" style="float:right;width:42px;height:42px;">
فقرة مع صورة عائمة. فقرة مع صورة عائمة. فقرة مع صورة عائمة.
</p>

<p><strong>تعويم الصورة إلى اليسار:</strong></p>
<p>
<img src="https://www.blogger.com/img/logo_blogger_40px.png" alt="Smiley face" style="float:left;width:42px;height:42px;">
فقرة مع صورة عائمة. فقرة مع صورة عائمة. فقرة مع صورة عائمة. 
</p>

</body>
</html>
تنسيقات الصور العامة
فيما يلي أنواع ملفات الصور الأكثر شيوعًا ، والمدعومة في جميع المتصفحات (Chrome ، و Edge ، و Firefox ، و Safari ، و Opera):
اختصار تنسيق الملف امتداد الملف
APNG رسومات الشبكة المحمولة المتحركة .apng
GIF تنسيق تبادل الرسومات .gif
ICO أيقونة مايكروسوفت .ico, .cur
JPEG صورة مجموعة خبراء التصوير المشتركة .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG رسومات الشبكة المحمولة .png
SVG Scalable Vector Graphics .svg

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


القسم: