كيفية إضافة الصور إلى موقع HTML

غالبًا ما تؤدي إضافة الصور إلى صفحات موقع الويب الخاص بك إلى جعلها أكثر إرضاءًا للعين ونقل المعلومات بشكل أفضل من استخدام النص وحده. تتم هذه العملية باستخدام كود HTML وملف صورة. يمكن أن يكون الملف من صفحة ويب مختلفة أو يتم تخزينه على خادم ويب.

باستخدام بطاقة

في كود HTML لصفحة ويب ، يمكنك إضافة صورة باستخدام العلامة. في ال العلامة ، تحتاج إلى تحديد أربع سمات:

  • Src - تشير السمة المصدر إلى موقع الصورة. يمكنك استخدام مسار نسبي إذا كانت الصورة على نفس الخادم مثل موقعك ، ولكن الصور من موقع آخر تتطلب مسارات مطلقة.
  • البديل - سمة النص البديل هي وصف مكتوب للصورة.
  • العرض - عرض الصورة.
  • الارتفاع - ارتفاع الصورة.

السمة الاختيارية هي الحدود ، والتي تتيح لك تحديد حد حول الصورة. يتم تعريف سمة الحدود بحجم البكسل. على سبيل المثال ، باستخدام الحدود = 1 في العلامة تعني أن الحدود حول الصورة ستكون 1 بكسل.

ملاحظة: تم إهمال سمة Border في HTML5 وهي غير مدعومة.

أمثلة

توضح الأمثلة التالية HTML الفعلي المستخدم لإضافة الصورة في الجزء العلوي من هذه الصفحة. قد يتم إدراجها في أي مكان في نص صفحتك. الأول له عنوان URL أقصر لأن الصورة مخزنة على خادمنا ؛ والثاني هو كيف يمكنك ربط صورتنا.

مثال واحد

المثال الثاني

ما تنسيقات الصور التي يمكنني استخدامها على صفحة ويب؟

تنسيقات الصور الأكثر شيوعًا لاستخدامها في الصور والصور والشعارات والصور الأخرى هي JPEG و GIF و PNG. قد لا تعمل تنسيقات الصور الأخرى غير المدعومة على نطاق واسع مثل BMP في جميع المتصفحات.

هل أحتاج إلى علامات اقتباس حول السمات في علامة img؟

نعم فعلا. على الرغم من أن متصفحات اليوم يمكنها عادةً إصلاح أي أخطاء مع علامات اقتباس مفقودة حول قيمة سمة ، يجب أن يكون لديك دائمًا علامات اقتباس حول قيمة سمة لمنع الأخطاء.