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

هل تريد تعلم HTML و CSS من الصفر بالعربي؟ HTML هي اللغة الأساسية لبناء صفحات الويب، و CSS هي التي تُحدد شكلها وتصميمها. في هذا الدليل الشامل ستتعلم بناء موقعك الأول خطوة بخطوة مع أمثلة عملية وأكواد جاهزة للتطبيق.

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

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

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;
}

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

هل HTML وCSS برمجة؟

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

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

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

ابدأ الآن!

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

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

دليلك الشامل