الصور والروابط في HTML — دليل شامل 2026

في المقال السابق، تعلمت النصوص والقوائم. الآن سنتعلم الصور و الروابط — وهما ما يجعل صفحتك حية ومترابطة.

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

ما هي الصورة (Image)؟

الصورة هي عنصر ذاتي الإغلاق يُضيف صورة لصفحتك.

الصيغة:

<img src="المسار" alt="الوصف">

أبسط مثال:

<img src="photo.jpg" alt="صورة شخصية">

سمات الصورة

السمة	الوظيفة	إلزامية؟
src	مسار الصورة	✅ نعم
alt	نص بديل	✅ نعم
width	العرض	❌ لا
height	الارتفاع	❌ لا
title	تلميح عند المرور	❌ لا
loading	طريقة التحميل	❌ لا

1. سمة src (المصدر)

المسار النسبي (نفس المشروع):

<img src="photo.jpg" alt="صورة">
<img src="images/photo.jpg" alt="صورة">
<img src="../images/photo.jpg" alt="صورة">

المسار المطلق (من الإنترنت):

<img src="https://example.com/photo.jpg" alt="صورة">

⚠️ تحذير: لا تستخدم المسار المطلق لملفات محلية.

2. سمة alt (النص البديل)

⚠️ alt إلزامية! لأسباب:

• SEO: محركات البحث تفهم الصورة.
• إمكانية الوصول: قارئ الشاشة يقرأ الوصف.
• الأداء: يظهر النص عند فشل تحميل الصورة.

<!-- ✅ جيد: -->
<img src="cat.jpg" alt="قطة بيضاء تجلس على كرسي">

<!-- ❌ سيء: -->
<img src="cat.jpg" alt="">
<img src="cat.jpg" alt="صورة">
<img src="cat.jpg">

قواعد كتابة alt:

• وصفية: تصف الصورة بدقة.
• قصيرة: لا تزيد عن 125 حرفاً.
• بدون "صورة" أو "image": القارئ يعرف أنها صورة.
• فارغة للصور الزخرفية: alt="".

3. سمة width و height

<img src="photo.jpg" alt="صورة" width="300" height="200">

⚠️ نصيحة: استخدم CSS بدلاً من width و height في HTML.

الأفضل:

img {
  max-width: 100%;
  height: auto;
}

4. سمة loading

<!-- تحميل فوري: -->
<img src="hero.jpg" alt="صورة رئيسية" loading="eager">

<!-- تحميل مؤجل: -->
<img src="footer.jpg" alt="صورة ثانوية" loading="lazy">

الفرق:

• eager: يحمّل الصورة فوراً (افتراضي).
• lazy: يحمّلها عند الحاجة (أداء أفضل).

استخدم lazy للصور التي ليست في الأعلى (تحتاج تمرير).

صيغ الصور

الصيغة	الاستخدام	الميزات
JPG/JPEG	صور فوتوغرافية	حجم صغير، لا يدعم الشفافية
PNG	شعارات، أيقونات	يدعم الشفافية، حجم أكبر
WebP	كل الاستخدامات	حجم أصغر، جودة عالية
SVG	أيقونات، شعارات	متجهي، قابل للتحجيم
GIF	صور متحركة	حركات بسيطة، حجم كبير

التوصية:

• WebP للصور العادية (أفضل توازن).
• SVG للأيقونات والشعارات.
• JPG للصور الفوتوغرافية.
• PNG للصور التي تحتاج شفافية.

إطار الصورة (figure)

لتجميع صورة مع تعليق:

<figure>
  <img src="chart.jpg" alt="رسم بياني للمبيعات">
  <figcaption>الشكل 1: المبيعات الشهرية لعام 2026</figcaption>
</figure>

النتيجة: صورة + تعليق تحتها.

الروابط (Links)

الرابط هو ما يجعل الويب مترابطاً. يُنشأ بوسم <a>.

الصيغة:

<a href="الرابط">النص الظاهر</a>

سمات الرابط

السمة	الوظيفة
href	الرابط
target	أين يفتح الرابط
rel	العلاقة مع الصفحة
title	تلميح
download	تحميل الملف

1. رابط خارجي

<a href="https://example.com">زيارة الموقع</a>
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  فتح جوجل في تبويب جديد
</a>

⚠️ مهم: عند استخدام target="_blank"، أضف دائماً:

rel="noopener noreferrer"

السبب: للأمان (يمنع الصفحة الجديدة من التحكم بصفحتك).

2. رابط داخلي (صفحة أخرى)

<a href="about.html">من نحن</a>
<a href="pages/contact.html">اتصل بنا</a>
<a href="/blog/post-1.html">مقالة</a>

3. رابط داخل نفس الصفحة (Anchor)

<!-- تعريف الهدف: -->
<h2 id="section1">القسم الأول</h2>

<!-- الرابط: -->
<a href="#section1">انتقل للقسم الأول</a>

<!-- للعودة للأعلى: -->
<a href="#">العودة للأعلى</a>

4. رابط البريد الإلكتروني

<a href="mailto:[email protected]">راسلنا</a>
<a href="mailto:[email protected]?subject=استفسار">راسلنا بموضوع</a>

5. رابط الهاتف

<a href="tel:+962770000000">اتصل بنا</a>

مفيد للجوال — يفتح تطبيق الاتصال.

6. رابط تحميل ملف

<a href="file.pdf" download>تحميل PDF</a>
<a href="file.pdf" download="my-file.pdf">تحميل باسم مخصص</a>

7. رابط صورة

<a href="https://example.com">
  <img src="logo.png" alt="شعار الموقع">
</a>

الفائدة: الصورة تصبح قابلة للنقر.

الوسائط المتعددة

1. الصوت (Audio)

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  متصفحك لا يدعم الصوت.
</audio>

السمات:

• controls: عرض أزرار التحكم.
• autoplay: تشغيل تلقائي.
• loop: تكرار.
• muted: كتم الصوت.

2. الفيديو (Video)

<video controls width="600" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  متصفحك لا يدعم الفيديو.
</video>

السمات:

• controls: أزرار التحكم.
• poster: صورة مصغرة قبل التشغيل.
• autoplay: تشغيل تلقائي.
• loop: تكرار.
• muted: كتم.
• width: العرض.

3. إطار مدمج (iframe)

لتضمين صفحة من موقع آخر:

<iframe 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  width="560" 
  height="315" 
  title="فيديو تعليمي"
  allowfullscreen>
</iframe>

⚠️ تحذير: استخدم iframe بحذر — قد يكون خطراً.

أمثلة عملية

1. معرض صور

<h1>معرض صوري</h1>

<div class="gallery">
  <figure>
    <img src="img1.jpg" alt="غروب الشمس على البحر" width="300">
    <figcaption>غروب الشمس</figcaption>
  </figure>
  
  <figure>
    <img src="img2.jpg" alt="جبال مغطاة بالثلوج" width="300">
    <figcaption>الجبال</figcaption>
  </figure>
  
  <figure>
    <img src="img3.jpg" alt="غابة خضراء" width="300">
    <figcaption>الغابة</figcaption>
  </figure>
</div>

2. صفحة فريق

<h1>فريقنا</h1>

<div class="team-member">
  <img src="ahmed.jpg" alt="أحمد - مطور واجهات" width="150">
  <h2>أحمد</h2>
  <p>مطور واجهات</p>
  <a href="https://twitter.com/ahmed" target="_blank" rel="noopener noreferrer">تويتر</a>
</div>

<div class="team-member">
  <img src="sara.jpg" alt="سارة - مصممة" width="150">
  <h2>سارة</h2>
  <p>مصممة UI/UX</p>
  <a href="https://linkedin.com/in/sara" target="_blank" rel="noopener noreferrer">LinkedIn</a>
</div>

3. مقال مع صور

<article>
  <h1>رحلة إلى الجبال</h1>
  
  <p>في الأسبوع الماضي، قررت الذهاب في رحلة إلى الجبال.</p>
  
  <figure>
    <img src="mountain.jpg" alt="منظر جبلي خلاب" width="100%">
    <figcaption>منظر من قمة الجبل</figcaption>
  </figure>
  
  <p>كان المنظر <strong>مذهلاً</strong>! يمكنك رؤية تفاصيل الرحلة <a href="https://example.com/trip">هنا</a>.</p>
  
  <video controls width="100%">
    <source src="trip.mp4" type="video/mp4">
    فيديو الرحلة
  </video>
</article>

تمارين عملية

تمرين 1: صورة شخصية

أضف صورة شخصية لصفحتك.

الحل:

<h1>أنا أحمد</h1>
<img src="profile.jpg" alt="صورة أحمد الشخصية" width="200">
<p>مطور ويب</p>

تمرين 2: معرض صور

أنشئ معرضاً بأربع صور.

الحل:

<h1>معرض الصور</h1>
<div class="gallery">
  <img src="img1.jpg" alt="صورة 1" width="200">
  <img src="img2.jpg" alt="صورة 2" width="200">
  <img src="img3.jpg" alt="صورة 3" width="200">
  <img src="img4.jpg" alt="صورة 4" width="200">
</div>

تمرين 3: روابط مفيدة

أضف 5 روابط لمواقع مفيدة.

الحل:

<h1>روابط مفيدة</h1>
<ul>
  <li><a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a></li>
  <li><a href="https://freecodecamp.org" target="_blank" rel="noopener noreferrer">FreeCodeCamp</a></li>
  <li><a href="https://css-tricks.com" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></li>
  <li><a href="https://stackoverflow.com" target="_blank" rel="noopener noreferrer">Stack Overflow</a></li>
  <li><a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a></li>
</ul>

تمرين 4: شعار قابل للنقر

أنشئ شعاراً يعيدك للصفحة الرئيسية.

الحل:

<a href="index.html">
  <img src="logo.png" alt="شعار الموقع" width="100">
</a>

تمرين 5: رابط بريد

أنشئ رابطاً يفتح البريد الإلكتروني.

الحل:

<p>للاستفسار: <a href="mailto:[email protected]">راسلنا</a></p>

تمرين 6: رابط داخل الصفحة

أنشئ قائمة تنقل لأقسام الصفحة.

الحل:

<nav>
  <ul>
    <li><a href="#about">من نحن</a></li>
    <li><a href="#services">خدماتنا</a></li>
    <li><a href="#contact">اتصل بنا</a></li>
  </ul>
</nav>

<h2 id="about">من نحن</h2>
<p>...</p>

<h2 id="services">خدماتنا</h2>
<p>...</p>

<h2 id="contact">اتصل بنا</h2>
<p>...</p>

تمرين 7: فيديو

أضف مقطع فيديو بصورة مصغرة.

الحل:

<h1>مقطع تعليمي</h1>
<video controls width="600" poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  متصفحك لا يدعم الفيديو.
</video>

تمرين 8: صفحة محتوى كاملة

أنشئ صفحة تجمع كل ما تعلمته.

الحل:

<article>
  <h1>دليل السفر</h1>
  
  <figure>
    <img src="hero.jpg" alt="شاطئ استوائي" width="100%">
    <figcaption>شاطئ في المالديف</figcaption>
  </figure>
  
  <p>السفر هو <strong>أفضل استثمار</strong> في نفسك. تعلم المزيد من <a href="https://example.com">هذا الموقع</a>.</p>
  
  <h2>أفضل الوجهات</h2>
  <ul>
    <li>المالديف</li>
    <li>سويسرا</li>
    <li>اليابان</li>
  </ul>
  
  <video controls width="100%">
    <source src="travel.mp4" type="video/mp4">
  </video>
  
  <p>للاستفسار: <a href="mailto:[email protected]">راسلنا</a></p>
</article>

حل المشاكل الشائعة

🔴 المشكلة 1: الصورة لا تظهر

الأسباب والحلول:

السبب	الحل
مسار خاطئ	تحقق من اسم الملف وامتداده
الملف في مكان آخر	تأكد من المسار النسبي الصحيح
امتداد خاطئ	تأكد من `.jpg` وليس `.jpeg`
الملف غير موجود	انسخ الصورة للمجلد الصحيح

🔴 المشكلة 2: الرابط لا يعمل

السبب: نسيان https:// أو مسار خاطئ.

الحل:

<!-- ❌ خطأ: -->
<a href="google.com">جوجل</a>

<!-- ✅ صحيح: -->
<a href="https://google.com">جوجل</a>

🔴 المشكلة 3: alt مفقود

الحل: أضف alt لكل صورة:

<img src="photo.jpg" alt="وصف الصورة">

🔴 المشكلة 4: الصورة كبيرة جداً

الحل: استخدم CSS:

img {
  max-width: 100%;
  height: auto;
}

🔴 المشكلة 5: الرابط يفتح في نفس الصفحة

الحل: استخدم target="_blank":

<a href="https://example.com" target="_blank" rel="noopener noreferrer">رابط</a>

جدول الوسوم والسمات

الوسم/السمة	الوظيفة
<img>	صورة
src	مسار الصورة
alt	نص بديل
<figure>	إطار مع تعليق
<figcaption>	تعليق الصورة
<a>	رابط
href	عنوان الرابط
target="_blank"	فتح في تبويب جديد
<audio>	صوت
<video>	فيديو
<iframe>	إطار مدمج

قائمة تحقق نهائية

المهمة	الحالة
إضافة صورة بسيطة	⬜
استخدام alt بشكل صحيح	⬜
فهم صيغ الصور	⬜
إنشاء روابط خارجية وداخلية	⬜
روابط البريد والهاتف	⬜
إضافة فيديو وصوت	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت الصور والروابط، أنت جاهز للمقال التالي:

1. النماذج والجداول — العناصر التفاعلية.
2. الوسوم الدلالية — HTML احترافي.
3. CSS — التصميم والأنماط.

الخلاصة

في هذا المقال، تعلمت:

• ✅ إضافة الصور بوسم <img>.
• ✅ سمة alt وأهميتها.
• ✅ صيغ الصور (JPG, PNG, WebP, SVG).
• ✅ الروابط الداخلية والخارجية.
• ✅ روابط البريد والهاتف.
• ✅ الوسائط المتعددة (صوت، فيديو).
• ✅ <figure> و <figcaption>.
• ✅ حل 8 تمارين عملية.

تذكر: الصور والروابط هما ما يجعل الويب حيّاً. استخدمهما بحكمة.