HTML وCSS هما أساس كل موقع على الإنترنت. بدونهما لا يوجد ويب. في هذا الدليل ستبني أول صفحة ويب حقيقية خطوة بخطوة.
💡 HTML vs CSS
HTML هيكل الصفحة (المحتوى والترتيب)، وCSS التصميم (الألوان، الأحجام، الشكل). كلاهما ضروري معاً.
1. هيكل صفحة 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>
2. العناصر الأساسية في HTML
| العنصر | الاستخدام | مثال |
|---|---|---|
| h1-h6 | العناوين | <h1>عنوان رئيسي</h1> |
| p | فقرة نصية | <p>نص هنا</p> |
| a | رابط | <a href="url">نص</a> |
| img | صورة | <img src="photo.jpg" alt="وصف"> |
| div | حاوية | <div class="box">...</div> |
| ul/ol/li | قوائم | <ul><li>عنصر</li></ul> |
3. أساسيات CSS
/* اختيار العنصر وتطبيق التصميم */
h1 {
color: #0d1117;
font-size: 36px;
font-weight: bold;
text-align: center;
}
p {
color: #555;
font-size: 16px;
line-height: 1.8;
margin-bottom: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
4. Box Model — أساس التصميم
.card {
width: 300px;
padding: 20px; /* المسافة الداخلية */
margin: 16px; /* المسافة الخارجية */
border: 1px solid #e2e8f0;
border-radius: 12px;
background: white;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
5. Flexbox للتخطيط
.nav {
display: flex;
justify-content: space-between; /* توزيع العناصر */
align-items: center; /* محاذاة عمودية */
gap: 20px; /* مسافة بين العناصر */
}
.cards-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
6. الاستجابة للشاشات (Responsive)
/* للشاشات الصغيرة */
@media (max-width: 768px) {
.nav {
flex-direction: column;
}
h1 {
font-size: 24px;
}
.card {
width: 100%;
}
}
✅ الخطوة التالية
بعد إتقان HTML وCSS، تعلم JavaScript لإضافة التفاعل، ثم انتقل لـ React أو Vue لبناء تطبيقات ويب كاملة.