HTML Images
الصور في لغة HTML
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Images
الصور في لغة HTML
</>
HTML Images
الصور في لغة HTML
يُعد عنصر <img> من نوع العناصر الفارغة [empty elements] في HTML، مما يعني أنه لا يحتوي على علامة إغلاق [close tag]. يتطلب هذا العنصر تحديد مسار الصورة باستخدام خاصية [src]، وتوفير نص بديل باستخدام خاصية [alt]، يظهر عند حدوث مشاكل في تحميل الصورة، أو إذا كان المستخدم من ذوي الإعاقة البصرية ويستخدم قارئ شاشة لمعرفة محتوى الصورة من خلال برامج قراءة الشاشة.
يمكن استخدام امتدادات الصور مثل [JPEG] و [PNG] و [GIF]، حيث تتميز كل منها بخصائص مختلفة من حيث الجودة، والحجم، وطريقة الضغط، مما يجعلها مناسبة لاستخدامات معينة. يسهم تحسين حجم الصور ودقتها في تسريع تحميل الصفحات.
</>
Images Syntax in HTML
طريقة إضافة الصور في لغة HTML
إذن، يتطلب عنصر [<img>] خاصيتين أساسيتين هما: خاصية [src]، التي تحدد مسار الصورة، وخاصية [alt]، التي تقدم نصًا بديلاً يظهر في حالة عدم تحميل الصورة بنجاح.
Img Element Syntax
طريقة كتابة عنصر <img> لإضافة الصور داخل صفحة الويب.
<img>
ملاحظة
- عندما يقرأ المتصفح عناصر HTML، يتجه إلى الرابط المحدد للصورة داخل عنصر <img>. يقوم المتصفح بتحميل الصورة ثم عرضها داخل صفحة HTML، سواء كانت الصورة مأخوذة من الإنترنت [رابط خارجي] أو من الملف المخزن محلياً على الخادم أو الجهاز [رابط داخلي].
- تأكد من أن الصورة المراد إضافتها موجودة في نفس المجلد أو مرتبطة بشكل صحيح بالصفحة التي تصممها.
</>
Src Attribute with Images in HTML
خاصية Src مع عنصر img لإضافة الصور في لغة HTML
خاصية [src]، اختصارًا لكلمة مصدر [source]، تُستخدم مع عنصر <img> لتحديد مسار الصورة على صفحة الويب. تُعد هذه الخاصية ضرورية لأنها توجه المتصفح إلى موقع الصورة لتحميلها وعرضها، سواء كان على خادم محلي أو خارجي. بدون [src]، لن يتمكن المتصفح من العثور على الصورة.
يمكن أن يكون المسار محليًا إذا كانت الصورة مخزنة في نفس المجلد أو بالقرب من ملف HTML، أو قد يكون رابطًا خارجيًا للإشارة إلى صورة على الإنترنت. إذا كان هناك خطأ في رابط الصورة، فإن المتصفح سيعرض النص الموجود في خاصية النص البديل [alt].
Src Attribute
طريقة كتابة src attribute داخل عنصر <img>.
<img src="image_path">
Adding an Image Using a Local Source
إضافة وعرض صورة باستخدام مسار محلي مرتبط بمستند HTML في نفس المجلد أو ضمن مسار فرعي، سواء على الكمبيوتر المحلي أو الخادم المحلي.
<img src="images/mountain.jpg">
Adding an Image Using an External Source
إضافة وعرض صورة باستخدام رابط خارجي من الإنترنت لموقع Closetag، مع إمكانية استخدام روابط من مواقع أخرى مع مراعاة حقوق الملكية الفكرية.
<img src="https://www.closetag.com/images/mountain.jpg">
ملاحظات
- علامات التنصيص: ينبغي كتابة المسار داخل خاصية src في عنصر <img> باستخدام علامات تنصيص مزدوجة [" "] أو مفردة [' '] حسب الرغبة.
- المسار والصورة: يجب أن يتضمن مسار الصورة اسم الملف وامتداده، مثل [mountain.jpg]. إذا كنت تستخدم روابط URL للصور المستضافة من على الإنترنت، فتأكد من كتابة الرابط كاملاً بما في ذلك البروتوكول [//:https].
- تنظيم الملفات: يُفضل تنظيم الصور في مجلد مخصص، مثل [images]، بحيث تكون موضوعة بالقرب من ملف HTML أو ضمن بنية مجلدات منظمة. هذا يساعد في الحفاظ على المشروع منظمًا وسهل الإدارة.
</>
Alt Attribute in HTML Image
خاصية Alt مع الصور في لغة HTML
تُستخدم خاصية [alt attribute] لإضافة معلومات نصية حول الصورة تفيد كل من محركات البحث والمستخدمين. ويتم عرض هذه المعلومات عند فشل تحميل الصورة. و [alt] هو اختصار لـ [alternate text - النص البديل]، ويكون مفيدًا لعرض هذا النص عند وجود ضعف في اتصال الإنترنت.
يفضّل إضافة نصوص قصيرة ووافية حول محتوى الصورة. من المستحسن أيضًا تضمين اسم موقعك في النص البديل لتحسين ظهور صورك في نتائج محركات البحث. وبناءً على النصوص التي تُضاف إلى الخاصية [alt]، قد تُسهم هذه النصوص في ظهور الصور ضمن النتائج الأولى في محركات البحث.
تشمل حالات فشل المتصفح في عرض الصورة ما يلي:
- خلل في الخادم المستضيف للصورة.
- كتابة مسار الصورة [رابط الصورة] بشكل غير صحيح.
- استخدام المستخدم أو الزائر لقارئ الشاشة [screen reader]. في هذه الحالة، يقرأ قارئ الشاشة النصوص البديلة لتقديم وصف صوتي عن الصورة.
Alt Syntax
طريقة كتابة خاصية [alt] لإضافة نص بديل للصورة.
<img alt="value">
Hidden Alt Text
في هذا المثال، لا يظهر النص البديل في قيمة الخاصية [alt] لأن الصورة تُعرض بشكل صحيح عند كتابة المسار بشكل صحيح.
<img src="/images/mountain.jpg" alt="Mountain | closetag.com">
Visible Alt Text
يظهر النص البديل [Mountain | closetag.com] في قيمة الخاصية [alt] عند عدم تحميل الصورة بسبب خطأ في المسار، حيث يُعرض هذا النص بدلاً من الصورة.
<img src="images/mountain.jpgxyz" alt="Mountain | closetag.com">
ملاحظة
عند تجربة الخاصية [alt]، لا يظهر النص الذي تضعه داخل الخاصية إلا في حال كتابة مسار الصورة بشكل خاطئ أو وجود ضعف في الاتصال بالإنترنت. ويجب أن تكون القيمة داخل الخاصية [alt] بداخل علامات تنصيص مزدوجة [" "] أو فردية [' '].
</>
Title Attribute in Image in HTML
خاصية العنوان Title داخل الصورة في لغة HTML
يمكن إضافة نص يظهر عند الوقوف بالمؤشر على الصورة باستخدام السمة [title]، التي تُستخدم لإضافة معلومات إضافية مثل التلميحات عن محتوى الصورة أو عنوانها. يجب أن يكون العنوان سهلاً وقصيرًا ومرتبطًا بمحتوى الصورة واسم الموقع.
تختلف السمة [title] عن النص البديل [alt text]: فالنص البديل يعبر عن محتوى الصورة، بينما يوفر [title] وصفًا إضافيًا للعناصر غير الواضحة. ومن الضروري اختيار نص بديل يعبر بوضوح عن الصورة، مع استخدام [title] لتوضيح التفاصيل الإضافية.
Title Syntax
طريقة كتابة خاصية [title] لإضافة عنوان للصورة.
<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] يُستخدم لإظهار معلومات تلميحية لزوار الموقع عند تمرير الفأرة فوق الصورة.
- كما يمكن أن يفيد في تحسين فهم محركات البحث للعلاقة بين العنوان والصورة، مما يساعد في تحسين ظهور الصورة في نتائج البحث.
- يجب أن يكون النص في [title] مختصرًا ويفضل أن يكون عنوانًا بدلاً من شرح كامل.
Alt Attribute
- النص الموجود في خاصية [alt] يُستخدم لتوفير وصف بديل للصورة، ويظهر عندما يتعذر تحميل الصورة.
- يقدم هذا النص سياقًا مفيدًا للمستخدمين حول محتوى الصورة.
- يُفضل أن يكون النص مختصرًا ويمكن أن يحتوي على كلمات دلالية.
- يُعتبر النص داخل [alt] مهمًا جدًا لمحركات البحث، حيث يؤثر بشكل كبير على ظهور الصور في نتائج البحث.
| Comparison | Alt Text | Title Text |
| الكلمات | عنوان - ونص بديل | عنوان فقط |
| ما هو؟ | النص الذي يقرأ بواسطة محركات البحث | النص الذي يظهر للمستخدمين |
| هل دائماً مطلوب؟ | نعم | لا |
| هل هو مهم لتحسين الصور؟ | نعم | لا |
| أمثلة | HTML images | HTML images & title , alt attributes |
</>
Image Width and Height in HTML
حجم وارتفاع الصورة في لغة HTML
عن طريق خاصية [width] و [height] في HTML، يمكنك التحكم في أبعاد الصورة. ويمكنك ضبط أبعاد الصور في لغة HTML باستخدام الوحدات التالية:
- النسبة المئوية [percentage]: تُكتب علامة النسبة المئوية [%] بعد القيمة، مثلاً ["width="50%]. سيؤدي ذلك إلى تعيين عرض الصورة ليكون نصف عرض العنصر الحاوي لها، بغض النظر عن الجهاز المستخدم، سواء كان جهاز كمبيوتر مكتبي أو محمول أو جهاز لوحي أو هاتف ذكي.
- البكسل [pixel]: تُكتب القيمة بدون علامة النسبة المئوية وتُشير إلى الحجم الفعلي باستخدام البكسل [px]. على سبيل المثال يمكن كتابة ["width="100px] لضبط العرض على 100 بيكسل. البكسل هي وحدة قياس افتراضية تُستخدم لتحديد حجم العناصر على الشاشات.
Setting Image Width and Height
ضبط عرض الصورة width وارتفاعها height بوضع الأرقام فقط، حيث سيعتبر المتصفح هذه القيم بوحدة البكسل [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 الصورة بالنسبة المئوية يجعلها تتناسب مع حجم العنصر الحاوي، باستخدام أرقام متبوعة بعلامة [%].
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" width="100%" height="100%">
Set Image Width and Height by Pixel
ضبط عرض width وارتفاع height الصورة باستخدام وحدة البكسل، عبر وضع الرقم متبوعًا بـ [px] لتحديد الأبعاد بدقة.
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" width="200px" height="200px">
ملاحظات هامة
- إذا لم تقم بتعيين خصائص height و width، فإن حجم الصورة سيكون في المتصفح بحجمها الطبيعي بوحدة البكسل [px].
- يفضل استخدام هذه الخصائص فقط لتكبير أو تصغير الأبعاد بطريقة منطقية، أي أن تكون التغييرات في الأبعاد أقل أو أكبر قليلاً.
- يجب أن تكون القيمة الخاصة بالخاصية [height - width] داخل علامات تنصيص، سواء كانت مزدوجة [" "] أو مفردة [' '].
- سوف تتعلم المزيد عن كيفية ضبط عرض width وارتفاع height الصورة باستخدام لغة CSS.
</>
Animated Images in HTML
الصور المتحركة في لغة HTML
تسمح لغة HTML بإضافة صور متحركة داخل مواقع الويب، وذلك باستخدام تنسيق الصور المتحركة المعروف بـ GIF اختصارًا لـ [Graphics Interchange Format].
تنسيق GIF أكثر جاذبية مقارنةً بالصور الثابتة كـ JPG أو PNG، ويتميز بقدرته على التعبير عن الحركة. ويُستخدم امتداد [gif.] للإشارة إلى هذا النوع من الملفات.
طريقة استخدام الصور المتحركة:
- نحدد مسار الصورة متبوعًا باسم الملف الذي يحتوي على اسم الصورة وامتدادها. على سبيل المثال، إذا كان اسم الصورة [programming] والامتداد [gif]، يُكتب اسم الملف كالتالي: [programming.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]، حيث يمكنك إدخال عنصر من أي نوع داخل عنصر آخر، بشرط أن يكون للعنصر علامة فتح [open tag] و علامة إغلاق [close tag].
طريقة استخدام الصور كرابط في لغة HTML:
يمكنك استخدام العنصر الخاص بالروابط [<a href="Value"></a>]، وهو عنصر متداخل، لاستبدال النص بصورة. هذا يسمح للمستخدم بالانتقال من الصفحة الحالية إلى صفحة أخرى بالنقر على الصورة بدلاً من النص.
Image as a Link
في هذا المثال، توضع الصورة بين علامات الفتح والإغلاق لعنصر <a>، وعند الضغط عليها، ستنتقل إلى الصفحة المحددة في قيمة [href].
<a href="https://www.closetag.com/tutorial/html"> <img src="/images/mountain.jpg" alt="HTML tutorial"> </a>
Image as a Link with Target
في هذا المثال، أُضيفت صورة كرابط باستخدام <a> لفتح الصفحة في علامة تبويب جديدة باستخدام ["target="_blank].
<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
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
