الفصل الثاني: العناصر الأساسية في HTML

1. التعرف على العناصر الأساسية

HTML تعتمد على عناصر (Elements) مختلفة لبناء صفحات ويب. كل عنصر يتكون من:

• وسم فتح (Opening Tag): يحدد بداية العنصر.
• محتوى (Content): النص أو البيانات داخل العنصر.
• وسم إغلاق (Closing Tag): يحدد نهاية العنصر.

مثال على عنصر فقرة:

<p>هذا نص داخل فقرة.</p>

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

العناوين تُستخدم لتحديد مستويات النصوص المهمة في الصفحة. هناك ستة مستويات للعناوين، تبدأ من <h1> (الأهم) إلى <h6> (الأقل أهمية).

مثال:

<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أقل أهمية</h3>

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

تُستخدم الفقرات لكتابة نصوص.

مثال:

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

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

العنصر <a> يُستخدم لإنشاء روابط لمواقع أخرى أو صفحات داخلية.

مثال:

<a href="https://example.com">زر لزيارة موقع</a>

السمات المهمة:

• href: يُحدد عنوان الرابط.
• target: يُحدد كيفية فتح الرابط (_blank لفتح الرابط في نافذة جديدة).

5. الصور (Images)

العنصر <img> يُستخدم لإضافة صور إلى الصفحة.

مثال:

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

السمات المهمة:

• src: مسار الصورة.
• alt: نص بديل يظهر إذا لم تُعرض الصورة.
• width وheight: تحديد أبعاد الصورة.

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

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

تُستخدم لإنشاء قوائم مرقمة.

<ol>
    <li>البند الأول</li>
    <li>البند الثاني</li>
    <li>البند الثالث</li>
</ol>

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

تُستخدم لإنشاء قوائم غير مرقمة.

<ul>
    <li>البند الأول</li>
    <li>البند الثاني</li>
    <li>البند الثالث</li>
</ul>

7. التعليقات (Comments)

التعليقات تُستخدم لإضافة ملاحظات داخل الكود ولا تظهر للمستخدم.

مثال:

<!-- هذه ملاحظة داخل الكود -->
<p>هذا نص يظهر في المتصفح.</p>

تمارين تطبيقية:

1. قم بإنشاء صفحة HTML تحتوي على:
   • عنوان رئيسي <h1> بعنوان: “مرحباً بكم”.
   • فقرة ترحيبية <p>.
   • رابط يؤدي إلى موقعك المفضل.
2. أضف صورة إلى الصفحة مع نص بديل مناسب.
3. أنشئ قائمتين: واحدة مرتبة وأخرى غير مرتبة.

بهذا تكون قد تعلمت العناصر الأساسية في HTML. في الفصل الثالث سنتناول السمات (Attributes) وكيفية تخصيص العناصر.