HTML Images
الصور في لغة 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>
ملاحظة
</>
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.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
