يحكم علامة HTML IMG إدراج الصور والكائنات الرسومية الثابتة الأخرى داخل صفحة الويب. تدعم هذه العلامة المشتركة العديد من السمات الإلزامية والاختيارية التي تضيف ثراءًا إلى قدرتك على تصميم موقع ويب جذاب يركز على الصور.
مثال على علامة IMG HTML المشكلة بشكل كامل تبدو كالتالي:
سمات علامة IMG المطلوبة
SRC.السمة الوحيدة التي تحتاجها للحصول على صورة لعرضها على صفحة الويب هي سمة SRC. تحدد هذه السمة اسم وموقع ملف الصورة المراد عرضها.
ALT.لكتابة صالح XHTML و HTML4 ، و ALT السمة مطلوبة أيضا. يتم استخدام هذه السمة لتوفير متصفحات غير مرئية تحتوي على نص يصف الصورة. تعرض المتصفحات النص البديل بطرق مختلفة. يقوم البعض بعرضه كنافذة منبثقة عندما تضع الفأرة فوق الصورة ، بينما يعرضها الآخرون في خصائص عند النقر بزر الماوس الأيمن على الصورة ، والبعض الآخر لا يعرضها على الإطلاق.
استخدم النص البديل لإعطاء تفاصيل إضافية حول الصورة غير ذات الصلة أو المهمة لنص صفحة الويب. ولكن تذكر أنه في برامج قراءة الشاشة والمتصفحات النصية الأخرى فقط ، ستتم قراءة النص مع باقي النص على الصفحة. لتجنب الارتباك ، استخدم نصًا وصفيًا بديلًا يقول (على سبيل المثال) ، "حول تصميم الويب و HTML" بدلاً من "شعار" فقط.
في HTML5 ، ALT السمة غير مطلوبة دائمًا ، لأنه يمكنك استخدام تسمية توضيحية لإضافة المزيد من الوصف إليها. يمكنك أيضًا استخدام السمة ARIA-DESCRIBEDBY للإشارة إلى معرف يحتوي على وصف كامل.
النص البديل غير مطلوب أيضًا إذا كانت الصورة مزخرفة تمامًا ، مثل رسم في أعلى صفحة ويب أو رموز. ولكن إذا لم تكن متأكدًا ، فقم بتضمين النص البديل في حالة الأحرف فقط.
سمات IMG الموصى بها
عرض و ارتفاع. يجب أن تتعود دائما على استخدام عرض و ارتفاع الصفات. ويجب دائمًا استخدام الحجم الحقيقي وعدم تغيير حجم صورك باستخدام المتصفح.
تعمل هذه السمات على تسريع عملية عرض الصفحة نظرًا لأن المتصفح يمكنه تخصيص مساحة في تصميم الصورة ، ثم متابعة تنزيل بقية المحتوى ، بدلاً من انتظار تنزيل الصورة بالكامل.
سمات أخرى مفيدة IMG
عنوان. السمة هي سمة عامة يمكن تطبيقها على أي عنصر HTML. وعلاوة على ذلك، فإن عنوان تسمح لك بإضافة معلومات إضافية حول الصورة.
معظم المتصفحات تدعم عنوان لكنهم يفعلون ذلك بطرق مختلفة. يعرض البعض النص كنافذة منبثقة بينما يعرضه الآخرون في شاشات المعلومات عندما يقوم المستخدم بالنقر بزر الماوس الأيمن على الصورة. يمكنك استعمال ال عنوان سمة لكتابة معلومات إضافية حول الصورة ، ولكن لا تعول على هذه المعلومات إما مخفية أو مرئي. يجب عليك بالتأكيد عدم استخدام هذا لإخفاء الكلمات الرئيسية لمحركات البحث. يتم معاقبة هذه الممارسة الآن بواسطة معظم محركات البحث.
USEMAP و ISMAP. تعيين هاتين الخاصيتين تعيينات الصور جانب العميل () و جانب الملقم (ISMAP) إلى الصور الخاصة بك.
LONGDESC. تدعم السمة عناوين URL إلى وصف أطول للصورة. هذه الميزة تجعل صورك أكثر سهولة.
سمات IMG المتقادمة والمتقادمة
أصبحت سمات متعددة قديمة الآن في HTML5 أو تم إيقافها في HTML4. للحصول على أفضل HTML ، يجب أن تجد حلولًا أخرى بدلاً من استخدام هذه السمات.
الحدود. تحدد السمة العرض بالبكسلات لأي حد حول الصورة. لقد تم إيقافه لصالح CSS في HTML4 وهو قديم في HTML5.
ALIGN. تسمح لك هذه الخاصية بوضع صورة داخل النص وتسجيل تدفق النص حولها. يمكنك محاذاة صورة إلى اليمين أو اليسار. لقد تم إهماله لصالح الخاصية CSS العائمة في HTML4 وهو قديم في HTML5.
HSPACE و VSPACE. ال HSPACE و VSPACE السمات أضف الفضاء الأبيض أفقيًا (HSPACE) وعموديًا (VSPACE). ستتم إضافة مساحة بيضاء إلى جانبي الرسم (أعلى وأسفل أو يسار ويمين) ، لذلك إذا كنت تحتاج إلى مساحة على جانب واحد فقط ، يجب عليك استخدام CSS. تم إيقاف هذه السمات في HTML4 لصالح خاصية CSS للهامش ، وهي قديمة في HTML5.
LOWSRC. ال LOWSRC توفر السمة صورة بديلة عندما يكون مصدر الصور كبيرًا جدًا بحيث يتم تنزيله ببطء شديد. على سبيل المثال ، قد يكون لديك صورة بحجم 500 كيلوبايت ترغب في عرضها على صفحتك على الويب ، ولكن قد يستغرق تنزيلها 500 كيلوبايت وقتًا طويلاً. لذلك قمت بإنشاء نسخة أصغر من الصورة ، ربما باللونين الأسود والأبيض أو فقط الأمثل للغاية ، ووضع ذلك في LOWSRC صفة، عزا. سيتم تنزيل الصورة الأصغر أولاً وعرضها أولاً ، ثم عندما تظهر الصورة الأكبر ستحل محل الصورة المنخفضة المصدر.
ال LOWSRC تم إضافة سمة إلى Netscape Navigator 2.0 إلى IMG العلامة. كان جزءًا من مستوى DOM 1 ولكن تمت إزالته بعد ذلك من مستوى DOM 2. وكان دعم المستعرض غامضًا لهذه السمة ، بالرغم من أن العديد من المواقع تدعي أنها مدعومة من جميع المتصفحات الحديثة. لم يتم إهماله في HTML4 أو تم إهماله في HTML5 لأنه لم يكن أبدًا جزءًا رسميًا من أي من المواصفات.
تجنب استخدام هذه السمة وبدلاً من ذلك قم بتحسين صورك بحيث يتم تحميلها بسرعة. تعد سرعة تحميل الصفحة جزءًا هامًا من تصميم الويب الجيد ، وتبطل الصور الكبيرة الصفحات بشكل كبير - حتى إذا كنت تستخدم LOWSRC صفة، عزا.
