HTML وCSS للمبتدئين: أول صفحة ويب لك

تعلم HTML وCSS من الصفر ببناء صفحة ويب كاملة خطوة بخطوة: العناوين والقوائم والروابط والألوان، مع كود جاهز تجربه في المتصفح.

كل صفحة ويب تراها مبنية من لغتين: HTML تحدد ما في الصفحة (عناوين، فقرات، صور، روابط)، وCSS تحدد شكلها (ألوان، خطوط، مسافات). تتعلمهما بلا تثبيت أي برنامج: يكفيك محرر نصوص عادي ومتصفح.

سنبني الآن صفحة كاملة بالعربية، ثم نشرح كل جزء لتعدّل عليه بنفسك.

ما تحتاجه

محرر نصوص: أي محرر يصلح، مثل Notepad في ويندوز أو TextEdit في ماك. ويُفضَّل لاحقاً محرر أكواد مجاني مثل VS Code.
متصفح: أي متصفح حديث.
مجلد جديد تحفظ فيه ملفك.

الخطوة الأولى: أنشئ الملف

أنشئ ملفاً اسمه index.html وانسخ فيه هذا الكود، ثم احفظه بترميز UTF-8 (وهو الافتراضي في أغلب المحررات الحديثة):

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صفحتي الأولى</title>
  <style>
    body {
      font-family: sans-serif;
      max-width: 640px;
      margin: 40px auto;
      padding: 0 16px;
      line-height: 1.8;
      color: #1e1b4b;
    }
    h1 { color: #5b21b6; }
    .card {
      background: #f5f3ff;
      border-radius: 12px;
      padding: 16px;
    }
    a { color: #5b21b6; }
  </style>
</head>
<body>
  <h1>مرحباً بك في صفحتي الأولى</h1>
  <p>هذه أول صفحة ويب أبنيها بنفسي.</p>
  <div class="card">
    <h2>عني</h2>
    <ul>
      <li>أتعلم HTML</li>
      <li>أتعلم CSS</li>
    </ul>
  </div>
  <p><a href="https://kianalathad.com">زر موقع كيان</a></p>
</body>
</html>

الخطوة الثانية: افتحها في المتصفح

انقر على الملف نقراً مزدوجاً، أو اسحبه إلى نافذة المتصفح. سترى صفحتك. كلما عدّلت الملف واحفظته، حدّث الصفحة في المتصفح لترى الأثر.

ماذا يعني كل جزء؟

<!DOCTYPE html> يعلن أن المستند صفحة HTML حديثة.
<html lang="ar" dir="rtl"> يحدد اللغة العربية واتجاه الكتابة من اليمين لليسار. بدونه قد تظهر الصفحة معكوسة الترتيب.
<head> معلومات عن الصفحة لا تظهر فيها: الترميز charset وعنوان التبويب title وإعداد الجوال viewport وأنماط CSS.
<body> كل ما يراه الزائر.
<h1> و<h2> عناوين، و<p> فقرة، و<ul> و<li> قائمة، و<a href="..."> رابط، و<div> صندوق لتجميع العناصر.
داخل <style> كود CSS: كل قاعدة تختار عنصراً (body أو h1 أو .card) وتحدد خصائصه بين الأقواس.

جرّب بنفسك

عدّل شيئاً واحداً في كل مرة وحدّث الصفحة:

غيّر لون العنوان في قاعدة h1.
غيّر قيمة border-radius لترى كيف تتغير زوايا الصندوق.
أضف بنداً جديداً إلى القائمة.
أضف فقرة جديدة وغيّر عنوان التبويب.
غيّر عرض max-width وشاهد أثره على عرض الصفحة.

وإن حدث خطأ فارجع إلى آخر نسخة عملت. وبعد أي تعديل ناجح احفظ نسخة منه.

أخطاء شائعة

نسيان إغلاق وسم مثل </p> أو </div> فتتشوه الصفحة.
حفظ الملف بترميز غير UTF-8 فتظهر الحروف العربية رموزاً غريبة.
نسيان dir="rtl" فتظهر علامات الترقيم في أماكن غير متوقعة.
نسيان حفظ الملف قبل تحديث المتصفح.
كتابة الاسم بامتداد خاطئ، مثل index.html.txt.

أسئلة شائعة

هل أحتاج لتعلم HTML وCSS قبل جافاسكربت؟

نعم، هذا هو الترتيب المعتاد: HTML للهيكل ثم CSS للتصميم ثم جافاسكربت للتفاعل.

كم أحتاج من الوقت لأتقن الأساسيات؟

يختلف من شخص لآخر. الأساسيات تُكتسب غالباً بالممارسة اليومية القصيرة خلال أسابيع، والإتقان يأتي بالمشاريع.

هل يمكنني نشر هذه الصفحة على الإنترنت؟

نعم. تحتاج استضافة، وبعض المنصات تتيح نشر الصفحات الثابتة مجاناً. راجع دليل الدومين والاستضافة وخيارات الموقع المجاني.

ما الخطوة بعد هذه الصفحة؟

اجعلها متجاوبة مع الجوال، ثم أضف صوراً وصفحة ثانية، ثم تعلم جافاسكربت لإضافة التفاعل.

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

الخطوة التالية

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

وإن احتجت موقعاً احترافياً بدل بنائه بنفسك، فاطّلع على خدمة تطوير المواقع أو تواصل معنا.