HTML & CSS
حجر الأساس في تطوير الويب: لغة HTML تبني هيكل الصفحة ومحتواها، ولغة CSS تمنحها الشكل والألوان والتنسيق المتجاوب. بإتقانهما تصبح قادرًا على تحويل أي تصميم إلى صفحة ويب حقيقية تعمل على جميع الأجهزة.
مقدمة تعريفية
ما هي لغتا بناء صفحات الويب ولماذا تبدأ بهما رحلتك في البرمجة.
كل موقع تراه على الإنترنت — من المدونات إلى المتاجر الكبرى — مبنيّ في جوهره من HTML (لغة ترميز النص التشعبي) وCSS (أوراق الأنماط المتتالية). تُعدّ هذه التقنية البوابة الأسهل لدخول عالم البرمجة، لأنها مرئية ومباشرة: تكتب سطرًا فتظهر نتيجته فورًا في المتصفح دون الحاجة إلى أدوات معقّدة.
تبدأ بكتابة الهيكل في ملف index.html، ثم تنسّقه عبر CSS، ولا تحتاج سوى متصفح ومحرّر نصوص بسيط للبدء. هذه القاعدة الصلبة هي ما ستبني عليه لاحقًا مهارات JavaScript وأطر العمل الحديثة.
الفرق بين HTML و CSS
كلٌّ منهما له دور محدّد، وفهم التقسيم بينهما يبني عقلية صحيحة للتطوير.
HTML — الهيكل والمحتوى
يحدّد «ماذا» يوجد في الصفحة: العناوين، الفقرات، الصور، الروابط، الأزرار والنماذج. فكّر فيه كـ«الهيكل العظمي» للصفحة الذي يرتّب المعلومات بشكل منطقي.
CSS — الشكل والتنسيق
يحدّد «كيف» تظهر الصفحة: الألوان، الخطوط، المسافات، التوزيع والاستجابة لأحجام الشاشات. هو «الملابس والمكياج» الذي يحوّل الهيكل إلى تصميم أنيق وجذّاب.
لماذا يجب تعلّم HTML & CSS؟
أسباب عملية تجعلها أول خطوة لا غنى عنها لأي مطوّر.
- البوابة الأولى للويب: لا يمكن بناء أي واجهة موقع دون فهمهما، مهما تقدّمت في المجال.
- نتائج فورية ومحفّزة: ترى أثر كل تعديل مباشرة في المتصفح، ما يسرّع التعلّم ويزيد الحماس.
- أساس لكل أطر العمل: React وVue وFlutter Web وغيرها جميعها تعتمد على مفاهيم HTML وCSS.
- فرص عمل واسعة: تطوير الواجهات الأمامية من أكثر المهارات طلبًا في سوق العمل.
- منخفض المتطلبات: لا يحتاج سوى متصفح ومحرّر نصوص مجاني للبدء فورًا.
أهم الاستخدامات
أين تُستعمل HTML و CSS في العالم الحقيقي.
المواقع التعريفية
مواقع الشركات والمحافظ الشخصية وصفحات الهبوط التسويقية.
واجهات المتاجر
عرض المنتجات والسلال وصفحات الدفع بتصميم متجاوب وجذّاب.
قوالب البريد
تصميم رسائل بريد إلكتروني منسّقة تعمل عبر مختلف برامج البريد.
لوحات التحكم
هيكلة واجهات الإدارة وعرض البيانات بشكل منظّم وواضح.
التطبيقات الهجينة
تطبيقات الويب التقدّمية (PWA) التي تعمل كتطبيقات على الجوال.
المدونات والأخبار
عرض المقالات بتنسيق قراءة مريح ومنظّم للمحتوى.
المهارات الأساسية المطلوبة
المفاهيم التي ينبغي إتقانها لبناء واجهات احترافية.
- عناصر HTML الدلالية: header وnav وmain وsection وarticle وfooter لبنية واضحة وصديقة لمحركات البحث.
- الصناديق والمسافات: فهم نموذج الصندوق (margin، padding، border) بدقّة.
- التخطيط الحديث: إتقان Flexbox وCSS Grid لتوزيع العناصر.
- التصميم المتجاوب: استخدام Media Queries والوحدات النسبية (%، rem، vw).
- المتغيرات والألوان: توظيف متغيّرات CSS لهوية بصرية موحّدة.
- إمكانية الوصول: النصوص البديلة وتباين الألوان وترتيب التركيز للوحة المفاتيح.
خارطة طريق للمبتدئ
خطوات متسلسلة تأخذك من الصفر إلى بناء موقع كامل.
تهيئة الأدوات
ثبّت محرّر VS Code وتعرّف على المتصفح وأدوات المطوّر فيه.
أساسيات HTML
تعلّم الوسوم الأساسية: العناوين، الفقرات، الصور، الروابط والقوائم.
أساسيات CSS
الألوان والخطوط والمسافات ونموذج الصندوق وطرق ربط الأنماط.
التخطيط
تمرّن على Flexbox وGrid لبناء تخطيطات صفحات حقيقية.
الاستجابة
اجعل الصفحة متجاوبة عبر Media Queries مع اختبارها على الجوال.
مشروع متكامل
ابنِ موقع محفظة شخصية واحدًا كاملًا وانشره عبر استضافة مجانية.
أمثلة عملية
أكواد قصيرة جاهزة للتجربة في أي محرّر.
عناصر HTML أساسية
هيكل بسيط يجمع عنوانًا وفقرة ورابطًا وصورة.
<h1>مرحبًا بالعالم</h1> <p>هذه أول فقرة في صفحتي.</p> <a href="https://example.com">زيارة الرابط</a> <img src="logo.png" alt="الشعار">
تنسيق عبر CSS
تلوين العنوان وتوسيط المحتوى وإضافة هامش.
h1 {
color: #ffd166;
text-align: center;
}
.box {
padding: 16px;
border-radius: 12px;
background: #0b1220;
}
تخطيط مرن (Flexbox)
توزيع ثلاثة عناصر بالتساوي في صفّ واحد.
.row {
display: flex;
gap: 14px;
justify-content: space-between;
}
.row > .col { flex: 1; }
تصميم متجاوب
تحويل الأعمدة إلى عمود واحد على الشاشات الصغيرة.
@media (max-width: 620px) {
.row { flex-direction: column; }
}
خطوات بناء أوّل موقع
من الملف الفارغ إلى صفحة منشورة على الإنترنت.
أنشئ ملف index.html
ابدأ بهيكل HTML الأساسي مع وسم doctype وhead وbody.
أضف المحتوى
اكتب العنوان والفقرات والصور والروابط داخل وسم body.
أنشئ ملف style.css
اربطه بالصفحة وابدأ بتنسيق الألوان والخطوط والتوزيع.
اجعله متجاوبًا
أضف Media Queries لاختبار الصفحة على مختلف الأحجام.
انشر الموقع
ارفعه عبر منصة استضافة ثابتة مثل Netlify وشارك الرابط.
أسئلة شائعة
أكثر ما يتساءل عنه المبتدئون حول HTML و CSS.
هل HTML و CSS لغتا برمجة؟
تقنيًا هما لغتا «ترميز ووصف» وليستا لغتي برمجة بالمعنى المنطقي (لا تحتويان على شروط وحلقات). لكنهما أساس لا غنى عنه قبل تعلّم لغة برمجة فعلية مثل JavaScript.
كم يستغرق تعلّمهما؟
يمكن إتقان الأساسيات خلال أسابيع قليلة بمعدّل ساعة يوميًا، أما الإتقان العميق للتخطيط والاستجابة فيأتي مع الممارسة على مشاريع حقيقية.
هل أحتاج إلى أدوات مدفوعة؟
لا. كل ما تحتاجه متصفح حديث ومحرّر نصوص مجاني مثل VS Code، إضافةً إلى منصة استضافة مجانية للنشر.
ما الفرق بين Flexbox و Grid؟
Flexbox مثالي للتوزيع في اتجاه واحد (صفّ أو عمود)، بينما Grid أقوى للتخطيطات ثنائية الأبعاد (صفوف وأعمدة معًا). يُستخدمان معًا غالبًا.
تابع رحلتك في البرمجة
انتقل إلى بقية المسارات التعليمية في قسم البرمجة.