تصميم المواقع

تعلم HTML من الصفر

HTML لغة بنية الصفحة لا لغة برمجة: بها تقول هذا عنوان، وهذه فقرة، وهذه قائمة، وهذا رابط. وللبدء تحتاج فقط إلى ملف نصي بامتداد html ومتصفح، وتُبنى صفحتك الأولى في العشر دقائق الأولى.

  • الدرس 2 من 12
  • مبتدئ
  • مجاني، دون تسجيل

بنية الصفحة، من الجذر إلى الفروع

htmlجذر المستند، حيث تُعلن اللغة والاتجاه

  • head

    ترميز الحروف وعنوان الصفحة وإعداد العرض على الهاتف. ولا شيء من هنا يُطبع على الصفحة.

    غير مرئي

  • body

    كل ما يراه المستخدم هنا، والفروع الثلاثة التالية تجلس داخله.

    مرئي

  • header وnav

    ترويسة الموقع وقائمته. ويستطيع قارئ الشاشة تخطي القائمة لأنه يعرف أنها قائمة.

  • main

    المحتوى الخاص بهذه الصفحة، واحد لا غير، وبداخله عنوان h1.

  • footer

    تذييل الموقع: التواصل والشروط والروابط المتكررة في كل صفحة.

يبني المتصفح هذه البنية نفسها في الذاكرة. وأي وسم يبقى مفتوحاً يغلق الفرع في مكان آخر، فتصير الصفحة شيئاً لم تكتبه.

آخر مراجعة: تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

ماذا يفعل HTML وماذا لا يفعل؟

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

واعرف الأشياء الثلاثة التي لا يفعلها كي لا تضيّع وقتك. المظهر ليس عمل HTML بل عمل CSS: اللون والتباعد والحجم والتخطيط تُقرَّر هناك. والسلوك عمل جافاسكريبت: شيء يُفتح بالنقر، أو نموذج يُرسَل دون إعادة تحميل. أما منطق الخادم فليس في المتصفح أصلاً؛ فحفظ طلب شراء مهمة برنامج يعمل على الخادم.

فلماذا يأتي HTML أولاً؟ لأنه الطبقة الوحيدة التي يقرؤها الجمهور الثلاثة: المتصفح وقارئ الشاشة وزاحف محرك البحث. قارئ الشاشة لا يحتاج CSS وقد لا ينفذ جافاسكريبت أبداً، لكن الجميع يقرؤون الهيكل. وكل قرار تتخذه في هذه الطبقة يظهر في المواضع الثلاثة.

وسوء فهم شائع ينتهي هنا: HTML ليس لغة برمجة. لا شروط فيه ولا حلقات ولا متغيرات، ولا يحسب شيئاً ولا يقرر شيئاً. إنه يصف. وبساطته هي بالضبط سبب بقائه.

صفحتك الأولى: ملف واحد وبضعة أسطر ومتصفح

لا حاجة إلى برنامج خاص. محرر نصوص بسيط يكفي، حتى Notepad، وتحفظ الملف بامتداد .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 يخبر المتصفح أن يعمل بالقواعد الحديثة لا بوضع التوافق القديم. وlang وdir يحددان اللغة والاتجاه، وغيابهما في العربية يعني نصاً بمحاذاة خاطئة وقارئ شاشة ينطق بلكنة أخرى. وغياب charset يعني تكسّر الحروف العربية. وغياب viewport يعني صفحة مصغّرة على الهاتف.

الآن غيّر كلمة واحدة وأعد التحميل. هذه الحلقة القصيرة، أن تكتب ثم تنظر، هي كامل طريقة تعلم HTML. لا شيء لتشغيله أو ترجمته.

من ملف فارغ إلى صفحة تُفتح في المتصفح

  1. أنشئ ملفاً نصياً

    سمّه index.html وتأكد أن الامتداد html فعلاً لا html.txt.

    1

  2. اكتب الهيكل

    doctype ووسم html باللغة والاتجاه وhead وbody. هذا كل شيء.

    2

  3. افتحه في المتصفح

    نقرة مزدوجة تكفي. لا خادم في الأمر.

    3

  4. غيّر شيئاً وانظر ثانية

    احفظ، أعد التحميل، انظر. هذه الحلقة هي ما يبني المهارة.

    4

  5. تحقق من صحته

    أعطِ الملف لمدقق W3C ليُظهر لك الوسوم غير المغلقة.

    5

هذه الخطوات الخمس تجري على جهازك ولا تحتاج استضافة ولا نطاقاً. أما النشر على الإنترنت فمرحلة تالية منفصلة.

أي وسم لأي مهمة؟ الهيكل الدلالي للصفحة

يمكنك بناء صفحة كاملة من عناصر div وأن تبدو تماماً كما تريد. ما تفقده هو المعنى: div لا يقول لأحد شيئاً، بينما nav يخبر قارئ الشاشة أن هذه قائمة الموقع وأن المستخدم يستطيع تخطيها.

الهيكل الذي تملكه كل صفحة تقريباً هو هذا:

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <h1>عنوان الصفحة</h1>
    <article>
      <h2>قسم</h2>
      <p>نص.</p>
    </article>
  </main>

  <footer>...</footer>
</body>

وقواعد قليلة تمسك هذا الهيكل: h1 واحد في كل صفحة ولا أكثر، لأن للصفحة عنواناً رئيسياً واحداً. ومستويات العناوين تنزل بالترتيب، ولا تقفز أبداً من h2 إلى h4 لتصغير الخط؛ فالحجم عمل CSS. وmain واحد في كل صفحة يحمل المحتوى الخاص بها، وتبقى القائمة والتذييل خارجه.

وللنص عناصر صغيرة كثيراً ما تُستعمل خطأً. strong يعني أن هذا مهم، وem يعني أن على هذه الكلمة نبرة؛ وإن أردت مجرد عريض أو مائل بلا معنى فتلك مهمة CSS. وa حيث ينتقل المستخدم إلى صفحة أخرى، وbutton حيث يحدث شيء في الصفحة نفسها. وتبديل هذين أشيع خطأ دلالي على الويب.

ولا تحفظ قائمة العناصر كاملة. فـمرجع عناصر HTML في MDN مفتوح دائماً، ومن يعمل في هذا منذ عشر سنوات يفتحه عدة مرات يومياً.

الصفحة نفسها، بوسوم حقيقية وبـdiv فارغة

ورقة مراجعة هيكل الصفحةHTML

بوسوم دلالية

  • يقول قارئ الشاشة إن هذه قائمة الموقع ويمكن تخطيها
  • تصنع العناوين جدول محتويات حقيقياً
  • يعمل الزر بـTab وEnter دون سطر شفرة إضافي
  • يميّز زاحف محرك البحث أي جزء هو المحتوى الرئيسي

بـdiv فارغة

  • كل شيء كتلة واحدة بلا اسم ولا شيء يمكن تخطيه
  • المهمة نفسها تحتاج الآن إلى خصائص ARIA مضافة
  • يعمل الزر بالفأرة فقط لا بلوحة المفاتيح
  • البنية موجودة فقط في ذهن من كتب الشفرة

يبدو العمودان متطابقين في المتصفح. ويظهر الفرق حيث لا يرى أحدهم الصفحة بل يسمعها فقط.

لماذا إتاحة الوصول من اليوم الأول لا لاحقاً؟

لأن التأجيل مكلف. ابنِ الصفحة بالعناصر الصحيحة يأتِك جزء كبير من إتاحة الوصول مجاناً؛ وابنِها من عناصر div ثم حاول إصلاحها لاحقاً، فستضطر إلى إعادة بناء المعنى نفسه بخصائص إضافية، وهو أطول وأكثر هشاشة.

أربعة أشياء تستحق أن تصير عادة من اليوم الأول. أولاً النص البديل للصور: يُكتب alt لمن لا يرى الصورة، فليقل ما يجري فيها بدل أن يُحشى بكلمة مفتاحية. وإن كانت الصورة زخرفية بحتة، فـalt="" الفارغ صحيح وحذف alt خطأ. وثانياً ترتيب العناوين، فهو بمثابة جدول محتويات لقارئ الشاشة. وثالثاً تسميات النماذج: كل input يحتاج label مرتبطاً، وإلا سمع المستخدم تحرير نص ولم يعرف ماذا يكتب. ورابعاً التشغيل بلوحة المفاتيح: إن لم تستطع الوصول إلى زر بـTab وتفعيله بـEnter، فذلك الشيء ليس زراً، بل يشبه الزر فقط.

وثمة قاعدة تلخص هذا كله وتأتي من W3C نفسها: إن وُجد عنصر HTML أصلي للمهمة فاستعمله ولا تضف ARIA. وقد جعلت وثيقة Using ARIA ذلك قاعدتها الأولى، والسبب أن ARIA الخاطئ أسوأ من غيابه: فهو يَعِد قارئ الشاشة بما لا يفعله المتصفح.

واعرف الحد أيضاً: الأدوات الآلية لا تقيس كل شيء. ودليل Easy Checks من W3C نفسها يشدد على أن الفحص الآلي لا يحل محل المراجعة البشرية. تستطيع الآلة أن تعرف أن alt موجود؛ أما إن كان نصه يصف الصورة فعلاً فأنت وحدك من يحكم.

أربعة أخطاء شائعة وكيف تجدها بنفسك

الأول اختيار مستوى العنوان بحسب حجم الخط. يكتب أحدهم h3 لأن h2 يبدو كبيراً. والنتيجة جدول محتويات مبعثر لقارئ الشاشة ولمحرك البحث، مع أن سطرين من CSS كانا يحلان الأمر.

والثاني زر ليس زراً: div بمستمع نقر. يعمل بالفأرة ولا يعمل بلوحة المفاتيح.

والثالث نص بديل بلا معنى، مثل alt="صورة" أو اسم الملف. وهذا أسوأ من تركه فارغاً، لأنه يجبر المستخدم على سماع شيء لا يحمل أي معلومة.

والرابع وسوم غير مغلقة. يرتبها المتصفح عادةً فتبدو الصفحة سليمة، إلى أن يقع قسم فجأة داخل قسم آخر فتقضي ساعات في البحث عن السبب.

وثلاث أدوات تكفي لالتقاط هذه كلها، وثلاثتها مجانية. مدقق W3C يأخذ عنوانك أو ملفك ويعرض الأخطاء البنيوية سطراً سطراً؛ وهناك يظهر الوسم غير المغلق. وأدوات مطوّري المتصفح، التي تُفتح بـF12، تعرض البنية الحقيقية للصفحة بعد تفسير المتصفح، والفارق عما كتبته يكون كاشفاً عادةً. وأبسطها قراءة مصدر صفحات الآخرين: كل موقع مبني جيداً درس مجاني.

وتمرين واحد يتفوق على أي فيديو: تجوّل في الصفحة التي بنيتها بلوحة المفاتيح وحدها. اضغط Tab فقط. وكل موضع تتعثر فيه أو لا تعرف أين أنت، فقد وجدت عيباً حقيقياً.

المسار السريع مع الذكاء الاصطناعي

تكتب النماذج اللغوية HTML بسرعة وغالباً دون أخطاء نحوية. وما لا تفعله هو اتخاذ قرار بنية الصفحة، وهناك تحديداً تعرج المخرجات: عنوان بمستوى خاطئ، وزر هو <code>div</code>، ونص بديل كُتب لصورة لم يرها النموذج قط. فالمسار السريع ليس التوليد، بل التوليد ثم التدقيق. ويكفي هنا نموذج سريع ورخيص لأن العمل آلي؛ واختيارنا الحالي في <a class="text-link" href="/ar/ai/">قسم الذكاء الاصطناعي</a>.

  1. اكتب أقسام الصفحة على ورقة، بالترتيب الذي ينبغي أن يراها القارئ به. وهذه هي الخطوة الوحيدة التي لا يستطيع النموذج أن يأخذها عنك، لأنه لا يعرف أي نقطة أهم.
  2. شغّل الوصفة أدناه وضع المخرجات في ملف index.html نفسه.
  3. أعطِ الملف لمدقق W3C. وأنهِ الأخطاء البنيوية قبل أي شيء آخر.
  4. افحص يدوياً أربعة أشياء لا تجيب عنها أداة آلية: عنوان h1 واحد وترتيب العناوين، والنص البديل لكل صورة، وتسمية كل حقل نموذج، والتجول في الصفحة كلها بـTab وحده.
  5. اكتب النصوص بنفسك. وكل موضع ترك فيه النموذج TODO هو مكانك؛ فالنص الذي يكتبه النموذج لصورة لم يرها تخمين لا وصف.

وصفة جاهزة للنسخ

الدور: من يكتب HTML دلالياً، بلا أي إطار عمل وبلا CSS.

الصفحة التي أريدها:
الموضوع: {موضوع الصفحة}
الأقسام بالترتيب: {قائمة الأقسام}
اللغة والاتجاه: العربية، من اليمين إلى اليسار

قواعد المخرجات:
- أعطِ HTML فقط. لا CSS ولا جافاسكريبت ولا مكتبة.
- استعمل الوسوم الدلالية: header, nav, main, article, section, footer. ولا تضع div ما دام هناك وسم ذو معنى.
- عنوان h1 واحد بالضبط، ومستويات العناوين تنزل بالترتيب. ولا تختر مستوى العنوان بحسب حجم الخط.
- ضع خاصيتي lang وdir على وسم html.
- استعمل button لما يحدث في هذه الصفحة، لا div قابلاً للنقر. واستعمل a للانتقال إلى صفحة أخرى.
- كل input له label مرتبط.
- لا تضف أي خاصية ARIA إلا حيث لا يوجد وسم HTML مكافئ. وإن وُجد مثل هذا الموضع فاذكر السبب في النهاية.
- لكل صورة اكتب alt="TODO" بدل نص بديل مخترع، لأملأه بنفسي.
- لا تكتب أي نص أو رقم أو اسم أو ادعاء ليس في مدخلاتي. واترك {...} مكان النص.

وبعد الشفرة، قل في ثلاثة أسطر ما القرارات البنيوية التي اتخذتها وأين ترددت.

قبل أن تثق بالناتج: لا تحذف الخطوة الأخيرة: النص البديل للصور ونصوص الأزرار يكتبها إنسان. فالنموذج لم يرَ صورتك، وإن أجبرته أنتج وصفاً يبدو معقولاً وهو خاطئ. والتدقيق الآلي أيضاً جزء من العمل فقط؛ ودليل Easy Checks في W3C يقول هذا بالضبط. ولا بديل عن اختبار لوحة المفاتيح وقراءة النص البديل بعينيك.

الذكاء الاصطناعي في هذا العمل

في HTML، يسرّع الذكاء الاصطناعي العمل فعلاً، بشرط أن تعرف ما الذي تدققه. ثلاثة استخدامات تستحق: إنتاج الهيكل الأول للصفحة، وشرح مقطع شفرة غير مألوف سطراً سطراً، وتحويل صفحة مثقلة بـdiv إلى نسختها الدلالية. وثلاثة لا نسلّمها: قرار بنية المحتوى، وكتابة النص البديل للصور، والحكم على إتاحة الوصول.

أدوات تساعد فعلا

  • Claude جيد في شرح مقطع شفرة سطراً سطراً وإعادة كتابته دلالياً. وإيران ليست في قائمة الدول المدعومة لدى أنثروبيك؛ قرأنا ذلك في صفحة أنثروبيك نفسها.
  • Gemini يكفي للهيكل الأول والأسئلة الأساسية، ويتعامل مع الفارسية جيداً. وصفحة غوغل نفسها تقول إن تطبيق جيميناي يعمل في أكثر من مئتين وثلاثين دولة ومنطقة، وإيران ليست في تلك القائمة.
  • ChatGPT الخيار الأشيع ومقبول لهذه المهام. وليست لدينا صفحة له في قسم الذكاء الاصطناعي بعد، فلا ندّعي هنا شيئاً عن إتاحته أو سعره.

اين ينقلب ضدك

الخطر هنا ليس نحوياً بل دلالياً، ويمر بهدوء. فالشفرة التي يعطيها النموذج صالحة عادةً وتبدو صحيحة في المتصفح، لكن ثلاثة أشياء تتكرر: مستوى عنوان اختير بحسب المظهر، وزر هو في الحقيقة div، ونص بديل كُتب لصورة لم يرها النموذج. والرابع أدق: خصائص ARIA زائدة تبدو احترافية وتكسر شيئاً في الواقع. والقاعدة الأولى في وثيقة Using ARIA من W3C نفسها هي ذلك بالضبط: استعمل وسم HTML الأصلي حيث يوجد ولا تضف ARIA. ودليل Easy Checks يقول إن المراجعة الآلية لا تحل محل البشرية. فموقفنا بسيط: التوليد بالنموذج والتدقيق بالإنسان. ولمعرفة كيفية الدفع لكل أداة من إيران، انظر دليل الشراء.

المصادر: W3C: Using ARIA, first rule W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available

حدود هذه النصيحة

HTML وحده يبني صفحة لا موقعاً. فالتخطيط والمظهر عمل CSS، والسلوك عمل جافاسكريبت، وفتح الصفحة على الإنترنت عمل الاستضافة والنطاق. والأهم أن حفظ الوسوم ليس المهارة؛ المهارة أن تعرف أي وسم يناسب كل قطعة محتوى، وهذا لا يأتي إلا ببناء بضع صفحات حقيقية. وإن كان هدفك تشغيل موقع عملي بسرعة، فوردبريس أو منصة بناء أقصر طريق، وهذا الدرس يساعدك فقط على فهم ما تنتجه.

من عملنا نحن

الموقع الذي أنت عليه هو مثالنا نحن، ويمكنك قراءة شفرته. صفحات rgb.ir مبنية من قالبنا الخاص بملفات PHP، ولا إضافة بناء صفحات مفعّلة هنا، فما تراه في عرض المصدر هو ما كتبناه. ويوم مراجعة هذا الدرس، حملت الصفحة الرئيسية وسم h1 واحداً بالضبط، وmain واحداً، وستة وعشرين عنصر article وخمسة عشر عنصر section لكتل المحتوى. وقاعدة h1 الواحد وترتيب العناوين ليست ذوقاً عندنا أيضاً؛ فهي مكتوبة في قواعد الكتابة الخاصة بالموقع. وصراحة لازمة: الصفحة نفسها فيها أيضاً نحو مئة وستين عنصر div. فالكتابة الدلالية تعني استعمال الوسم ذي المعنى حيث يوجد، لا حذف div من اللغة؛ فللتخطيط المحض يبقى div الخيار الأصح.

اسئلة متابعة حقيقية

هل HTML لغة برمجة؟

لا. إنها لغة ترميز: تصف ولا تُنفَّذ. لا شروط فيها ولا حلقات ولا متغيرات ولا تحسب شيئاً. وكونها ليست برمجة سبب جيد للبدء بها.

ما البرنامج الذي أحتاجه للبدء؟

محرر نصوص ومتصفح، وكلاهما موجود على حاسوبك. وبعد الصفحات الأولى يسهّل محرر مثل VS Code الأمر، لأنه يلوّن الوسوم ويشير إلى غير المغلقة، لكنك لا تحتاجه في اليوم الأول.

الآن وقد صار الذكاء الاصطناعي يكتب HTML، هل يبقى تعلمه ضرورياً؟

لكتابته لا، ولقراءته نعم. فالشفرة المولَّدة صالحة عادةً، لكن قراراتها البنيوية يجب أن يراجعها أحد؛ وإن لم تعرف كيف ينبغي أن يكون العنوان والزر والنص البديل، فلا سبيل لك لتعرف أالمخرجات صحيحة أم جميلة فقط.

واصل التعلم