HTML & CSS
كيف تبدأ مع HTML و CSS — دليل إعداد البيئة 2026
📅 2026-10-20⏱ 8 دقائق قراءة
**HTML و CSS** هما **أساس كل موقع على الإنترنت**. HTML يبني **الهيكل**، و CSS تضيف **التصميم**. قبل أن تتعلم JavaScript أو React، يجب أن تبدأ من هنا.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لإعداد بيئة العمل وبدء أول مشروع ويب، مع حل المشاكل الشائعة.
## ما هو HTML؟
**HTML** اختصار لـ **HyperText Markup Language** (لغة ترميز النص التشعبي).
**تشبيه بسيط:** تخيل أن الموقع **منزل**:
- **HTML** هو **الهيكل** (الجدران، الأبواب، النوافذ).
- **CSS** هو **الديكور** (الألوان، الأثاث، الإضاءة).
- **JavaScript** هي **الكهرباء** (التفاعل، الحركة).
**HTML ليس لغة برمجة** — إنه **لغة ترميز** (Markup). لا يحتوي على منطق أو حسابات، بل **يصف** بنية المحتوى.
**مثال بسيط:**
```html
<h1>مرحباً بالعالم!</h1>
<p>هذه فقرة نصية.</p>
```
## ما هو CSS؟
**CSS** اختصار لـ **Cascading Style Sheets** (أوراق الأنماط المتتالية).
CSS **تُجمّل** HTML:
- الألوان.
- الخطوط.
- المسافات.
- التخطيط (Layout).
- الحركات (Animations).
**مثال بسيط:**
```css
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
```
## لماذا نبدأ بـ HTML و CSS؟
- **الأساس:** كل موقع يستخدمهما.
- **سهل:** لا يحتاج منطق برمجي.
- **فوري:** تظهر النتيجة مباشرة.
- **ممتع:** ترى إبداعك فوراً.
- **ضروري:** للانتقال إلى JavaScript.
## ما ستحتاجه
<table>
<thead>
<tr>
<th>المتطلب</th>
<th>التفاصيل</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>جهاز كمبيوتر</strong></td>
<td>ويندوز 10/11 أو ماك أو لينكس</td>
</tr>
<tr>
<td><strong>متصفح حديث</strong></td>
<td>Chrome, Firefox, Safari, Edge</td>
</tr>
<tr>
<td><strong>VS Code</strong></td>
<td>محرر الأكواد (مجاني)</td>
</tr>
<tr>
<td><strong>وقت</strong></td>
<td>15-20 دقيقة للإعداد</td>
</tr>
</tbody>
</table>
**✅ لا تحتاج إلى 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، واكتب:
```bash
code --version
```
**النتيجة المتوقعة:**
```bash
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**.
### إضافات أخرى مفيدة:
<table>
<thead>
<tr>
<th>الإضافة</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Live Server</strong></td>
<td>معاينة فورية</td>
</tr>
<tr>
<td><strong>Prettier</strong></td>
<td>تنسيق الكود</td>
</tr>
<tr>
<td><strong>Auto Rename Tag</strong></td>
<td>إعادة تسمية الوسوم تلقائياً</td>
</tr>
<tr>
<td><strong>HTML CSS Support</strong></td>
<td>إكمال تلقائي</td>
</tr>
<tr>
<td><strong>Path Intellisense</strong></td>
<td>إكمال المسارات</td>
</tr>
<tr>
<td><strong>Material Icon Theme</strong></td>
<td>أيقونات جميلة</td>
</tr>
</tbody>
</table>
## الجزء الثالث: إنشاء أول مشروع
### الخطوة 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: كتابة أول كود
**اكتب في الملف:**
```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>
</head>
<body>
<h1>مرحباً بالعالم! 👋</h1>
<p>هذا أول موقع ويب لي.</p>
</body>
</html>
```
**احفظ الملف** (`Ctrl + S`).
### الخطوة 4: شرح الكود
<table>
<thead>
<tr>
<th>السطر</th>
<th>الشرح</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><!DOCTYPE html></code></td>
<td>يخبر المتصفح أن الملف HTML5</td>
</tr>
<tr>
<td><code><html lang="ar" dir="rtl"></code></td>
<td>الوسم الجذر — اللغة العربية، الاتجاه من اليمين لليسار</td>
</tr>
<tr>
<td><code><head></code></td>
<td>معلومات الموقع (لا تُعرض)</td>
</tr>
<tr>
<td><code><meta charset="UTF-8"></code></td>
<td>ترميز الأحرف (يدعم العربية)</td>
</tr>
<tr>
<td><code><title></code></td>
<td>عنوان الصفحة في التبويب</td>
</tr>
<tr>
<td><code><body></code></td>
<td>محتوى الصفحة (يُعرض)</td>
</tr>
<tr>
<td><code><h1></code></td>
<td>عنوان رئيسي</td>
</tr>
<tr>
<td><code><p></code></td>
<td>فقرة نصية</td>
</tr>
</tbody>
</table>
### الخطوة 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>` إلى:
```html
<h1>مرحباً بالعالم! 🌍✨</h1>
```
3. احفظ الملف (`Ctrl + S`).
**النتيجة:** المتصفح سيُحدّث **تلقائياً** بدون تدخل منك! 🚀
## الجزء الرابع: إنشاء ملف CSS
### الخطوة 1: إنشاء ملف `style.css`
1. في VS Code، اضغط `Ctrl + N`.
2. احفظه باسم `style.css` في نفس المجلد.
### الخطوة 2: ربط CSS بـ HTML
**افتح `index.html`** وأضف داخل `<head>`:
```html
<link rel="stylesheet" href="style.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>
```
### الخطوة 3: أضف تنسيقاً
**افتح `style.css`** واكتب:
```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"`.
**الحل:** تأكد من وجود:
```html
<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/`):
```json
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay"
}
```
## جدول الإضافات الأساسية
<table>
<thead>
<tr>
<th>الإضافة</th>
<th>الوظيفة</th>
<th>الأهمية</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Live Server</code></td>
<td>معاينة فورية</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td><code>Prettier</code></td>
<td>تنسيق الكود</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td><code>Auto Rename Tag</code></td>
<td>إعادة تسمية الوسوم</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td><code>HTML CSS Support</code></td>
<td>إكمال تلقائي</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td><code>Material Icon Theme</code></td>
<td>أيقونات ملفات</td>
<td>⭐⭐⭐</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>تثبيت VS Code</td>
<td>⬜</td>
</tr>
<tr>
<td>تثبيت Live Server</td>
<td>⬜</td>
</tr>
<tr>
<td>إنشاء مجلد المشروع</td>
<td>⬜</td>
</tr>
<tr>
<td>إنشاء <code>index.html</code></td>
<td>⬜</td>
</tr>
<tr>
<td>فتح Live Server</td>
<td>⬜</td>
</tr>
<tr>
<td>إنشاء <code>style.css</code></td>
<td>⬜</td>
</tr>
<tr>
<td>رؤية الصفحة في المتصفح</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد الإعداد؟
الآن بعد أن أصبحت بيئة العمل جاهزة، حان وقت التعلم:
1. **أول صفحة HTML** — تعمق في الوسوم.
2. **النصوص والقوائم** — العناوين، الفقرات، القوائم.
3. **الصور والروابط** — إضافة الوسائط.
4. **CSS** — التصميم والأنماط.
## الخلاصة
إعداد بيئة HTML و CSS بسيط جداً. أهم النقاط:
- ✅ **VS Code:** محرر مجاني واحترافي.
- ✅ **Live Server:** معاينة فورية بدون تحديث يدوي.
- ✅ **HTML:** يبني الهيكل.
- ✅ **CSS:** يضيف التصميم.
- ✅ **index.html:** الملف الافتراضي.
**تذكر:** HTML و CSS **أساس كل موقع**. لا تستعجل، وطبّق كل درس.
**هل أنشأت أول موقع لك؟ شاركنا في التعليقات!**