في هذا الدرس 10تصفّح المواضيع
يُعد عنصر <img> من نوع العناصر الفارغة [empty elements] في HTML، مما يعني أنه لا يحتوي على علامة إغلاق [close tag]. تحدد خاصية [src] مصدر الصورة في هذا المثال، ويمكن في استعمالات أخرى تحديد المصدر باستخدام [srcset]، وتوفير نص بديل باستخدام خاصية [alt]، يظهر عند حدوث مشاكل في تحميل الصورة، أو إذا كان المستخدم من ذوي الإعاقة البصرية ويستخدم قارئ شاشة لمعرفة محتوى الصورة من خلال برامج قراءة الشاشة.
يمكن استخدام امتدادات الصور مثل [JPEG] و [PNG] و [GIF]، حيث تتميز كل منها بخصائص مختلفة من حيث الجودة، والحجم، وطريقة الضغط، مما يجعلها مناسبة لاستخدامات معينة. يسهم تحسين حجم الصور ودقتها في تسريع تحميل الصفحات.
نستخدم في الأمثلة التمهيدية الخاصيتين: خاصية [src]، التي تحدد مسار الصورة، وخاصية [alt]، التي تقدم نصًا بديلاً يظهر في حالة عدم تحميل الصورة بنجاح.
Img Element Syntax
طريقة كتابة عنصر <img> لإضافة الصور داخل صفحة الويب.
<img>خاصية [src]، اختصارًا لكلمة مصدر [source]، تُستخدم مع عنصر <img> لتحديد مسار الصورة على صفحة الويب. توجه هذه الخاصية المتصفح إلى عنوان الصورة لتحميلها وعرضها. يجب توفير src أو srcset؛ يمكن أن يوفر srcset مصدر الصورة حتى عند غياب src.
يمكن أن يكون المسار محليًا إذا كانت الصورة مخزنة في نفس المجلد أو بالقرب من ملف HTML، أو قد يكون رابطًا خارجيًا للإشارة إلى صورة على الإنترنت. إذا كان هناك خطأ في رابط الصورة، فإن المتصفح سيعرض النص الموجود في خاصية النص البديل [alt].
Src Attribute
طريقة كتابة src attribute داخل عنصر <img>.
<img src="image_path">Adding an Image Using a Local Source
إضافة وعرض صورة باستخدام مسار محلي مرتبط بمستند HTML في نفس المجلد أو ضمن مسار فرعي، سواء على الكمبيوتر المحلي أو الخادم المحلي.
Adding an Image Using an External Source
إضافة وعرض صورة باستخدام رابط خارجي من الإنترنت لموقع Closetag، مع إمكانية استخدام روابط من مواقع أخرى مع مراعاة حقوق الملكية الفكرية.
تُستخدم خاصية [alt attribute] لإضافة معلومات نصية حول الصورة تفيد كل من محركات البحث والمستخدمين. ويتم عرض هذه المعلومات عند فشل تحميل الصورة. و [alt] هو اختصار لـ [alternate text - النص البديل]، ويكون مفيدًا لعرض هذا النص عند وجود ضعف في اتصال الإنترنت.
يفضّل إضافة نصوص قصيرة ووافية حول محتوى الصورة. اكتب وصفًا يناسب معنى الصورة ووظيفتها في السياق، دون حشو كلمات أو إضافة اسم الموقع آليًا. يساعد alt المفيد على فهم الصورة، لكنه لا يضمن ترتيبًا معينًا في البحث.
من حالات الاستفادة من النص البديل:
- خلل في الخادم المستضيف للصورة.
- كتابة مسار الصورة [رابط الصورة] بشكل غير صحيح.
- استخدام المستخدم أو الزائر لقارئ الشاشة [screen reader]. في هذه الحالة، يقرأ قارئ الشاشة النصوص البديلة لتقديم وصف صوتي عن الصورة.
استخدام قارئ الشاشة ليس فشلًا في تحميل الصورة. للصورة الزخرفية التي لا تضيف معنى استخدم alt=""، وللصورة التي تعمل كرابط صف وجهة الرابط أو وظيفته.
Alt Syntax
طريقة كتابة خاصية [alt] لإضافة نص بديل للصورة.
<img alt="value">Hidden Alt Text
في هذا المثال، لا يظهر النص البديل في قيمة الخاصية [alt] لأن الصورة تُعرض بشكل صحيح عند كتابة المسار بشكل صحيح.
Visible Alt Text
يظهر النص البديل [Mountain | closetag.com] في قيمة الخاصية [alt] عند عدم تحميل الصورة بسبب خطأ في المسار، حيث يُعرض هذا النص بدلاً من الصورة.
يمكن إضافة نص يظهر عند الوقوف بالمؤشر على الصورة باستخدام السمة [title]، التي تُستخدم لإضافة معلومات إضافية مثل التلميحات عن محتوى الصورة أو عنوانها. اجعل التلميح قصيرًا ومرتبطًا بالصورة عند الحاجة؛ إضافة اسم الموقع ليست شرطًا.
تختلف السمة [title] عن النص البديل [alt text]: فالنص البديل يعبر عن محتوى الصورة، بينما يوفر [title] وصفًا إضافيًا للعناصر غير الواضحة. ومن الضروري اختيار نص بديل يعبر بوضوح عن الصورة، ويمكن استعمال [title] لمعلومة إضافية غير أساسية. لا يعتمد عليه وحده لأنه قد لا يظهر باللمس أو لوحة المفاتيح أو بعض التقنيات المساعدة، ولا يحل محل alt.
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" style="width:100%;height:auto" alt="Natural" title="Mountain" >النصوص الموجودة داخل خصائص [alt] و [title] في الصور تُستخدم أحيانًا بطريقة غير صحيحة. من المهم مراعاة بعض النقاط لتحسين إتاحة الصور وفهم معناها، دون ضمان ترتيبها أو أرشفتها بمجرد إضافة سمة.
Title Attribute
- النص المكتوب داخل خاصية [title] يُستخدم لإظهار معلومات تلميحية لزوار الموقع عند تمرير الفأرة فوق الصورة.
- لا تجعل معلومة أساسية متاحة في title وحده؛ ظهور التلميح يختلف باختلاف طريقة التفاعل.
- يجب أن يكون النص في [title] مختصرًا ويفضل أن يكون عنوانًا بدلاً من شرح كامل.
Alt Attribute
- النص الموجود في خاصية [alt] يُستخدم لتوفير وصف بديل للصورة، ويظهر عندما يتعذر تحميل الصورة.
- يقدم هذا النص سياقًا مفيدًا للمستخدمين حول محتوى الصورة.
- يُفضل أن يكون النص مختصرًا ويمكن أن يحتوي على كلمات دلالية.
- يُعتبر النص داخل [alt] مهمًا جدًا لمحركات البحث، لأنه يساعدها على فهم الصورة مع سياق الصفحة، دون ضمان نتيجة أو ترتيب محدد.
| Comparison | Alt Text | Title Text |
| الكلمات | بديل نصي يناسب المعنى والوظيفة | معلومة إضافية اختيارية |
| ما هو؟ | بديل للتقنيات المساعدة ولتعذر عرض الصورة | تلميح قد يظهر عند تمرير المؤشر |
| هل يلزم تضمينه؟ | في الاستخدام المعتاد نعم؛ alt فارغ للزخرفة | لا |
| هل هو مهم لتحسين الصور؟ | للإتاحة وفهم المعنى؛ ليس ضمان ترتيب | لا |
| أمثلة | HTML images | HTML images & title , alt attributes |
تقبل سمتا width وheight في HTML أعدادًا صحيحة غير سالبة بلا وحدة، وتحدد أبعاد الصورة بوحدات CSS pixel. أما كتابة px أو % فتكون في خصائص CSS كما يلي:
- النسبة المئوية [percentage]: تُكتب علامة النسبة المئوية [%] بعد القيمة، مثل style="width:50%;height:auto". سيؤدي ذلك إلى تعيين عرض الصورة ليكون نصف عرض العنصر الحاوي لها، بغض النظر عن الجهاز المستخدم، سواء كان جهاز كمبيوتر مكتبي أو محمول أو جهاز لوحي أو هاتف ذكي.
- البكسل [pixel]: تكتب الوحدة px بعد قيمة خاصية CSS. على سبيل المثال يمكن كتابة style="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 الصورة بالنسبة المئوية يجعلها تتناسب مع حجم العنصر الحاوي، باستخدام CSS وأرقام متبوعة بعلامة %. في المثال ارتفاع الحاوية محدد بـ300px حتى يكون height:100% قابلًا للحساب.
<div style="width:100%;height:300px">
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" style="width:100%;height:100%">
</div>Set Image Width and Height by Pixel
ضبط عرض width وارتفاع height الصورة باستخدام خصائص CSS في style، مع كتابة px بعد الرقم. لا نكتب px داخل سمتي HTML width وheight.
<img src="https://www.closetag.com/images/mountain.jpg" alt="Mountain" style="width:200px;height:200px">تسمح لغة HTML بإضافة صور متحركة داخل مواقع الويب، وذلك باستخدام تنسيق الصور المتحركة المعروف بـ GIF اختصارًا لـ [Graphics Interchange Format].
يمكن أن يوضح GIF الحركة عندما تخدم المحتوى؛ الجاذبية ليست خاصية مضمونة للتنسيق. وتدعم تنسيقات أخرى الحركة مثل APNG وWebP. ويُستخدم امتداد [gif.] للإشارة إلى هذا النوع من الملفات.
طريقة استخدام الصور المتحركة:
- نحدد مسار الصورة متبوعًا باسم الملف الذي يحتوي على اسم الصورة وامتدادها. على سبيل المثال، إذا كان اسم الصورة [programming] والامتداد [gif]، يُكتب اسم الملف كالتالي: [programming.gif].
Image Animated Syntax
أضف صورة متحركة إلى مجلد المشروع، ثم أدخل المسار الكامل للصورة متبوعًا باسم الملف الذي يتضمن امتداد [gif.].
<img src="https://www.closetag.com/images/programming.gif" alt="Programmer" width="200" height="200" title="Programmer">لغة HTML قائمة على العناصر المتداخلة [nested elements]، لكن لكل عنصر قواعد تحدد ما يجوز وضعه بداخله. يجوز هنا وضع img داخل a، مع أن img عنصر فارغ لا يملك علامة إغلاق.
طريقة استخدام الصور كرابط في لغة HTML:
يمكنك استخدام العنصر الخاص بالروابط [<a href="Value"></a>]، وهو عنصر متداخل، لاستبدال النص بصورة. هذا يسمح للمستخدم بالانتقال من الصفحة الحالية إلى صفحة أخرى بالنقر على الصورة بدلاً من النص.
Image as a Link
في هذا المثال، توضع الصورة بين علامات الفتح والإغلاق لعنصر <a>، وعند الضغط عليها، ستنتقل إلى الصفحة المحددة في قيمة [href].
<a href="https://www.closetag.com/tutorials/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/tutorials/html" target="_blank">
<img src="/images/mountain.jpg" alt="HTML tutorial">
</a>يسمح عنصر <picture> للمتصفح بعرض صور مختلفة بناءً على شروط مثل عرض نافذة العرض ودعم التنسيق. شرط العرض لا يحدد نوع الجهاز؛ قد تكون نافذة كمبيوتر ضيقة مثل نافذة هاتف.
عنصر <picture> عبارة عن حاوية تحتوي على:
- عدد غير محدود من عنصر <source>، حيث نضع بداخله مسار الصورة باستخدام خاصية [srcset] وحجم الشاشة باستخدام media query في لغة css عبر خاصية [media].
- عنصر img واحد مطلوب في النهاية، يحمل alt وخصائص العرض، ويقدم مصدرًا احتياطيًا عندما لا يطابق أي source شروط الاختيار. يختار المتصفح أول source مناسب بحسب media وtype وsrcset.
حالات استخدام عنصر <picture>:
- سرعة التحميل bandwidth: ينبغي تحديد صورة مناسبة لكل جهاز لتمكين المتصفح من عرض الصور بشكل سريع. ليس من المنطقي عرض صور كبيرة على الهاتف، لذلك يجب تحديد الصور المناسبة.
- دعم التنسيقات format support: بعض الأجهزة أو المتصفحات لا تدعم أنواعًا معينة من ملفات الصور. باستخدام عنصر <picture>, يمكنك توفير نفس الصورة بعدة تنسيقات مختلفة.
Picture Element
يحدد عنصر <picture> مثالاً لثلاث صور للشاشات: الأولى عندما يكون عرض نافذة العرض 700px فأكثر، والثانية من 450px إلى أقل من 700px، والافتراضية عندما يكون العرض أقل من 450px. ترتيب source يؤثر في الاختيار.
<picture>
<source media="(min-width: 700px)" srcset="https://www.closetag.com/images/photo3.jpg">
<source media="(min-width: 450px)" srcset="https://www.closetag.com/images/photo4.jpg">
<img src="https://www.closetag.com/images/photo6.jpg" alt="Stones, the Eiffel Tower, or a beach swing, selected for the viewport width" style="width:50%;height:auto">
</picture>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات11
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Images صور HTML
- للمراجعة
- 02 Images صور
- للمراجعة
- 03 Tag علامة
- للمراجعة
- 04 Empty Element عنصر فارغ
- للمراجعة
- 05 Internal داخلي
- للمراجعة
- 06 External خارجي
- للمراجعة
- 07 img element عنصر الصورة
- للمراجعة
- 08 Attributes سمات
- للمراجعة
- 09 Value قيمة
- للمراجعة
- 10 File Extension امتداد الملف
- للمراجعة
- 11 Image Width and Height عرض وارتفاع الصورة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.