حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

المدخل إلى HTML

الدرس الأول: مدخل إلى لغة HTML

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

يُركز هذا الدرس على تهيئة بيئة العمل وفهم البنية الهيكلية الأولية للكود. سيتم استعراض البرامج الأساسية المطلوبة، ثم تقديم أبسط هيكل كود صالح لصفحة HTML، والذي سيمثل نقطة الانطلاق لجميع الدروس اللاحقة.

ما هي لغة HTML؟

HTML هي اختصار لـ "HyperText Markup Language"، والتي تترجم إلى "لغة توصيف النص التشعبي". يتم تحليل هذا المصطلح كالتالي:

تحليل معنى الاسم

  • النص التشعبي (HyperText): يشير إلى مفهوم "الروابط" (Links) التي تتيح للمستخدم الانتقال من صفحة إلى أخرى.
  • التوصيف (Markup): تُعد HTML لغة "توصيف" وليست لغة "برمجة". هذا يعني أنها لا تتخذ قرارات منطقية، بل تقتصر وظيفتها على "وصف" المحتوى (مثل تحديد العناوين والفقرات) للمتصفح.
  • اللغة (Language): هي لغة تمتلك قواعد نحوية (Syntax) ومفردات (وسوم أو Tags) محددة يجب الالتزام بها لضمان عرضها بشكل صحيح.

دور HTML في تطوير الويب

تُعتبر HTML "الطبقة الهيكلية" (Structural Layer) لأي صفحة ويب. هي المسؤولة عن تحديد بنية المحتوى وتنظيمه (مثل تحديد العناوين، الفقرات، القوائم، والصور).

يتم استكمالها لاحقاً بتقنيات أخرى لبناء صفحة ويب كاملة:

  • CSS (Cascading Style Sheets): تُستخدم كـ "طبقة عرض" (Presentation Layer) للتحكم في الجوانب الجمالية مثل الألوان، الخطوط، والتخطيط.
  • JavaScript: تُستخدم كـ "طبقة سلوكية" (Behavioral Layer) لإضافة التفاعلية والوظائف الديناميكية إلى الصفحة.

لا يمكن تطبيق طبقات العرض أو السلوك بفاعلية دون وجود هيكل HTML صلب ومنطقي أولاً.

(توضيح): ما معنى "توصيف" (Markup)؟
التوصيف يعني أخذ نص عادي وإضافة "وسوم" (Tags) حوله لإعطائه معنى دلالي (Semantic) يفهمه المتصفح.
مثلاً، نص "هذا عنوان" هو نص مجرد.
لكن عند وضعه داخل وسوم <h1>هذا عنوان</h1>، فنحن "نصف" هذا النص للمتصفح بأنه "عنوان من المستوى الأول (الأكثر أهمية)".

لماذا HTML هي نقطة البداية؟

تُعد HTML الأساس الهيكلي لجميع تطبيقات الويب. فكل ما يتم عرضه في المتصفح، من أبسط صفحة نصية إلى أعقد التطبيقات، يعتمد في بنيته الأساسية على HTML.

HTML هي اللغة الرسمية للويب

المتصفحات (مثل كروم، فايرفوكس) مصممة بالأساس لقراءة وتفسير (Parse) ملفات HTML.

حتى عند استخدام تقنيات متقدمة لإنشاء المحتوى (مثل React أو Angular)، فإن الناتج النهائي الذي يتم إرساله إلى المتصفح لعرضه هو ملف HTML. لذلك، يُعد فهمها إلزامياً لأي مطور ويب.

لغة صريحة (Declarative)

طبيعة اللغة "صريحة"، حيث يتم إخبار المتصفح "بما" يجب عرضه، وليس "كيفية" عرضه.

  • لعرض عنوان: نستخدم وسم العنوان.
  • لعرض فقرة: نستخدم وسم الفقرة.
  • لعرض صورة: نستخدم وسم الصورة.

هذه الطبيعة الصريحة تجعلها مدخلاً مناسباً لفهم مفاهيم الويب، حيث لا تتطلب منطقاً برمجياً معقداً أو خوارزميات في مراحلها الأولية.

ما الفرق بين "لغة توصيف" و "لغة برمجة"؟

من الضروري التمييز بين هذين المفهومين لفهم نطاق وقدرات HTML.

لغة التوصيف (Markup Language) - مثل HTML

  • الوظيفة: البناء والهيكلة (Structure).
  • آلية العمل: "تصف" المحتوى الثابت للمتصفح (مثال: "هذا عنوان"، "هذه قائمة").
  • النتيجة: ثابتة (Static). الصفحة تعرض نفس الهيكل في كل مرة يتم تحميلها.

لغة البرمجة (Programming Language) - مثل JavaScript

  • الوظيفة: المنطق والأفعال (Logic & Actions).
  • آلية العمل: "تتخذ قرارات" وتنفذ أوامر (مثال: "إذا" نقر المستخدم على الزر، "فافعل" كذا. "احسب" ناتج العملية. "اجلب" بيانات متغيرة من الخادم).
  • النتيجة: ديناميكية (Dynamic). يمكن لمحتوى الصفحة أن يتغير بناءً على تفاعل المستخدم أو بيانات خارجية.

(سؤال): هل هذا يعني أن HTML أقل أهمية؟
الإجابة: إطلاقاً. لغة البرمجة (JavaScript) تحتاج إلى عناصر هيكلية (مبنية بـ HTML) لتتفاعل معها وتطبق عليها المنطق. فلا يمكن إضافة وظيفة (JavaScript) لزر غير موجود هيكلياً (HTML) في الصفحة.

ماذا أحتاج لأبدأ كتابة كود HTML؟

البدء في كتابة كود HTML لا يتطلب برامج متخصصة أو باهظة الثمن. جميع الأدوات الأساسية متوفرة غالباً على أي نظام تشغيل.

المتطلبات الأساسية تنحصر في:

  1. محرر نصوص (Text Editor): المكان المخصص لكتابة الكود.
  2. متصفح ويب (Web Browser): الأداة اللازمة لمعاينة (Render) الكود وعرض نتيجته.

تتم عملية التطوير بكتابة الكود في المحرر، ثم فتح الملف الناتج في المتصفح لمعاينة النتيجة.

البرامج المطلوبة: المحررات البسيطة

محرر النصوص هو برنامج يسمح بكتابة "نصوص عادية" (Plain Text). هذا يختلف جوهرياً عن برامج معالجة النصوص (مثل Microsoft Word) التي تضيف تنسيقات مخفية. كود HTML يجب أن يكون نصاً خاماً تماماً.

لمستخدمي نظام ويندوز (Windows)

يوجد برنامج مدمج يسمى "المفكرة (Notepad)".

يُعد هذا البرنامج كافياً للخطوات الأولى، ولكنه غير مناسب للاستخدام الاحترافي لافتقاره للميزات المساعدة (كتلوين الكود أو الإكمال التلقائي).

لمستخدمي نظام ماك (Mac)

يوجد برنامج مدمج يسمى "TextEdit".

عند استخدامه، يجب التأكد من تحويله إلى وضع "النص العادي" (Plain Text) من قائمة (Format -> Make Plain Text) قبل البدء، وإلا لن يعمل الكود.

(ملحوظة):
لا يُنصح بالاعتماد على هذه المحررات البسيطة لفترة طويلة. يُفضل الانتقال مباشرة إلى المحررات المتقدمة لزيادة الإنتاجية وتسهيل اكتشاف الأخطاء.

البرامج المطلوبة: المحررات المتقدمة (IDEs)

هذه هي الأدوات الاحترافية التي يستخدمها المطورون. تسمى "محررات الكود" (Code Editors) أو "بيئات التطوير المتكاملة" (IDEs).

هذه البرامج مصممة خصيصاً لكتابة الكود وتوفر ميزات مساعدة.

الميزات الأساسية لمحررات الكود

  • تلوين الأكواد (Syntax Highlighting): عرض أجزاء الكود المختلفة (الوسوم، النصوص، الخصائص) بألوان مميزة، مما يسهل القراءة واكتشاف الأخطاء.
  • الإكمال التلقائي (Auto-completion): اقتراح إكمال الوسوم تلقائياً (مثل كتابة </h1> عند كتابة <h1>)، مما يوفر الوقت ويقلل الأخطاء.
  • إدارة الملفات: عرض هيكل ملفات المشروع بالكامل في شريط جانبي لسهولة التنقل.

أشهر المحررات المتاحة

يوجد العديد من الخيارات، ولكن الخيار الأكثر شيوعاً والمجاني هو:

  • Visual Studio Code (أو VS Code):
    برنامج من إنتاج شركة مايكروسوفت. يُعد الخيار الموصى به حالياً للمبتدئين والمحترفين على حد سواء، نظراً لقوته ودعمه لجميع اللغات تقريباً عبر "الإضافات" (Extensions).
  • Sublime Text:
    محرر معروف بسرعته وخفته. يتطلب ترخيصاً مدفوعاً للاستخدام المستمر.
  • Notepad++:
    (لـ "ويندوز" فقط). هو ترقية جيدة لبرنامج المفكرة العادي، ويوفر الميزات الأساسية مثل تلوين الأكواد.

(توصية):
يُفضل البدء باستخدام "Visual Studio Code". لا يتطلب الأمر تعلم جميع ميزاته فوراً، بل يمكن استخدامه كمحرر نصوص متقدم في البداية.

البرامج المطلوبة: المتصفح (Browser)

هذا هو المكون الثاني الأساسي. المتصفح هو البرنامج الذي يقوم بـ "تفسير" (Parse) ملف الـ HTML الخاص بك وتحويله (Render) إلى صفحة ويب مرئية.

أمثلة على المتصفحات

  • Google Chrome (جوجل كروم)
  • Mozilla Firefox (موزيلا فايرفوكس)
  • Microsoft Edge (مايكروسوفت إيدج)
  • Safari (سفاري) (لأنظمة آبل)

اختيار المتصفح

للتصفح العام، جميعها تؤدي الغرض.

لأغراض التطوير والتعلم، يُنصح باستخدام Chrome أو Firefox لاحتوائهما على "أدوات مطورين" (Developer Tools) قوية (تُفتح بالضغط على F12)، والتي ستكون ضرورية لاحقاً لتنقيح الأخطاء وفحص الكود.

يقوم المتصفح بدور "المفسر" (Interpreter) الذي يترجم كود HTML إلى الواجهة الرسومية النهائية.

البنية الأساسية الأولى (الكود الأول)

الآن بعد تحديد الأدوات (المحرر والمتصفح)، حان الوقت لاستعراض البنية الأساسية لملف HTML.

هذا هو أبسط كود HTML يمكن كتابته، والذي يمثل صفحة ويب "صحيحة" وكاملة.

ملاحظة هامة: هذا الكود يمثل "القالب القياسي" (Boilerplate) لأي صفحة HTML. في هذا الدرس، سنقدمه كما هو. سيتم تخصيص الدرس القادم لشرح وظيفة كل سطر (مثل <!DOCTYPE>, <head>, <body>) بالتفصيل.

الكود الأساسي الأول (index.html) 

<!DOCTYPE html>
<html>

    <head>
        <title>هنا نكتب عنوان الصفحة (يظهر في التاب)</title>
    </head>

    <body>
        <h1>مرحباً بالعالم!</h1>
        <p>هذه أول صفحة ويب أقوم بإنشائها.</p>
    </body>

</html>

كيف أحفظ الملف وأشاهده؟

هذه هي الخطوة العملية لتحويل الكود المكتوب في "المحرر" إلى نتيجة مرئية في "المتصفح".

خطوات الحفظ (بالغة الأهمية)

تنطبق هذه الخطوات على أي محرر نصوص، مع اختلافات بسيطة في الواجهة.

  • (١) افتح برنامج المحرر (مثل Notepad أو VS Code).
  • (٢) قم بنسخ ولصق الكود الموجود في "القسم ٨" بالكامل داخل المحرر.
  • (٣) اذهب إلى قائمة "ملف" (File) ثم اختر "حفظ باسم" (Save As).
  • (٤) (خطوة حاسمة): سيظهر مربع حوار الحفظ:
    • في خانة "اسم الملف" (File name)، يجب كتابة اسم ينتهي بالامتداد ".html".
      مثال: index.html أو mypage.html
    • (في برنامج المفكرة Notepad تحديداً) في خانة "حفظ كنوع" (Save as type)، يجب تغييرها من "Text Documents (*.txt)" إلى "All Files (*.*)".
  • (٥) اختر مكاناً لحفظ الملف (مثل "سطح المكتب" - Desktop) واضغط "حفظ".

خطوات المعاينة (التشغيل)

  • (١) اذهب إلى الموقع الذي حفظت به الملف (سطح المكتب مثلاً).
  • (٢) ستجد ملفاً جديداً (مثل index.html) يحمل أيقونة المتصفح الافتراضي لديك.
  • (٣) قم بالنقر المزدوج (Double-click) على هذا الملف.
  • (٤) سيقوم المتصفح بفتح الملف وعرض محتواه المترجم.

(النتيجة المتوقعة):
إذا تم اتباع الخطوات السابقة بشكل صحيح، ستعرض صفحة الويب:

مرحباً بالعالم! (بخط عريض وكبير)
هذه أول صفحة ويب أقوم بإنشائها. (بخط عادي)

سيُظهر شريط علامة التبويب (Tab) في المتصفح النص: "هنا نكتب عنوان الصفحة".