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

في المقال السابق، بنيت أول صفحة HTML وتعلمت الوسوم الأساسية. الآن سنتعمق في **النصوص** و **القوائم** — وهما العنصران الأكثر استخداماً في أي صفحة ويب. في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم كل ما يتعلق بالنصوص والقوائم، مع تمارين وحلول. ## العناوين (Headings) العناوين هي **هيكل الصفحة**. تبدأ من `<h1>` (الأكبر) وتنتهي بـ `<h6>` (الأصغر). ```html <h1>عنوان الصفحة الرئيسي</h1> <h2>قسم رئيسي</h2> <h3>قسم فرعي</h3> <h4>عنوان أصغر</h4> <h5>عنوان أصغر</h5> <h6>أصغر عنوان</h6> ``` ### قواعد استخدام العناوين <table> <thead> <tr> <th>القاعدة</th> <th>السبب</th> </tr> </thead> <tbody> <tr> <td><strong>h1 مرة واحدة فقط</strong></td> <td>عنوان الصفحة الرئيسي (مهم لـ SEO)</td> </tr> <tr> <td><strong>تسلسل منطقي</strong></td> <td>h1 → h2 → h3 (لا تتخطى)</td> </tr> <tr> <td><strong>لا تستخدمها للحجم</strong></td> <td>الحجم يأتي من CSS</td> </tr> <tr> <td><strong>وصفية</strong></td> <td>تعكس المحتوى</td> </tr> </tbody> </table> ### ❌ مثال خاطئ: ```html <h1>عنوان</h1> <h3>قسم فرعي</h3>  <h1>عنوان آخر</h1>  ``` ### ✅ مثال صحيح: ```html <h1>المدونة</h1> <h2>مقالات React</h2> <h3>أساسيات React</h3> <h3>React Hooks</h3> <h2>مقالات CSS</h2> <h3>Flexbox</h3> ``` ## الفقرات (Paragraphs) الفقرة `<p>` هي **وحدة النص الأساسية**. ```html <p>هذه فقرة نصية بسيطة.</p> <p>هذه فقرة أخرى. يمكن أن تحتوي على نص طويل جداً، وتمتد لعدة أسطر في المتصفح، لكنها تبقى فقرة واحدة.</p> ``` ### خصائص الفقرات - **تلقائياً:** كل `<p>` يبدأ بسطر جديد. - **المسافات:** المتصفح يتجاهل المسافات الزائدة والأسطر الجديدة. - **الطول:** يمكن أن تكون قصيرة أو طويلة. ### المسافات في HTML ```html <p>هذا نص به مسافات كثيرة</p> ``` **النتيجة:** "هذا نص به مسافات كثيرة" — المتصفح **يدمج** كل المسافات في مسافة واحدة. **للحفاظ على المسافات:** ```html <pre> هذا نص محفوظ كما هو </pre> ``` **أو استخدام ` `** (مسافة غير قابلة للكسر): ```html <p>مسافة   واسعة</p> ``` ## تنسيقات النص ### 1. النص العريض (Bold) ```html <p>هذا نص <strong>مهم جداً</strong>.</p> <p>هذا نص <b>عريض</b> فقط.</p> ``` <table> <thead> <tr> <th>الوسم</th> <th>المعنى</th> <th>الاستخدام</th> </tr> </thead> <tbody> <tr> <td><code><strong></code></td> <td>مهم دلالياً</td> <td>تحذيرات، نقاط مهمة</td> </tr> <tr> <td><code><b></code></td> <td>عريض بصرياً</td> <td>لأغراض بصرية فقط</td> </tr> </tbody> </table> ### 2. النص المائل (Italic) ```html <p>هذا نص <em>مؤكد عليه</em>.</p> <p>هذا نص <i>مائل</i> فقط.</p> ``` <table> <thead> <tr> <th>الوسم</th> <th>المعنى</th> <th>الاستخدام</th> </tr> </thead> <tbody> <tr> <td><code><em></code></td> <td>تأكيد دلالي</td> <td>كلمات أجنبية، مصطلحات</td> </tr> <tr> <td><code><i></code></td> <td>مائل بصرياً</td> <td>أيقونات، أسماء</td> </tr> </tbody> </table> ### 3. النص المسطّر ```html <p>السعر: <del>100 $</del> <ins>80 $</ins></p> ``` - **`<del>`:** نص محذوف (خط في الوسط). - **`<ins>`:** نص مضاف (خط تحت). ### 4. النص المميز ```html <p>هذا نص <mark>مميز بخلفية صفراء</mark>.</p> ``` ### 5. النص الصغير ```html <p>هذا نص <small>صغير</small> للحواشي.</p> ``` ### 6. النص السفلي والعلوي ```html <p>الماء: H<sub>2</sub>O</p> <p>المعادلة: E = mc<sup>2</sup></p> ``` - **`<sub>`:** منخفض (subscript). - **`<sup>`:** مرتفع (superscript). ### 7. الاقتباسات #### اقتباس قصير (inline): ```html <p>قال أحمد: <q>التعلم المستمر هو مفتاح النجاح</q>.</p> ``` #### اقتباس طويل (blockquote): ```html <blockquote> <p>التعلم المستمر هو مفتاح النجاح في عالم التقنية.</p> <cite>— أحمد محمد</cite> </blockquote> ``` #### اقتباس مع رابط المصدر: ```html <blockquote cite="https://example.com/article"> <p>نص الاقتباس هنا.</p> </blockquote> ``` ### 8. الكود ```html <p>استخدم وسم <code><h1></code> للعنوان الرئيسي.</p> ``` **النتيجة:** `استخدم وسم <h1> للعنوان الرئيسي.` **⚠️ لاحظ:** `<` و `>` يجب كتابتهما كـ `<` و `>`. ## الرموز الخاصة (HTML Entities) بعض الأحرف **محجوزة** في HTML، لذا نستخدم **رموزاً خاصة**: <table> <thead> <tr> <th>الرمز</th> <th>الكود</th> <th>النتيجة</th> </tr> </thead> <tbody> <tr> <td>أصغر من</td> <td><code>&lt;</code></td> <td><</td> </tr> <tr> <td>أكبر من</td> <td><code>&gt;</code></td> <td>></td> </tr> <tr> <td>علامة العطف</td> <td><code>&amp;</code></td> <td>&</td> </tr> <tr> <td>علامة التنصيص</td> <td><code>&quot;</code></td> <td>"</td> </tr> <tr> <td>مسافة</td> <td><code>&nbsp;</code></td> <td>مسافة</td> </tr> <tr> <td>حقوق النشر</td> <td><code>&copy;</code></td> <td>©</td> </tr> <tr> <td>علامة تجارية</td> <td><code>&reg;</code></td> <td>®</td> </tr> <tr> <td>يورو</td> <td><code>&euro;</code></td> <td>€</td> </tr> <tr> <td>قلب</td> <td><code>&hearts;</code></td> <td>♥</td> </tr> </tbody> </table> ## القوائم (Lists) ### 1. القائمة غير المرتبة (Unordered List) ```html <ul> <li>تفاح</li> <li>موز</li> <li>برتقال</li> </ul> ``` **النتيجة:** - تفاح - موز - برتقال **تغيير نوع النقاط (CSS):** ```html <ul style="list-style-type: square;"> <li>عنصر</li> </ul> ``` **الأنواع:** `disc` (افتراضي), `circle`, `square`, `none`. ### 2. القائمة المرتبة (Ordered List) ```html <ol> <li>الخطوة الأولى</li> <li>الخطوة الثانية</li> <li>الخطوة الثالثة</li> </ol> ``` **النتيجة:** 1. الخطوة الأولى 2. الخطوة الثانية 3. الخطوة الثالثة **تغيير نوع الترقيم:** ```html <ol type="A"> <li>أولاً</li> <li>ثانياً</li> </ol> ``` **الأنواع:** - `1` (أرقام — افتراضي) - `A` (أحرف كبيرة) - `a` (أحرف صغيرة) - `I` (روماني كبير) - `i` (روماني صغير) **بدء الترقيم من رقم آخر:** ```html <ol start="5"> <li>عنصر 5</li> <li>عنصر 6</li> </ol> ``` ### 3. القوائم المتداخلة (Nested Lists) ```html <ul> <li>فواكه <ul> <li>تفاح</li> <li>موز</li> </ul> </li> <li>خضروات <ul> <li>طماطم</li> <li>خيار</li> </ul> </li> </ul> ``` **النتيجة:** - فواكه - تفاح - موز - خضروات - طماطم - خيار ### 4. قائمة التعريف (Description List) ```html <dl> <dt>HTML</dt> <dd>لغة ترميز لبناء صفحات الويب</dd> <dt>CSS</dt> <dd>لغة تنسيق لتجميل الصفحات</dd> </dl> ``` **النتيجة:** **HTML** لغة ترميز لبناء صفحات الويب **CSS** لغة تنسيق لتجميل الصفحات **الوسوم:** - **`<dl>`:** القائمة (Description List). - **`<dt>`:** المصطلح (Description Term). - **`<dd>`:** التعريف (Description Details). ## أمثلة عملية ### 1. مقال مدونة ```html <article> <h1>تعلم HTML في 30 يوماً</h1> <p>HTML هي <strong>أساس كل موقع ويب</strong>. في هذا المقال، سنتعلم كيف نبدأ.</p> <h2>ما هو HTML؟</h2> <p>HTML اختصار لـ <em>HyperText Markup Language</em>.</p> <h2>لماذا نتعلمه؟</h2> <ul> <li>سهل التعلم</li> <li>مطلوب في كل مكان</li> <li>أساس باقي التقنيات</li> </ul> </article> ``` ### 2. وصفة طبخ ```html <article> <h1>وصفة الكيك الإسفنجي</h1> <h2>المكونات</h2> <ul> <li>2 كوب دقيق</li> <li>1 كوب سكر</li> <li>3 بيضات</li> <li>نصف كوب زبدة</li> </ul> <h2>الخطوات</h2> <ol> <li>اخلط الزبدة والسكر</li> <li>أضف البيض واحدة تلو الأخرى</li> <li>أضف الدقيق تدريجياً</li> <li>اخبز لمدة 30 دقيقة على 180°C</li> </ol> <p><strong>ملاحظة:</strong> تأكد من تسخين الفرن مسبقاً.</p> </article> ``` ### 3. صفحة FAQ ```html <section> <h1>الأسئلة الشائعة</h1> <dl> <dt>ما هو HTML؟</dt> <dd>لغة ترميز لبناء صفحات الويب.</dd> <dt>ما هو CSS؟</dt> <dd>لغة تنسيق لتجميل الصفحات.</dd> <dt>هل أحتاج خبرة سابقة؟</dt> <dd>لا، يمكنك البدء من الصفر.</dd> </dl> </section> ``` ## تمارين عملية ### تمرين 1: مقال شخصي اكتب مقالاً عن نفسك يحتوي على: - عنوان رئيسي. - 3 فقرات. - نص عريض ومائل. **الحل:** ```html <h1>من أنا</h1> <p>اسمي <strong>أحمد</strong>، وأنا <em>مطور ويب</em>.</p> <p>أحب تعلم <strong>التقنيات الحديثة</strong> مثل React و TypeScript.</p> <p>هدفي هو بناء <em>منصات تعليمية</em> بالعربية.</p> ``` ### تمرين 2: قائمة مهام أنشئ قائمة مهام مع عناصر منجزة ومعلقة. **الحل:** ```html <h2>مهامي اليوم</h2> <ul> <li><del>الاستيقاظ مبكراً</del></li> <li><del>ممارسة الرياضة</del></li> <li>تعلم HTML</li> <li>كتابة مقال</li> </ul> ``` ### تمرين 3: وصفة طبخ أنشئ وصفة تحتوي على مكونات وخطوات. **الحل:** ```html <h1>وصفة السلطة</h1> <h2>المكونات</h2> <ul> <li>خس</li> <li>طماطم</li> <li>خيار</li> <li>زيتون</li> </ul> <h2>الخطوات</h2> <ol> <li>اغسل الخضار</li> <li>قطعها إلى قطع صغيرة</li> <li>أضف الزيت والليمون</li> <li>قدمها باردة</li> </ol> ``` ### تمرين 4: قائمة متداخلة أنشئ قائمة متداخلة للفئات والمنتجات. **الحل:** ```html <h2>منتجاتنا</h2> <ul> <li>إلكترونيات <ul> <li>لابتوبات</li> <li>هواتف</li> </ul> </li> <li>ملابس <ul> <li>رجالية</li> <li>نسائية</li> </ul> </li> </ul> ``` ### تمرين 5: اقتباس مع مصدر أنشئ صفحة تعرض اقتباساً مع مصدره. **الحل:** ```html <h1>اقتباس اليوم</h1> <blockquote> <p>النجاح ليس نهائياً، والفشل ليس قاتلاً، الشجاعة للاستمرار هي ما يهم.</p> <cite>— ونستون تشرشل</cite> </blockquote> ``` ### تمرين 6: رموز خاصة أنشئ صفحة تعرض رموزاً خاصة (©، ®، €). **الحل:** ```html <h1>رموز خاصة</h1> <p>حقوق النشر: © 2026</p> <p>علامة تجارية: ®</p> <p>السعر: 100 €</p> <p>5 < 10 > 3</p> <p>استخدم & للربط</p> ``` ### تمرين 7: صفحة معجم أنشئ صفحة تعرض مصطلحات تقنية. **الحل:** ```html <h1>معجم المصطلحات</h1> <dl> <dt>HTML</dt> <dd>لغة ترميز النص التشعبي</dd> <dt>CSS</dt> <dd>أوراق الأنماط المتتالية</dd> <dt>JS</dt> <dd>JavaScript — لغة برمجة للويب</dd> </dl> ``` ### تمرين 8: مقال كامل اكتب مقالاً عن "تعلم البرمجة" يحتوي على كل ما تعلمته. **الحل:** ```html <article> <h1>كيف تبدأ تعلم البرمجة؟</h1> <p>تعلم البرمجة هو <strong>رحلة ممتعة</strong>، لكنها تحتاج <em>صبراً وممارسة</em>.</p> <h2>الخطوات</h2> <ol> <li>اختر لغة برمجة</li> <li>تعلم الأساسيات</li> <li>طبق مشاريع صغيرة</li> <li>شارك في مجتمعات</li> </ol> <h2>نصائح مهمة</h2> <ul> <li>مارس يومياً</li> <li>لا تخف من الأخطاء</li> <li>ابحث عن حلول</li> </ul> <blockquote> <p>أفضل طريقة للتعلم هي الممارسة.</p> <cite>— مبرمج مجهول</cite> </blockquote> <p><small>© 2026 — جميع الحقوق محفوظة</small></p> </article> ``` ## حل المشاكل الشائعة ### 🔴 المشكلة 1: النص يظهر كرموز **السبب:** عدم تحديد `charset="UTF-8"`. **الحل:** ```html <meta charset="UTF-8"> ``` ### 🔴 المشكلة 2: المسافات لا تظهر **السبب:** HTML يدمج المسافات. **الحل:** ```html <p>مسافة  واسعة</p> ``` أو استخدم `<pre>`. ### 🔴 المشكلة 3: الوسوم تظهر كنص **السبب:** استخدام `<` و `>` مباشرة. **الحل:** ```html <h1>  ``` ### 🔴 المشكلة 4: القوائم لا تظهر **السبب:** نسيان `<li>`. **الحل:** تأكد من أن كل عنصر داخل `<li>`: ```html <ul> <li>عنصر</li> </ul> ``` ### 🔴 المشكلة 5: h1 متعدد **السبب:** استخدام h1 أكثر من مرة. **الحل:** استخدم h1 مرة واحدة، واستخدم h2 للأقسام. ## جدول الوسوم <table> <thead> <tr> <th>الوسم</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code><h1>-<h6></code></td> <td>العناوين</td> </tr> <tr> <td><code><p></code></td> <td>فقرة</td> </tr> <tr> <td><code><strong></code></td> <td>نص مهم</td> </tr> <tr> <td><code><em></code></td> <td>نص مؤكد</td> </tr> <tr> <td><code><mark></code></td> <td>تمييز</td> </tr> <tr> <td><code><del></code></td> <td>محذوف</td> </tr> <tr> <td><code><ins></code></td> <td>مضاف</td> </tr> <tr> <td><code><sub></code></td> <td>منخفض</td> </tr> <tr> <td><code><sup></code></td> <td>مرتفع</td> </tr> <tr> <td><code><blockquote></code></td> <td>اقتباس</td> </tr> <tr> <td><code><code></code></td> <td>كود</td> </tr> <tr> <td><code><ul></code></td> <td>قائمة غير مرتبة</td> </tr> <tr> <td><code><ol></code></td> <td>قائمة مرتبة</td> </tr> <tr> <td><code><li></code></td> <td>عنصر قائمة</td> </tr> <tr> <td><code><dl></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>تنسيق النصوص (strong, em, mark)</td> <td>⬜</td> </tr> <tr> <td>إنشاء قوائم ul و ol</td> <td>⬜</td> </tr> <tr> <td>القوائم المتداخلة</td> <td>⬜</td> </tr> <tr> <td>قائمة التعريف (dl)</td> <td>⬜</td> </tr> <tr> <td>استخدام الرموز الخاصة</td> <td>⬜</td> </tr> <tr> <td>حل التمارين الثمانية</td> <td>⬜</td> </tr> </tbody> </table> ## ماذا بعد هذا المقال؟ الآن بعد أن أتقنت النصوص والقوائم، أنت جاهز للمقال التالي: 1. **الصور والروابط** — إضافة الوسائط. 2. **النماذج والجداول** — العناصر التفاعلية. 3. **الوسوم الدلالية** — HTML احترافي. ## الخلاصة في هذا المقال، تعلمت: - ✅ العناوين (h1-h6) وقواعد استخدامها. - ✅ الفقرات والمسافات. - ✅ تنسيقات النصوص (strong, em, mark, del, ins). - ✅ الاقتباسات (q, blockquote). - ✅ الرموز الخاصة (HTML Entities). - ✅ القوائم (ul, ol, dl). - ✅ القوائم المتداخلة. - ✅ حل 8 تمارين عملية. **تذكر:** النصوص والقوائم هي **جسد المحتوى**. أتقنها جيداً.

النصوص والقوائم في HTML — دليل شامل 2026