هل تساءلت يوماً كيف تُبنى صفحات الويب؟ يشرح هذا المقال أساسيات HTML لإنشاء الهيكل و CSS لتنسيق المظهر، ويوضح كيف يعملان معاً لإنشاء المواقع التي تراها يومياً.
هل تساءلت يوماً كيف تنبض الحياة بمواقع الويب الرائعة التي تزورها يومياً؟ تُذكّرنا أخبار اليوم حول أسئلة مقابلات العمل الخاصة بـ HTML و CSS و Bootstrap بمدى أهمية هذه التقنيات لبناء الويب. لأي شخص يبدأ رحلته، فإن فهم HTML و CSS يشبه تعلم الأبجدية قبل أن تتمكن من كتابة قصة.
تخيل بناء منزل: HTML هو المخطط الأساسي والهيكل – الجدران والغرف والأبواب التي تمنح المنزل شكله. HTML، أو لغة ترميز النص التشعبي، يمنح صفحة الويب هيكلها العظمي، ويحدد العناوين («<h1>»)، والفقرات («<p>»)، والصور («<img>»)، والروابط («<a>»). تركز لغة HTML الحديثة على «الوسوم الدلالية» مثل «<header>» و «<nav>» و «<main>» و «<footer>». تخبر هذه الوسوم المتصفحات ومحركات البحث بنوع المحتوى الموجود بداخلها، مما يجعل موقع الويب الخاص بك أسهل للفهم لكل من البشر والآلات. على سبيل المثال، استخدام «<nav>» لروابط التنقل الخاصة بك أوضح من استخدام «<div>» عام. وتذكر أن «<div>» عادةً ما يشغل سطرًا كاملاً خاصًا به (عنصر من نوع الكتلة)، بينما يبقى «<span>» في نفس السطر (عنصر من نوع السطر).
ثم يأتي دور CSS، أو أوراق الأنماط المتتالية. إذا كان HTML هو هيكل المنزل، فإن CSS هو التصميم الداخلي – ألوان الدهان والأثاث والديكورات. يساعدك CSS على التحكم في مظهر عناصر HTML الخاصة بك. يمكنك استهداف عناصر معينة باستخدام «id» (لعنصر فريد، مثل رقم منزل، يتم تحديده بـ «#» في CSS) أو «class» (للعناصر التي تتشارك في نمط معين، مثل جميع الجدران المطلية باللون الأزرق، يتم تحديدها بـ «.» في CSS).
مفهوم حاسم في تخطيط CSS هو «نموذج الصندوق» (Box Model). تخيل كل عنصر HTML على صفحتك كصندوق مستطيل بأربع طبقات، من الداخل إلى الخارج:
1. المحتوى: النص أو الصورة الفعلية الخاصة بك.
2. الحشوة (Padding): المسافة *حول* المحتوى، ولكنها لا تزال *داخل* حدود العنصر.
3. الحدود (Border): الخط أو الإطار الذي يحيط بالحشوة والمحتوى.
4. الهوامش (Margin): المسافة *خارج* الحدود، التي تدفع العناصر الأخرى بعيدًا.
يساعدك فهم هذا على التحكم في المسافات والأحجام في صفحتك.
أخيرًا، تساعد «الخصوصية» (Specificity) في CSS على تحديد قاعدة النمط التي يجب تطبيقها عندما تتعارض قواعد متعددة. إنه نظام أولوية: النمط المضمّن (المكتوب مباشرة في وسم HTML) هو الأقوى، يليه نمط يستهدف «ID»، ثم «Class»، وأخيرًا اسم عنصر بسيط.
معًا، HTML و CSS هما الثنائي الديناميكي الذي يبني تقريباً كل موقع ويب تتفاعل معه، ويزوده بالهيكل والأسلوب.
تخيل بناء منزل: HTML هو المخطط الأساسي والهيكل – الجدران والغرف والأبواب التي تمنح المنزل شكله. HTML، أو لغة ترميز النص التشعبي، يمنح صفحة الويب هيكلها العظمي، ويحدد العناوين («<h1>»)، والفقرات («<p>»)، والصور («<img>»)، والروابط («<a>»). تركز لغة HTML الحديثة على «الوسوم الدلالية» مثل «<header>» و «<nav>» و «<main>» و «<footer>». تخبر هذه الوسوم المتصفحات ومحركات البحث بنوع المحتوى الموجود بداخلها، مما يجعل موقع الويب الخاص بك أسهل للفهم لكل من البشر والآلات. على سبيل المثال، استخدام «<nav>» لروابط التنقل الخاصة بك أوضح من استخدام «<div>» عام. وتذكر أن «<div>» عادةً ما يشغل سطرًا كاملاً خاصًا به (عنصر من نوع الكتلة)، بينما يبقى «<span>» في نفس السطر (عنصر من نوع السطر).
ثم يأتي دور CSS، أو أوراق الأنماط المتتالية. إذا كان HTML هو هيكل المنزل، فإن CSS هو التصميم الداخلي – ألوان الدهان والأثاث والديكورات. يساعدك CSS على التحكم في مظهر عناصر HTML الخاصة بك. يمكنك استهداف عناصر معينة باستخدام «id» (لعنصر فريد، مثل رقم منزل، يتم تحديده بـ «#» في CSS) أو «class» (للعناصر التي تتشارك في نمط معين، مثل جميع الجدران المطلية باللون الأزرق، يتم تحديدها بـ «.» في CSS).
مفهوم حاسم في تخطيط CSS هو «نموذج الصندوق» (Box Model). تخيل كل عنصر HTML على صفحتك كصندوق مستطيل بأربع طبقات، من الداخل إلى الخارج:
1. المحتوى: النص أو الصورة الفعلية الخاصة بك.
2. الحشوة (Padding): المسافة *حول* المحتوى، ولكنها لا تزال *داخل* حدود العنصر.
3. الحدود (Border): الخط أو الإطار الذي يحيط بالحشوة والمحتوى.
4. الهوامش (Margin): المسافة *خارج* الحدود، التي تدفع العناصر الأخرى بعيدًا.
يساعدك فهم هذا على التحكم في المسافات والأحجام في صفحتك.
أخيرًا، تساعد «الخصوصية» (Specificity) في CSS على تحديد قاعدة النمط التي يجب تطبيقها عندما تتعارض قواعد متعددة. إنه نظام أولوية: النمط المضمّن (المكتوب مباشرة في وسم HTML) هو الأقوى، يليه نمط يستهدف «ID»، ثم «Class»، وأخيرًا اسم عنصر بسيط.
معًا، HTML و CSS هما الثنائي الديناميكي الذي يبني تقريباً كل موقع ويب تتفاعل معه، ويزوده بالهيكل والأسلوب.
