دليل سريع للروابط والصور

قواعد الروابط

رابط مضمن

[نص الرابط](https://www.markdownlang.com)
[رابط مع عنوان](https://www.markdownlang.com "عنوان الرابط")

رابط مرجعي

[نص الرابط][ref]
[نص الرابط][]

[ref]: https://www.markdownlang.com "عنوان اختياري"
[نص الرابط]: https://www.markdownlang.com

روابط تلقائية

<https://www.markdownlang.com>
<email@example.com>

روابط إلى عناوين داخل الصفحة

[الانتقال إلى العنوان](#اسم-العنوان)
[العودة للأعلى](#top)

قواعد الصور

صورة مضمنة

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

صورة مرجعية

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

[img-ref]: image.jpg "عنوان اختياري"

صورة كرابط

[![نص بديل للصورة](image.jpg)](https://www.markdownlang.com)

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

<img src="image.jpg" alt="نص بديل" width="300" height="200">

تركيبات شائعة

صورة مع رابط

[![شعار المشروع](logo.png)](https://github.com/user/repo)

محاذاة الصورة للوسط

<div align="center">
  <img src="image.jpg" alt="وصف">
</div>

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

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

أفضل الممارسات

النوع	النصيحة	المثال
نص الرابط	استخدم نصاً وصفياً	✅ [دليل المستخدم]()
نص الرابط	تجنب "اضغط هنا"	❌ [انقر هنا]()
ملف الصورة	استخدم مساراً نسبياً	✅ ./images/pic.jpg
نص بديل	صف محتوى الصورة	✅ ![لقطة واجهة المستخدم]()
تنسيقات	تنسيقات ملائمة للويب	✅ JPG, PNG, WebP

ناتج HTML

Markdown	HTML
[text](url)	<a href="url">text</a>
	<img src="img" alt="alt">
<url>	<a href="url">url</a>

أخطاء شائعة

❌ أمثلة خاطئة:
[الرابط(https://www.markdownlang.com)     ← قوس أيمن مفقود
![الصورة](image.jpg             ← قوس أيمن مفقود
[ رابط ]( https://www.markdownlang.com ) ← فراغات غير ضرورية

✅ أمثلة صحيحة:
[الرابط](https://www.markdownlang.com)
![الصورة](image.jpg)
[الرابط](https://www.markdownlang.com)