تضمين HTML

إحدى الميزات القوية في Markdown هي إمكانية تضمين كود HTML مباشرة، مما يوفر للمستندات تعبيراً أكثر ثراءً وتوسيعاً في الوظائف.

تضمين HTML الأساسي

عناصر HTML ضمن السطر

يمكن استخدام وسوم HTML مباشرة داخل Markdown:

markdown

هذه فقرة تحتوي على <strong>نص عريض</strong> و <em>نص مائل</em>.

يمكنك استخدام <code>كود سطري</code> أو <mark>نص مميز</mark>.

هنا يوجد <a href="https://www.markdownlang.com" target="_blank">رابط خارجي</a>.

نتيجة العرض:

هذه فقرة تحتوي على نص عريض و نص مائل.

يمكنك استخدام كود سطري أو نص مميز.

هنا يوجد رابط خارجي.

عناصر HTML الكتلية

markdown

<div class="alert alert-info">
  <h4>معلومات</h4>
  <p>هذه مربع معلومات تم إنشاؤه باستخدام HTML.</p>
</div>

<blockquote style="border-left: 4px solid #007bff; padding-left: 1rem; color: #6c757d;">
  <p>هذه كتلة اقتباس بنمط مخصص.</p>
  <footer>—— مصدر الاقتباس</footer>
</blockquote>

نتيجة العرض:

معلومات

هذه مربع معلومات تم إنشاؤه باستخدام HTML.

هذه كتلة اقتباس بنمط مخصص.
—— مصدر الاقتباس

تحسينات HTML شائعة

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

التحكم بحجم الصور

markdown

<!-- استخدام HTML للتحكم الدقيق في حجم الصورة -->
<img src="example.jpg" alt="صورة مثال" width="300" height="200">

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

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

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

markdown

<div style="display: flex; gap: 10px; justify-content: center;">
  <img src="img1.jpg" alt="صورة 1" style="width: 200px;">
  <img src="img2.jpg" alt="صورة 2" style="width: 200px;">
  <img src="img3.jpg" alt="صورة 3" style="width: 200px;">
</div>

<!-- شبكة الصور -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
  <img src="img1.jpg" alt="صورة 1" style="width: 100%;">
  <img src="img2.jpg" alt="صورة 2" style="width: 100%;">
  <img src="img3.jpg" alt="صورة 3" style="width: 100%;">
  <img src="img4.jpg" alt="صورة 4" style="width: 100%;">
</div>

تضمين الفيديو والوسائط

تضمين فيديو

markdown

<!-- فيديو YouTube -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<!-- فيديو Bilibili -->
<iframe src="//player.bilibili.com/player.html?bvid=BV_ID&page=1" 
        scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true" 
        width="100%" 
        height="400">
</iframe>

<!-- فيديو HTML5 -->
<video controls width="100%" height="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

تضمين صوت

markdown

<!-- صوت HTML5 -->
<audio controls style="width: 100%;">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<!-- موسيقى NetEase Cloud -->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" 
        width="330" height="86" 
        src="//music.163.com/outchain/player?type=2&id=SONG_ID&auto=1&height=66">
</iframe>

تعزيز الجداول

جداول معقدة

markdown

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f8f9fa;">
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">المنتج</th>
      <th colspan="2" style="border: 1px solid #ddd; padding: 8px;">بيانات المبيعات</th>
      <th rowspan="2" style="border: 1px solid #ddd; padding: 8px;">إجمالي الإيرادات</th>
    </tr>
    <tr style="background-color: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 8px;">الربع الأول</th>
      <th style="border: 1px solid #ddd; padding: 8px;">الربع الثاني</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">المنتج أ</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥100,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥120,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥220,000</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">المنتج ب</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥80,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right;">¥90,000</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: right; font-weight: bold;">¥170,000</td>
    </tr>
  </tbody>
</table>

نتيجة العرض:

المنتج	بيانات المبيعات		إجمالي الإيرادات
المنتج	الربع الأول	الربع الثاني	إجمالي الإيرادات
المنتج أ	¥100,000	¥120,000	¥220,000
المنتج ب	¥80,000	¥90,000	¥170,000

النماذج والعناصر التفاعلية

عناصر نموذج أساسية

markdown

<form>
  <div style="margin-bottom: 1rem;">
    <label for="name" style="display: block; margin-bottom: 0.5rem;">الاسم:</label>
    <input type="text" id="name" name="name" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="email" style="display: block; margin-bottom: 0.5rem;">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" 
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="message" style="display: block; margin-bottom: 0.5rem;">الرسالة:</label>
    <textarea id="message" name="message" rows="4" 
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
  </div>
  
  <button type="submit" 
          style="background-color: #007bff; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer;">
    إرسال
  </button>
</form>

عناصر تفاعلية

markdown

<!-- محتوى قابل للطي -->
<details>
  <summary style="cursor: pointer; font-weight: bold;">انقر للتوسيع لعرض التفاصيل</summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    <p>هذا هو المحتوى التفصيلي المطوي.</p>
    <p>يمكن أن يحتوي على أي محتوى HTML.</p>
  </div>
</details>

<!-- شريط التقدم -->
<div style="margin: 1rem 0;">
  <label>تقدم المشروع:</label>
  <progress value="32" max="100" style="width: 100%;">32%</progress>
  <span>32%</span>
</div>

<!-- تقييم بالنجوم -->
<div style="font-size: 1.5rem; color: #ffc107;">
  ★★★★☆
</div>

نتيجة العرض:

انقر للتوسيع لعرض التفاصيل

هذا هو المحتوى التفصيلي المطوي.

يمكن أن يحتوي على أي محتوى HTML.

تقدم المشروع:32%32%

★★★★☆

التخطيط والأنماط

تخطيط Flexbox

markdown

<div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: #f8f9fa; border-radius: 8px;">
  <div style="flex: 1;">
    <h4 style="margin: 0;">العنوان</h4>
    <p style="margin: 0.5rem 0 0 0; color: #6c757d;">هذا نص الوصف</p>
  </div>
  <div>
    <button style="background-color: #28a745; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px;">
      إجراء
    </button>
  </div>
</div>

<!-- تخطيط البطاقات -->
<div style="display: flex; gap: 1rem; margin: 1rem 0;">
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>البطاقة 1</h5>
    <p>وصف محتوى البطاقة</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>البطاقة 2</h5>
    <p>وصف محتوى البطاقة</p>
  </div>
  <div style="flex: 1; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
    <h5>البطاقة 3</h5>
    <p>وصف محتوى البطاقة</p>
  </div>
</div>

تخطيط Grid

markdown

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0;">
  <div style="padding: 1rem; background-color: #e3f2fd; border-radius: 8px;">
    <h6>الميزة 1</h6>
    <p>وصف الميزة</p>
  </div>
  <div style="padding: 1rem; background-color: #f3e5f5; border-radius: 8px;">
    <h6>الميزة 2</h6>
    <p>وصف الميزة</p>
  </div>
  <div style="padding: 1rem; background-color: #e8f5e8; border-radius: 8px;">
    <h6>الميزة 3</h6>
    <p>وصف الميزة</p>
  </div>
  <div style="padding: 1rem; background-color: #fff3e0; border-radius: 8px;">
    <h6>الميزة 4</h6>
    <p>وصف الميزة</p>
  </div>
</div>

صناديق ملاحظات وتحذيرات

أنواع شائعة من الصناديق

markdown

<!-- معلومات -->
<div style="padding: 1rem; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px; margin: 1rem 0;">
  <strong>💡 معلومات:</strong> هذا مربع معلومات.
</div>

<!-- نجاح -->
<div style="padding: 1rem; background-color: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>✅ نجاح:</strong> تمت العملية بنجاح.
</div>

<!-- تحذير -->
<div style="padding: 1rem; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; margin: 1rem 0;">
  <strong>⚠️ تحذير:</strong> يرجى ملاحظة هذه المعلومة المهمة.
</div>

<!-- خطأ -->
<div style="padding: 1rem; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; margin: 1rem 0;">
  <strong>❌ خطأ:</strong> حدث خطأ.
</div>

نتيجة العرض:

💡 معلومات: هذا مربع معلومات.

✅ نجاح: تمت العملية بنجاح.

⚠️ تحذير: يرجى ملاحظة هذه المعلومة المهمة.

❌ خطأ: حدث خطأ.

تضمين محتوى طرف ثالث

وسائل التواصل الاجتماعي

markdown

<!-- تضمين Twitter -->
<blockquote class="twitter-tweet">
  <p lang="ar" dir="rtl">هذا محتوى تغريدة...</p>
  <a href="https://twitter.com/user/status/123456789">رابط التغريدة</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<!-- تضمين Weibo -->
<iframe width="100%" height="500" class="share_self" 
        frameborder="0" scrolling="no" 
        src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=500&fansRow=1&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1234567890&verifier=a1b2c3d4">
</iframe>

خدمات عبر الإنترنت

markdown

<!-- تضمين CodePen -->
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS Animation Example" 
        src="https://codepen.io/user/embed/EXAMPLE?default-tab=html%2Cresult" 
        frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

<!-- تضمين JSFiddle -->
<iframe width="100%" height="300" 
        src="//jsfiddle.net/user/example/embedded/js,html,css,result/" 
        allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0">
</iframe>

<!-- تضمين Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.0!2d116.4074!3d39.9042!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMznCsDU0JzE1LjEiTiAxMTbCsDI0JzI2LjYiRQ!5e0!3m2!1szh-CN!2scn!4v1234567890" 
        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>

مكونات مخصصة

شارات وعلامات

markdown

<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #007bff; color: white; border-radius: 3px;">
  الواجهة الأمامية
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #28a745; color: white; border-radius: 3px;">
  React
</span>
<span style="display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: #ffc107; color: black; border-radius: 3px;">
  JavaScript
</span>

نتيجة العرض:

الواجهة الأمامية React JavaScript

خط زمني

markdown

<div style="position: relative; padding-left: 2rem;">
  <div style="position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background-color: #ddd;"></div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #007bff; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #007bff;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">ديسمبر 2023</h5>
    <p style="margin: 0;">بدء المشروع، إكمال تحليل المتطلبات واختيار التقنيات.</p>
  </div>
  
  <div style="position: relative; margin-bottom: 2rem;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #28a745; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #28a745;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">يناير 2024</h5>
    <p style="margin: 0;">إكمال تطوير الوظائف الأساسية والدخول في مرحلة الاختبار.</p>
  </div>
  
  <div style="position: relative;">
    <div style="position: absolute; left: -1.5rem; width: 1rem; height: 1rem; background-color: #6c757d; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #6c757d;"></div>
    <h5 style="margin: 0 0 0.5rem 0;">فبراير 2024</h5>
    <p style="margin: 0;">نشر المشروع على الإنترنت، بدء التشغيل والترويج.</p>
  </div>
</div>

ملاحظات وحدود

أمان HTML

markdown

<!-- ✅ HTML آمن -->
<div style="color: blue;">نمط آمن</div>
<strong>نص عريض</strong>
<em>نص مائل</em>

<!-- ❌ محتوى قد يتم تصفيته -->
<script>alert('سكريبت غير آمن')</script>
<iframe src="javascript:alert('XSS')"></iframe>
<object data="malicious.swf"></object>

توافق محللات Markdown

تختلف محللات Markdown في مستوى دعمها لـ HTML:

المحلل	دعم HTML	القيود
GitHub	دعم جزئي	تصفية السكريبتات والوسوم الخطرة
GitLab	دعم جزئي	تصفية أمنية
VitePress	دعم كامل	يعتمد على التكوين
Jekyll	دعم كامل	قابل للتكوين
Hugo	دعم جزئي	يحتاج تفعيل

توصيات أفضل الممارسات

markdown

✅ ممارسات مُوصى بها:
1. استخدم وسوم HTML دلالية
2. أضف تحسينات أنماط مناسبة
3. تأكد من إمكانية الوصول للمحتوى
4. حافظ على الكود نظيفاً وقابلاً للصيانة

❌ تجنب:
1. الإفراط في استخدام HTML المعقد
2. تضمين سكريبتات غير آمنة
3. تجاهل التكيف مع الجوال
4. استخدام وسوم مهجورة

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

1) وثائق المنتج

markdown

<div style="display: flex; align-items: center; margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px;">
  <div style="flex: 1;">
    <h2 style="margin: 0 0 0.5rem 0;">🚀 ميزات المنتج</h2>
    <p style="margin: 0; opacity: 0.9;">جرب وظائفنا و تحسيناتنا الجديدة</p>
  </div>
  <div>
    <button style="background: rgba(255,255,255,0.2); border: 2px solid white; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; cursor: pointer; backdrop-filter: blur(10px);">
      معرفة المزيد
    </button>
  </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #007bff;">
    <h4 style="color: #007bff; margin: 0 0 1rem 0;">⚡ أداء عالي</h4>
    <p style="color: #666; line-height: 1.6;">خوارزميات وبنية محسّنة، توفر تجربة أداء استثنائية.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #28a745;">
    <h4 style="color: #28a745; margin: 0 0 1rem 0;">🔒 آمن وموثوق</h4>
    <p style="color: #666; line-height: 1.6;">حماية أمنية على مستوى المؤسسات، تشفير نقل وتخزين البيانات.</p>
  </div>
  
  <div style="background: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-left: 4px solid #ffc107;">
    <h4 style="color: #e68900; margin: 0 0 1rem 0;">🎨 سهل الاستخدام</h4>
    <p style="color: #666; line-height: 1.6;">واجهة مستخدم بديهية، عمليات مبسطة.</p>
  </div>
  
</div>

2) وثائق API

markdown

<div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1rem 0;">
  <div style="display: flex; align-items: center; margin-bottom: 1rem;">
    <span style="background: #28a745; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; font-weight: bold; font-size: 0.875rem;">POST</span>
    <code style="margin-left: 1rem; flex: 1; background: #e9ecef; padding: 0.5rem; border-radius: 4px;">/api/v1/users</code>
  </div>
  
  <h4 style="margin: 0 0 1rem 0;">إنشاء مستخدم</h4>
  <p style="color: #6c757d; margin: 0;">إنشاء حساب مستخدم جديد</p>
</div>

<details style="margin: 1rem 0;">
  <summary style="cursor: pointer; font-weight: bold; padding: 0.5rem; background: #e9ecef; border-radius: 4px;">
    📋 معاملات الطلب
  </summary>
  <div style="padding: 1rem; border: 1px solid #ddd; border-top: none;">
    
<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background: #f8f9fa;">
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">المعامل</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">النوع</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">مطلوب</th>
      <th style="border: 1px solid #ddd; padding: 0.5rem; text-align: left;">الوصف</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>name</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">اسم المستخدم</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 0.5rem;"><code>email</code></td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">string</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">✅</td>
      <td style="border: 1px solid #ddd; padding: 0.5rem;">عنوان البريد الإلكتروني</td>
    </tr>
  </tbody>
</table>

  </div>
</details>

3) تعريف الفريق

markdown

<div style="text-align: center; margin: 3rem 0;">
  <h2 style="margin-bottom: 2rem; color: #333;">👥 فريقنا</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 800px; margin: 0 auto;">
    
    <div style="text-align: center;">
      <img src="avatar1.jpg" alt="أحمد محمد" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #007bff;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">أحمد محمد</h4>
      <p style="color: #007bff; font-weight: bold; margin: 0 0 0.5rem 0;">مهندس الواجهة الأمامية</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">متخصص في تطوير React و Vue، شغوف بتصميم تجربة المستخدم.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #007bff; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
    <div style="text-align: center;">
      <img src="avatar2.jpg" alt="فاطمة علي" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid #28a745;">
      <h4 style="margin: 0 0 0.5rem 0; color: #333;">فاطمة علي</h4>
      <p style="color: #28a745; font-weight: bold; margin: 0 0 0.5rem 0;">مهندس الخادم الخلفي</p>
      <p style="color: #666; font-size: 0.9rem; line-height: 1.4;">خبير في Node.js و Python، متخصص في تصميم بنية النظام.</p>
      <div style="margin-top: 1rem;">
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">GitHub</a>
        <a href="#" style="color: #28a745; text-decoration: none; margin: 0 0.5rem;">LinkedIn</a>
      </div>
    </div>
    
  </div>
</div>

قواعد ذات صلة

أدوات وموارد

أُطر HTML/CSS

Bootstrap: نماذج سريعة وتصميم متجاوب
Tailwind CSS: إطار قائم على الأدوات
Bulma: إطار CSS حديث
Foundation: إطار واجهات متجاوب

أدوات عبر الإنترنت

CodePen: محرر HTML/CSS/JS على الويب
JSFiddle: اختبار المقاطع
CSS Grid Generator: توليد شبكات CSS
Flexbox Froggy: لعبة لتعلم Flexbox

أدوات تطوير المتصفح

Chrome DevTools: فحص العناصر وتصحيح الأنماط
Firefox DevTools: تصحيح Grid وFlexbox
Safari Web Inspector: تصحيح على macOS/iOS
Edge DevTools: فحص الوصولية

تذكّر أن تضمين HTML قوي لكنه يحتاج اعتدالاً للحفاظ على قابلية القراءة وسهولة الصيانة.

تضمين HTML ​

تضمين HTML الأساسي ​

عناصر HTML ضمن السطر ​

عناصر HTML الكتلية ​

معلومات

تحسينات HTML شائعة ​

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

التحكم بحجم الصور ​

عرض مجموعة صور ​

تضمين الفيديو والوسائط ​

تضمين فيديو ​

تضمين صوت ​

تعزيز الجداول ​

جداول معقدة ​

النماذج والعناصر التفاعلية ​

عناصر نموذج أساسية ​

عناصر تفاعلية ​

التخطيط والأنماط ​

تخطيط Flexbox ​

تخطيط Grid ​

صناديق ملاحظات وتحذيرات ​

أنواع شائعة من الصناديق ​

تضمين محتوى طرف ثالث ​

وسائل التواصل الاجتماعي ​

خدمات عبر الإنترنت ​

مكونات مخصصة ​

شارات وعلامات ​

خط زمني ​

ملاحظات وحدود ​

أمان HTML ​

توافق محللات Markdown ​

توصيات أفضل الممارسات ​

سيناريوهات تطبيقية ​

1) وثائق المنتج ​

2) وثائق API ​

3) تعريف الفريق ​

قواعد ذات صلة ​

أدوات وموارد ​

أُطر HTML/CSS ​

أدوات عبر الإنترنت ​

أدوات تطوير المتصفح ​

تضمين HTML

تضمين HTML الأساسي

عناصر HTML ضمن السطر

عناصر HTML الكتلية

تحسينات HTML شائعة

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

التحكم بحجم الصور

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

تضمين الفيديو والوسائط

تضمين فيديو

تضمين صوت

تعزيز الجداول

جداول معقدة

النماذج والعناصر التفاعلية

عناصر نموذج أساسية

عناصر تفاعلية

التخطيط والأنماط

تخطيط Flexbox

تخطيط Grid

صناديق ملاحظات وتحذيرات

أنواع شائعة من الصناديق

تضمين محتوى طرف ثالث

وسائل التواصل الاجتماعي

خدمات عبر الإنترنت

مكونات مخصصة

شارات وعلامات

خط زمني

ملاحظات وحدود

أمان HTML

توافق محللات Markdown

توصيات أفضل الممارسات

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

1) وثائق المنتج

2) وثائق API

3) تعريف الفريق

قواعد ذات صلة

أدوات وموارد

أُطر HTML/CSS

أدوات عبر الإنترنت

أدوات تطوير المتصفح