إدراج الصور باستخدام وسم img في HTML
في درس النهاردة من كورس تعلم HTML من الصفر، هنتكلم عن واحدة
من أهم الأدوات اللي بتخلي صفحات الويب شكلها احترافي، وهي الصور. وعلشان ندرج
صورة في الصفحة بنستخدم وسم <img>، واللي هنتعرف عليه
بالتفصيل في الدرس ده.
يعني إيه وسم img؟
وسم <img> هو وسم خاص بعرض الصور في صفحات HTML. الوسم ده من
نوع "وسم فارغ" يعني مش بيكون له وسم إغلاق زي الوسوم التانية. علشان الصورة تظهر
بشكل صحيح لازم نحدد ليه حاجتين أساسيتين:
- src: وده اختصار لكلمة "source" يعني المصدر، وبنكتب فيه مكان الصورة سواء كان على نفس السيرفر أو رابط مباشر من النت.
- alt: وده اختصار لـ "alternative text"، يعني نص بديل بيظهر لو الصورة مش اتحملت لأي سبب. وبيساعد كمان المستخدمين اللي بيستخدموا أدوات قراءة الشاشة.
إزاي نستخدم الوسم؟
ببساطة الكود بيكون كده:
<img src="photo.jpg" alt="وصف الصورة">والصورة هتظهر في المكان اللي كتبت فيه الكود. بس في حاجات تانية نقدر نتحكم فيها زي الحجم والمكان.
التحكم في حجم الصورة
ممكن تتحكم في حجم الصورة بطريقتين:
- عن طريق خاصيتي
widthوheightداخل الوسم. - أو عن طريق CSS باستخدام
style.
مثال:
<img src="photo.jpg" alt="صورة" width="300" height="200">أو:
<img src="photo.jpg" alt="صورة" style="width:300px; height:200px;">والأفضل إنك تستخدم CSS علشان يكون عندك مرونة أكتر في التنسيق.
المسارات المختلفة للصور
في نوعين من المسارات تقدر تستخدمهم:
-
مسار نسبي: زي لما تكون الصورة في مجلد جوه مشروعك. مثال:
src="images/photo.jpg" -
مسار مطلق: زي لما تكون الصورة على موقع تاني. مثال:
src="https://example.com/photo.jpg"
خلي بالك لو بتستخدم صورة من موقع خارجي لازم تتأكد إن عندك الحق إنك تستخدمها، علشان حقوق النشر.
النص البديل alt
الـ alt مش بس بيساعد الناس اللي عندهم مشاكل في تحميل الصور، لكن كمان مهم جداً لتحسين محركات البحث (SEO)، علشان كده حاول دايمًا تكتب وصف دقيق للصورة.
عرض صور متحركة
ممكن تستخدم صور بصيغة .gif ودي بتكون صور متحركة، مثال:
<img src="smile.gif" alt="وجه مبتسم">بس خلي بالك إن حجم الصور المتحركة ممكن يكون كبير، فخلي دايمًا الاستخدام بحكمة.
الصورة كرابط
لو عايز الصورة تكون قابلة للضغط، وتحول المستخدم لرابط معين، تقدر تحط وسم
<img> جوا وسم <a>:
<a href="page.html">
<img src="btn.jpg" alt="زر التحويل">
</a>تنسيق الصور باستخدام float
لو حابب الصورة تظهر على جنب والنص يلتف حواليها، تقدر تستخدم خاصية
float من CSS:
<img src="img.jpg" alt="وصف" style="float:right; width:150px;">وكمان ممكن تستخدم float:left لو عايزها في الناحية التانية.
أنواع الصور المشهورة في HTML
دي أشهر الصيغ اللي بنستخدمها في صفحات الويب:
| الصيغة | الاختصار | الوصف |
|---|---|---|
| JPG / JPEG | Joint Photographic Experts Group | أكثر صيغة منتشرة ومناسبة للصور الفوتوغرافية. |
| PNG | Portable Network Graphics | بتدعم الشفافية وجودة ممتازة. |
| GIF | Graphics Interchange Format | مناسبة للصور المتحركة. |
| SVG | Scalable Vector Graphics | مناسبة للأيقونات والرسومات المتجهة. |
| ICO | Icon | تستخدم كأيقونة تبويب للموقع. |
نصائح عامة للتعامل مع الصور
- اختار صيغة مناسبة للصورة حسب الاستخدام.
- قلل حجم الصورة قبل ما ترفعها للموقع علشان متبطّأش التحميل.
- استخدم نصوص alt دقيقة لتحسين تجربة المستخدم وSEO.
- حافظ على أبعاد الصور متناسبة مع التصميم العام للموقع.
خاتمة الدرس
وبكده نكون اتعلمنا سوا كل حاجة تخص إدراج الصور باستخدام وسم
<img> في لغة HTML من
كورس تعلم HTML من الصفر. اتعرفنا على الوسم، واستخداماته،
وشرحنا خصائص زي src و alt، وتحكمنا في الأبعاد، واتكلمنا عن الصيغ المختلفة،
والصورة كرابط، وتنسيق الصورة باستخدام float.
لو عجبك الدرس ده، شاركه مع زمايلك علشان يستفيدوا، وابعته لأي حد بيبدأ يتعلم HTML.
استنونا في درس جديد، والسلام عليكم ورحمة الله وبركاته 🌟