HTML وCSS: أساسيات بناء صفحة ويب سليمة

 

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

كيف تتكون صفحة HTML؟

HTML ليست لغة برمجة تحسب وتقرر، بل لغة وصف تخبر المتصفح بما تحتويه الصفحة. وبنيتها بسيطة جدًا:

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

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

• الهيكل الأساسي: كل صفحة تحوي تعريف نوع الوثيقة، وعنصر الجذر html، ثم head للمعلومات الوصفية كالعنوان والترميز، وbody للمحتوى المرئي.

• الترميز: اضبط الترميز UTF-8 في head حتى تظهر العربية صحيحة، وحدد لغة الصفحة واتجاهها بسمات في عنصر الجذر. وقد خصصنا لهذا مقالًا مستقلًا في دعم العربية.

• التداخل: العناصر تتداخل كالصناديق، فعنصر داخل عنصر. ويجب إغلاقها بترتيب صحيح، فما فُتح أخيرًا يُغلق أولًا.

• التعليقات: يمكنك كتابة ملاحظات لا تظهر للزائر، وهي مفيدة لتوضيح أقسام الصفحة.

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

كيف تختار الوسوم بحسب المعنى؟

من أكثر ما يميز المطور المتمكن اختيار الوسم المناسب لمعنى المحتوى، لا لشكله. وهذا ما يسمى HTML الدلالي، وفوائده كبيرة:

• العناوين: وسوم العناوين من h1 إلى h6 ترتب المحتوى هرميًا. استعمل h1 للعنوان الرئيسي مرة واحدة غالبًا، ولا تقفز بين المستويات لمجرد الحجم المرغوب.

• الفقرات والقوائم: استعمل وسم الفقرة للنصوص، والقوائم المرتبة وغير المرتبة للعناصر المتتابعة. فالقارئ الآلي يفهم أن هذه قائمة لا نصًا متقطعًا.

• عناصر البنية: header للرأس، وnav للتنقل، وmain للمحتوى الأساسي، وsection وarticle للأقسام والمقالات، وfooter للتذييل. وهي أوضح من عشرات div بلا معنى.

• الروابط والأزرار: الرابط للانتقال إلى صفحة أو موضع، والزر لتنفيذ إجراء. خلط الاثنين يربك لوحة المفاتيح وقارئات الشاشة.

• الصور: أضف دائمًا نصًا بديلًا يصف الصورة لمن لا يراها أو عند فشل التحميل، وانتبه لأبعادها وحجمها.

• النماذج: استعمل عناصر الإدخال المناسبة وربط كل حقل بتسميته، فيسهل ملؤها على الجميع وتتحسن تجربة الجوال.

• الجداول: للبيانات الجدولية الحقيقية فقط، لا لتنسيق الصفحة كما كان يحدث قديمًا.

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

كيف يعمل CSS في التنسيق؟

CSS يحدد مظهر العناصر: الألوان والخطوط والأحجام والمسافات والمواضع. ويعتمد على فكرة بسيطة: اختر عناصر، ثم حدد لها خصائص:

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

• المحددات: يمكن اختيار العناصر بنوعها أو بصنف (class) أو بمعرّف (id) أو بعلاقتها بغيرها. والأصناف هي الأكثر استعمالًا في التنظيم لأنها قابلة لإعادة الاستخدام.

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

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

• الوراثة: بعض الخصائص، كالخط واللون، تنتقل من العنصر إلى أبنائه، وبعضها لا ينتقل. وفهم ذلك يقلل التكرار.

• الوحدات: بكسل ثابت، ونسب مئوية ووحدات نسبية مثل rem وem تتكيف مع الإعدادات. والنسبية أنسب لإمكانية الوصول والتصميم المتجاوب.

• المتغيرات: تسمح بتعريف قيم مثل الألوان مرة واحدة واستعمالها في أماكن متعددة، فتعدل في موضع واحد.

• التنظيم: سمّ الأصناف بأسماء تصف الغرض لا الشكل، كاسم «زر-رئيسي» لا «أزرق-كبير»، لأن الشكل قد يتغير.

ما نموذج الصندوق وكيف تتحكم في المسافات؟

كل عنصر في الصفحة هو صندوق مستطيل. وفهم أجزاء هذا الصندوق يحل كثيرًا من ألغاز التنسيق:

• المحتوى: النص أو الصورة نفسها.

• الحشو (padding): مسافة بين المحتوى وحدود العنصر. يمنح المحتوى مساحة داخل الصندوق.

• الحدود (border): الإطار المحيط بالحشو، ويمكن ضبط سماكته ولونه ونمطه.

• الهامش (margin): مسافة خارج الحدود تفصل العنصر عن جيرانه. وقد تندمج الهوامش الرأسية المتجاورة في بعض الحالات، فلا تتفاجأ.

• حساب الحجم: افتراضيًا قد يُضاف الحشو والحدود إلى العرض المحدد، مما يكبر العنصر. ويستعمل كثير من المطورين ضبط حساب الحجم ليشمل الحشو والحدود فيكون الحجم المحدد هو الحجم النهائي.

• أنواع العرض: عناصر تأخذ سطرًا كاملًا، وعناصر تتبع النص في سطر واحد، وأخرى بنمط مرن. وتغيير ذلك يؤثر في ترتيب الصفحة.

• افحصها بالأدوات: أدوات المطور في المتصفح تعرض رسمًا للصندوق بمقاساته حين تحدد عنصرًا، وهذا أسرع طريق لفهم سبب المسافات الغريبة.

كيف ترتب العناصر في الصفحة؟

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

• التدفق الطبيعي: افتراضيًا ترتب العناصر من الأعلى إلى الأسفل بحسب ترتيبها. وكثير من التخطيط يعتمد على ترك هذا التدفق دون تدخل.

• Flexbox: لترتيب العناصر في صف أو عمود بمرونة، مع التحكم في المحاذاة والتوزيع والمسافات. وهو الأنسب لشرائط التنقل والبطاقات المتجاورة.

• Grid: لتخطيط ثنائي الأبعاد بصفوف وأعمدة معًا، وهو مناسب لتخطيط الصفحة الكامل أو المعارض. ويمكن استعماله مع Flexbox داخل الصفحة نفسها.

• التموضع (position): لوضع عناصر بإحداثيات، كزر عائم أو نافذة فوق المحتوى. استعمله بحذر لأنه يخرج العنصر من التدفق ويعقد التجاوب.

• الطفو (float): كان يستعمل للتخطيط، لكنه الآن للحالات الخاصة مثل التفاف النص حول صورة. تجنبه للتخطيط العام.

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

• ابدأ من الجوال: صمم أولًا لأصغر شاشة ثم وسّع، وهو ما سنفصله في مقال التصميم المتجاوب.

ما الأخطاء الشائعة وكيف تبني صفحتك الأولى؟

أخيرًا، تجنب هذه الأخطاء التي يقع فيها أغلب المبتدئين، ثم طبّق خطوات بناء صفحة بسيطة:

• استعمال div لكل شيء: يعمل ظاهريًا لكنه يفقد المعنى. استعمل الوسوم الدلالية حيث تنطبق.

• التنسيق داخل HTML: كتابة الألوان والأحجام في الوسوم يصعب الصيانة. افصل الشكل في CSS.

• تجاهل النص البديل للصور: يضر بإمكانية الوصول، ويفوت فرصة فهم المحتوى حين لا تُحمّل الصورة.

• أحجام ثابتة بالبكسل لكل شيء: تكسر التصميم على الشاشات المختلفة. اجمع بين الوحدات النسبية والحدود القصوى.

• نسيان الإعدادات الأساسية: وسم viewport للجوال والترميز واللغة والاتجاه، وغيابها يسبب مشكلات غريبة.

• عدم التحقق من الصحة: استعمل أدوات التحقق من HTML وأدوات المطور لتكتشف الإغلاق الخاطئ والأخطاء الصامتة.

• خطوات الصفحة الأولى: اكتب هيكلًا فيه header وmain وfooter، وأضف عنوانًا وفقرات وقائمة وصورة برابط، ثم اربط ملف CSS وحدد خطًا وألوانًا ومسافات، ثم جرب Flexbox لشريط تنقل. وافتحها على الجوال وعلى الحاسب.

أسئلة شائعة عن HTML وCSS

هل أحتاج إلى حفظ كل الوسوم؟

لا. تعلم الأساسية وراجع التوثيق للباقي. المهم أن تفهم الفكرة وتعرف متى تبحث. وتكرار الاستعمال يثبت الشائع منها.

هل HTML وCSS كافيان للحصول على وظيفة؟

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

هل أستعمل إطار CSS جاهزًا مثل Bootstrap أو Tailwind؟

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