أساسيات HTML5

هيكل مستند HTML والقالب الأساسي

25 دقيقة الدرس 3 من 18

ما هو مستند HTML؟

كل صفحة ويب تزورها مبنية على مستند HTML. يتبع هذا المستند هيكلا محددا تعتمد عليه المتصفحات لتفسير المحتوى وعرضه بشكل صحيح. فكر فيه كالهيكل العظمي لصفحة الويب -- بدونه لن يعرف المتصفح كيف يعرض اي شيء بالشكل المطلوب.

في هذا الدرس ستتعلم كل جزء من القالب الاساسي لمستند HTML ولماذا يوجد وكيف تكتبه بشكل صحيح من الصفر.

اعلان DOCTYPE

السطر الاول في اي مستند HTML هو اعلان DOCTYPE. يخبر هذا الاعلان المتصفح بنسخة HTML التي كتبت بها الصفحة. في HTML5 الحديثة هو بسيط وقصير.

مثال: اعلان DOCTYPE

<!DOCTYPE html>

هذا الاعلان ليس وسم HTML بل هو تعليمة للمتصفح. بدونه قد يدخل المتصفح في "وضع التوافق القديم" مما يسبب سلوكا غير متوقع في العرض. احرص دائما على وضعه في السطر الاول.

عنصر html

بعد اعلان DOCTYPE ياتي العنصر الجذري لكل صفحة HTML وهو وسم <html>. يحتوي هذا العنصر على جميع محتويات الصفحة. يجب دائما تضمين سمة lang لتحديد لغة المستند.

مثال: عنصر html مع تحديد اللغة

<html lang="ar" dir="rtl">
  <!-- جميع محتويات الصفحة توضع هنا -->
</html>

تساعد سمة lang قارئات الشاشة على نطق المحتوى بشكل صحيح كما تساعد محركات البحث في تقديم صفحتك للجمهور المناسب. للصفحات العربية نستخدم lang="ar" مع dir="rtl" لتحديد اتجاه الكتابة من اليمين لليسار.

قسم head

يحتوي عنصر <head> على البيانات الوصفية وهي معلومات عن الصفحة لا تظهر مباشرة على الشاشة. تشمل ترميز الاحرف واعدادات منطقة العرض وعنوان الصفحة وروابط ملفات التنسيق والبرمجة.

مثال: عناصر head الاساسية

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحتي الاولى</title>
</head>

يضمن وسم charset="UTF-8" ان المتصفح يستطيع عرض احرف جميع اللغات تقريبا بما فيها العربية والصينية والرموز الخاصة. وسم viewport ضروري للتصميم المتجاوب حيث يطلب من متصفحات الهواتف مطابقة عرض الجهاز بدلا من عرض نسخة مصغرة من صفحة سطح المكتب. يحدد وسم <title> ما يظهر في تبويب المتصفح ونتائج محركات البحث.

ملاحظة: يجب ان يكون وسم charset هو العنصر الاول داخل <head>. يحتاج المتصفح لمعرفة ترميز الاحرف قبل معالجة اي محتوى اخر.

قسم body

يحتوي عنصر <body> على كل ما هو مرئي في الصفحة من نصوص وصور وروابط ونماذج وجميع المحتويات التي يتفاعل معها المستخدمون. يوجد عنصر <body> واحد فقط في كل مستند.

القالب الاساسي الكامل

بتجميع كل ما سبق اليك القالب الاساسي القياسي لـ HTML5 الذي يجب استخدامه كنقطة بداية لكل صفحة ويب تنشئها.

مثال: القالب الاساسي الكامل لـ HTML5

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عنوان الصفحة</title>
</head>
<body>
  <h1>مرحبا بالعالم!</h1>
  <p>هذه اول صفحة ويب لي.</p>
</body>
</html>

تعليقات HTML

تسمح لك التعليقات بترك ملاحظات في الكود يتجاهلها المتصفح تماما. وهي مفيدة جدا لشرح الاقسام المعقدة او تعطيل اجزاء من الكود مؤقتا اثناء التطوير.

مثال: تعليقات HTML

<!-- هذا تعليق. المتصفح لن يعرضه -->

<!-- قسم التنقل يبدا هنا -->
<nav>
  <a href="/">الرئيسية</a>
</nav>
<!-- قسم التنقل ينتهي هنا -->

تبدا التعليقات بـ . لا يمكن وضع تعليق داخل تعليق اخر.

التداخل والمسافات البادئة

توضع عناصر HTML داخل بعضها البعض لانشاء تسلسل هرمي. المسافات البادئة المنتظمة -- عادة مسافتان او اربع مسافات لكل مستوى -- تجعل الكود قابلا للقراءة والصيانة. كل وسم فتح يجب ان يكون له وسم اغلاق مقابل (ما لم يكن عنصرا فارغا مثل <meta> او  ).

خطا شائع: التداخل غير الصحيح للوسوم هو خطا متكرر. يجب اغلاق الوسوم بترتيب عكسي لفتحها. مثلا نص غير صحيح. الشكل الصحيح هو نص.

نصيحة: معظم محررات الاكواد تستطيع توليد القالب الاساسي الكامل لـ HTML5 تلقائيا. في VS Code اكتب ! في ملف HTML فارغ ثم اضغط Tab لانشاء القالب فورا. لكن تاكد من فهمك لكل سطر قبل الاعتماد على الاختصارات.

شرح ترميز الاحرف

يحدد ترميز الاحرف كيفية تخزين النصوص وعرضها. يعد UTF-8 المعيار العالمي لانه يدعم اكثر من 100,000 حرف من جميع انظمة الكتابة. بدون التصريح بـ charset="UTF-8" قد تعرض صفحتك رموزا مشوهة بدلا من الاحرف الخاصة او النصوص غير اللاتينية.

تمرين تطبيقي

انشئ مستند HTML كاملا من الصفر دون النظر الى الامثلة اعلاه. يجب ان تتضمن صفحتك اعلان DOCTYPE وعنصر html مع سمة lang وقسم head يحتوي على charset و viewport و title وقسم body يحتوي على عنوان وفقرتين. احفظ الملف باسم structure.html وافتحه في المتصفح للتاكد من عمله بشكل صحيح. ثم اضف ثلاثة تعليقات تشرح اجزاء مختلفة من الكود.