استخدام علامة IMG HTML للصور والكائنات
يحكم علامة HTML IMG إدراج الصور والكائنات الرسومية الثابتة الأخرى داخل صفحة الويب. تدعم هذه العلامة المشتركة العديد من السمات الإلزامية والاختيارية التي تضيف ثراءًا إلى قدرتك على تصميم موقع ويب جذاب يركز على الصور.
مثال على علامة IMG HTML المشكلة بشكل كامل تبدو كالتالي:
سمات علامة IMG المطلوبة
SRC. السمة الوحيدة التي تحتاجها للحصول على صورة لعرضها على صفحة الويب هي سمة SRC. تحدد هذه السمة اسم وموقع ملف الصورة المراد عرضها.
ALT. لكتابة XHTML و HTML4 صالح ، تكون سمة ALT مطلوبة أيضًا. يتم استخدام هذه السمة لتوفير متصفحات غير مرئية تحتوي على نص يصف الصورة. تعرض المتصفحات النص البديل بطرق مختلفة. يقوم البعض بعرضه كنافذة منبثقة عندما تضع الفأرة فوق الصورة ، بينما يعرضها الآخرون في خصائص عند النقر بزر الماوس الأيمن على الصورة ، والبعض الآخر لا يعرضها على الإطلاق.
استخدم النص البديل لإعطاء تفاصيل إضافية حول الصورة غير ذات الصلة أو المهمة لنص صفحة الويب. ولكن تذكر أنه في برامج قراءة الشاشة والمتصفحات النصية الأخرى فقط ، ستتم قراءة النص مع باقي النص على الصفحة. لتجنب الارتباك ، استخدم نصًا وصفيًا بديلًا يقول (على سبيل المثال) ، "حول تصميم الويب و HTML" بدلاً من "شعار" فقط.
في HTML5 ، لا تكون سمة ALT مطلوبة دائمًا ، نظرًا لأنه يمكنك استخدام التسمية التوضيحية لإضافة مزيد من الوصف إليها. يمكنك أيضًا استخدام السمة ARIA-DESCRIBEDBY للإشارة إلى معرّف يحتوي على وصف كامل.
النص البديل غير مطلوب أيضًا إذا كانت الصورة مزخرفة تمامًا ، مثل رسم في أعلى صفحة ويب أو رموز. ولكن إذا كنت غير متأكد ، فقم بتضمين النص البديل فقط في الحالة.
سمات IMG الموصى بها
العرض والارتفاع . يجب أن تتعود دائمًا على استخدام سمات WIDTH و HEIGHT. ويجب دائمًا استخدام الحجم الحقيقي وعدم تغيير حجم صورك باستخدام المتصفح.
تعمل هذه السمات على تسريع عملية عرض الصفحة نظرًا لأن المتصفح يمكنه تخصيص مساحة في تصميم الصورة ، ثم متابعة تنزيل بقية المحتوى ، بدلاً من انتظار تنزيل الصورة بالكامل.
سمات أخرى مفيدة IMG
العنوان . السمة هي سمة عامة يمكن تطبيقها على أي عنصر HTML . علاوة على ذلك ، تتيح لك الخاصية TITLE إضافة معلومات إضافية حول الصورة.
تدعم معظم المتصفحات السمة TITLE ، ولكنها تفعل ذلك بطرق مختلفة. يعرض البعض النص كنافذة منبثقة بينما يعرضه الآخرون في شاشات المعلومات عندما يقوم المستخدم بالنقر بزر الماوس الأيمن على الصورة. يمكنك استخدام سمة TITLE لكتابة معلومات إضافية حول الصورة ، ولكن لا تعول على هذه المعلومات إما مخفية أو مرئية. يجب عليك بالتأكيد عدم استخدام هذا لإخفاء الكلمات الرئيسية لمحركات البحث. يتم معاقبة هذه الممارسة الآن بواسطة معظم محركات البحث.
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.