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

في المقال السابق، أعددنا بيئة العمل (VS Code + Live Server) وأنشأنا أول صفحة HTML بسيطة. الآن سنتعمق في **بنية صفحة HTML** ونفهم **كل وسم** نستخدمه. في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم بنية HTML، والوسوم الأساسية، والسمات، مع تمارين وحلول. ## بنية صفحة HTML كل صفحة HTML تتبع **بنية ثابتة**: ```html <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>عنوان الصفحة</title> </head> <body>  </body> </html> ``` **شرح كل جزء:** <table> <thead> <tr> <th>الوسم</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code><!DOCTYPE html></code></td> <td>يخبر المتصفح أن هذا HTML5</td> </tr> <tr> <td><code><html></code></td> <td>الوسم الجذر — يحتوي كل شيء</td> </tr> <tr> <td><code>lang="ar"</code></td> <td>اللغة العربية (مهم لـ SEO)</td> </tr> <tr> <td><code>dir="rtl"</code></td> <td>الاتجاه من اليمين لليسار</td> </tr> <tr> <td><code><head></code></td> <td>معلومات الصفحة (لا تُعرض)</td> </tr> <tr> <td><code><meta charset></code></td> <td>ترميز الأحرف (يدعم العربية)</td> </tr> <tr> <td><code><meta viewport></code></td> <td>للتوافق مع الجوال</td> </tr> <tr> <td><code><title></code></td> <td>عنوان التبويب</td> </tr> <tr> <td><code><body></code></td> <td>المحتوى المرئي</td> </tr> </tbody> </table> ## ما هي الوسوم (Tags)؟ **الوسم** هو **كلمة محاطة بـ `<>`**. معظم الوسوم تأتي **بشكل زوجي**: - **وسم الفتح:** `<p>` - **وسم الإغلاق:** `</p>` **مثال:** ```html <p>هذه فقرة نصية.</p> ``` **⚠️ استثناءات:** بعض الوسوم **ذاتية الإغلاق** (لا تحتاج `</...>`): ```html <br>  <hr>  <img>  <input>  <meta>  <link>  ``` ## الوسوم الأساسية ### 1. العناوين (Headings) هناك **6 مستويات** من العناوين: ```html <h1>عنوان رئيسي (الأكبر)</h1> <h2>عنوان فرعي</h2> <h3>عنوان فرعي أصغر</h3> <h4>عنوان أصغر</h4> <h5>عنوان أصغر</h5> <h6>عنوان أصغر (الأصغر)</h6> ``` **القاعدة:** - **`<h1>`:** مرة واحدة فقط في الصفحة (للعنوان الرئيسي). - **`<h2>`:** للأقسام الرئيسية. - **`<h3>`:** للأقسام الفرعية. ### 2. الفقرات (Paragraphs) ```html <p>هذه فقرة نصية. يمكن أن تحتوي على نص طويل يمتد لعدة أسطر.</p> <p>هذه فقرة أخرى.</p> ``` ### 3. فواصل الأسطر والخطوط ```html <p>السطر الأول<br>السطر الثاني</p> <hr> <p>بعد الخط الأفقي.</p> ``` - **`<br>`:** سطر جديد. - **`<hr>`:** خط أفقي (فاصل). ### 4. النصوص المميزة ```html <p>نص <strong>مهم جداً</strong> ونص <em>مؤكد عليه</em>.</p> <p>نص <mark>مميز بخلفية صفراء</mark>.</p> <p>نص <small>صغير</small> ونص <del>محذوف</del> ونص <ins>مضاف</ins>.</p> <p>صيغة رياضية: H<sub>2</sub>O و x<sup>2</sup>.</p> ``` <table> <thead> <tr> <th>الوسم</th> <th>الوظيفة</th> <th>الشكل</th> </tr> </thead> <tbody> <tr> <td><code><strong></code></td> <td>مهم</td> <td><strong>عريض</strong></td> </tr> <tr> <td><code><em></code></td> <td>تأكيد</td> <td><em>مائل</em></td> </tr> <tr> <td><code><mark></code></td> <td>تمييز</td> <td>خلفية صفراء</td> </tr> <tr> <td><code><small></code></td> <td>صغير</td> <td>نص أصغر</td> </tr> <tr> <td><code><del></code></td> <td>محذوف</td> <td>خط على النص</td> </tr> <tr> <td><code><ins></code></td> <td>مضاف</td> <td>خط تحت النص</td> </tr> </tbody> </table> ### 5. القوائم (Lists) #### القائمة غير المرتبة (Unordered List): ```html <ul> <li>تفاح</li> <li>موز</li> <li>برتقال</li> </ul> ``` **النتيجة:** - تفاح - موز - برتقال #### القائمة المرتبة (Ordered List): ```html <ol> <li>الخطوة الأولى</li> <li>الخطوة الثانية</li> <li>الخطوة الثالثة</li> </ol> ``` **النتيجة:** 1. الخطوة الأولى 2. الخطوة الثانية 3. الخطوة الثالثة #### القوائم المتداخلة: ```html <ul> <li>فواكه <ul> <li>تفاح</li> <li>موز</li> </ul> </li> <li>خضروات <ul> <li>طماطم</li> <li>خيار</li> </ul> </li> </ul> ``` ### 6. الروابط (Links) ```html <a href="https://example.com">زيارة الموقع</a> <a href="about.html">صفحة من نحن</a> <a href="#section1">انتقل للقسم 1</a> <a href="mailto:info@example.com">راسلنا</a> <a href="tel:+962770000000">اتصل بنا</a> ``` <table> <thead> <tr> <th>الرابط</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code>https://...</code></td> <td>موقع خارجي</td> </tr> <tr> <td><code>about.html</code></td> <td>صفحة داخلية</td> </tr> <tr> <td><code>#section1</code></td> <td>قسم في نفس الصفحة</td> </tr> <tr> <td><code>mailto:</code></td> <td>فتح البريد</td> </tr> <tr> <td><code>tel:</code></td> <td>الاتصال برقم</td> </tr> </tbody> </table> **سمات الرابط:** ```html <a href="https://example.com" target="_blank" rel="noopener noreferrer"> فتح في تبويب جديد </a> ``` - **`target="_blank"`:** يفتح الرابط في تبويب جديد. - **`rel="noopener noreferrer"`:** للأمان. ### 7. الصور (Images) ```html <img src="image.jpg" alt="وصف الصورة" width="300" height="200"> ``` <table> <thead> <tr> <th>السمة</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code>src</code></td> <td>مسار الصورة</td> </tr> <tr> <td><code>alt</code></td> <td>نص بديل (يظهر عند فشل التحميل)</td> </tr> <tr> <td><code>width</code></td> <td>العرض</td> </tr> <tr> <td><code>height</code></td> <td>الارتفاع</td> </tr> </tbody> </table> **⚠️ مهم:** `alt` **ضروري** لـ: - SEO. - إمكانية الوصول (Accessibility). - ظهور النص عند فشل الصورة. ### 8. الفواصل (Div و Span) ```html <div> <h2>قسم كامل</h2> <p>فقرة داخل القسم.</p> </div> <p>نص <span style="color: red;">بلون أحمر</span> داخل الفقرة.</p> ``` - **`<div>`:** حاوية **block** (تشغل سطراً كاملاً). - **`<span>`:** حاوية **inline** (داخل النص). ## السمات (Attributes) **السمة** هي **معلومة إضافية** تُضاف للوسم. **الصيغة:** ```html <الوسم السمة="القيمة">المحتوى</الوسم> ``` **أمثلة:** ```html <a href="https://example.com" target="_blank">رابط</a> <img src="photo.jpg" alt="صورة"> <p id="intro" class="highlight" title="مقدمة">نص</p> ``` <table> <thead> <tr> <th>السمة</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code>id</code></td> <td>معرّف فريد (لا يتكرر)</td> </tr> <tr> <td><code>class</code></td> <td>تصنيف (يمكن تكراره)</td> </tr> <tr> <td><code>style</code></td> <td>تنسيق مباشر</td> </tr> <tr> <td><code>title</code></td> <td>تلميح عند المرور</td> </tr> <tr> <td><code>href</code></td> <td>مسار الرابط</td> </tr> <tr> <td><code>src</code></td> <td>مسار الملف</td> </tr> <tr> <td><code>alt</code></td> <td>نص بديل</td> </tr> </tbody> </table> ## التعليقات في HTML ```html   ``` **الاستخدام:** - لشرح الكود. - لتعطيل جزء مؤقتاً. - لتذكير نفسك لاحقاً. ## مثال عملي: صفحة شخصية **أنشئ ملف `index.html`:** ```html <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>أحمد - مطور ويب</title> </head> <body> <h1>مرحباً، أنا أحمد 👋</h1> <p>مطور ويب متخصص في <strong>HTML</strong> و <strong>CSS</strong> و <strong>JavaScript</strong>.</p> <hr> <h2>مهاراتي</h2> <ul> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> <li>React</li> </ul> <h2>مشاريعي</h2> <ol> <li>موقع شخصي</li> <li>متجر إلكتروني</li> <li>مدونة</li> </ol> <h2>تواصل معي</h2> <p> <a href="mailto:ahmed@example.com">📧 البريد</a> | <a href="https://twitter.com/ahmed" target="_blank">🐦 تويتر</a> | <a href="https://github.com/ahmed" target="_blank">💻 GitHub</a> </p> </body> </html> ``` **احفظ الملف، وافتحه في Live Server.** **🎉 مبروك! لديك صفحة شخصية كاملة!** ## تمارين عملية ### تمرين 1: صفحة "من أنا" أنشئ صفحة تعريفية بنفسك تحتوي على: - عنوان رئيسي. - فقرة تعريفية. - قائمة مهاراتك. **الحل:** ```html <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>من أنا</title> </head> <body> <h1>أنا أحمد</h1> <p>طالب في جامعة <strong>الأردن</strong>، أتعلم البرمجة.</p> <h2>مهاراتي</h2> <ul> <li>HTML</li> <li>CSS</li> <li>Python</li> </ul> </body> </html> ``` ### تمرين 2: قائمة تسوق أنشئ قائمة تسوق مرتبة. **الحل:** ```html <h2>🛒 قائمة التسوق</h2> <ol> <li>خبز</li> <li>حليب</li> <li>بيض</li> <li>تفاح</li> </ol> ``` ### تمرين 3: وصفة طبخ أنشئ صفحة وصفة تحتوي على: - عنوان الوصفة. - مكونات (قائمة غير مرتبة). - خطوات (قائمة مرتبة). **الحل:** ```html <h1>وصفة الكيك</h1> <h2>المكونات</h2> <ul> <li>2 كوب دقيق</li> <li>1 كوب سكر</li> <li>3 بيضات</li> </ul> <h2>الخطوات</h2> <ol> <li>اخلط المكونات</li> <li>اسكب في القالب</li> <li>اخبز لمدة 30 دقيقة</li> </ol> ``` ### تمرين 4: مقال مع روابط أنشئ مقالاً يحتوي على: - عنوان. - 3 فقرات. - روابط لمواقع مفيدة. **الحل:** ```html <h1>تعلم HTML</h1> <p>HTML هي أساس كل موقع. لتعلمها، تحتاج إلى ممارسة يومية.</p> <p>يمكنك البدء بمصادر مجانية مثل <a href="https://www.freecodecamp.org">FreeCodeCamp</a>.</p> <p>للمزيد، اطلع على <a href="https://developer.mozilla.org/ar/">MDN Web Docs</a>.</p> ``` ### تمرين 5: صفحة فريق أنشئ صفحة تعرض 3 أعضاء فريق، كل واحد مع: - اسمه. - دوره. - مهاراته. **الحل:** ```html <h1>فريقنا</h1> <div> <h2>أحمد</h2> <p>الدور: <strong>مطور واجهات</strong></p> <ul> <li>HTML</li> <li>CSS</li> </ul> </div> <div> <h2>محمد</h2> <p>الدور: <strong>مطور خلفي</strong></p> <ul> <li>Node.js</li> <li>MongoDB</li> </ul> </div> <div> <h2>علي</h2> <p>الدور: <strong>مصمم UI/UX</strong></p> <ul> <li>Figma</li> <li>Adobe XD</li> </ul> </div> ``` ### تمرين 6: صفحة FAQ أنشئ صفحة أسئلة شائعة. **الحل:** ```html <h1>الأسئلة الشائعة</h1> <h2>ما هو HTML؟</h2> <p>HTML هي لغة ترميز لبناء صفحات الويب.</p> <h2>ما هو CSS؟</h2> <p>CSS هي لغة تنسيق لتجميل صفحات الويب.</p> <h2>هل أحتاج JavaScript؟</h2> <p>نعم، لبناء تطبيقات تفاعلية.</p> ``` ## حل المشاكل الشائعة ### 🔴 المشكلة 1: النص يظهر كرموز (Ø£ØÙ…Ø¯) **السبب:** لم تُحدّد `charset="UTF-8"`. **الحل:** ```html <meta charset="UTF-8"> ``` ### 🔴 المشكلة 2: الصفحة تظهر بدون تنسيق **السبب:** لم يُربط ملف CSS. **الحل:** تأكد من وجود: ```html <link rel="stylesheet" href="style.css"> ``` ### 🔴 المشكلة 3: الوسوم تظهر كنص **السبب:** نسيت إغلاق وسم، أو كتبت `<` بدلاً من `<`. **الحل:** تأكد من إغلاق كل وسم. ### 🔴 المشكلة 4: الصورة لا تظهر **السبب:** مسار الصورة خاطئ. **الحل:** تأكد من: - اسم الملف الصحيح. - المسار الصحيح (`images/photo.jpg`). - امتداد الملف (`.jpg`, `.png`). ### 🔴 المشكلة 5: `alt` مفقود **السبب:** لم تُضف `alt` للصورة. **الحل:** ```html <img src="photo.jpg" alt="وصف الصورة"> ``` ## جدول الوسوم الأساسية <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><br></code></td> <td>سطر جديد</td> </tr> <tr> <td><code><hr></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><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><a></code></td> <td>رابط</td> </tr> <tr> <td><code><img></code></td> <td>صورة</td> </tr> <tr> <td><code><div></code></td> <td>حاوية block</td> </tr> <tr> <td><code><span></code></td> <td>حاوية inline</td> </tr> </tbody> </table> ## قائمة تحقق نهائية <table> <thead> <tr> <th>المهمة</th> <th>الحالة</th> </tr> </thead> <tbody> <tr> <td>فهم بنية صفحة HTML</td> <td>⬜</td> </tr> <tr> <td>استخدام العناوين (h1-h6)</td> <td>⬜</td> </tr> <tr> <td>استخدام الفقرات والقوائم</td> <td>⬜</td> </tr> <tr> <td>إضافة الروابط والصور</td> <td>⬜</td> </tr> <tr> <td>فهم السمات (attributes)</td> <td>⬜</td> </tr> <tr> <td>بناء صفحة شخصية</td> <td>⬜</td> </tr> <tr> <td>حل التمارين الستة</td> <td>⬜</td> </tr> </tbody> </table> ## ماذا بعد هذا المقال؟ الآن بعد أن أتقنت أساسيات HTML، أنت جاهز للمقال التالي: 1. **النصوص والقوائم المتقدمة** — تعمق أكثر. 2. **الصور والروابط** — إضافة الوسائط. 3. **النماذج والجداول** — العناصر التفاعلية. ## الخلاصة في هذا المقال، تعلمت: - ✅ بنية صفحة HTML. - ✅ العناوين (h1-h6). - ✅ الفقرات والنصوص المميزة. - ✅ القوائم (ul, ol, li). - ✅ الروابط (a) والصور (img). - ✅ الحاويات (div, span). - ✅ السمات (id, class, style). - ✅ حل 6 تمارين عملية. **تذكر:** HTML هو **الأساس**. أتقنه جيداً قبل الانتقال إلى CSS. **هل أنشأت صفحتك الأولى؟ شاركنا في التعليقات!**

أول صفحة HTML لك — من الصفر إلى الاحتراف 2026