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