كيف تبدأ مع HTML و CSS — دليل إعداد البيئة 2026

HTML و CSS هما أساس كل موقع على الإنترنت. HTML يبني الهيكل، و CSS تضيف التصميم. قبل أن تتعلم JavaScript أو React، يجب أن تبدأ من هنا.

في هذا الدليل العملي، سنأخذك خطوة بخطوة لإعداد بيئة العمل وبدء أول مشروع ويب، مع حل المشاكل الشائعة.

ما هو HTML؟

HTML اختصار لـ HyperText Markup Language (لغة ترميز النص التشعبي).

تشبيه بسيط: تخيل أن الموقع منزل:

• HTML هو الهيكل (الجدران، الأبواب، النوافذ).
• CSS هو الديكور (الألوان، الأثاث، الإضاءة).
• JavaScript هي الكهرباء (التفاعل، الحركة).

HTML ليس لغة برمجة — إنه لغة ترميز (Markup). لا يحتوي على منطق أو حسابات، بل يصف بنية المحتوى.

مثال بسيط:

<h1>مرحباً بالعالم!</h1>
<p>هذه فقرة نصية.</p>

ما هو CSS؟

CSS اختصار لـ Cascading Style Sheets (أوراق الأنماط المتتالية).

CSS تُجمّل HTML:

• الألوان.
• الخطوط.
• المسافات.
• التخطيط (Layout).
• الحركات (Animations).

مثال بسيط:

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

لماذا نبدأ بـ HTML و CSS؟

• الأساس: كل موقع يستخدمهما.
• سهل: لا يحتاج منطق برمجي.
• فوري: تظهر النتيجة مباشرة.
• ممتع: ترى إبداعك فوراً.
• ضروري: للانتقال إلى JavaScript.

ما ستحتاجه

المتطلب	التفاصيل
جهاز كمبيوتر	ويندوز 10/11 أو ماك أو لينكس
متصفح حديث	Chrome, Firefox, Safari, Edge
VS Code	محرر الأكواد (مجاني)
وقت	15-20 دقيقة للإعداد

✅ لا تحتاج إلى Node.js أو أي تثبيت معقد!

الجزء الأول: تثبيت VS Code

لماذا VS Code؟

• ✅ مجاني ومفتوح المصدر.
• ✅ الأكثر شعبية بين المطورين.
• ✅ إضافات غنية.
• ✅ يدعم كل اللغات.

الخطوات:

1. اذهب إلى: code.visualstudio.com
2. اضغط Download.
3. اختر النسخة المناسبة:
   • Windows: Windows Installer (64-bit).
   • macOS: Apple Silicon أو Intel.
   • Linux: .deb أو .rpm.
4. شغّل ملف التثبيت.
5. ⚠️ مهم (ويندوز): في نافذة التثبيت، ضع علامة صح على:
   • ☑️ Add to PATH
   • ☑️ Register Code as an editor for supported file types
6. اضغط Install.
7. بعد الانتهاء، افتح VS Code.

تأكد من التثبيت:

افتح Terminal، واكتب:

code --version

النتيجة المتوقعة:

1.85.0
...

إذا ظهرت رسالة 'code' is not recognized — راجع قسم "حل المشاكل" أدناه.

الجزء الثاني: تثبيت إضافة Live Server

Live Server هي إضافة تُحدّث المتصفح تلقائياً عند حفظ الملف. لا تحتاج إلى تحديث يدوي!

الخطوات:

1. افتح VS Code.
2. اضغط Ctrl + Shift + X (أو Cmd + Shift + X على ماك).
3. ابحث عن Live Server.
4. اختر الإضافة التي طورها Ritwick Dey (الأكثر تحميلاً).
5. اضغط Install.

إضافات أخرى مفيدة:

الإضافة	الوظيفة
Live Server	معاينة فورية
Prettier	تنسيق الكود
Auto Rename Tag	إعادة تسمية الوسوم تلقائياً
HTML CSS Support	إكمال تلقائي
Path Intellisense	إكمال المسارات
Material Icon Theme	أيقونات جميلة

الجزء الثالث: إنشاء أول مشروع

الخطوة 1: إنشاء المجلد

1. افتح VS Code.
2. اذهب إلى File → Open Folder.
3. أنشئ مجلداً جديداً باسم my-first-website.
4. اختر المجلد.

الخطوة 2: إنشاء ملف index.html

⚠️ مهم: اسم الملف يجب أن يكون index.html — هذا هو الملف الافتراضي الذي يبحث عنه المتصفح.

1. في VS Code، اضغط Ctrl + N لإنشاء ملف جديد.
2. احفظه باسم index.html (Ctrl + S).

⚠️ لاحظ: VS Code سيضيف أيقونة HTML تلقائياً.

الخطوة 3: كتابة أول كود

اكتب في الملف:

<!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>
</head>
<body>
  <h1>مرحباً بالعالم! 👋</h1>
  <p>هذا أول موقع ويب لي.</p>
</body>
</html>

احفظ الملف (Ctrl + S).

الخطوة 4: شرح الكود

السطر	الشرح
<!DOCTYPE html>	يخبر المتصفح أن الملف HTML5
<html lang="ar" dir="rtl">	الوسم الجذر — اللغة العربية، الاتجاه من اليمين لليسار
<head>	معلومات الموقع (لا تُعرض)
<meta charset="UTF-8">	ترميز الأحرف (يدعم العربية)
<title>	عنوان الصفحة في التبويب
<body>	محتوى الصفحة (يُعرض)
<h1>	عنوان رئيسي
<p>	فقرة نصية

الخطوة 5: تشغيل Live Server

هناك 3 طرق:

1. بالفأرة: انقر بزر الفأرة الأيمن على index.html → Open with Live Server.

2. من الشريط السفلي: اضغط على Go Live في أسفل VS Code.

3. بالاختصار: Alt + L ثم Alt + O (قد يختلف حسب النظام).

النتيجة: سيفتح المتصفح على:

http://127.0.0.1:5500/index.html

🎉 مبروك! موقعك الأول يعمل!

الخطوة 6: جرّب Live Reload

1. ارجع إلى VS Code.
2. عدّل <h1> إلى:

<h1>مرحباً بالعالم! 🌍✨</h1>

3. احفظ الملف (Ctrl + S).

النتيجة: المتصفح سيُحدّث تلقائياً بدون تدخل منك! 🚀

الجزء الرابع: إنشاء ملف CSS

الخطوة 1: إنشاء ملف style.css

1. في VS Code، اضغط Ctrl + N.
2. احفظه باسم style.css في نفس المجلد.

الخطوة 2: ربط CSS بـ HTML

افتح index.html وأضف داخل <head>:

<link rel="stylesheet" href="style.css">

الشكل النهائي:

<!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>

الخطوة 3: أضف تنسيقاً

افتح style.css واكتب:

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  color: white;
  text-align: center;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

p {
  font-size: 1.25rem;
  opacity: 0.9;
}

احفظ الملف.

النتيجة: ستظهر صفحة جميلة بتصميم متدرج! 🎨

الجزء الخامس: بنية المشروع

بعد إتمام كل شيء، سيكون لديك:

my-first-website/
├── index.html      ← صفحة الموقع
└── style.css       ← التنسيقات

هذا كل شيء! مشروع ويب بسيط يحتوي على ملفين فقط.

مع تقدمك، ستضيف:

my-first-website/
├── index.html
├── about.html
├── contact.html
├── css/
│   ├── style.css
│   └── responsive.css
├── images/
│   ├── logo.png
│   └── hero.jpg
└── js/
    └── script.js

حل المشاكل الشائعة

🔴 المشكلة 1: 'code' is not recognized

السبب: VS Code غير مضاف إلى PATH.

الحل (ويندوز):

1. افتح VS Code.
2. اضغط Ctrl + Shift + P.
3. اكتب: Shell Command: Install 'code' command in PATH.
4. اضغط Enter.
5. أعد تشغيل Terminal.

الحل (ماك):

1. افتح VS Code.
2. اضغط Cmd + Shift + P.
3. اكتب: Shell Command: Install 'code' command in PATH.
4. اضغط Enter.

🔴 المشكلة 2: Live Server لا يعمل

السبب: لم تُثبّت الإضافة، أو لم تفتح مجلداً.

الحل:

1. تأكد من تثبيت Live Server.
2. تأكد من فتح مجلد (وليس ملفاً).
3. تأكد من أن اسم الملف index.html.

🔴 المشكلة 3: الحروف العربية تظهر كرموز

السبب: لم تُحدّد charset="UTF-8".

الحل: تأكد من وجود:

<meta charset="UTF-8">

🔴 المشكلة 4: CSS لا يعمل

السبب: المسار خاطئ، أو الملف غير محفوظ.

الحل:

1. تأكد من وجود <link> داخل <head>.
2. تأكد من أن href="style.css" (بدون / في البداية).
3. تأكد من أن الملفين في نفس المجلد.

🔴 المشكلة 5: المنفذ 5500 مشغول

السبب: سيرفر آخر يعمل.

الحل: أغلق Live Server، أو غيّر المنفذ من إعدادات الإضافة.

إعدادات VS Code الموصى بها

افتح VS Code → File → Preferences → Settings، وابحث عن:

• Format On Save: ☑️ فعّلها (تنسيق تلقائي عند الحفظ).
• Word Wrap: on (لرؤية الأسطر الطويلة).
• Tab Size: 2 (2 مسافات).

أو أضف هذا الملف settings.json (في .vscode/):

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay"
}

جدول الإضافات الأساسية

الإضافة	الوظيفة	الأهمية
Live Server	معاينة فورية	⭐⭐⭐⭐⭐
Prettier	تنسيق الكود	⭐⭐⭐⭐⭐
Auto Rename Tag	إعادة تسمية الوسوم	⭐⭐⭐⭐
HTML CSS Support	إكمال تلقائي	⭐⭐⭐⭐
Material Icon Theme	أيقونات ملفات	⭐⭐⭐

قائمة تحقق نهائية

المهمة	الحالة
تثبيت VS Code	⬜
تثبيت Live Server	⬜
إنشاء مجلد المشروع	⬜
إنشاء index.html	⬜
فتح Live Server	⬜
إنشاء style.css	⬜
رؤية الصفحة في المتصفح	⬜

ماذا بعد الإعداد؟

الآن بعد أن أصبحت بيئة العمل جاهزة، حان وقت التعلم:

1. أول صفحة HTML — تعمق في الوسوم.
2. النصوص والقوائم — العناوين، الفقرات، القوائم.
3. الصور والروابط — إضافة الوسائط.
4. CSS — التصميم والأنماط.

الخلاصة

إعداد بيئة HTML و CSS بسيط جداً. أهم النقاط:

• ✅ VS Code: محرر مجاني واحترافي.
• ✅ Live Server: معاينة فورية بدون تحديث يدوي.
• ✅ HTML: يبني الهيكل.
• ✅ CSS: يضيف التصميم.
• ✅ index.html: الملف الافتراضي.

تذكر: HTML و CSS أساس كل موقع. لا تستعجل، وطبّق كل درس.

هل أنشأت أول موقع لك؟ شاركنا في التعليقات!