قواعد الصور

الصور هي عناصر بصرية مهمة في الوثائق. يوفر Markdown صيغة بسيطة لإدراج وإدارة الصور.

صيغة الصور الأساسية

الصور المضمنة

استخدم التنسيق ![نص بديل](رابط الصورة):

![Markdown Logo](https://www.markdownlang.com/markdown-logo.png)

الصور مع العنوان

أضف معلومات العنوان الاختيارية:

![Markdown Logo](https://www.markdownlang.com/markdown-logo.png "شعار Markdown الرسمي")

سيظهر نص العنوان عند تمرير الماوس فوق الصورة.

الصور المرجعية

المرجع الأساسي

![نص بديل][معرف مرجع الصورة]

[معرف مرجع الصورة]: https://www.markdownlang.com/image.jpg "عنوان اختياري"

المرجع المبسط

عندما يكون معرف المرجع مطابقًا للنص البديل:

![Markdown Logo][]

[Markdown Logo]: https://www.markdownlang.com/markdown-logo.png

أنواع مسارات الصور

URL المطلق

![صورة من الإنترنت](https://www.markdownlang.com/images/photo.jpg)

المسار النسبي

![صورة محلية](./images/photo.jpg)
![صورة من المجلد الأعلى](../images/photo.jpg)
![صورة من نفس المستوى](photo.jpg)

المسار المطلق

![صورة من المجلد الجذر](/images/photo.jpg)

ميزات الصور المتقدمة

روابط الصور

قم بتغليف الصورة داخل رابط:

[![وصف الصورة](image.jpg)](https://www.markdownlang.com)

النتيجة: عند النقر على الصورة سيتم الانتقال إلى الرابط المحدد.

استخدام HTML للتحكم في الصور

تحديد الأبعاد

<img src="image.jpg" alt="نص الوصف" width="300" height="200">

محاذاة الصور

<!-- محاذاة في المنتصف -->
<div align="center">
  <img src="image.jpg" alt="صورة في المنتصف" width="400">
</div>

<!-- محاذاة إلى اليمين -->
<div align="right">
  <img src="image.jpg" alt="صورة محاذاة إلى اليمين" width="300">
</div>

الصور المتجاوبة

<img src="image.jpg" alt="صورة متجاوبة" style="max-width: 100%; height: auto;">

عرض الصور المجمعة

العرض جنبًا إلى جنب

<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">

شبكة الصور

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

مزج الصور مع النص

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

هذه فقرة نصية، الصورة تطفو على اليسار. سيلف النص حول الصورة، مما يشكل تأثير مزج الصور مع النص. يمكن استخدامه لإنشاء سيرة شخصية أو تقديم منتج وغيرها من المحتويات.

<div style="clear: both;"></div>

أفضل ممارسات النص البديل

النص الوصفي

✅ مُوصى به: وصف محتوى الصورة
![مشهد عمل للمستخدم يكتب الكود على جهاز كمبيوتر محمول](workspace.jpg)

❌ غير مُوصى به: نص بلا معنى
![صورة](workspace.jpg)
![انقر هنا](workspace.jpg)

الصور الوظيفية

✅ مُوصى به: توضيح وظيفة الصورة
![زر البحث](search-icon.png)
![رابط مستودع GitHub](github-logo.png)

❌ غير مُوصى به: تكرار النص المحيط
انقر ![انقر](search-icon.png) للبحث

الصور الزخرفية

✅ مُوصى به: استخدام نص بديل فارغ للصور الزخرفية
![](decorative-border.png)

❌ غير مُوصى به: وصف غير ضروري
![نمط زخرفي مزخرف](decorative-border.png)

صيغ الصور الشائعة

الصيغ الصديقة للشبكة

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

نصائح اختيار الصيغة

✅ استخدام مُوصى به:
![صورة](photo.jpg)           ← JPEG مناسب للصور
![أيقونة](icon.png)            ← PNG مناسب للأيقونات
![رسم متجه](logo.svg)          ← SVG مناسب للرسوم المتجهة
![صورة متحركة](animation.gif)       ← GIF مناسب للرسوم المتحركة البسيطة

❌ غير مُوصى به:
![أيقونة](icon.jpg)            ← JPEG غير مناسب للأيقونات
![صورة](photo.png)           ← ملف PNG سيكون كبيرًا

نصائح تحسين الصور

تحسين حجم الملف

1. اختر الدقة المناسبة

   <!-- توصيات عرض الويب -->
   <img src="image.jpg" width="800" alt="وصف">  ← صورة بمقاس مضاعف للشاشات عالية الدقة

2. استخدم الضغط المناسب

   <!-- جودة JPEG الموصى بها: 70-80% -->
   ![صورة محسّنة](optimized-photo.jpg)

3. التحميل المتأخر

   <img src="image.jpg" alt="وصف" loading="lazy">

استخدام CDN واستضافة الصور

<!-- استخدام CDN للتسريع -->
![صورة CDN](https://cdn.example.com/images/photo.jpg)

<!-- خدمة استضافة الصور -->
![صورة من استضافة الصور](https://img.example.com/upload/photo.jpg)

الأخطاء الشائعة والحلول

1. خطأ في المسار

❌ خطأ:
![صورة](images/photo.jpg)    ← المسار غير موجود

✅ صحيح:
![صورة](./images/photo.jpg)  ← تأكد من مسار الملف
![صورة](/assets/photo.jpg)   ← استخدم المسار النسبي الصحيح

2. غياب النص البديل

❌ خطأ:
![](important-chart.jpg)     ← صورة مهمة بدون وصف

✅ صحيح:
![مخطط مقارنة بيانات المبيعات لعام 2023](important-chart.jpg)

3. مشكلة التحكم في الأبعاد

❌ المشكلة: الصورة كبيرة جدًا
![صورة كبيرة](huge-image.jpg)   ← قد تكسر التخطيط

✅ الحل:
<img src="huge-image.jpg" alt="صورة كبيرة" style="max-width: 100%;">

4. مشكلة رابط الصورة

❌ خطأ:
[![صورة](image.jpg)(https://www.markdownlang.com)  ← خطأ في الصيغة

✅ صحيح:
[![صورة](image.jpg)](https://www.markdownlang.com)

سيناريوهات التطبيق العملية

1. الوثائق التقنية

## خطوات التثبيت

1. تنزيل حزمة التثبيت

   ![لقطة شاشة لصفحة التنزيل](download-page.png)

2. تشغيل برنامج التثبيت

   ![واجهة معالج التثبيت](installer-wizard.png)

3. إكمال التثبيت

   ![تأكيد اكتمال التثبيت](installation-complete.png)

2. عرض المنتج

## ميزات المنتج

### تصميم واجهة حديث

<div align="center">
  <img src="ui-screenshot.png" alt="لقطة شاشة لواجهة المنتج" width="600">
  <p><em>واجهة مستخدم بسيطة وبديهية</em></p>
</div>

### دعم منصات متعددة

<table>
  <tr>
    <td align="center">
      <img src="windows-logo.png" width="60"><br>
      <strong>Windows</strong>
    </td>
    <td align="center">
      <img src="mac-logo.png" width="60"><br>
      <strong>macOS</strong>
    </td>
    <td align="center">
      <img src="linux-logo.png" width="60"><br>
      <strong>Linux</strong>
    </td>
  </tr>
</table>

3. السيرة الشخصية

## حولي

<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

مرحبًا! أنا مطور Full Stack، متخصص في تقنيات الويب الحديثة. لدي خبرة في التطوير لأكثر من 5 سنوات، وأتقن العديد من لغات البرمجة والأطر.

### مجموعة المهارات

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>

4. شرح البرنامج التعليمي

## إعداد محرر الكود

اتبع الخطوات التالية لإعداد بيئة التطوير الخاصة بك:

1. **فتح الإعدادات**

   ![مدخل إعدادات VS Code](vscode-settings-1.png)

2. **البحث عن عنصر الإعداد**

   ![بحث عن الإعداد](vscode-settings-2.png)

3. **تعديل قيمة الإعداد**

   ![تعديل الإعداد](vscode-settings-3.png)

> 💡 **نصيحة**: بعد اكتمال الإعداد، أعد تشغيل المحرر للتأكد من تفعيل الإعدادات.

إمكانية الوصول

كتابة نص بديل ذي معنى

✅ مُوصى به: وصف مفصل
![مخطط عمودي يوضح نمو إيرادات الربع الثالث من عام 2023 بنسبة 15% مع سهم أحمر صاعد](revenue-chart-q3.png)

❌ غير مُوصى به: تكرار بسيط
![مخطط](revenue-chart-q3.png)

استخدام الوصف المنظم

![صورة جماعية لفريق الموظفين: الصف الأمامي من اليسار إلى اليمين: أحمد، محمد، علي، الصف الخلفي من اليسار إلى اليمين: خالد، فاطمة، زينب](team-photo.jpg)

إخراج HTML

تحويل صور Markdown إلى HTML:

![نص بديل](image.jpg "عنوان الصورة")

يُحول إلى:

<img src="image.jpg" alt="نص بديل" title="عنوان الصورة">

الصور المرجعية:

![نص بديل][ref]

[ref]: image.jpg "عنوان"

يُحول إلى:

<img src="image.jpg" alt="نص بديل" title="عنوان">

قواعد ذات صلة

• قواعد الروابط - إنشاء الروابط
• قواعد HTML - تضمين HTML
• كتل الشيفرة المحاطة - إبراز الشيفرة

تمرين

جرب إنشاء المحتوى التالي:

1. صفحة عرض منتج تتضمن عدة صور للمنتج
2. برنامج تعليمي تقني يتضمن لقطات شاشة خطوة بخطوة وشرح
3. صفحة تعريف بالفريق تتضمن صور أعضاء الفريق والمعلومات
4. مخطط مقارنة يعرض اتجاهات تغيير البيانات

أدوات موصى بها

أدوات تحرير الصور

• أدوات عبر الإنترنت: Canva، Figma، Photopea
• برامج سطح المكتب: GIMP، Paint.NET، Adobe Photoshop
• أدوات التقاط الشاشة: Snipaste، Lightshot، أداة التقاط الشاشة المدمجة في النظام

أدوات تحسين الصور

• أدوات الضغط: TinyPNG، ImageOptim، Squoosh
• تحويل الصيغة: CloudConvert، Online-Convert
• المعالجة المجمعة: ImageMagick، XnConvert

خدمات استضافة الصور

• خدمات مجانية: GitHub، Gitee، sm.ms
• خدمات مدفوعة: Qiniu Cloud، Alibaba Cloud OSS، Tencent Cloud COS
• تسريع CDN: jsDelivr، Cloudflare، AWS CloudFront