أساسيات HTML و CSS للمبتدئين بطريقة مبسطة
عند دخولك عالم تطوير الويب، ستصادف اسميْن يتكرران دائمًا: HTML و CSS.
هذان العنصران هما الأساس الذي يُبنى عليه أي موقع إلكتروني، مهما كان بسيطًا أو معقدًا.
قد يعتقد المبتدئ أن تعلم تصميم المواقع أمر صعب، لكن الحقيقة أن HTML و CSS من أسهل التقنيات للبدء في البرمجة، خصوصًا إذا تم شرحها بطريقة مبسطة وعملية.
في هذه التدوينة سنشرح:
- ما هي HTML و CSS؟
- ما الفرق بينهما؟
- أهم العناصر الأساسية لكل واحدة
- مثال عملي بسيط
- كيف تبدأ تطبيقك الأول؟
أولًا: ما هي HTML؟
تعريف HTML
HTML هي اختصار لـ:
HyperText Markup Language
وهي ليست لغة برمجة بالمعنى التقليدي، بل لغة توصيف تُستخدم لبناء هيكل صفحات الويب.
ماذا تفعل HTML؟
HTML مسؤولة عن:
- العناوين
- الفقرات
- الصور
- الروابط
- القوائم
- النماذج (Forms)
بعبارة بسيطة:
HTML هي هيكل الموقع (العظام).
ثانيًا: ما هي CSS؟
تعريف CSS
CSS هي اختصار لـ:
Cascading Style Sheets
وهي اللغة المسؤولة عن تنسيق وتصميم صفحات الويب.
ماذا تفعل CSS؟
CSS تتحكم في:
- الألوان
- الخطوط
- الأحجام
- المسافات
- ترتيب العناصر
- التصميم العام للموقع
بعبارة مبسطة:
CSS هي مظهر الموقع (الملابس).
ثالثًا: الفرق بين HTML و CSS (بأسلوب سهل)
| العنصر | HTML | CSS |
| الوظيفة | بناء الهيكل | تنسيق الشكل |
| تتحكم في | المحتوى | التصميم |
| مثال | عنوان – فقرة | لون – حجم – خط |
| تشبيه | الهيكل العظمي | المظهر الخارجي |
رابعًا: هيكل صفحة HTML الأساسية
أي صفحة HTML تبدأ بهيكل ثابت تقريبًا.
مثال بسيط:
<!DOCTYPE html>
<html>
<head>
<title>موقعي الأول</title>
</head>
<body>
<h1>مرحبًا بك في موقعي</h1>
<p>هذه أول صفحة HTML أقوم بإنشائها.</p>
</body>
</html>
شرح مبسّط:
- <!DOCTYPE html> يخبر المتصفح أن الملف HTML
- <html> بداية الصفحة
- <head> معلومات الصفحة
- <body> محتوى الموقع الذي يظهر للزائر
خامسًا: أهم عناصر HTML للمبتدئين
- العناوين (Headings)
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>
- الفقرات (Paragraphs)
<p>هذه فقرة نصية.</p>
- الروابط (Links)
<a href=”https://example.com”>زيارة الموقع</a>
- الصور (Images)
<img src=”image.jpg” alt=”صورة توضيحية”>
- القوائم (Lists)
<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
</ul>
سادسًا: كيف نضيف CSS إلى HTML؟
هناك 3 طرق، لكن للمبتدئين نبدأ بالأبسط.
الطريقة الأولى: داخل الوسم (Inline)
<p style=”color: red;”>نص باللون الأحمر</p>
الطريقة الثانية: داخل الصفحة (Internal)
<style>
p {
color: blue;
}
</style>
الطريقة الثالثة (الأفضل): ملف خارجي (External)
<link rel=”stylesheet” href=”style.css”>
سابعًا: أساسيات CSS للمبتدئين
مثال بسيط لملف CSS:
body {
background-color: #f5f5f5;
}
h1 {
color: #333;
font-size: 32px;
}
p {
color: #666;
font-size: 16px;
}
ماذا نلاحظ؟
- كل عنصر له تنسيق خاص
- التحكم بالألوان والخطوط سهل
- الكود منظم وواضح
ثامنًا: مثال تطبيقي كامل (HTML + CSS)
ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الأولى</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>مرحبًا بك</h1>
<p>هذا مثال بسيط لتعلم HTML و CSS.</p>
</body>
</html>
ملف CSS:
body {
text-align: center;
font-family: Arial;
}
h1 {
color: #2c3e50;
}
p {
color: #555;
}
تاسعًا: أخطاء شائعة يقع فيها المبتدئون
- نسيان إغلاق الوسوم
- الخلط بين HTML و CSS
- كتابة CSS داخل HTML دائمًا
- عدم تنظيم الملفات
- محاولة تعلم كل شيء دفعة واحدة
عاشرًا: ماذا بعد HTML و CSS؟
بعد إتقان الأساسيات يمكنك:
- تعلم JavaScript
- تصميم مواقع متجاوبة (Responsive)
- استخدام Bootstrap
- الدخول إلى تطوير الواجهات Front-End
خاتمة
HTML و CSS هما البوابة الأولى لعالم تطوير الويب.
سهلة التعلم، ممتعة، وتمنحك نتائج سريعة تشجّعك على الاستمرار.
لا تحاول أن تكون محترفًا من اليوم الأول، بل:
ابدأ ببناء صفحة بسيطة… وستتفاجأ بمدى تقدمك خلال وقت قصير.
🚀 الاستمرارية هي السر.
