أول صفحة ويب: HTML من الصفر

طريقان إلى نفس الفكرة

قبل أن تبدأ

الفكرة الجوهرية

1ما هي صفحة الويب؟ ثلاث لغات وكل واحدة لها دور

حين تفتح موقعًا، يرسل الخادم لمتصفحك ملفات نصية. أهمها ثلاثة، ولكل واحد دور لا يتداخل مع الآخر:

HTML هو الهيكل والمحتوى: ما العنوان، ما الفقرات، أين الصورة، أين الزر. CSS هو الشكل: الألوان والخطوط والمسافات وترتيب الأشياء على الشاشة. JavaScript هو السلوك: ماذا يحدث حين تضغط الزر أو تكتب في خانة. في هذا الدرس والذي بعده نتعلّم HTML، ثم CSS، ثم JavaScript.

2الوسم والعنصر والخاصية

الوسم (tag) كلمة بين قوسين زاويين مثل <p>. أغلب الوسوم تأتي زوجًا: وسم فتح <p> ووسم إغلاق </p> بشرطة مائلة. الوسمان مع ما بينهما يسمّيان عنصرًا (element). والخاصية (attribute) معلومة إضافية تُكتب داخل وسم الفتح بالشكل اسم="قيمة".

تشريح عنصر رابط: الوسمان والمحتوى معًا عنصر واحد، والخاصية href تخبر الرابط إلى أين يذهب.

   وسم الفتح          المحتوى        وسم الإغلاق
       |                |                |
<a href="https://darb.dev">  ادخل درب  </a>
    \________________/
       خاصية: اسم="قيمة"
\_______________________________________/
                 العنصر كاملًا

3هيكل الملف: الرأس والجسم

كل صفحة HTML كاملة لها نفس الهيكل. انسخه في كل ملف جديد تبدؤه:

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>صفحتي الأولى</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم</h1>
    <p>هذه أول صفحة أكتبها بيدي.</p>
  </body>
</html>

سطرًا سطرًا: <!doctype html> يخبر المتصفح أنها صفحة HTML حديثة. <html lang="ar" dir="rtl"> يغلّف كل شيء، وlang لغة الصفحة (تفيد القارئ الصوتي ومحرك البحث)، وdir="rtl" يجعل الاتجاه من اليمين لليسار للعربية. الرأس <head> معلومات عن الصفحة لا تظهر فيها: الترميز utf-8 حتى تظهر الحروف العربية صحيحة، وسطر viewport حتى تناسب الجوال، و<title> النص الذي يظهر على التبويب. الجسم <body> كل ما يراه الزائر.

كيف تجرّب على جهازك؟ (1) افتح محرّرًا: VS Code أو حتى المفكرة (Notepad). (2) الصق الهيكل أعلاه. (3) احفظ الملف باسم index.html (تأكّد أن الامتداد .html لا .txt). (4) انقر الملف مرتين فيفتح في المتصفح. (5) عدّل في المحرّر، احفظ، ثم اضغط F5 في المتصفح لترى التغيير.

4العناوين والفقرات وتنسيق النص

العناوين ستة مستويات من h1 (الأهم والأكبر) إلى h6. اجعل للصفحة h1 واحدًا يقول موضوعها، ثم h2 للأقسام، ثم h3 لما داخلها، مثل فهرس كتاب. الفقرة p، والسطر الجديد داخل الفقرة br، والخط الفاصل بين موضوعين hr.

لاحظ: strong للكلمة المهمة (تظهر عريضة)، وem للتأكيد (مائلة)، وmark للتظليل، وsmall للملاحظات الصغيرة. اختر العنصر حسب المعنى لا حسب الشكل؛ الشكل ستغيّره لاحقًا بـ CSS كما تحب.

5الروابط والصور

الرابط <a> يأخذ خاصية href بعنوان الوجهة: موقع آخر (https://...)، أو صفحة في موقعك (about.html)، أو قسم في نفس الصفحة (#hours)، أو بريد (mailto:). والصورة <img> عنصر فارغ بلا وسم إغلاق، يأخذ src مسار الصورة وalt وصفها النصّي لمن لا يراها.

المسار في src وhref نوعان: مطلق يبدأ بـ https:// ويشير لمكان على الإنترنت، ونسبي يبدأ من مكان ملفك الحالي: images/cup.jpg يعني «مجلد images بجانب هذا الملف». ولذلك ترتيب مجلدات مشروعك مهم.

6القوائم والجداول

القائمة غير المرتّبة ul (نقاط) والمرتّبة ol (أرقام)، وكل بند فيها li. والجدول table يتكوّن من صفوف tr، وفي كل صف خلايا: th للعنوان وtd للبيانات. استخدم الجدول لبيانات جدولية حقيقية (أسعار، جداول مواعيد)، لا لترتيب شكل الصفحة.

7التعشيش وأدوات المطوّر: اكتشف أخطاءك

العناصر تتداخل كصناديق داخل صناديق: body يحوي ul، وul يحوي li، وli قد يحوي a. القاعدة الذهبية: ما فُتح أخيرًا يُغلق أولًا. <p><strong>نص</strong></p> صحيح، و<p><strong>نص</p></strong> خطأ لأن الصناديق تقاطعت.

هكذا يرى المتصفح صفحتك: شجرة. كل عنصر «ابن» للعنصر الذي يحتويه. هذه الشجرة اسمها DOM وستعدّلها لاحقًا بـ JavaScript.

body
 ├─ h1 ........ "مقهى درب"
 ├─ p
 │   └─ strong  "مقهى درب"
 └─ ul
     ├─ li .... "لاتيه"
     └─ li
         └─ a . "موكا"

أدوات المطوّر (DevTools) مدمجة في كل متصفح: اضغط F12، أو اضغط بالزر الأيمن على أي شيء في الصفحة واختر «فحص» (Inspect). تبويب Elements يريك الشجرة كما فهمها المتصفح فعلًا، لا كما كتبتها. إن كان شيء في غير مكانه، ستراه هنا: عنصر انتقل لمكان غريب، أو وسم أغلقه المتصفح بدلًا منك.

مثال محلول

المسألة: كتب أحمد هذه الصفحة، وكل النص بعد كلمة «تخفيض» ظهر عريضًا، والصورة لا تظهر. ما الأخطاء؟

<h1>عرض اليوم</h2>
<p>لاتيه بـ <strong>تخفيض 20%</p>
<img src="images/latte.jpg>
<p>العرض حتى المساء</p>

التحليل: (1) فُتح h1 وأُغلق بـ h2: الوسمان يجب أن يتطابقا. (2) strong لم يُغلق، فاستمر العرض حتى النهاية. (3) قيمة src ينقصها علامة التنصيص الختامية، فاعتبر المتصفح بقية السطر جزءًا من المسار. (4) الصورة بلا alt. الحل:

خرافة مقابل حقيقة

أين تقابله في العمل

اختبر فهمك

بطاقات مراجعة سريعة

تحقق من فهمك