ال لغة البرمجة تتحكم علامة IMG في إدراج الصور والكائنات الرسومية الثابتة الأخرى داخل صفحة الويب. تدعم هذه العلامة المشتركة العديد من السمات الإلزامية والاختيارية التي تضيف ثراءً إلى قدرتك على تصميم موقع ويب جذاب يركز على الصور.
يبدو مثال لعلامة HTML IMG المكونة بالكامل كالتالي:
سمات علامة IMG المطلوبة
src = "/ path / to / image.jpg"
السمة الوحيدة التي تحتاجها للحصول على صورة لعرضها على صفحة الويب هي src ينسب. تحدد هذه السمة اسم وموقع ملف الصورة المراد عرضه.
alt = "وصف الصورة"
لكتابة XHTML و HTML4 صالحين ، يجب أن يكون ملف بديل السمة مطلوبة أيضًا. تُستخدم هذه السمة لتزويد المتصفحات غير المرئية بنص يصف الصورة. تعرض المستعرضات النص البديل بطرق مختلفة. يعرضها البعض كنافذة منبثقة عندما تضع الماوس فوق الصورة ، بينما يعرضها البعض الآخر في الخصائص عندما تنقر بزر الماوس الأيمن على الصورة ، والبعض الآخر لا يعرضها على الإطلاق.
استخدم ال نص بديل لإعطاء تفاصيل إضافية حول الصورة ليست ذات صلة أو مهمة بنص صفحة الويب. ولكن ، تذكر أنه في برامج قراءة الشاشة والمتصفحات النصية الأخرى ، ستتم قراءة النص بشكل مضمّن مع بقية النص على الصفحة. لتجنب الالتباس ، استخدم نصًا بديلاً وصفيًا يقول (على سبيل المثال) ، "حول تصميم الويب و HTML" بدلاً من "الشعار" فقط.
ال بديل النص ضروري أيضًا لـ SEO (تحسين محرك البحث). لا تستطيع برامج الروبوت التي تستخدمها محركات البحث ، مثل Google ، لاستكشاف المحتوى على المواقع "رؤية" الصور. يعتمدون على بديل نص لتحديد ما هو موجود على الصفحة.
في HTML5، ال بديل السمة غير مطلوبة دائمًا ، لأنه يمكنك استخدام ملف شرح لإضافة المزيد من الوصف إليها. يمكنك أيضًا استخدام هذه السمة للإشارة إلى معرّف يحتوي على وصف كامل:
aria-descriptionby = "وصف الصورة"
النص البديل غير مطلوب أيضًا إذا كانت الصورة مزخرفة تمامًا ، مثل رسم في أعلى صفحة ويب أو أيقونات. ولكن إذا لم تكن متأكدًا ، فقم بتضمين نص بديل تحسبًا لذلك.
سمات الحجم
العرض = "500"و.
الارتفاع = "500"اعتمادًا على التصميم الخاص بك ، باستخدام ملف. ارتفاع و. العرض
بشكل عام ، سترغب في تعيين حجم الصورة في CSS الخاص بك. في أغلب الأحيان ، سيكون ذلك نتيجة أبعاد الحاوية الرئيسية للصورة. يتيح هذا الأسلوب أكبر قدر من المرونة عند التكيف مع أحجام الشاشات المختلفة. ومع ذلك ، لا تزال هناك حالات قد ترغب فيها في تحديد أبعاد الصورة كسمات HTML.
سمات IMG مفيدة أخرى
العنوان = "اسم الصورة الوصفي"السمة هي سمة عامة يمكن تطبيقها على أي. عنصر HTML. وعلاوة على ذلك، فإن. لقب
تدعم معظم المتصفحات ملفات لقب السمة ، لكنهم يفعلون ذلك بطرق مختلفة. يعرض البعض النص على شكل نافذة منبثقة بينما يعرضه البعض الآخر في شاشات المعلومات عندما ينقر المستخدم بزر الماوس الأيمن على الصورة. يمكنك استعمال ال لقب لكتابة معلومات إضافية حول الصورة ، ولكن لا تعول على أن تكون هذه المعلومات إما مخفية أو مرئي. يجب عليك بالتأكيد عدم استخدام هذا لإخفاء الكلمات الرئيسية لمحركات البحث. يتم معاقبة هذه الممارسة الآن من قبل معظم محركات البحث.
usemap = ""و.
ismap = ""تحدد هاتان السمتان جانب العميل () وجانب الخادم (ISMAP) خرائط الصور
longdesc = "وصف أكثر تفصيلاً لصورتك"ال. longdesc
سمات IMG المهملة والمتقادمة
أصبحت العديد من السمات قديمة الآن في HTML5 أو تم إهمالها في HTML4. للحصول على أفضل لغة HTML ، يجب أن تجد حلولاً أخرى بدلاً من استخدام هذه السمات.
الحد = "3"
محاذاة = "يسار"تتيح لك هذه السمة وضع صورة داخل النص وجعل النص يتدفق حولها. يمكنك محاذاة الصورة إلى اليمين أو اليسار. لقد تم إهماله لصالح. تعويم خاصية CSS
hspcace = "10"و.
vspace = "10"ال. hspace و. vspace تضيف السمات مساحة بيضاء أفقيًا ( hspace) وعموديًا ( vspace
lowsrc = "/ path / to / lowres.jpg"ال. lowsrc توفر السمة صورة بديلة عندما يكون مصدر الصورة كبيرًا جدًا بحيث يتم تنزيلها ببطء شديد. على سبيل المثال ، قد يكون لديك صورة بحجم 500 كيلوبايت تريد عرضها على صفحة الويب الخاصة بك ، ولكن تحميل 500 كيلوبايت قد يستغرق وقتًا طويلاً. لذلك ، تقوم بإنشاء نسخة أصغر بكثير من الصورة ، ربما بالأبيض والأسود أو فقط محسّنة للغاية ، وتضع ذلك في ملف. lowsrc
ال lowsrc تمت إضافة سمة إلى Netscape Navigator 2.0 إلى العلامة. كان جزءًا من المستوى 1 من DOM ولكن تمت إزالته بعد ذلك من المستوى 2 من DOM. كان دعم المستعرض سطحيًا لهذه السمة ، على الرغم من أن العديد من المواقع تدعي أنها مدعومة من قبل جميع المتصفحات الحديثة. لم يتم إهماله في HTML4 أو عفا عليه الزمن في HTML5 لأنه لم يكن أبدًا جزءًا رسميًا من أي من المواصفات.
تجنب استخدام هذه السمة وبدلاً من ذلك قم بتحسين صورك بحيث يتم تحميلها بسرعة. تُعد سرعة تحميل الصفحة جزءًا مهمًا من التصميم الجيد للويب ، وتؤدي الصور الكبيرة إلى إبطاء الصفحات بشكل كبير - حتى إذا كنت تستخدم lowsrc ينسب.