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

في المقال السابق، أعددنا بيئة العمل (VS Code + Live Server) وأنشأنا أول صفحة 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>

شرح كل جزء:

الوسم	الوظيفة
<!DOCTYPE html>	يخبر المتصفح أن هذا HTML5
<html>	الوسم الجذر — يحتوي كل شيء
lang="ar"	اللغة العربية (مهم لـ SEO)
dir="rtl"	الاتجاه من اليمين لليسار
<head>	معلومات الصفحة (لا تُعرض)
<meta charset>	ترميز الأحرف (يدعم العربية)
<meta viewport>	للتوافق مع الجوال
<title>	عنوان التبويب
<body>	المحتوى المرئي

ما هي الوسوم (Tags)؟

الوسم هو كلمة محاطة بـ <>. معظم الوسوم تأتي بشكل زوجي:

• وسم الفتح: <p>
• وسم الإغلاق: </p>

مثال:

<p>هذه فقرة نصية.</p>

⚠️ استثناءات: بعض الوسوم ذاتية الإغلاق (لا تحتاج </...>):

<br>        <!-- سطر جديد -->
<hr>        <!-- خط أفقي -->
<img>       <!-- صورة -->
<input>     <!-- حقل إدخال -->
<meta>      <!-- معلومات -->
<link>      <!-- ربط ملف -->

الوسوم الأساسية

1. العناوين (Headings)

هناك 6 مستويات من العناوين:

<h1>عنوان رئيسي (الأكبر)</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان فرعي أصغر</h3>
<h4>عنوان أصغر</h4>
<h5>عنوان أصغر</h5>
<h6>عنوان أصغر (الأصغر)</h6>

القاعدة:

• <h1>: مرة واحدة فقط في الصفحة (للعنوان الرئيسي).
• <h2>: للأقسام الرئيسية.
• <h3>: للأقسام الفرعية.

2. الفقرات (Paragraphs)

<p>هذه فقرة نصية. يمكن أن تحتوي على نص طويل يمتد لعدة أسطر.</p>
<p>هذه فقرة أخرى.</p>

3. فواصل الأسطر والخطوط

<p>السطر الأول<br>السطر الثاني</p>
<hr>
<p>بعد الخط الأفقي.</p>

• <br>: سطر جديد.
• <hr>: خط أفقي (فاصل).

4. النصوص المميزة

<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>

الوسم	الوظيفة	الشكل
<strong>	مهم	عريض
<em>	تأكيد	مائل
<mark>	تمييز	خلفية صفراء
<small>	صغير	نص أصغر
<del>	محذوف	خط على النص
<ins>	مضاف	خط تحت النص

5. القوائم (Lists)

القائمة غير المرتبة (Unordered List):

<ul>
  <li>تفاح</li>
  <li>موز</li>
  <li>برتقال</li>
</ul>

النتيجة:

• تفاح
• موز
• برتقال

القائمة المرتبة (Ordered List):

<ol>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
  <li>الخطوة الثالثة</li>
</ol>

النتيجة:

1. الخطوة الأولى
2. الخطوة الثانية
3. الخطوة الثالثة

القوائم المتداخلة:

<ul>
  <li>فواكه
    <ul>
      <li>تفاح</li>
      <li>موز</li>
    </ul>
  </li>
  <li>خضروات
    <ul>
      <li>طماطم</li>
      <li>خيار</li>
    </ul>
  </li>
</ul>

6. الروابط (Links)

<a href="https://example.com">زيارة الموقع</a>
<a href="about.html">صفحة من نحن</a>
<a href="#section1">انتقل للقسم 1</a>
<a href="mailto:[email protected]">راسلنا</a>
<a href="tel:+962770000000">اتصل بنا</a>

الرابط	الوظيفة
https://...	موقع خارجي
about.html	صفحة داخلية
#section1	قسم في نفس الصفحة
mailto:	فتح البريد
tel:	الاتصال برقم

سمات الرابط:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  فتح في تبويب جديد
</a>

• target="_blank": يفتح الرابط في تبويب جديد.
• rel="noopener noreferrer": للأمان.

7. الصور (Images)

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

السمة	الوظيفة
src	مسار الصورة
alt	نص بديل (يظهر عند فشل التحميل)
width	العرض
height	الارتفاع

⚠️ مهم: alt ضروري لـ:

• SEO.
• إمكانية الوصول (Accessibility).
• ظهور النص عند فشل الصورة.

8. الفواصل (Div و Span)

<div>
  <h2>قسم كامل</h2>
  <p>فقرة داخل القسم.</p>
</div>

<p>نص <span style="color: red;">بلون أحمر</span> داخل الفقرة.</p>

• <div>: حاوية block (تشغل سطراً كاملاً).
• <span>: حاوية inline (داخل النص).

السمات (Attributes)

السمة هي معلومة إضافية تُضاف للوسم.

الصيغة:

<الوسم السمة="القيمة">المحتوى</الوسم>

أمثلة:

<a href="https://example.com" target="_blank">رابط</a>
<img src="photo.jpg" alt="صورة">
<p id="intro" class="highlight" title="مقدمة">نص</p>

السمة	الوظيفة
id	معرّف فريد (لا يتكرر)
class	تصنيف (يمكن تكراره)
style	تنسيق مباشر
title	تلميح عند المرور
href	مسار الرابط
src	مسار الملف
alt	نص بديل

التعليقات في HTML

<!-- هذا تعليق لا يظهر في المتصفح -->

<!-- 
  تعليق
  متعدد
  الأسطر
-->

الاستخدام:

• لشرح الكود.
• لتعطيل جزء مؤقتاً.
• لتذكير نفسك لاحقاً.

مثال عملي: صفحة شخصية

أنشئ ملف index.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:[email protected]">📧 البريد</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: صفحة "من أنا"

أنشئ صفحة تعريفية بنفسك تحتوي على:

• عنوان رئيسي.
• فقرة تعريفية.
• قائمة مهاراتك.

الحل:

<!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: قائمة تسوق

أنشئ قائمة تسوق مرتبة.

الحل:

<h2>🛒 قائمة التسوق</h2>
<ol>
  <li>خبز</li>
  <li>حليب</li>
  <li>بيض</li>
  <li>تفاح</li>
</ol>

تمرين 3: وصفة طبخ

أنشئ صفحة وصفة تحتوي على:

• عنوان الوصفة.
• مكونات (قائمة غير مرتبة).
• خطوات (قائمة مرتبة).

الحل:

<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 فقرات.
• روابط لمواقع مفيدة.

الحل:

<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 أعضاء فريق، كل واحد مع:

• اسمه.
• دوره.
• مهاراته.

الحل:

<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

أنشئ صفحة أسئلة شائعة.

الحل:

<h1>الأسئلة الشائعة</h1>

<h2>ما هو HTML؟</h2>
<p>HTML هي لغة ترميز لبناء صفحات الويب.</p>

<h2>ما هو CSS؟</h2>
<p>CSS هي لغة تنسيق لتجميل صفحات الويب.</p>

<h2>هل أحتاج JavaScript؟</h2>
<p>نعم، لبناء تطبيقات تفاعلية.</p>

حل المشاكل الشائعة

🔴 المشكلة 1: النص يظهر كرموز (Ø£Øمد)

السبب: لم تُحدّد charset="UTF-8".

الحل:

<meta charset="UTF-8">

🔴 المشكلة 2: الصفحة تظهر بدون تنسيق

السبب: لم يُربط ملف CSS.

الحل: تأكد من وجود:

<link rel="stylesheet" href="style.css">

🔴 المشكلة 3: الوسوم تظهر كنص

السبب: نسيت إغلاق وسم، أو كتبت < بدلاً من <.

الحل: تأكد من إغلاق كل وسم.

🔴 المشكلة 4: الصورة لا تظهر

السبب: مسار الصورة خاطئ.

الحل: تأكد من:

• اسم الملف الصحيح.
• المسار الصحيح (images/photo.jpg).
• امتداد الملف (.jpg, .png).

🔴 المشكلة 5: alt مفقود

السبب: لم تُضف alt للصورة.

الحل:

<img src="photo.jpg" alt="وصف الصورة">

جدول الوسوم الأساسية

الوسم	الوظيفة
<h1>...<h6>	العناوين
<p>	فقرة
<br>	سطر جديد
<hr>	خط أفقي
<strong>	نص مهم
<em>	نص مؤكد
<ul>	قائمة غير مرتبة
<ol>	قائمة مرتبة
<li>	عنصر قائمة
<a>	رابط
<img>	صورة
<div>	حاوية block
<span>	حاوية inline

قائمة تحقق نهائية

المهمة	الحالة
فهم بنية صفحة HTML	⬜
استخدام العناوين (h1-h6)	⬜
استخدام الفقرات والقوائم	⬜
إضافة الروابط والصور	⬜
فهم السمات (attributes)	⬜
بناء صفحة شخصية	⬜
حل التمارين الستة	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت أساسيات HTML، أنت جاهز للمقال التالي:

1. النصوص والقوائم المتقدمة — تعمق أكثر.
2. الصور والروابط — إضافة الوسائط.
3. النماذج والجداول — العناصر التفاعلية.

الخلاصة

في هذا المقال، تعلمت:

• ✅ بنية صفحة HTML.
• ✅ العناوين (h1-h6).
• ✅ الفقرات والنصوص المميزة.
• ✅ القوائم (ul, ol, li).
• ✅ الروابط (a) والصور (img).
• ✅ الحاويات (div, span).
• ✅ السمات (id, class, style).
• ✅ حل 6 تمارين عملية.

تذكر: HTML هو الأساس. أتقنه جيداً قبل الانتقال إلى CSS.

هل أنشأت صفحتك الأولى؟ شاركنا في التعليقات!