NahdaAI | نهضة — تعلّم البرمجة والذكاء الاصطناعي بالعربية

في المقال السابق، تعلمت النصوص والقوائم. الآن سنتعلم **الصور** و **الروابط** — وهما ما يجعل صفحتك **حية ومترابطة**. في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم الصور والروابط والوسائط المتعددة، مع تمارين وحلول. ## ما هي الصورة (Image)؟ الصورة هي عنصر **ذاتي الإغلاق** يُضيف صورة لصفحتك. **الصيغة:** ```html <img src="المسار" alt="الوصف"> ``` **أبسط مثال:** ```html <img src="photo.jpg" alt="صورة شخصية"> ``` ## سمات الصورة <table> <thead> <tr> <th>السمة</th> <th>الوظيفة</th> <th>إلزامية؟</th> </tr> </thead> <tbody> <tr> <td><code>src</code></td> <td>مسار الصورة</td> <td>✅ نعم</td> </tr> <tr> <td><code>alt</code></td> <td>نص بديل</td> <td>✅ نعم</td> </tr> <tr> <td><code>width</code></td> <td>العرض</td> <td>❌ لا</td> </tr> <tr> <td><code>height</code></td> <td>الارتفاع</td> <td>❌ لا</td> </tr> <tr> <td><code>title</code></td> <td>تلميح عند المرور</td> <td>❌ لا</td> </tr> <tr> <td><code>loading</code></td> <td>طريقة التحميل</td> <td>❌ لا</td> </tr> </tbody> </table> ### 1. سمة `src` (المصدر) **المسار النسبي** (نفس المشروع): ```html <img src="photo.jpg" alt="صورة"> <img src="images/photo.jpg" alt="صورة"> <img src="../images/photo.jpg" alt="صورة"> ``` **المسار المطلق** (من الإنترنت): ```html <img src="https://example.com/photo.jpg" alt="صورة"> ``` **⚠️ تحذير:** لا تستخدم المسار المطلق لملفات محلية. ### 2. سمة `alt` (النص البديل) **⚠️ `alt` إلزامية!** لأسباب: - **SEO:** محركات البحث تفهم الصورة. - **إمكانية الوصول:** قارئ الشاشة يقرأ الوصف. - **الأداء:** يظهر النص عند فشل تحميل الصورة. ```html  <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` ```html <img src="photo.jpg" alt="صورة" width="300" height="200"> ``` **⚠️ نصيحة:** استخدم CSS بدلاً من `width` و `height` في HTML. **الأفضل:** ```css img { max-width: 100%; height: auto; } ``` ### 4. سمة `loading` ```html  <img src="hero.jpg" alt="صورة رئيسية" loading="eager">  <img src="footer.jpg" alt="صورة ثانوية" loading="lazy"> ``` **الفرق:** - **`eager`:** يحمّل الصورة فوراً (افتراضي). - **`lazy`:** يحمّلها عند الحاجة (أداء أفضل). **استخدم `lazy`** للصور التي **ليست في الأعلى** (تحتاج تمرير). ## صيغ الصور <table> <thead> <tr> <th>الصيغة</th> <th>الاستخدام</th> <th>الميزات</th> </tr> </thead> <tbody> <tr> <td><strong>JPG/JPEG</strong></td> <td>صور فوتوغرافية</td> <td>حجم صغير، لا يدعم الشفافية</td> </tr> <tr> <td><strong>PNG</strong></td> <td>شعارات، أيقونات</td> <td>يدعم الشفافية، حجم أكبر</td> </tr> <tr> <td><strong>WebP</strong></td> <td>كل الاستخدامات</td> <td>حجم أصغر، جودة عالية</td> </tr> <tr> <td><strong>SVG</strong></td> <td>أيقونات، شعارات</td> <td>متجهي، قابل للتحجيم</td> </tr> <tr> <td><strong>GIF</strong></td> <td>صور متحركة</td> <td>حركات بسيطة، حجم كبير</td> </tr> </tbody> </table> **التوصية:** - **WebP** للصور العادية (أفضل توازن). - **SVG** للأيقونات والشعارات. - **JPG** للصور الفوتوغرافية. - **PNG** للصور التي تحتاج شفافية. ## إطار الصورة (figure) لتجميع صورة مع تعليق: ```html <figure> <img src="chart.jpg" alt="رسم بياني للمبيعات"> <figcaption>الشكل 1: المبيعات الشهرية لعام 2026</figcaption> </figure> ``` **النتيجة:** صورة + تعليق تحتها. ## الروابط (Links) **الرابط** هو ما يجعل الويب **مترابطاً**. يُنشأ بوسم `<a>`. **الصيغة:** ```html <a href="الرابط">النص الظاهر</a> ``` ## سمات الرابط <table> <thead> <tr> <th>السمة</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code>href</code></td> <td>الرابط</td> </tr> <tr> <td><code>target</code></td> <td>أين يفتح الرابط</td> </tr> <tr> <td><code>rel</code></td> <td>العلاقة مع الصفحة</td> </tr> <tr> <td><code>title</code></td> <td>تلميح</td> </tr> <tr> <td><code>download</code></td> <td>تحميل الملف</td> </tr> </tbody> </table> ### 1. رابط خارجي ```html <a href="https://example.com">زيارة الموقع</a> <a href="https://google.com" target="_blank" rel="noopener noreferrer"> فتح جوجل في تبويب جديد </a> ``` **⚠️ مهم:** عند استخدام `target="_blank"`، **أضف دائماً**: ```html rel="noopener noreferrer" ``` **السبب:** للأمان (يمنع الصفحة الجديدة من التحكم بصفحتك). ### 2. رابط داخلي (صفحة أخرى) ```html <a href="about.html">من نحن</a> <a href="pages/contact.html">اتصل بنا</a> <a href="/blog/post-1.html">مقالة</a> ``` ### 3. رابط داخل نفس الصفحة (Anchor) ```html  <h2 id="section1">القسم الأول</h2>  <a href="#section1">انتقل للقسم الأول</a>  <a href="#">العودة للأعلى</a> ``` ### 4. رابط البريد الإلكتروني ```html <a href="mailto:[email protected]">راسلنا</a> <a href="mailto:[email protected]?subject=استفسار">راسلنا بموضوع</a> ``` ### 5. رابط الهاتف ```html <a href="tel:+962770000000">اتصل بنا</a> ``` **مفيد للجوال** — يفتح تطبيق الاتصال. ### 6. رابط تحميل ملف ```html <a href="file.pdf" download>تحميل PDF</a> <a href="file.pdf" download="my-file.pdf">تحميل باسم مخصص</a> ``` ### 7. رابط صورة ```html <a href="https://example.com"> <img src="logo.png" alt="شعار الموقع"> </a> ``` **الفائدة:** الصورة تصبح قابلة للنقر. ## الوسائط المتعددة ### 1. الصوت (Audio) ```html <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> متصفحك لا يدعم الصوت. </audio> ``` **السمات:** - **`controls`:** عرض أزرار التحكم. - **`autoplay`:** تشغيل تلقائي. - **`loop`:** تكرار. - **`muted`:** كتم الصوت. ### 2. الفيديو (Video) ```html <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) لتضمين صفحة من موقع آخر: ```html <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" title="فيديو تعليمي" allowfullscreen> </iframe> ``` **⚠️ تحذير:** استخدم `iframe` بحذر — قد يكون خطراً. ## أمثلة عملية ### 1. معرض صور ```html <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. صفحة فريق ```html <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. مقال مع صور ```html <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: صورة شخصية أضف صورة شخصية لصفحتك. **الحل:** ```html <h1>أنا أحمد</h1> <img src="profile.jpg" alt="صورة أحمد الشخصية" width="200"> <p>مطور ويب</p> ``` ### تمرين 2: معرض صور أنشئ معرضاً بأربع صور. **الحل:** ```html <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 روابط لمواقع مفيدة. **الحل:** ```html <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: شعار قابل للنقر أنشئ شعاراً يعيدك للصفحة الرئيسية. **الحل:** ```html <a href="index.html"> <img src="logo.png" alt="شعار الموقع" width="100"> </a> ``` ### تمرين 5: رابط بريد أنشئ رابطاً يفتح البريد الإلكتروني. **الحل:** ```html <p>للاستفسار: <a href="mailto:[email protected]">راسلنا</a></p> ``` ### تمرين 6: رابط داخل الصفحة أنشئ قائمة تنقل لأقسام الصفحة. **الحل:** ```html <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: فيديو أضف مقطع فيديو بصورة مصغرة. **الحل:** ```html <h1>مقطع تعليمي</h1> <video controls width="600" poster="thumbnail.jpg"> <source src="tutorial.mp4" type="video/mp4"> متصفحك لا يدعم الفيديو. </video> ``` ### تمرين 8: صفحة محتوى كاملة أنشئ صفحة تجمع كل ما تعلمته. **الحل:** ```html <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: الصورة لا تظهر **الأسباب والحلول:** <table> <thead> <tr> <th>السبب</th> <th>الحل</th> </tr> </thead> <tbody> <tr> <td>مسار خاطئ</td> <td>تحقق من اسم الملف وامتداده</td> </tr> <tr> <td>الملف في مكان آخر</td> <td>تأكد من المسار النسبي الصحيح</td> </tr> <tr> <td>امتداد خاطئ</td> <td>تأكد من `.jpg` وليس `.jpeg`</td> </tr> <tr> <td>الملف غير موجود</td> <td>انسخ الصورة للمجلد الصحيح</td> </tr> </tbody> </table> ### 🔴 المشكلة 2: الرابط لا يعمل **السبب:** نسيان `https://` أو مسار خاطئ. **الحل:** ```html  <a href="google.com">جوجل</a>  <a href="https://google.com">جوجل</a> ``` ### 🔴 المشكلة 3: `alt` مفقود **الحل:** أضف `alt` لكل صورة: ```html <img src="photo.jpg" alt="وصف الصورة"> ``` ### 🔴 المشكلة 4: الصورة كبيرة جداً **الحل:** استخدم CSS: ```css img { max-width: 100%; height: auto; } ``` ### 🔴 المشكلة 5: الرابط يفتح في نفس الصفحة **الحل:** استخدم `target="_blank"`: ```html <a href="https://example.com" target="_blank" rel="noopener noreferrer">رابط</a> ``` ## جدول الوسوم والسمات <table> <thead> <tr> <th>الوسم/السمة</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code><img></code></td> <td>صورة</td> </tr> <tr> <td><code>src</code></td> <td>مسار الصورة</td> </tr> <tr> <td><code>alt</code></td> <td>نص بديل</td> </tr> <tr> <td><code><figure></code></td> <td>إطار مع تعليق</td> </tr> <tr> <td><code><figcaption></code></td> <td>تعليق الصورة</td> </tr> <tr> <td><code><a></code></td> <td>رابط</td> </tr> <tr> <td><code>href</code></td> <td>عنوان الرابط</td> </tr> <tr> <td><code>target="_blank"</code></td> <td>فتح في تبويب جديد</td> </tr> <tr> <td><code><audio></code></td> <td>صوت</td> </tr> <tr> <td><code><video></code></td> <td>فيديو</td> </tr> <tr> <td><code><iframe></code></td> <td>إطار مدمج</td> </tr> </tbody> </table> ## قائمة تحقق نهائية <table> <thead> <tr> <th>المهمة</th> <th>الحالة</th> </tr> </thead> <tbody> <tr> <td>إضافة صورة بسيطة</td> <td>⬜</td> </tr> <tr> <td>استخدام <code>alt</code> بشكل صحيح</td> <td>⬜</td> </tr> <tr> <td>فهم صيغ الصور</td> <td>⬜</td> </tr> <tr> <td>إنشاء روابط خارجية وداخلية</td> <td>⬜</td> </tr> <tr> <td>روابط البريد والهاتف</td> <td>⬜</td> </tr> <tr> <td>إضافة فيديو وصوت</td> <td>⬜</td> </tr> <tr> <td>حل التمارين الثمانية</td> <td>⬜</td> </tr> </tbody> </table> ## ماذا بعد هذا المقال؟ الآن بعد أن أتقنت الصور والروابط، أنت جاهز للمقال التالي: 1. **النماذج والجداول** — العناصر التفاعلية. 2. **الوسوم الدلالية** — HTML احترافي. 3. **CSS** — التصميم والأنماط. ## الخلاصة في هذا المقال، تعلمت: - ✅ إضافة الصور بوسم `<img>`. - ✅ سمة `alt` وأهميتها. - ✅ صيغ الصور (JPG, PNG, WebP, SVG). - ✅ الروابط الداخلية والخارجية. - ✅ روابط البريد والهاتف. - ✅ الوسائط المتعددة (صوت، فيديو). - ✅ `<figure>` و `<figcaption>`. - ✅ حل 8 تمارين عملية. **تذكر:** الصور والروابط هما ما يجعل الويب **حيّاً**. استخدمهما بحكمة.

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