الصور

شرح شامل لوسم الصور وأكواد تجريبية

مقدمة لوسم الصور <img>: روح الصفحة

بعد ما تعلمنا ازاي ننظم النصوص والعناوين، جه الوقت نضيف لمسة بصرية وجمالية لصفحاتنا. صفحات الويب من غير صور بتكون مملة جدًا، زي الجرنال القديم. وسم <img> هو الأداة السحرية اللي بتسمحلنا نعرض الصور.

حاجة مهمة جدًا لازم تعرفها عن وسم <img>: هو وسم "فارغ" أو "ذاتي الإغلاق" (self-closing). يعني مش محتاج وسم إغلاق زي </img>. هو بيتكتب كده وخلاص. المعلومات اللي بيحتاجها عشان يعرض الصورة بتتحط جواه على هيئة "خصائص" أو attributes. أهم خاصيتين، واللي من غيرهم الوسم مالوش لازمة، هما src و alt.

الشكل الأساسي لوسم الصورة:

<img src="مسار_الصورة_هنا" alt="وصف_للصورة_هنا">

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

خاصية src: من أين تأتي الصورة؟

كلمة src هي اختصار لكلمة "Source" يعني "المصدر". الخاصية دي هي اللي بتقول للمتصفح مكان الصورة فين عشان يقدر يجيبها ويعرضها. من غيرها، المتصفح مش هيعرف يعرض إيه. عندنا طريقتين نحدد بيهم مصدر الصورة:

1. الرابط المطلق (Absolute URL):

ده بيكون رابط كامل لصورة موجودة على الإنترنت. بتبدأ بـ http:// أو https://. الطريقة دي سهلة لو عايز تعرض صورة من موقع تاني.

<h2>صورة قطة من الإنترنت</h2>
<img src="https://placekitten.com/400/300" alt="صورة قطة جميلة">

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

2. الرابط النسبي (Relative URL):

دي الطريقة الأفضل والأكثر احترافية. هنا الصورة بتكون جزء من ملفات موقعك. الرابط بيكون "نسبي" لمكان ملف الـ HTML اللي أنت فيه.

- الصورة في نفس المجلد:

لو ملف الصورة موجود في نفس المجلد مع ملف الـ HTML، بتكتب اسمها بس.

<!-- نفترض وجود صورة اسمها "car.jpg" في نفس المجلد -->
<img src="car.jpg" alt="سيارة رياضية حمراء">

- الصورة في مجلد فرعي:

عادة بننظم شغلنا وبنحط كل الصور في مجلد اسمه "images" أو "img". عشان توصل للصورة، بتكتب اسم المجلد الأول وبعدين شرطة مايلة / وبعدين اسم الصورة.

<!-- نفترض وجود مجلد "images" وبداخله صورة "laptop.png" -->
<img src="images/laptop.png" alt="لابتوب على مكتب خشبي">

خاصية alt: لا تهملها أبدًا!

كلمة alt هي اختصار لكلمة "Alternative" يعني "بديل". الخاصية دي بتقدم وصف نصي للصورة. قد تظن أنها غير مهمة، لكنها في الحقيقة من أهم الخصائص في HTML لسببين رئيسيين:

لإمكانية الوصول (Accessibility): الأشخاص اللي عندهم ضعف في البصر بيستخدموا برامج اسمها "قارئات الشاشة" (Screen Readers) عشان "يقروا" محتوى الصفحة. لما البرنامج ده بيوصل لصورة، بيقرأ النص الموجود في خاصية alt عشان يوصف الصورة للمستخدم. من غيرها، المستخدم مش هيفهم الصورة دي عن إيه.
في حالة فشل تحميل الصورة: لو فيه مشكلة في رابط الصورة أو بطء في الإنترنت، الصورة مش هتظهر. في الحالة دي، المتصفح بيعرض أيقونة صورة مكسورة ومعاها النص البديل اللي في alt. ده بيدي للمستخدم فكرة عن الصورة اللي كانت المفروض تظهر.
لتحسين محركات البحث (SEO): محركات البحث زي جوجل مش بت "شوف" الصور، لكنها بتقرأ النص البديل عشان تفهم محتوى الصورة. استخدام وصف دقيق في alt بيساعد صورك تظهر في نتائج بحث الصور.

مثال يوضح أهمية alt:

<!-- رابط صورة غير صحيح عمدًا -->
<img src="images/صورة_مش_موجودة.jpg" alt="شعار شركة جوجل ملون">

<!-- جرب تشيل خاصية alt وشوف الفرق -->
<img src="images/صورة_مش_موجودة.jpg">

نصيحة ذهبية: دائمًا اكتب وصف واضح ومختصر ومفيد في خاصية alt. تخيل إنك بتوصف الصورة لواحد صاحبك على التليفون.

التحكم في الأبعاد: خاصيتي width و height

أحيانًا بتكون الصورة اللي عندك حجمها كبير جدًا أو صغير جدًا على المكان اللي عايز تحطها فيه. تقدر تتحكم في عرض (width) وارتفاع (height) الصورة مباشرة من خلال خصائص HTML. القيم بتتكتب بالبيكسل (px) من غير ما تكتب الوحدة.

تحديد العرض والارتفاع معًا:

<!-- الصورة دي هتظهر بعرض 200 بيكسل وارتفاع 150 بيكسل -->
<img src="images/laptop.png" alt="لابتوب" width="200" height="150">

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

تحديد العرض فقط (الطريقة الأفضل):

أفضل طريقة هي إنك تحدد خاصية واحدة بس (العرض width غالبًا)، والمتصفح هيحسب القيمة التانية تلقائيًا عشان يحافظ على أبعاد الصورة الأصلية (Aspect Ratio) وشكلها ميبوظش.

<!-- المتصفح هيخلي عرض الصورة 300 بيكسل ويظبط ارتفاعها بنفسه -->
<img src="images/laptop.png" alt="لابتوب" width="300">

ملاحظة متقدمة: في عالم تطوير الويب الحديث، من الأفضل دائمًا التحكم في أحجام الصور باستخدام لغة CSS بدلًا من خصائص HTML، لأنها بتدينا تحكم أكبر وبتخلي الموقع متجاوب مع كل الشاشات. لكن معرفة هذه الخصائص مهمة للأساسيات.

الصورة كـ رابط: اجعلها قابلة للنقر

إيه رأيك لما المستخدم يضغط على صورة، توديه على صفحة تانية؟ ده سهل جدًا. كل اللي عليك تعمله هو إنك تحط وسم <img> بالكامل جوه وسم الرابط <a> اللي اتعلمناه في الدرس اللي فات.

<h3>اضغط على اللوجو لزيارة جوجل</h3>
<a href="https://www.google.com">
  <img src="images/google-logo.png" alt="شعار جوجل" width="250">
</a>

لما تعمل كده، المتصفح هيضيف حدود زرقاء حوالين الصورة (في بعض المتصفحات القديمة) وهيحول مؤشر الماوس لشكل اليد لما تقف عليها، وده معناه إنها بقت رابط تقدر تضغط عليه.

تنظيم الصور: وسوم <figure> و <figcaption>

أحيانًا بتحتاج تضيف تعليق توضيحي تحت الصورة، زي "صورة الأهرامات بالجيزة" أو "الرئيس التنفيذي للشركة". HTML5 قدمتلنا وسوم مخصصة للموضوع ده عشان تخلي الكود منظم وله معنى أكتر.

<figure>: ده وسم بيستخدم كحاوية للمحتوى المرئي (زي صورة أو رسم بياني) والتعليق بتاعه.
<figcaption>: ده وسم بيتحط جواه النص التوضيحي أو التعليق (Caption) الخاص بالـ figure.

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

<figure>
  <img src="images/pyramids.jpg" alt="الأهرامات الثلاثة وأبو الهول في الجيزة" width="500">
  <figcaption>صورة بانورامية لأهرامات الجيزة في مصر.</figcaption>
</figure>

أمثلة تطبيقية: بناء محتوى حقيقي

دلوقتي يلا نجمع كل اللي اتعلمناه عن النصوص والصور والروابط عشان نعمل أجزاء من صفحة ويب حقيقية.

مثال 1: بطاقة منتج بسيطة

<h2>أحدث هواتفنا الذكية</h2>

<figure>
  <img src="images/smartphone.jpg" alt="هاتف ذكي بشاشة كبيرة" width="250">
  <figcaption>هاتف "Future X" بمعالج فائق السرعة.</figcaption>
</figure>

<p>
  تعرف على أحدث إصداراتنا، هاتف Future X الذي يجمع بين التصميم الأنيق والأداء القوي.
</p>

<a href="details.html">اقرأ المزيد من التفاصيل</a>

مثال 2: معرض صور بسيط

<h1>معرض صور الطبيعة</h1>
<p>مجموعة من أجمل الصور التي التقطناها حول العالم.</p>
<hr>

<!-- الصورة الأولى كرابط يفتح الصورة بحجمها الكامل -->
<a href="images/forest-full.jpg">
  <img src="images/forest-thumb.jpg" alt="غابة كثيفة الأشجار" width="200">
</a>

<!-- الصورة الثانية -->
<a href="images/ocean-full.jpg">
  <img src="images/ocean-thumb.jpg" alt="أمواج المحيط الزرقاء" width="200">
</a>

<!-- الصورة الثالثة -->
<a href="images/desert-full.jpg">
  <img src="images/desert-thumb.jpg" alt="كثبان رملية في الصحراء" width="200">
</a>

تمرين عملي: أنشئ صفحة "عن حيواني المفضل"

حان وقت التطبيق! في هذا التمرين ستقوم بإنشاء صفحة ويب بسيطة عن حيوانك المفضل، وستستخدم فيها كل ما تعلمته عن الصور والروابط والنصوص.

خطوات التمرين:

ابحث على جوجل عن 3 صور لحيوانك المفضل (مثلاً: أسد، دولفين، باندا). احفظهم في جهازك داخل مجلد جديد اسمه "my-project"، وداخل هذا المجلد، أنشئ مجلدًا آخر اسمه "images" وضع الصور الثلاثة بداخله.
في مجلد "my-project"، أنشئ ملف HTML جديدًا وسمه animal.html.
اكتب البنية الأساسية لملف HTML (<!DOCTYPE html>, <html>, <head>, <body>).
في الـ <title>، اكتب اسم الحيوان.
داخل الـ <body>، ابدأ في بناء محتوى الصفحة كالتالي:
- اكتب عنوانًا رئيسيًا <h1> باسم الحيوان.
- اكتب فقرة <p> قصيرة تقدم فيها معلومات عامة عن هذا الحيوان.
- أضف عنوانًا فرعيًا <h2> بعنوان "معرض الصور".
- تحت هذا العنوان، أضف أول صورة باستخدام وسم <img>. تأكد من استخدام المسار النسبي الصحيح (images/اسم_الصورة.jpg) واكتب وصفًا جيدًا في خاصية alt. حدد عرض الصورة ليكون 300 بيكسل.
- أضف الصورتين التاليتين بنفس الطريقة.
- أضف عنوانًا فرعيًا آخر <h2> بعنوان "لمعرفة المزيد".
- تحت هذا العنوان، أضف رابط <a> يبحث عن هذا الحيوان في جوجل. (الرابط يمكن أن يكون: https://www.google.com/search?q=اسم+الحيوان). اجعل نص الرابط "ابحث في جوجل عن المزيد من المعلومات".
- تحدي إضافي: اجعل إحدى الصور رابطًا يفتح صفحة ويكيبيديا عن هذا الحيوان.
احفظ الملف وافتحه في المتصفح لمشاهدة نتيجتك الرائعة!

تهانينا! لقد أكملت درس الصور بنجاح. الآن أصبحت قادرًا على إضافة العناصر البصرية لصفحاتك، وربطها بصفحات أخرى، وتنظيمها بشكل احترافي. أنت الآن تقطع شوطًا كبيرًا في رحلتك لتعلم تطوير الويب.

الصور في HTML