مقدمة في HTML: لغة بناء صفحات الويب

كل صفحة ويب زرتها في حياتك، من محرك البحث إلى موقع مدرستك، مبنية بلغة واحدة اسمها HTML. في هذا الدرس ستعرف ما هي HTML، وكيف تتكون الصفحة من وسوم وعناصر، وستكتب أول صفحة ويب لك وتراها تعمل أمامك.

ما هي HTML؟

HTML اختصار لـ HyperText Markup Language، أي «لغة ترميز النص التشعبي». الاسم يبدو معقداً، لكن الفكرة بسيطة:

• لغة ترميز (Markup): لا تكتب بها أوامر وحسابات مثل لغات البرمجة، بل تصف محتوى الصفحة: هذا عنوان، وهذه فقرة، وهذه صورة.
• النص التشعبي (HyperText): نص فيه روابط تنقلك من صفحة إلى أخرى. وهذه هي فكرة الويب كلها.

تخيّل أنك تجهّز جريدة مدرسية. HTML هي التي تحدد هيكل الجريدة: أين العنوان الرئيسي، وأين المقالات، وأين الصور. أما الألوان والخطوط الجميلة فهي مهمة لغة أخرى اسمها CSS، والحركة والتفاعل مهمة JavaScript.

ابتكر HTML العالم البريطاني تيم بيرنرز لي (Tim Berners-Lee) في بداية التسعينيات، عندما اخترع شبكة الويب نفسها. ومنذ ذلك الحين تطورت كثيراً، والإصدار الحديث يُعرف باسم HTML5.

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

HTML تتكون من وسوم (Tags). الوسم كلمة بين علامتي < و >، وأغلب الوسوم تأتي في أزواج: وسم فتح ووسم إغلاق فيه شرطة مائلة:

<p>هذه فقرة في صفحة ويب.</p>

• <p> وسم الفتح، ويعني «تبدأ هنا فقرة» (p اختصار paragraph).
• </p> وسم الإغلاق، ويعني «انتهت الفقرة».
• كل شيء من وسم الفتح حتى وسم الإغلاق، مع المحتوى، يسمى عنصراً (Element).

الوسوم مثل علب التغليف: كل علبة لها اسم يخبر المتصفح بنوع ما بداخلها.

بعض الأمثلة:

<h1>عنوان رئيسي كبير</h1>
<p>فقرة نص عادية.</p>
<strong>نص مهم بخط عريض</strong>

وسوم بلا إغلاق

بعض الوسوم لا تحتاج وسم إغلاق لأنه ليس لها محتوى داخلي، مثل <br> للنزول إلى سطر جديد، و <img> للصور. ستتعرف عليها في الدروس القادمة.

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

هذه أبسط صفحة HTML كاملة وصحيحة:

index.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">: العنصر الذي يحتوي الصفحة كلها. والخاصية lang="ar" تعني أن لغة الصفحة عربية، و dir="rtl" تجعل اتجاهها من اليمين لليسار.
• <head>: «رأس» الصفحة، فيه معلومات عن الصفحة لا تظهر داخلها.
• <meta charset="UTF-8">: يضمن ظهور الحروف العربية بشكل صحيح.
• <title>: العنوان الذي يظهر في تبويب المتصفح.
• <body>: «جسم» الصفحة، وكل ما بداخله يظهر للزائر.

لاحظ كيف تتداخل العناصر داخل بعضها مثل العلب داخل العلب: <h1> داخل <body>، و <body> داخل <html>. ولاحظ الإزاحة في بداية الأسطر: هي ليست ضرورية، لكنها تجعل الكود سهل القراءة.

كيف تفتح صفحتك في المتصفح؟

1. افتح محرر نصوص مثل VS Code.
2. أنشئ ملفاً جديداً باسم index.html، والامتداد .html مهم جداً.
3. انسخ الكود السابق فيه واحفظه.
4. اضغط على الملف مرتين، وسيفتح في متصفحك!

لا تحتاج إلى برامج خاصة ولا إنترنت. المتصفح وحده يفهم HTML ويعرضها.

معلومة

اضغط بزر الفأرة الأيمن على أي صفحة ويب واختر «عرض مصدر الصفحة» (View Page Source)، وسترى كود HTML الخاص بها. كل المواقع، حتى أكبرها، مبنية بنفس الوسوم التي تتعلمها الآن.

جرّب بنفسك

غيّر النص داخل العنوان والفقرة، ثم اضغط «شغّل». جرّب أيضاً أن تضيف عنواناً أصغر باستخدام الوسم <h2>، وفقرة ثانية:

جرّب بنفسكHTML

محرر الكود (HTML)<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>صفحتي الأولى</title> </head> <body> <h1>مرحباً بالعالم!</h1> <p>هذه أول صفحة ويب أكتبها بنفسي.</p> <p>أنا أتعلم <strong>HTML</strong> في مدرسة البرمجة.</p> </body> </html>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان وسم الإغلاق: إذا نسيت </p> أو </h1> قد يمتد التنسيق لما بعده بشكل غريب. اكتب وسم الإغلاق فور كتابة وسم الفتح.
• حفظ الملف بامتداد خاطئ: مثل index.html.txt. تأكد أن الاسم ينتهي بـ .html فقط.
• ظهور الحروف العربية كرموز غريبة: غالباً نسيت <meta charset="UTF-8"> في الـ head.

اختبر نفسك

سؤال

ما وظيفة HTML في صفحة الويب؟

تلوين الصفحة وتجميلهاإضافة الحركة والتفاعلوصف هيكل الصفحة ومحتواها

سؤال

أي جزء من الصفحة يظهر محتواه للزائر؟

<body><title><head>

الخلاصة

• HTML لغة ترميز تصف هيكل صفحات الويب ومحتواها.
• تتكون من وسوم بين < >، وأغلبها أزواج: وسم فتح ووسم إغلاق.
• الصفحة الكاملة فيها <!DOCTYPE html> ثم <html> وبداخله <head> و <body>.
• lang="ar" و dir="rtl" و charset="UTF-8" ضرورية للصفحات العربية.
• احفظ الملف بامتداد .html وافتحه في المتصفح مباشرة.