الصور في HTML

الصور في HTML

يا هلا بالجميع! اليوم بنشوف كيف نتعامل مع الصور في صفحات الويب باستخدام HTML. الموضوع بسيط ومهم جداً عشان تخلي موقعك جذاب.

العنصر الأساسي: <img>

العنصر الأساسي لإضافة الصور هو <img>. هذا التاق يسمونه "empty tag" أو "self-closing tag" يعني ما يحتاج تاق إغلاق زي </p> مثلاً.

المصدر src

هذا أهم واحد، يحدد مسار الصورة. يعني وين الصورة موجودة عشان المتصفح يقدر يجيبها ويعرضها.

<img src="صوري/صورة-جميلة.jpg" alt="وصف للصورة">

المسار ممكن يكون نسبي (relative) زي المثال اللي فوق، أو مطلق (absolute) لو كانت الصورة من موقع ثاني.

النص البديل alt

هذا نص يظهر لو الصورة ما قدرت تتحمل لأي سبب، أو يستخدمه قارئات الشاشة للمكفوفين. مهم جداً لسهولة الوصول (accessibility) وللسيو (SEO).

<img src="صوري/صورة-جميلة.jpg" alt="غروب الشمس على شاطئ البحر">

نص alt لازم يكون وصفي ومفيد.

الأبعاد width و height

تحدد عرض وطول الصورة بالبكسل. ممكن تستخدم واحد منهم بس والمتصفح يضبط الثاني عشان ما تتشوه الصورة، أو تستخدمهم الاثنين.

<img src="صوري/صورة-جميلة.jpg" alt="غروب الشمس" width="300" height="200">

الأفضل تتحكم بالأبعاد عن طريق CSS عشان تكون مرنة أكثر وتستجيب لأحجام الشاشات المختلفة.

مثال شامل

شوف هذا المثال الشامل:

<img src="https://via.placeholder.com/400x250"
     alt="صورة توضيحية للمدينة"
     width="400"
     height="250">

الصور المتجاوبة (Responsive Images)

عشان الصور تظهر بشكل كويس على كل الأجهزة، عادة نستخدم CSS عشان نخليها متجاوبة (responsive). مثلاً كذا:

<style>
  img {
    max-width: 100%;
    height: auto;
    display: block; /* عشان ما يترك مسافات تحت الصورة */
  }
</style>

هذي تخلي الصورة ما تتعدى عرض العنصر الأب حقها وتحافظ على نسبة أبعادها.

وبكذا نكون غطينا أساسيات إضافة الصور في HTML. الموضوع بسيط، بس مهم تعرف الأساسيات هذي عشان تبني صفحات ويب احترافية.

← السابقالفهرسالتالي →