اكمالنا لسلسة تعلم html في مدونتنا سنشرح لك اليوم الصور في html وكيف تضيفها في صفحات مواقع الويب، ستساعد الصور على تحسين مظهر موقعك وجعله اكثر اناقة.
الصور هي عناصر أساسية في تصميم الويب، فهي لا تضفي جمالية على الموقع الالكتروني فحسب، بل تحسن أيضًا من تجربة المستخدم وتكسر الممل عليه وتسهيل فهم المحتوى. يتم استخدام العنصر <img> لإدراج الصور، وهو ما يمكننا من إضافة محتوى بصري جذاب للصفحات الإلكترونية.
بعض أنواع الصور المسموح بها في HTML
كما هو معروف ان الصورة لها عدة انواع وامتدادت مختلفة واشهرها هو png - jpeg -gif-svg النوع الاخير هو رسم متجهي وهو يعد من افضل الانواع الذي يحافظ على جودة الصورة. تلك كانت بعض الانواع التي تدعمها وكل منها له استخداماته المثالية:
- JPEG: تستخدم للصور ذات الألوان الغنية والتفاصيل العالية، مثل الصور الفوتوغرافية.
- PNG: تفضل للرسومات التي تحتاج إلى شفافية أو للصور التي تحتوي على نصوص وحواف واضحة.
- GIF: تستخدم للصور المتحركة والرسومات البسيطة.
- SVG: تُستخدم للرسومات المتجهية التي يمكن تكبيرها وتصغيرها دون فقدان الجودة، مثالية للشعارات والأيقونات.
صيغة كود الصورة (HTML Image Syntax)
لإضافة صورة إلى صفحة HTML، نستخدم العنصر <img> مع السمة src التي تحدد مسار الصورة، والسمة alt التي تقوم بانشاء وصفًا نصيًا للصورة.
<img src="img-url.png" alt="description">يعتبر تحديد السمة alt ممارسة جيدة لتحسين الوصولية وتوفير محتوى بديل في حالة حصلت مشكلة في تحميل الصورة وهو ما سنتعرف عليه اكثر في الجزء القادم.
اضافة نص بديل للصورة
لكي تضيف نص بديل للصورة في HTML، يمكنك استخدام السمة alt داخل عنصر الصورة <img>، هذا النص مهم للغاية لأنه يوفر وصفًا للصورة في حال لم تتكتمل عملية تحميل الصورة بسبب مشاكل الانترنت او لاي سبب اخر.
وبهذه الطريقة سيتمكن المستخدم من معرفة ما تضمنه الصورة من معلومات مهم وهو أيضًا مفيد لقارئات الشاشة ويعد من الممارسات الموصى بها لتحسين محركات البحث (SEO).
<img src="img-url.png" alt="description">في المثال السابق حددنا img-url.jpg هو المسار إلى الصورة التي تريد إدراجها، و description هو النص الذي سيظهر إذا لم تتمكن الصورة من التحميل. لم نحسن ابتكار نص بديل لكن يجب أن تكتب الوصف بشكل دقيق عن محتوى الصورة.
كيفية تغيير حجم الصورة
يمكن تغيير حجم الصورة في HTML باستخدام السمات width و height داخل العنصر <img>، هذه السمات تسمح لك بتحديد عرض وارتفاع الصورة بالبكسل.
بالتالي يساعد في الحفاظ على سرعة تحميل الصفحة وتحسين موقع الويب تقنياً، من المهم ملاحظة أن تحديد أبعاد الصورة المناسبة سيحافظ على نسب الأبعاد الأصلية للصورة وتجنب تخريبها.
<img src="img-url.png" alt="description" width="500" height="300">توسيط الصورة في صفحة HTML
لإظهار صورة في وسط الصفحة باستخدام HTML فقط، يمكنك استخدام عنصر <center>. على الرغم من أن استخدام هذا العنصر ليس شائعًا في التصميمات الحديثة، إلا أنه لا يزال يعمل في بعض الحالات. بالرغم من كل ذلك لن تستخدم هذه الطريقة فعندما تحترف CSS ستعرف كيفية وضع الصورة في المنتصف باكثر من طريقة.
<center>
<img src="your-image.jpg" alt="صورة">
</center>استخدام الصورة كرابط
يُمكن جعل الصورة تعمل كرابط يوجه المستخدم إلى صفحة أخرى عند النقر عليها، وذلك بوضع عنصر الصورة <img> داخل عنصر الرابط التشعبي <a> الذي شرحناه في درس الروابط في html.
<a href="url">
<img src="img-url.png" alt="description">
</a>هذه الطريقة تستخدم غالبًا لإنشاء أزرار تفاعلية أو للإعلانات. وهكذا نكون قد وصلنا لنهاية الدرس لتعلم الصور في html، انتظر باقي الدروس في القريب العاجل.
