HTML

HTML Images
الصور في لغة HTML

سوف تتعلم في هذا الدرس طريقة إضافة صورة إلى صفحة الويب، باستخدام لغة HTML، وذلك عن طريق image tag لعرض صورة أو أكثر، حيث تستخدم الصور لتحسن واجهة مواقع الويب.

التاريخ

29 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

13678

المواضيع

12
الشروحات chevron_left HTML Images chevron_left HTML

HTML Images
الصور في لغة HTML

</> HTML images
الصور في لغة HTML

كان الويب في في الإصدارات القديمة بدون صور، حتى تم تطوير لغة HTML وتم إضافة عنصر <img> المسؤول عن إضافة الصور داخل صفحات الويب. 

  • تجعل الصورة صفحات الويب جذابة، وتلفت انتباه القراء، وتجعل المواضيع شيقة.
  • الصورة مهمة للغاية في صفحات الويب، لتوضيح وتسهيل المواضيع المُعقدة والمُتداخلة على القراء، فالمواضيع التي تحتوي على صور ملونة، توضح للقراء النقاط الهامة وتلفت انتباههم.
  • العنصر المسؤول عن إضافة الصور في صفحة الويب هو عنصر <img>.
  • عنصر <img> هو من نوع empty elements العناصر الفارغة، أي ليس له close tag علامة نهاية أو علامة إغلاق.

</> Images syntax in HTML
طريقة إضافة الصور في لغة HTML

العنصر المسؤول عن إضافة الصور لصفحة الويب عن طريق لغة HTML، هو عنصر img.

لكن عند إضافته لا تظهر أي صور على المتصفح، لأن الصور تحتاج إلى attribute خاصية إضافية لعنصر img، لكي تخبر المتصفح عن مسار الصورة.


معلومات حول عنصر <img> :

  • عنصر <img> هو empty element عنصر فارغ، أي ليس له close tag علامة إغلاق.
  • عنصر <img> عندما يتم إضافته، لا تظهر الصورة على المتصفح، لأنها تحتاج إلى معلومات إضافية.
  • عنصر <img> يحتاج إلى attributes خاصيتين إجباريتين هما: خاصية src وخاصية alt.
Img element syntax

طريقة كتابة العنصر المسؤول عن إضافة الصور داخل صفحة الويب، الذي هو عنصر <img>.

<img>
ملاحظة
عندما يقرأ المتصفح عناصر HTML سوف يذهب إلى رابط الصورة الموجود بداخل عنصر img، ويقوم بتحميل الصورة وعرضها داخل ملف HTML، سواء كانت الصورة من موقع على الإنترنت أو من خلال رابط داخلي.

</> src attribute with images in HTML
خاصية src مع عنصر img لإضافة الصور في لغة HTML

لكي يعرض المتصفح الصورة يجب أن نزوده بمعلومات إضافية حول الصورة، بعض هذه المعلومات يكون هام وبعضها الآخر يكون غير ضروري، ومن المعلومات الهامة والضرورية مسار الصورة، والذي يتم إضافته عن طريق خاصية src atrribute.

  • خاصية src attribute نضع بداخلها مسار الصورة سواء كان بجوار ملف HTML أو كان من رابط خارجي.
  • كلمة src اختصار source والتي تعني مصدر الصورة.
  • إذا كان هناك خطأ في رابط الصورة، يقوم المتصفح بقراءة النصوص الموجودة داخل خاصية alt attribute.
src attribute

طريقة كتابة src attribute داخل عنصر img.

<img src="image_path">
Add image by internal source

إظهار صورة داخلية، وهي الصور الموجودة حول مستند HTML، سواء كانت على الكمبيوتر المحلي أو على الخادم server.

<img src="images/mountain.jpg">
Add image by external source

إظهار الصورة عن طريق رابط على إنترنت، من خلال موقع Closetag يمكن أيضاً إضافة أي رابط من أي موقع آخر مع مراعاة حقوق الملكية الفكرية.

<img  src="https://www.closetag.com/images/mountain.jpg">
ملاحظة
  • يجب أن يُكتب المسار داخل خاصية src attribute داخل عنصر img بين علامات تنصيص مزدوجة " " أو مفردة ' '.
  • يجب أن يُكتب مسار الصورة كاملاً، وأن يحتوي على اسم الصورة، وامتداد الصورة file name + file extensions. 
  • يُفضل أن تكون الصورة بجوار ملف HTML مباشرة أو بداخل فولدر بجواره.

</> alt attribute in HTML image
خاصية alt مع الصور في لغة HTML

تستخدم خاصية alt attribute لإضافة معلومات نصية حول الصورة، لمحركات البحث وللمستخدم، حيث يتم عرض هذه المعلومات عند فشل تحميل الصورة.

  • alt اختصار alternate text النص البديل للصورة، عند وجود ضعف في اتصال الإنترنت.
  • يُفضل إضافة نصوص قصيرة حول الصورة.
  • يُفضل أيضاً كتابة اسم الموقع الخاص بك مع النصوص، للتعطي نتائج أفضل في محركات البحث.
  • بناء على النصوص الموجودة داخل alt تظهر الصور في مقدمة نتائج محركات البحث.


حالات فشل المتصفح في عرض الصورة:

يفشل المتصفح في عرض الصورة، ويقوم بعرض المعلومات المكتوبة داخل خاصية alt، في كل من الحالات التالية:

  • خلل في الخادم المرفوع عليه الصورة.
  • كتابة مسار الصورة بشكل غير صحيح.
  • إذا كان المستخدم أو الزائر يستخدم screen reader قارئ الشاشة.
alt syntax

طريقة كتابة خاصية attribute [ alt] لإضافة نص بديل للصورة.

<img alt="value">
Hidden alt text

لا يظهر النص الموجود داخل خاصية alt على المتصفح، عند عرض الصور، أي في حال تمت كتابة رابط الصورة بطريقة صحيحة، وذلك لأن الصورة تحجب النص. في هذا المثال سوف تُعرض الصورة بشكل سليم، دون أي مشاكل، ولا يَظهر النص الذي قُمنا بإدخاله داخل خاصية alt attribute لأن الصورة تحجب النصوص.

<img  src="images/mountain.jpg" alt="Mountain">
Visible alt text

يظهر النص الموجود بداخل alt على المتصفح في حال كتابة رابط الصورة بطريقة غير صحيحةـ وبظهر بدلاً من الصورة علامة x. في هذا المثال تم استخدام رابط خاطئ للصورة، لذلك سوف يَظهر النص الذي قمنا بوضعه داخل خاصية alt attribute فقط، ولا تَظهر الصورة، بل يَظهر بدلاً منها علامة x.

<img src="images/mountain.jpgxyz" alt="Mountain | closetag.com">
ملاحظة

عندما تقوم بتجربة  خاصية attribute alt، لا يَظهر النص الذي تقوم بوضعه داخل alt attribute، إلا في حال كتابة مسار الصورة بشكل خاطئ.

يجب أن تكون القيمة داخل الخاصية alt attribute ضمن علامات تنصيص مزدوجة [" "] أو فردية [' '].

</> Title attribute in image in HTML
خاصية title العنوان داخل الصورة في لغة HTML

نَستطيع إضافة نص يَظهر عند الوقوف بالمؤشر على الصورة، عن طريق استخدام خاصية ["title "] attribute.

  • تستخدم [ title ] خاصية العنوان، لإضافة معلومات إضافية حولَ الصورة، وذلك عندما يقف user المُستخدم بالماوس على الصورة.
  • الغرض الرئيسي من خاصية العنوان هو التلميح على ما تحتويه الصورة، أو عنوان الصورة، وذلك عندما يقف user المستخدم بالماوس على الصورة .
  • يجب استخدام عنوان سهل وقصير ودقيق وله علاقة بالصورة وله علاقة باسم موقع الويب.
  • هناك فرق واختلاف بين alternate text النص البديل للصورة و title النص الذي يكون عنوان الصورة.
  • يجب التركيز على ما يفكر به user المستخدم، وذلك عن طريق وضع alternate text نص بديل يُعبر عن ماهية الصورة.
  • يكون title نص العنوان وصفياً أكثر من alternate text النص البديل الذي في الصورة فهو يصف غير الواضح في الصورة للمستخدمين.
Title syntax

طريقة كتابة خاصية [ title ] attribute لإضافة عنوان للصورة.

<img title="value">
Title attribute

ضع مؤشر الفأرة وانتظر قليلاً حتى يظهر النص الموجود بداخل خاصية title.

HTML title attribute

خاصية title مع الصور في لغة HTML.

<img  src="https://www.closetag.com/images/contents/image/1650718020_82231.jpg" width="100%" alt="Natural" title="Mountain" >

</> The difference between alt and title attribute in HTML
الفرق بين خاصية alt وخاصية title داخل عنصر img في لغة HTML

تستخدم النصوص الموجودة بداخل خاصية alt وخاصية title مع الصور في مواقع الويب بطريقة خاطئة أحيانًا.

لذلك يجب ملاحظة ومراعاة بعض النقاط الهامة، من أجل أن تتم أرشفة موقعك في محركات البحث بطريقة صحيحة، ولكي لا يحصل بها خلل تقني.


title attribute 

  • يستخدم النص الذي يكتب بداخل خاصية title attribute لإظهار النصوص لزوار الموقع، وذلك عند الوقوف على الصورة بزر الفأرة قليلاً.
  • يستخدم أيضاً النص الذي يكتب بداخل خاصية title attribute لإخبار محركات البحث، بأن العنوان الموجود بداخل title له علاقة بالصورة، لكي تظهر هذه الصورة في محركات البحث.
  • يجب أن يكون النص الموجود بداخل title attribute عبارة عن نص مختصر، ويفضل أن يكون عنوان وليس شرح.


alt attribute

  • يستخدم النص الذي يُكتب بداخل خاصية alt attribute لإضافة نصوص للصورة وتظهر هذه النصوص عند وجود خلل في تحميل الصورة، لكي يفهم المستخدم ما الموضوع المتعلق بها.
  • يمكن كتابة نص أو شرح داخل alt attribute ولكن يُفضل بشكل مختصر، ويمكن أيضاً كتابة كلمات دلالية بداخل alt.
  • يُشكل النص الذي يكتب بداخل خاصية alt attribute أهمية بالغة لمحركات البحث، حيث يتعلق ظهور الصور في محركات البحث بعدّة عوامل، وهو من أهم هذه العوامل.
alt text title text المسي الوصف
الكلمات عنوان - ونص بديل عنوان فقط x وصف
ما هو؟ النص الذي يقرأ بواسطة محركات البحث النص الذي يظهر للمستخدمين اسم الصورة وصف الصورة عادة يظهر عند وجود خلل
هل دائماً مطلوب؟ نعم لا نعم لا
هل هو مهم لتحسين الصور؟ نعم لا نعم لا
أمثلة HTML images HTML images & title , alt attributes html_images Instruction on how to HTML images

</> Image width and height in HTML
حجم وارتفاع الصورة في لغة HTML

عن طريق خاصية width وخاصية height مع الصور، يمكنك التحكم في أبعاد الصورة، حيث يمكن التحكم أبعاد الصور في لغة HTML بالوحدات التالية:

  • percentage النسبة المئوية، وهي أن تكتب علامة % بعد القيمة  %width=50 وسوف يتم عندها تعيين عرض الصورة كنصف عرض شاشة الجهاز المستخدم، سواء كان كمبيوتر سطحي أو محمول أو تابليت أو موبايل.
  • pixel بيكسل، وحدة قياس يمكن باستخدامها كتابة القيمة دون علامة % وهي وحدة افتراضية يتم فيها احتساب الحجم باستخدام pixels، كما يمكن اختصاراً كتابتها: width=100px.
Set image width and height

ضبط width حجم و height ارتفاع الصورة، من خلال القيمة الافتراضية، أي من خلال وضع الرقم فقط، حيث سيقوم browser المتصفح هنا بتعيينها على أنها قيمة بوحدة pixel البيكسل.

<img  src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" width="400" height="200">
Set image width and height by percent

ضبط width حجم و height ارتفاع الصورة باستخدام وحدة قياس percent % النسبة المئوية، من خلال وضع الرقم ثم علامة percent % النسبة المئوية بعده.

<img  src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" width="100%" height="100%">
Set image width and height by pixel

ضبط width حجم و height ارتفاع الصورة باستخدام وحدة قياس pixel البيكسل px، حيث يتم وضع الرقم أولاً، ثم علامة pixel البيكسل px بعده.

<img  src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" width="200px" height="200px">
ملاحظات هامة
  • إذا لم تقم بتعيين خصائص height وwidth فإن حجم الصورة يكون على المتصفح كحجمها الآلي بوحدة px.
  • يفضل استخدام هذه الخصائص فقط لتكبير أو تصغير الأبعاد بطريقة منطقية، أي أقل أو أكبر قليلاً.
  • يجب أن تكون القيمة الخاصة بالخاصية [ height - width] attribute داخل علامات تنصيص سواء مزدوجة [" "] أو مفردة [' '].
  • سوف تتعلم المزيد عن كيفية ضبط width حجم و weight ارتفاع الصورة من خلال لغة CSS.

</> Animated images in HTML
الصور المتحركة في لغة HTML

تسمح لغة HTML لمطوري الويب بإضافة صور متحركة داخل مواقع الويب، وذلك عن طريق إلحاق مسار الصورة المتحركة، كإضافة الصور من النوع JPG أو PNG.

تستخدم الصور المتحركة في الويب، وهي أكثر جاذبية من الصور الثابتة، كما يطلق عليها graphics interchange format file -اختصارها gif- لذلك فإن امتدادها من النوع gif.


طريقة استخدام الصور المتحركة:

  • نحدد مسار الصورة متبوعاً باسم الملف الذي يحتوي على اسم الصورة + file extension امتداد الصورة، مثال: kids.gif
Image animated syntax

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

<img src="https://www.closetag.com/images/programming.gif" alt="Programmer" width="200px" height="200px" title="Programmer">

</> Image as a link in HTML
استخدام الصور كرابط في لغة HTML

لغة HTML قائمة على nested elements العناصر المُتداخلة، حيث يمكن في أي وقت إدخال عنصر من أي نوع بداخل عنصر آخر، بشرط أن يكون العنصر الأب parent من النوع nested، أي له open tag علامة بداية و close tagعلامة إغلاق.


طريقة استخدام الصور كرابط في لغة HTML:

  • العنصر الخاص بالروابط هو <a href="#"></a> وهو من النوع nested متداخل، حيث يمكنك استبدال النص بصورة، لكي ينتقل المستخدم من الصفحة الحالية إلى صفحة أخرى، عن طريق النقر على الصورة، لا على النص.
Image as a link

في هذا المثال وضعنا بين علامة البدء وعلامة الإغلاق لعنصر <a> صورة بدلاً من النص. فعند الضغط على الصورة، سيتم نقلك من الصفحة الحالية إلى صفحة أخرى.

<a href="https://www.closetag.com/tutorial/html">
  <img src="/images/mountain.jpg" alt="HTML tutorial">
</a>
Image as a link with target

في هذا المثال وضعنا بين علامة البدء وعلامة الإغلاق للعنصر <a> صورة بدلاً من النص، فعند الضغط على الصورة سيتم نقلك إلى صفحة أخرى في علامة تبويب جديدة، مع الاحتفاظ بالصفحة القديمة.

<a href="https://www.closetag.com/tutorial/html" target="_blank">
  <img src="/images/mountain.jpg" alt="HTML tutorial">
</a>

</> Picture element in HTML
عنصر picture في لغة HTML

يسمح عنصر <picture> للمتصفح بعرض صور مختلفة، وذلك اعتماداً على حجم شاشة الجهاز، حيث تظهر صورة على الكمبيوتر السطحي، وصورة أخرى مختلفة عنها على التابلت، وصورة ثالثة مختلفة عنهما على الهاتف المحمول.


عنصر <picture> هو عبارة عن حاوية تحتوي على:

  • عدد غير محدود من عنصر <source> الذي نضع بداخله مسار الصورة عن طريق خاصية srcset وحجم الشاشة عن طريق media query css مع خاصية media.
  • عنصر <img> واحد، وهو الصورة الافتراضية التي تظهر في أي شاشة أخرى، بخلاف المحددة في media.


حالات استخدام عنصر <picture>:

  • bandwidth سرعة التحميل، يجب تحديد صورة مناسبة لكل جهاز ، لكي يقوم المتصفح بعرض الصور بطريقة سريعة، فليس من المنطقي عرض صور كبيرة على الهاتف، لذلك يجب تحديد الصور المناسبة.
  • format support بعض الأجهزة أو المتصفحات لا تدعم أنواع معينة من ملفات الصور، فعن طريق استخدام العنصر <picture> يمكنك إضافة نفس الصورة بعدّة أنواع مختلفة.
picture element

يشمل عنصر picture في هذا المثال ثلاث صور، الأولى ستظهر في حجم الشاشات الأقل من 700px، والثانية في حجم الشاشات الأقل من 450px، والأخيرة ستظهر في بقية أحجام الشاشات.

<picture>
    <source media="(min-width: 700px)" srcset="https://www.closetag.com/images/photo3.jpg" width="50%">
    <source media="(min-width: 450px)" srcset="https://www.closetag.com/images/photo4.jpg" width="50%">
    <img src="https://www.closetag.com/images/photo6.jpg" alt="GFG" width="50%">
</picture>
ملاحظات هامة
  • يمكنك إضافة المزيد من عنصر source لكي تحدد أحجام أخرى للشاشات، وإضافة المزيد من الصور.
  • سوف تعرف الكثير عن media query في لغة CSS لكن المطلوب منك الآن معرفة أن هناك عناصر أخرى للصورة فقط، مثل: source وpicture.
مصطلحات الدرس
HTML Images
HTML Images

صور HTML

Images
Images

صور

Tag
Tag

علامة

Empty Element
Empty Element

عنصر فارغ

Internal
Internal

داخلي

External
External

خارجي

img element
img element

عنصر الصورة

Value
Value

قيمة

File Extension
File Extension

امتداد الملف

Image Width and Height
Image Width and Height

عرض وارتفاع الصورة

Width
Width

عرض

Height
Height

ارتفاع

Title
Title

عنوان

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
Img
Img

Image

صورة
src
src

source

مصدر
Alt
Alt

Alternate

بديل
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.