الدرس الأول: إنشاء موقع إلكتروني بلغة HTML

تقوم الفكرة الأساسية لهذا الدرس على تعلم لغة ترميز النص التشعبي HTML والمخصصة لتصميم الصفحات والمواقع الإلكترونية. تعتمد البنية البرمجية على استخدام وسوم تأتي في صورة أزواج تضم وسْم بداية ووسْم نهاية يتضمن رمزا مائلا مثل الوسْم p والوسْم p مع رمز الإغلاق، حيث يكتب المقطع البرمجي داخل محرر مثل فيجوال ستوديو كود. يتكون المستند من قسمين رئيسيين هما قسم ترويسة المستند head وقسم المحتوى body الذي يحتوي على العناوين والفقرات. على سبيل المثال، لكتابة عنوان رئيسي نستخدم الوسْم h1 ثم نكتب النص ثم نغلق الوسْم بـ h1 مع رمز الإغلاق، ولإنشاء فقرة نصية نستخدم الوسْم p ونغلقه بـ p مع رمز الإغلاق.

الفكرة الأساسية

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

الشرح

لغة HTML تتكون من أجزاء تسمى الوسوم وتقع عادة في صورة أزواج تشمل وسْم بداية ووسْم نهاية يحتوي على الرمز المائل لكي يوقف تشغيل الأمر مثل الوسْم p والوسْم p المغلق. يتطلب العمل إنشاء مجلد رئيسي ومجلدات فرعية مثل images للصور وpages للصفحات، ثم استخدام محرر مثل فيجوال ستوديو كود لكتابة الأوامر البرمجية. يضم المستند وسوم أساسية تبدأ بالوسْم DOCTYPE ثم الوسْم html ثم قسم head الذي يحدد ترويسة المستند ويحتوي على الوسْم title لتحديد عنوان المستند والوسْم meta لتحديد كيفية تفسير المستند بواسطة المتصفح، يلي ذلك قسم body الذي يمثل الموضوع الرئيسي للصفحة وتقع فيه جميع النصوص والرسومات والعناصر الأخرى. لتنظيم النصوص نستخدم العناوين المتدرجة من الوسْم h1 إلى الوسْم h6 حيث يعتبر h1 أعلى مستوى، بينما نستخدم الوسْم p لتحديد الفقرات، والوسْم br لإدراج فاصل سطر واحد داخل النص.

مثال محلول خطوة بخطوة

لإنشاء صفحة ويب بسيطة تحتوي على عنوان وفقرة، نتبع الخطوات التالية:

1. افتح محرر فيجوال ستوديو كود وأنشئ ملفاً جديداً باسم Example.html داخل مجلد Pages.
2. اكتب وسْم تحديد نوع المستند في الصدارة هكذا: DOCTYPE html.
3. اكتب الوسْم html ثم أضف دلالة اتجاه النص ولغته هكذا: html dir="rtl" lang="ar".
4. افتح قسم الترويسة بالوسْم head، واكتب داخله الوسْم title لتحديد عنوان الصفحة ثم أغلقه، ثم أضف الوسْم meta، ثم أغلق قسم الترويسة بالوسْم head.
5. افتح قسم المحتوى بالوسْم body.
6. اكتب عنواناً رئيسياً باستخدام الوسْم h1 هكذا: h1 هذا عنوان! h1 مع وضع رمز الإغلاق.
7. اكتب فقرة نصية باستخدام الوسْم p هكذا: p هذه فقرة. p مع وضع رمز الإغلاق.
8. اغلق قسم المحتوى بالوسْم body ثم اغلق الوسْم html.

أخطاء شائعة

• نسيان إضافة رمز الوقف المائل داخل وسْم النهاية مثل كتابة الوسْم p بدلاً من إغلاقه بالشكل الصحيح.
• كتابة وسوم الترويسة أو المحتوى خارج الحاوية الرئيسية لوسم html.
• إهمال حفظ المستند بعد التعديل باستخدام الاختصار المناسب من لوحة المفاتيح.

سؤالان للتدريب مع الإجابة

السؤال الأول: ما هي وظيفة الوسْم p في لغة HTML؟ الإجابة: يحدد فقرة نصية. السؤال الثاني: ما هو الوسْم الذي يستخدم لتحديد عنوان المستند والذي يظهر في شريط العنوان في نافذة متصفح المواقع الإلكترونية؟ الإجابة: الوسْم title.