تعلم لغه HTML في 2026
شرح الدرس
المرفقات والأكواد
المناقشة
عناوين هذا الدرس
- مقدمة: ما هي لغة HTML؟
- كيف تعمل المتصفحات؟
- مفهوم الوسوم (Tags) والعناصر
- الهيكل الأساسي لأي صفحة ويب
- كتابة أول كود HTML
في هذا الدرس سنتعلم الأساسيات الصلبة:
- التعريف والوظيفة: لماذا تعتبر HTML العمود الفقري للإنترنت؟
- البنية التحتية: كيف يقرأ المتصفح الأكواد ويحولها لصفحة مرئية.
- التطبيق العملي: كتابة أول صفحة ويب كاملة وفهم كل سطر فيها.
مرحباً بك في عالم تطوير الويب. لغة HTML هي اللغة التي يتحدث بها العالم الرقمي. إذا كنت تطمح لتصبح مبرمجاً، فإن فهم هذه اللغة هو الخطوة الأولى.
أولاً: ما هي لغة HTML؟
هي اختصار لـ (HyperText Markup Language)، وظيفتها وصف هيكل الصفحة للمتصفح (مثل الهيكل العظمي للإنسان)، بينما لغة CSS هي "الشكل والملابس".
المفاهيم الأساسية
1. الوسم (Tag)
- هو الكلمة المحجوزة التي نكتبها بين قوسين < >.
- مثال:
<h1>للعنوان.
2. العنصر (Element)
- هو المكون الكامل: وسم البداية + المحتوى + وسم النهاية.
3. السمة (Attribute)
- معلومات إضافية نعطيها للعنصر لتغيير سلوكه (مثل رابط الصورة).
ثانياً: البنية الأساسية والكود
أي صفحة ويب يجب أن تحتوي على هيكل ثابت يقسم الصفحة إلى رأس وجسم.
Code الكود القياسي (Boilerplate)
index.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<!-- المعلومات الوصفية وإعدادات الصفحة -->
<meta charset="UTF-8">
<title>موقعي الأول</title>
</head>
<body>
<!-- محتوى الصفحة الظاهر للمستخدم -->
<h1>مرحباً بك في عالم الويب</h1>
<p>هذه أول فقرة أقوم بكتابتها باستخدام HTML.</p>
<button>اضغط هنا</button>
</body>
</html>تحليل الكود (شرح تفصيلي)
| الوسم (Tag) | الوظيفة والشرح |
|---|---|
| <!DOCTYPE html> | إعلان يخبر المتصفح أن الملف مكتوب بإصدار HTML5 الحديث. |
| <html> | العنصر الجذري (Root Element) الذي يضم كل شيء في الصفحة. |
| <head> | رأس الصفحة: يحتوي على "الكواليس" مثل العنوان (Title) وترميز اللغة، ولا يظهر محتواه وسط الصفحة. |
| <body> | جسم الصفحة: الحاوية لكل ما يراه المستخدم (نصوص، صور، فيديوهات). |
| <meta charset> | يحدد ترميز الحروف (UTF-8) ليسمح بظهور اللغة العربية والرموز بشكل صحيح. |
Tools نصائح وأدوات
- محرر الأكواد: استخدم VS Code لكتابة الأكواد باحترافية.
- المتصفح: استخدم Chrome أو Firefox للتجربة.
نصيحة ذهبية: البرمجة ممارسة وليست حفظاً. حاول كتابة الكود أعلاه بنفسك في ملف جديد لتثبيت المعلومة.