انظر إلى أي صفحة ويب على الإنترنت اليوم وستلاحظ أنها تشترك في أشياء معينة. واحدة من تلك السمات المشتركة هي الصور. تضيف الصور الصحيحة الكثير إلى العرض التقديمي لموقع الويب. تساعد بعض هذه الصور ، مثل شعار الشركة ، في تصميم العلامة التجارية للموقع وتوصيل هذا الكيان الرقمي بشركتك المادية.
لإضافة صورة أو رمز أو رسومات إلى صفحة الويب الخاصة بك ، تحتاج إلى استخدام العلامة في كود HTML الخاص بالصفحة. تضع علامة IMG في HTML الخاص بك بالضبط حيث تريد عرض الرسم. وسيستبدل متصفح الويب الذي يعرض شفرة الصفحة هذه العلامة بالرسم المناسب بمجرد عرض الصفحة. وبالرجوع إلى مثال شعار شركتنا ، إليك كيفية إضافة هذه الصورة إلى موقعك:
سمات الصورة
بالنظر إلى شفرة HTML أعلاه ، سترى أن العنصر يتضمن سمتين. كل واحد منهم مطلوب للصورة.
السمة الأولى هي "src". هذا هو حرفيا ملف الصورة الذي تريد عرضه على الصفحة. في مثالنا ، نستخدم ملفًا باسم "logo.png". هذا هو الرسم الذي يعرضه متصفح الويب عند تقديمه للموقع.
ستلاحظ أيضًا أنه قبل اسم الملف هذا ، أضفنا بعض المعلومات الإضافية "/ images /". هذا هو مسار الملف. تخبر الشرطة المائلة الأمامية الأولية الخادم بالنظر إلى جذر الدليل. وسيبحث بعد ذلك عن مجلد يسمى "الصور" وأخيرًا ما يسمى بالملف "logo.png". يعد استخدام مجلد يسمى "الصور" لتخزين جميع رسومات الموقع ممارسة شائعة جدًا ، ولكن سيتم تغيير مسار الملف إلى أي شيء له صلة بموقعك.
السمة الثانية المطلوبة هي النص "alt". هذا هو "النص البديل" الذي يظهر في حالة فشل تحميل الصورة لسبب ما. هذا النص ، الذي في مثالنا يقرأ "شعار الشركة" سيتم عرضه في حالة فشل تحميل الصورة. لماذا يحدث هذا؟ مجموعة متنوعة من الأسباب:
- مسار ملف غير صحيح
- اسم ملف غير صحيح أو خطأ إملائي
- خطأ النقل
- تم حذف الملف من الخادم
هذه مجرد بعض الاحتمالات لماذا قد تكون الصورة المحددة مفقودة. في هذه الحالات ، سيتم عرض النص البديل الخاص بنا بدلاً من ذلك.
يتم استخدام النص البديل أيضًا بواسطة برنامج قارئ الشاشة "لقراءة" الصورة لزائر ضعيف الرؤية. نظرًا لأنهم لا يستطيعون رؤية الصورة كما نفعل ، فإن هذا النص يتيح لهم معرفة الصورة نفسها. هذا هو السبب في أن النص البديل مطلوب ولماذا يجب أن يوضح بوضوح الصورة!
هناك سوء فهم شائع للنص البديل وهو أنه مخصص لأغراض محركات البحث. هذا ليس صحيحا. في حين أن Google ومحركات البحث الأخرى تقرأ هذا النص لتحديد ما هي الصورة (تذكر ، لا يمكنهم "رؤية" صورتك أيضًا) ، يجب ألا تكتب نص بديل للاستئناف فقط لمحركات البحث. المؤلف نص بديل واضح المقصود للبشر. إذا كان بإمكانك أيضًا إضافة بعض الكلمات الرئيسية إلى العلامة التي تروق لمحركات البحث ، فلا بأس بذلك ، ولكن تأكد دائمًا من أن النص البديل يخدم غرضه الأساسي عن طريق تحديد ما هي الصورة لأي شخص لا يمكنه رؤية ملف الرسومات.
سمات أخرى
تشتمل علامة IMG أيضًا على سمتين أخريين قد تشاهدهما عند استخدام رسم على صفحة الويب - العرض والارتفاع. على سبيل المثال ، إذا كنت تستخدم محرر WYSIWYG مثل Dreamweaver ، فسيضيف تلقائيًا هذه المعلومات لك. إليك مثال على ذلك:
تخبر سمات WIDTH و HEIGHT المتصفح بحجم الصورة. بعد ذلك ، يعرف المتصفح مقدار المساحة الموجودة في التخطيط لتخصيصها ، ويمكنه الانتقال إلى العنصر التالي في الصفحة أثناء تنزيل الصورة. تكمن المشكلة في استخدام هذه المعلومات في HTML في أنك قد لا ترغب دائمًا في عرض صورتك بهذا الحجم. على سبيل المثال ، إذا كان لديك موقع ويب سريع الاستجابة يتغير حجمه بناءً على شاشة الزائرين وحجم الجهاز ، فستحتاج أيضًا إلى أن تكون صورك مرنة. إذا ذكرت في HTML ما هو الحجم الثابت ، فستجد أنه من الصعب جدًا تجاوز استعلامات وسائط CSS المتجاوبة. لهذا السبب ، وللحفاظ على فصل النمط (CSS) والبنية (HTML) ، يوصى بعدم إضافة سمات العرض والارتفاع إلى شفرة HTML الخاصة بك.
ملاحظة واحدة: إذا تركت تعليمات التحجيم هذه ولم تقم بتحديد حجم في CSS ، فسوف يعرض المتصفح الصورة بحجمها الافتراضي الأصلي على أي حال.
حرره جيريمي جيرار