HTML و CSS: حجر الأساس لشبكة الإنترنت بأكملها

كل ما نقوم به هنا في Coddy يرتكز على فكرة واحدة بسيطة: التعلم بالممارسة.

ألقِ نظرة على هذه العبارة. إنها مكتوبة بخط عريض، وبخط مائل، وهي أيضاً رابط قابل للنقر. أمر رائع، أليس كذلك؟ ولكن كيف ظهرت بهذا الشكل على شاشتك؟

بما أننا نكتب هذا المقال باستخدام محرر ماركداون (Markdown Editor)، فقد وضعنا نجمتين لجعل الخط عريضاً، ونجمة واحدة لجعله مائلاً، واستخدمنا صيغة [text] (url) لإنشاء الرابط.

لكن متصفحات الويب ليس لديها أدنى فكرة عن ماهية الماركداون (Markdown). فمتصفحات مثل Chrome وSafari وFirefox لا تفهم تلك النجوم أو الأقواس على الإطلاق. فخلف كل شيء تراه على الشاشة، يجب أن يتحول الأمر دائماً إلى شيئين فقط:

HTML (HyperText Markup Language) و CSS (Cascading Style Sheets).

ولجعل هذه العبارة نفسها تبدو عريضة، ومائلة، وقابلة للنقر في نفس الوقت، يبدو كود HTML كالتالي:

<a href="https://coddy.tech/landing"><strong><em>learn by doing</em></strong></a>

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

دعنا نلقي نظرة على كيف تدير هذه الأدوات العالم الرقمي، وكيف يمكنك إتقانها من خلال التجربة والبرمجة من اليوم الأول!

لماذا يبدأ كل موقع إلكتروني من هنا؟

تخيل أنك تبني منزلاً. لن تشتري أريكة فاخرة إذا لم يكن لديك سقف بعد، أليس كذلك؟ قبل أن تختار ألوان الطلاء والديكورات الجميلة، ستحتاج إلى الأساسيات الأولية: القواعد، والأعمدة الخشبية، والطوب الإسمنتي. فبدون جدران، لا وجود للمنزل.

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

ولكن لنكن منصفين، فإن المنزل المبني من الطوب الخام والأعمدة الخشبية فقط سيكون قبيحاً للغاية؛ فهو رمادي، وبارد، ولن يرغب أحد في السكن فيه، لأنه غير مكتمل تماماً. ولهذا السبب نحتاج إلى CSS (Cascading Style Sheets) لإصلاح ذلك وتجميله.

تأخذ لغة CSS هيكل HTML هذا وتجعله يبدو رائعاً. تقول CSS: 'لنحول هذا العنوان الكبير إلى اللون الأزرق اللامع. لنضع تلك الصورة في منتصف الشاشة تماماً. ولنعطِ هذا الزر شكلاً دائرياً جميلاً ونجعله يضيء عندما يمرر شخص ما مؤشر الماوس فوقه!' هكذا إذن تُبنى المواقع الإلكترونية.

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

الفخ: حفظ الوسوم (Tags) والمحددات (Selectors)

تشعر بحماس شديد لبناء أول موقع إلكتروني لك. ماذا يحدث بعد ذلك؟ حسناً، ربما تبحث عن كتاب ضخم مكون من 500 صفحة، أو ربما تجد قائمة تشغيل فيديو مدتها عشر ساعات على الإنترنت. ونتوقع أنك ستجلس، وتأخذ مشروبك المفضل، وتستعد لتصبح محترفاً.

في الساعات القليلة الأولى، ستشعر على الأرجح بشعور رائع، كبداية جديدة منعشة. يشرح المعلم ما هو وسم <h1> أو كيفية تغيير لون الخلفية، وربما تدون بعض الملاحظات أو تظلل بعض التعريفات. بل قد تجلس هناك وتفكر: 'يا لروعة، أنا أبلي بلاءً حسناً في هذا!'

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

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

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

عادة النسخ واللصق: لماذا قد تعيق تقدمك؟

من الأمور الشائعة الأخرى التي يمكن أن تحدث هي الوقوع في فخ عادة "النسخ واللصق". عندما تتابع درساً تعليمياً بالفيديو، قد يكون من السهل جداً كتابة ما يكتبه الشخص على الشاشة بالضبط. يبدو الكود الخاص بك مطابقاً لكوده، تضغط على حفظ، ويا للمفاجأة، إنه يعمل!

ولكن هل تفهم حقاً لماذا عمل الكود؟

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

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

إذا كنت قد نسخت هذا التخطيط فقط من درس تعليمي، فقد لا يكون لديك أي فكرة عن كيفية إصلاحه لأنك لم تبنِ المنطق الكامن وراءه بنفسك. لهذا السبب تحتاج على الأرجح إلى مساحة آمنة حيث يمكنك التجربة، وتغيير الأرقام، ورؤية التخطيط وهو يتعطل، وفهم كيفية عمل قواعد الويب بشكل مباشر وعملي.

شاهد الكود الخاص بك ينبض بالحياة، فوراً!

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

تخيل أنك تكتب <h1>My Awesome Website</h1> وترى عنواناً عريضاً يظهر على الجانب الأيمن من شاشتك في نفس الثانية التي تنتهي فيها من الكتابة. ثم تكتب h1 { color: orange; } وتشاهد هذا النص يتحول إلى اللون البرتقالي اللامع أمام عينيك مباشرة.

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

ماذا يحدث عندما يتعطل تخطيط صفحتك؟

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

عادةً ما تكون المشكلة شيئاً صغيراً جداً - مثل فاصلة منقوطة ; مفقودة في كود CSS أو خطأ إملائي في وسم HTML (tag). وعندما تحاول التعلم بمفردك تماماً باستخدام كتاب جامد أو مقطع فيديو، يمكن لهذه الأخطاء البرمجية الصغيرة (Bugs) أن توقف تقدمك لأيام. ومن السهل أن تشعر بالإحباط وتظن أن البرمجة صعبة للغاية بالنسبة لك.

لكن تخيل لو كان لديك مساعد صغير ودود يجلس بجانبك تماماً أثناء التدريب. كلما تعطل تخطيط HTML الخاص بك أو رفض الخط تغيير لونه، يمكنك ببساطة سؤال Bugsy، المساعد الذكي المدمج مباشرة في الدروس. لا يكتفي Bugsy بإعطائك الإجابة لتنسخها وتلصقها، بل يشير إلى الكود الخاص بك ويقول: "مهلاً، انظر إلى السطر 14! لقد نسيت إغلاق وسم HTML هناك"، أو "حاول التحقق من إعدادات الهامش (margin) في CSS لعنصر الصندوق (box element)".

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

طريقتان عمليتان لإتقان HTML و CSS

1. ابنِ مكونات HTML صغيرة

لماذا تتسرع في بناء موقع إلكتروني كامل من اليوم الأول؟ تنبيه حرق للأحداث (Spoiler): هذه أسرع طريقة للإصابة بصداع شديد! بدلاً من محاولة إنشاء تخطيط ضخم ومعقد في غضون أيام قليلة، لمَ لا تركز فقط على أجزاء صغيرة ومحددة؟

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

2. قم بتعطيل كود CSS الخاص بك عمداً

إليك هذا السر: التعامل بحذر شديد مع الكود الخاص بك يبطئ من تقدمك. كيف يفترض بك أن تتعلم كيف تعمل خصائص CSS المعقدة مثل الحشو (padding)، أو الهوامش (margins)، أو المحاذاة (alignment) إذا كان كل شيء يبدو دائماً... مثالياً؟

ماذا يحدث إذا أخذت تخطيط صندوق ممتاز وغيرت الحجم من 20 بكسل إلى 200 بكسل؟ تفضل، جرب ذلك! إلى أين طار النص الخاص بك؟ هل اختفى تماماً من الشاشة؟

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

الاستعداد لقراءة التوثيقات (Documentation)

بمجرد أن تشعر بالراحة في كتابة صفحات HTML الأساسية وتنسيقها باستخدام CSS، سيفتح لك باب جديد تماماً. ستبدأ في التطلع إلى مشاريع أكبر، وعندها ستلتقي بالصديق الحقيقي للمبرمج: التوثيقات البرمجية (programming documentation).

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

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

HTML و CSS تفتحان الباب لأكثر من 20 لغة برمجة

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

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

ولكن بمجرد إتقان فن بناء وتنسيق الصفحات، ستبدأ بطبيعة الحال في طرح أسئلة أكثر إثارة:

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

عندما تصل إلى هذه النقطة، فهنيئاً لك - لقد أصبحت مستعداً للغات مثل JavaScript أو Python أو PHP! ولأنك تعرف الأساس بالفعل، فإن تعلم لغة برمجة "حقيقية" يصبح أسهل بكثير. ستكون قادراً الآن على كتابة برمجيات (Scripts) للتحكم في صفحات الويب الجميلة التي تعرف بالفعل كيفية بنائها.

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

ابدأ في بناء جزءك الخاص من الويب اليوم

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

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

إذن، لماذا لا تزال تتصفح كل هذه المواقع الرائعة وتتساءل كيف تم إنشاؤها؟ اذهب واحصل على درس مصغر سريع، واكتب أول سطر HTML لك، وابدأ في بناء جزءك الخاص من الإنترنت اليوم!

ابنِ أول صفحة ويب لك اليوم