الدرس 7 · الوحدة 3: التعرف على HTML

أول صفحة HTML وهيكلها

نكتب أول صفحة ويب بأيدينا، ونفهم هيكلها الذي يتكرر في كل صفحة. ⏱ نحو 20 دقيقة.

بعد هذا الدرس ستستطيع أن:

تشرح وظيفة HTML مقارنة بـ CSS و JavaScript.
تميّز وسم الفتح ووسم الإغلاق والعنصر.
تكتب الهيكل الكامل لصفحة HTML.
تنشئ ملف index.html وتفتحه في المتصفح.

١ما HTML؟

كل صفحة ويب تراها مكتوبة بلغة HTML. هي ليست لغة برمجة تحسب وتقرر، بل لغة وصف: تخبر المتصفح «هذا عنوان، وهذه فقرة، وهذه صورة».

اللغة	وظيفتها	تشبيهها في البيت
HTML	المحتوى والهيكل	الجدران والغرف
CSS	الشكل والألوان	الطلاء والأثاث
JavaScript	التفاعل والحركة	الكهرباء والأجهزة

في هذا المقرر نبني البيت بالترتيب: الهيكل أولًا (HTML)، ثم الشكل (CSS)، ثم التفاعل (JavaScript).

٢الوسم والعنصر

نكتب HTML بـالوسوم. الوسم كلمة بين علامتي < و >. أغلب الوسوم تأتي زوجًا: وسم فتح مثل <h1>، ووسم إغلاق فيه شرطة مائلة مثل </h1>. الوسمان مع ما بينهما يسمّيان عنصرًا.

<h1>مرحبًا بالعالم</h1><p>هذه أول فقرة في صفحتي.</p>

index.html

على اليسار الكود، وعلى اليمين ما يعرضه المتصفح. اضغط ✏️ جرّب وعدّل وغيّر النص، وشاهد النتيجة تتغير فورًا.

٣هيكل الصفحة الكامل

كل صفحة HTML حقيقية لها هيكل ثابت تحفظه مرة واحدة وتكرره في كل ملف:

<!DOCTYPE html><html lang="ar" dir="rtl">  <head>    <meta charset="UTF-8">    <title>صفحتي الأولى</title>  </head>  <body>    <h1>أهلًا بك</h1>    <p>هذا ما يظهر للزائر.</p>  </body></html>

صفحتي الأولى

السطر	معناه
`<!DOCTYPE html>`	يخبر المتصفح أن الصفحة بلغة HTML5 الحديثة.
`<html lang="ar" dir="rtl">`	بداية الصفحة. لغتها العربية، واتجاهها من اليمين إلى اليسار.
`<head>`	معلومات عن الصفحة لا تظهر داخلها، مثل الترميز والعنوان.
`<meta charset="UTF-8">`	الترميز الذي يعرض الحروف العربية صحيحة.
`<title>`	العنوان الذي يظهر على تبويب المتصفح.
`<body>`	كل ما يراه الزائر يُكتب هنا.

٤أين أكتب الصفحة وكيف أفتحها؟

ثبّت محرر الأكواد المجاني Visual Studio Code.
أنشئ مجلدًا لموقعك، وأنشئ فيه ملفًا اسمه index.html.
اكتب الهيكل السابق واحفظ الملف (Ctrl+S).
افتح المجلد وانقر الملف نقرتين، فيفتحه المتصفح.
بعد كل تعديل: احفظ، ثم حدّث الصفحة في المتصفح (F5).

٥التعشيش والمسافات البادئة

العنصر قد يكون داخل عنصر آخر، كما أن <h1> داخل <body>. القاعدة: ما فُتح أخيرًا يُغلق أولًا.

✗ خطأ

<p>نص <b>عريض</p></b>

✓ صواب

<p>نص <b>عريض</b></p>

الوسم b فُتح داخل p، فيجب أن يُغلق قبل إغلاق p.

ونضع مسافات في بداية السطر (مسافة بادئة) للعنصر الداخلي، حتى نرى الهيكل بعيننا. المتصفح لا يهتم بالمسافات، لكنها تساعدك أنت ومعلمك.

والتعليق ملاحظة لك لا يعرضها المتصفح: .

توقّع وتحقّق

ما وظيفة HTML؟

HTML للهيكل، و CSS للشكل.

أي وسم إغلاق صحيح؟

الإغلاق فيه شرطة مائلة / بعد علامة <.

أين نكتب ما يراه الزائر؟

body للمحتوى الظاهر.

ماذا يفعل <title>؟

يظهر على تبويب المتصفح فقط.

الخلاصة

HTML تصف محتوى الصفحة وهيكلها بالوسوم.
العنصر = وسم فتح + محتوى + وسم إغلاق.
الهيكل: DOCTYPE ثم html وفيه head (معلومات) و body (ما يراه الزائر).
ما فُتح أخيرًا يُغلق أولًا، والمسافات البادئة توضّح الهيكل.

تحدٍّ برمجي: بطاقة تعريف

سهل

اكتب صفحة كاملة تعرّف بنفسك: عنوان كبير فيه اسمك، وفقرتان: الأولى عن تخصصك، والثانية عن هوايتك. واجعل عنوان التبويب «بطاقتي».

المطلوب:

ابدأ بالهيكل الكامل للصفحة.
عنوان التبويب: بطاقتي
عنوان كبير h1 فيه اسمك.
فقرتان p على الأقل.

👀 اعرض شكل الناتج المطلوب

الناتج المطلوب

✓ التحقق الآلي من حلّك:

عنوان التبويب «بطاقتي».
في الصفحة عنوان h1 فيه نص.
في الصفحة فقرتان p على الأقل، وفي كل منهما نص.
اتجاه الصفحة من اليمين إلى اليسار.

💡 تلميح 1

اكتب «بطاقتي» بين <title> و </title>.

💡 تلميح 2

داخل body: <h1>اسمك</h1> ثم <p>…</p> مرتين.

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<!DOCTYPE html><html lang="ar" dir="rtl">  <head>    <meta charset="UTF-8">    <title>بطاقتي</title>  </head>  <body>    <h1>سعد العتيبي</h1>    <p>أدرس تقنية البرمجة وتطوير الويب.</p>    <p>هوايتي القراءة والسباحة.</p>  </body></html>

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←