افتح ملف HTML لصفحة الويب التي تريد إضافة صورة إليها في محرر نصي مثل Notepad أو برنامج تطوير الويب.
أضف علامة إلى الملف. ضع العلامة بعد العنصر الذي تريد أن تظهر الصورة تحته عند فتح ملف HTML في المستعرض. لا تحتوي العلامة على علامة إغلاق منفصلة. داخل العلامة ، يجب عليك تحديد مصدر الصورة التي تريد عرضها عن طريق كتابة موقع الصورة على الإنترنت باستخدام src ينسب. إذا كانت الصورة مخزنة في نفس المجلد مثل ملف HTML ، فاكتب اسم الصورة وامتدادها. إذا تم تخزين الصورة في مكان آخر ، فاكتب عنوان URL الكامل للصورة.
أضف ال بديل السمة إلى علامتك. في HTML5 ، تكون سمة النص البديل مطلوبة. استخدم هذه السمة لوصف الصورة في حالة تعذر تحميلها. إذا تعذر تحميل الصورة ، فسيعرض المتصفح النص الذي تدخله بعد سمة النص البديل. بالإضافة إلى ذلك ، تعد سمة alt مهمة لبرامج قارئ الشاشة التي يستخدمها الأشخاص ذوو الإعاقات البصرية. يقرأ البرنامج النص الموجود في سمة alt حتى يتمكن الشخص الذي يعاني من إعاقة بصرية والذي يشاهد موقع الويب الخاص بك من سماع ما هو موجود في الصورة على الرغم من عدم تمكنه من رؤيته.
حدد أبعاد الصورة بالبكسل بامتداد
ارتفاع و العرض صفات. إذا لم تحدد الأبعاد ، فلن يعرف المتصفح مقدار المساحة التي يجب تركها للصورة أثناء تحميل الصفحة. ينتج عن هذا تحميل الصفحة بشكل متقطع ، حيث يتم تحميل النص أولاً ، تاركًا مساحة صغيرة للصورة ، ثم ينتقل بعيدًا عند تحميل الصورة ويتسبب في اتساع المساحة. مع تحديد الأبعاد ، يترك المتصفح المقدار الصحيح تمامًا من المسافة بين العناصر الأخرى على الصفحة لتعبئة الصورة عند الانتهاء من التحميل.اختبر الكود الخاص بك للتأكد من أن الصورة تظهر في المكان الصحيح من خلال فتح ملف HTML في المستعرض.
استخدم CSS لنقل صورة إلى الجانب الأيسر أو الأيمن من الشاشة أو التفاف النص حولها. على سبيل المثال ، يمكنك استخدام style = "float: left؛" أو style = "float: right؛" داخل العلامة.
إذا كنت لا تعرف ارتفاع الصورة وعرضها ، فلا بأس من استخدام سمة الارتفاع أو العرض وحدها. يمكنك أيضًا استخدام CSS لتحديد الارتفاع والعرض ؛ على سبيل المثال ، باستخدام صورة 100 × 100 بكسل ، استخدم سمة النمط: style = "height: 100px؛ العرض: 100 بكسل ".
حوّل الصورة إلى رابط قابل للنقر عليه بوضع العلامة داخل زوج علامة "a href". على سبيل المثال ، إذا كنت تريد رابط صورة إلى Facebook ، فاكتب ما يلي.
لا تستخدم سمة alt لمحاولة تعزيز مُحسنات محركات البحث لصفحتك. لطالما أدركت محركات البحث أن بعض مصممي الويب يحاولون حشو سمة alt بكلمات رئيسية إضافية ، وبالتالي يتجاهلون النص الموجود في سمة alt.
