HTML وCSS من الصفر: تعلم بناء موقعك الأول خطوة بخطوة

مارس 22, 2026

الكلمة الرئيسية: HTML وCSS من الصفر | Slug: /html-css-beginners-tutorial | الكلمات الثانوية: تعلم HTML بالعربي، CSS للمبتدئين، بناء موقع من الصفر، تصميم ويب، Flexbox للمبتدئين

HTML وCSS من الصفر: تعلم بناء موقعك الأول خطوة بخطوة

HTML وCSS هما اللبنة الأساسية لكل موقع ويب. HTML يُحدد المحتوى، CSS يُحدد الشكل والتصميم. معاً يُمكّنانك من بناء مواقع جميلة ومتجاوبة.

هذا المقال جزء من سلسلة تعلم البرمجة الشاملة — راجع الدليل الشامل لتعلم البرمجة من الصفر.

[إعلان AdSense — بعد المقدمة]

هيكل صفحة 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>

عناصر HTML الأساسية

<!-- عناوين -->
<h1>عنوان رئيسي</h1>
<h2>عنوان ثانوي</h2>

<!-- فقرة ورابط وصورة -->
<p>هذه فقرة نصية</p>
<a href="https://google.com">رابط لجوجل</a>
<img src="image.jpg" alt="وصف الصورة">

<!-- قوائم -->
<ul>
    <li>عنصر أول</li>
    <li>عنصر ثاني</li>
</ul>

<!-- نموذج -->
<form action="/submit">
    <input type="text" placeholder="اسمك">
    <button type="submit">إرسال</button>
</form>

[إعلان AdSense — منتصف المقال]

CSS: تنسيق الصفحة

/* أساسيات CSS */
body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

h1 {
    color: #e91e63;
    font-size: 2em;
    text-align: center;
}

.card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 20px auto;
    max-width: 600px;
}

/* تأثير Hover */
.btn {
    background: #e91e63;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn:hover {
    background: #c2185b;
}

Flexbox — تصميم متجاوب بسهولة

.container {
    display: flex;
    justify-content: space-between; /* توزيع أفقي */
    align-items: center;            /* محاذاة عمودية */
    flex-wrap: wrap;                /* لفّ على الشاشات الصغيرة */
    gap: 20px;
}

.item {
    flex: 1;         /* يأخذ المساحة المتاحة بالتساوي */
    min-width: 200px;
}

[إعلان AdSense — قبل الخاتمة]

الأسئلة الشائعة

هل HTML وCSS برمجة؟

HTML ليست لغة برمجة بل لغة توصيف. CSS هي لغة تنسيق. لكنهما أساس كل تطوير ويب ويجب إتقانهما أولاً.

كم يستغرق تعلم HTML وCSS؟

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

ابدأ الآن!

افتح Notepad أو VS Code، اكتب هيكل HTML، واحفظه كـ index.html، افتحه في المتصفح!

بحث هذه المدونة الإلكترونية

دليلك الشامل