كيفية إنشاء صفحة HTML
بعدما تعرفنا في الدرس الأول على مفهوم HTML ودورها في بناء صفحات الويب، حان الوقت للغوص في كيفية إنشاء أول صفحة ويب باستخدام لغة HTML. كل صفحة HTML تعتمد على هيكل أساسي يجب اتباعه، وهو مكون من مجموعة من العناصر الضرورية التي تتيح للمتصفح فهم وتفسير المحتوى بطريقة صحيحة.
في هذا الدرس، سنشرح كيفية كتابة صفحة HTML خطوة بخطوة، كما سنفهم عناصر الصفحة الرئيسية وهي: <html>, <head>, و <body>، بالإضافة إلى وثيقة الـ DOCTYPE التي توضح للمتصفح إصدار HTML المستخدم.
الهيكل الأساسي لصفحة HTML
الهيكل الأساسي لأي صفحة HTML يتكون من مجموعة من الوسوم التي تُعطي المتصفح تعليمات حول كيفية عرض المحتوى. هذه الوسوم تُحدد أقسام الصفحة المختلفة وتتيح للمتصفح فهم مكونات الصفحة. إليك كيفية كتابة هيكل بسيط لصفحة HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عنوان الصفحة</title>
</head>
<body>
<h1>مرحبا بك في صفحتي الأولى</h1>
<p>هذه هي الصفحة الأولى التي أكتبها باستخدام HTML.</p>
</body>
</html>دعونا الآن نشرح كل عنصر من هذه العناصر وما وظيفته في بناء صفحة HTML.
شرح عناصر <html>, <head>, <body>
وسم <html>
يُعتبر وسم <html> بمثابة الوعاء الرئيسي الذي يحتوي على جميع محتويات الصفحة. يتم وضع جميع العناصر التي تُكوّن صفحة الويب داخل هذا الوسم. هذا الوسم يُحدد بداية ونهاية الصفحة الإلكترونية ويُستخدم لتوضيح أن هذه الصفحة مكتوبة بلغة HTML.
داخل وسم <html>، يتم تقسيم الصفحة إلى قسمين رئيسيين:
- القسم الأول:
<head>، الذي يحتوي على معلومات ميتا وأشياء لا تظهر مباشرة للمستخدم. - القسم الثاني:
<body>، الذي يحتوي على المحتوى الفعلي الذي يُعرض على الشاشة.
وسم <head>
لقسم <head> يحتوي على معلومات الميتا (meta) الخاصة بالصفحة والتي تهم المتصفح ومحركات البحث. تشمل هذه المعلومات عنوان الصفحة، وصف الصفحة، الكلمات المفتاحية، وأي روابط لملفات خارجية مثل CSS أو JavaScript. العناصر الموجودة داخل <head> لا تظهر للمستخدم مباشرةً على الصفحة، بل هي معلومات تكميلية لتنسيق وفهم الصفحة.
<meta charset="UTF-8">: هذا السطر يُحدد الترميز المستخدم في الصفحة.UTF-8هو الترميز الأكثر شيوعًا ويُستخدم لدعم جميع الأحرف في اللغات المختلفة بما فيها اللغة العربية.<meta name="viewport" content="width=device-width, initial-scale=1.0">: هذا السطر يُستخدم لتحسين عرض الصفحة على الأجهزة المحمولة. يسمح للصفحة بأن تكون متجاوبة وتتكيف مع أحجام الشاشات المختلفة.<title>: هو عنوان الصفحة الذي يظهر في تبويب المتصفح عند فتح الصفحة. هذا العنوان مهم جدًا لأنه يُعبر عن محتوى الصفحة ويُستخدم من قبل محركات البحث لتصنيف الصفحة.
وسم <body>
الجزء الأكثر أهمية في أي صفحة HTML هو وسم <body>. هنا يتم وضع جميع المحتويات التي تُعرض للمستخدم على الصفحة، مثل النصوص، الصور، الأزرار، الروابط، والجداول. كل شيء يظهر على الشاشة للمستخدم يكون ضمن وسوم موجودة داخل <body>.
في المثال السابق، استخدمنا <h1> لكتابة عنوان رئيسي كبير يظهر على الصفحة، و <p> لكتابة فقرة نصية توضح بعض المعلومات.
يمكننا إضافة العديد من العناصر داخل وسم <body>، مثل قوائم، جداول، صور، روابط، وغيرها من العناصر التي تشكل الصفحة.
فهم وثيقة الـ DOCTYPE
الـ DOCTYPE هو سطر يتم وضعه في أعلى كل صفحة HTML لتحديد نوع المستند وإصدار HTML المستخدم. هذا السطر ليس وسم HTML تقليدي، ولكنه إعلان للمتصفح حول إصدار HTML الذي سيتم استخدامه لعرض الصفحة.
الـ DOCTYPE يُستخدم لتفادي المشاكل التي قد تنتج عن اختلاف إصدارات HTML، ويضمن للمتصفح أنه يجب عرض الصفحة وفقًا للقواعد والمعايير الحديثة.
في الماضي، كانت هناك إصدارات متعددة من HTML مثل HTML 4.01 وXHTML، وكان لكل منها وثيقة DOCTYPE خاصة بها. مع إصدار HTML5، تم تبسيط هذا الأمر وأصبح السطر التالي هو الأكثر شيوعًا:
<!DOCTYPE html>هذا السطر يُخبر المتصفح أن الصفحة مكتوبة بلغة HTML5، وهو الإصدار الأحدث من HTML، والذي يتضمن العديد من الميزات الجديدة لدعم الصوت والفيديو والرسومات ثلاثية الأبعاد بشكل مباشر.
لماذا نحتاج إلى الـ DOCTYPE؟
- ضمان التوافق مع المتصفحات الحديثة: يساعد الـ
DOCTYPEالمتصفحات على تفسير الصفحات بطريقة متسقة ومتوافقة مع المعايير. - تفادي وضع “Quirks Mode”: إذا لم يتم تحديد الـ
DOCTYPEبشكل صحيح، قد يدخل المتصفح في وضع يُسمى “Quirks Mode”، حيث يعرض الصفحات بشكل غير متوقع ويقوم بتجاهل بعض المعايير القياسية.
مثال توضيحي لصفحة كاملة
لنلقِ نظرة على مثال كامل لصفحة HTML بسيطة تحتوي على الهيكل الأساسي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أول صفحة HTML</title>
</head>
<body>
<h1>مرحبًا بك في أول صفحة HTML</h1>
<p>هذه الفقرة توضح كيف يمكن إنشاء صفحة ويب بسيطة باستخدام HTML.</p>
<p>يمكنك إضافة المزيد من العناصر هنا.</p>
</body>
</html>الخاتمة
في هذا الدرس، تعلمنا كيفية إنشاء صفحة HTML بسيطة باستخدام الهيكل الأساسي للصفحة، كما فهمنا دور كل من العناصر الرئيسية مثل <html>, <head>, و <body>. بالإضافة إلى ذلك، تطرقنا إلى وثيقة الـ DOCTYPE وأهميتها في تحديد إصدار HTML المستخدم وضمان التوافق مع المتصفحات الحديثة.
في الدرس القادم، سنبدأ بالتعرف على الوسوم الأساسية الأخرى التي تُستخدم لتنسيق المحتوى داخل صفحة HTML، مثل الوسوم الخاصة بالنصوص، الروابط، والصور.
