هل فتحت يومًا أي موقع على الإنترنت وتساءلت: كيف تُبنى هذه الصفحة؟ الإجابة تبدأ بلغتين بسيطتين هما HTML وCSS. كل صفحة ويب تقريبًا، من أبسط مدونة إلى أكبر متجر إلكتروني، تعتمد عليهما في بناء المحتوى وتنسيق شكله. والخبر الجيد أنك لا تحتاج إلى خبرة سابقة ولا إلى برامج مدفوعة لتبدأ؛ يكفيك جهاز كمبيوتر ومحرر نصوص ومتصفح.
في هذا الدليل سنشرح تعلم HTML وCSS للمبتدئين خطوة بخطوة: ما الفرق بين اللغتين، وكيف تجهّز بيئة العمل، ثم نبني معًا أول صفحة ويب حقيقية باللغة العربية، مع أشهر الأخطاء وخطة عملية لما بعد البداية.
ما هي HTML وما هي CSS؟ الفرق بينهما ببساطة
HTML اختصار لـ HyperText Markup Language، وهي ليست لغة برمجة بالمعنى الدقيق بل لغة ترميز تصف بنية الصفحة: هذا عنوان، وهذه فقرة، وهذه صورة، وهذا رابط. تخيّلها كهيكل المبنى من جدران وأبواب ونوافذ.
أما CSS (Cascading Style Sheets) فهي لغة التنسيق التي تحدد الشكل: الألوان، والخطوط، والمسافات، وترتيب العناصر، وكيف تظهر الصفحة على شاشة الجوال مقارنة بالكمبيوتر. إذا كانت HTML هي الهيكل، فإن CSS هي الطلاء والديكور والأثاث.
وهناك لغة ثالثة ستسمع عنها كثيرًا هي JavaScript، وهي المسؤولة عن التفاعل والحركة داخل الصفحة. لكن نصيحتنا أن تتقن HTML وCSS أولًا، لأنهما الأساس الذي تقوم عليه كل خطوة لاحقة في تطوير الواجهات.
ماذا تحتاج لتبدأ؟
- محرر أكواد: نوصي بـ Visual Studio Code المجاني، وقد شرحناه بالتفصيل في دليل VS Code للمبتدئين. يمكنك أيضًا البدء بأي محرر نصوص بسيط.
- متصفح حديث: مثل Google Chrome أو Firefox أو Edge، وكلها تحتوي على أدوات المطور التي ستحتاجها لاحقًا.
- مجلد للمشروع: أنشئ مجلدًا باسم
my-first-siteعلى سطح المكتب، وسنضع فيه ملفاتنا.
لا تحتاج إلى استضافة أو اتصال دائم بالإنترنت للتجربة؛ الملفات تعمل مباشرة من جهازك عند فتحها في المتصفح.
الخطوة الأولى: أنشئ أول ملف HTML
داخل المجلد أنشئ ملفًا جديدًا باسم index.html، ثم اكتب فيه الهيكل الأساسي التالي:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحتي الأولى</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>مرحبًا بك في موقعي</h1>
<p>هذه أول صفحة ويب أصممها بنفسي.</p>
</body>
</html>لنفهم ما كتبناه سطرًا بسطر:
<!DOCTYPE html>يخبر المتصفح أن هذه صفحة HTML حديثة (HTML5).lang="ar" dir="rtl"يحدد أن لغة الصفحة عربية واتجاه الكتابة من اليمين إلى اليسار، وهي خطوة يغفل عنها كثير من المبتدئين العرب.<meta charset="UTF-8">يضمن ظهور الحروف العربية بشكل صحيح بدل الرموز الغريبة.- وسم
viewportيجعل الصفحة تتكيف مع شاشات الجوال. - كل ما داخل
<body>هو ما يراه الزائر فعليًا.
احفظ الملف ثم افتحه بالنقر المزدوج، وستراه في المتصفح. تهانينا، هذه أول صفحة ويب لك!
أهم وسوم HTML التي ستستخدمها يوميًا
الوسم (Tag) هو كلمة بين علامتي < و>، وغالبًا يأتي بوسم فتح ووسم إغلاق. هذه أكثر الوسوم استخدامًا:
- العناوين: من
<h1>إلى<h6>، واستخدمh1مرة واحدة فقط لعنوان الصفحة الرئيسي، وهذا مهم أيضًا لتحسين محركات البحث. - الفقرات:
<p>للنصوص العادية. - الروابط:
<a href="https://example.com">نص الرابط</a>. - الصور:
<img src="photo.jpg" alt="وصف الصورة">، ولا تنسَ خاصيةaltلأنها تساعد ضعاف البصر ومحركات البحث. - القوائم:
<ul>للقائمة النقطية و<ol>للمرقمة، وبداخلهما عناصر<li>. - الوسوم الدلالية:
<header>و<nav>و<main>و<section>و<footer>، وهي تقسّم الصفحة إلى أجزاء مفهومة للمتصفح ولمحركات البحث بدل الاعتماد على<div>في كل شيء.
الخطوة الثانية: أضف التنسيق بملف CSS
في نفس المجلد أنشئ ملفًا باسم style.css. لاحظ أننا ربطناه مسبقًا في ملف HTML عبر وسم <link>. اكتب فيه:
body {
font-family: Tahoma, Arial, sans-serif;
background-color: #f4f6fb;
color: #222;
line-height: 1.8;
margin: 0;
padding: 20px;
}
h1 {
color: #1a4fa0;
text-align: center;
}
p {
max-width: 700px;
margin: 0 auto 16px;
font-size: 18px;
}أعد تحميل الصفحة في المتصفح وسترى الفرق فورًا. قاعدة CSS تتكون من المحدد (مثل h1) ثم مجموعة خصائص وقيم بين قوسين معقوفين. يمكنك أيضًا استهداف عناصر محددة عبر الأصناف (Classes)، فتكتب في HTML مثلًا <p class="note"> ثم تنسقها في CSS بكتابة .note { ... }.
نموذج الصندوق Box Model: سر المسافات في CSS
كل عنصر في الصفحة هو صندوق مستطيل يتكون من أربع طبقات من الداخل إلى الخارج: المحتوى ثم الحشوة padding ثم الحد border ثم الهامش margin. فهم هذا النموذج يحل معظم مشكلات المبتدئين مع العناصر التي تبدو أكبر أو أصغر من المتوقع.
نصيحة عملية: أضف هذه القاعدة في بداية كل ملف CSS لتجعل حساب الأحجام أسهل وأكثر منطقية:
* {
box-sizing: border-box;
}الخطوة الثالثة: اجعل صفحتك متجاوبة مع الجوال
أغلب زوار المواقع العربية اليوم يتصفحون من الجوال، لذلك يجب أن تبدو صفحتك جيدة على الشاشات الصغيرة. أداتان ستساعدانك كثيرًا:
- Flexbox: لترتيب العناصر في صف أو عمود بسهولة، مثل قائمة التنقل أو مجموعة بطاقات:
display: flex; gap: 16px;. - استعلامات الوسائط Media Queries: لتغيير التنسيق حسب عرض الشاشة.
@media (max-width: 600px) {
h1 { font-size: 24px; }
p { font-size: 16px; }
}جرّب تصغير نافذة المتصفح أو افتح أدوات المطور بالضغط على F12 ثم فعّل وضع عرض الجوال لترى كيف تتغير الصفحة.
أخطاء شائعة يقع فيها المبتدئون
- نسيان إغلاق الوسوم: وسم مفتوح بلا إغلاق قد يفسد تنسيق الصفحة بالكامل.
- إهمال اتجاه الصفحة العربية: بدون
dir="rtl"ستظهر القوائم وعلامات الترقيم في أماكن خاطئة. - كتابة التنسيق داخل HTML: استخدام خاصية
styleفي كل عنصر يجعل الكود فوضويًا؛ افصل التنسيق في ملف CSS مستقل. - مسارات ملفات خاطئة: إذا لم تظهر الصورة أو لم يعمل CSS، فتأكد من اسم الملف وموقعه وحالة الأحرف.
- القفز إلى أطر العمل مبكرًا: أدوات مثل Bootstrap وTailwind مفيدة، لكن استخدامها قبل فهم الأساسيات يجعلك عاجزًا عن حل المشكلات بنفسك.
أدوات مطور المتصفح: معلمك المجاني
اضغط بزر الفأرة الأيمن على أي عنصر في أي موقع واختر «فحص» (Inspect). ستظهر لك أدوات المطور التي تعرض كود HTML الخاص بالعنصر وقواعد CSS المطبقة عليه، ويمكنك تعديل القيم مباشرة ومشاهدة النتيجة فورًا دون أن تؤثر على الموقع الحقيقي. هذه أفضل طريقة لتتعلم من المواقع التي تعجبك وتفهم كيف بُنيت.
مصادر مجانية وموثوقة للتعلم
- MDN Web Docs من Mozilla: المرجع الأدق لكل وسوم HTML وخصائص CSS، ويتوفر جزء منه بالعربية.
- freeCodeCamp: مسار تفاعلي مجاني لتصميم الويب المتجاوب مع شهادة عند الإتمام.
- web.dev من Google: دورات مجانية منظمة في HTML وCSS والأداء.
- W3Schools: شروحات مختصرة مع محرر تجريبي داخل المتصفح.
خطة عملية لأول 4 أسابيع
- الأسبوع الأول: أساسيات HTML والوسوم الدلالية، وابنِ صفحة تعريفية عن نفسك.
- الأسبوع الثاني: أساسيات CSS والألوان والخطوط ونموذج الصندوق، ونسّق صفحتك.
- الأسبوع الثالث: Flexbox وGrid والتصميم المتجاوب، وحوّل صفحتك إلى موقع من ثلاث صفحات مع قائمة تنقل.
- الأسبوع الرابع: النماذج (Forms) وتحسين الوصول، ثم ارفع مشروعك إلى GitHub وانشره مجانًا عبر GitHub Pages، وقد شرحنا ذلك في دليل Git وGitHub للمبتدئين.
بعدها تكون جاهزًا للانتقال إلى JavaScript، ثم التعرف على كيفية تواصل الواجهات مع الخوادم عبر واجهات البرمجة API. وإذا كنت ما زلت تحتار في المسار المناسب لك، فاطلع على دليل تعلم البرمجة للمبتدئين من الصفر.
الأسئلة الشائعة
هل HTML لغة برمجة؟
لا، HTML لغة ترميز تصف بنية المحتوى، ولا تحتوي على منطق أو شروط أو حلقات مثل لغات البرمجة. لكنها الخطوة الأولى الطبيعية في عالم تطوير الويب.
كم يستغرق تعلم HTML وCSS؟
يمكنك فهم الأساسيات وبناء صفحات بسيطة خلال أسبوعين إلى أربعة أسابيع بممارسة يومية قصيرة، أما الإتقان الحقيقي فيأتي مع بناء مشاريع متنوعة على مدى عدة أشهر.
هل أستطيع التعلم من الجوال؟
يمكنك القراءة والتجربة البسيطة عبر المحررات الإلكترونية، لكن الكمبيوتر يبقى الخيار الأفضل للعمل الفعلي ولاستخدام أدوات المطور بشكل مريح.
الخلاصة
تعلم HTML وCSS هو أسهل باب للدخول إلى عالم تطوير الويب، ونتائجه تظهر أمامك فورًا في المتصفح، وهذا ما يجعله ممتعًا ومحفزًا. ابدأ اليوم بالصفحة البسيطة التي بنيناها في هذا الدليل، وأضف إليها كل يوم شيئًا جديدًا: صورة، أو قائمة، أو قسمًا متجاوبًا. بعد أسابيع قليلة ستندهش مما أصبحت قادرًا على بنائه بنفسك.
