شرح HTML للمبتدئين بالعربي — ما هي HTML وكيف تعمل؟
HTML هي أول شيء يجب أن تتعلمه إذا أردت إنشاء مواقع الويب. كل موقع تزوره على الإنترنت — من جوجل إلى يوتيوب — مبني على HTML. في هذا الدرس سنشرح بالبساطة الكاملة: ما هي HTML، كيف تعمل، وكيف تبدأ من الصفر.
ما هي HTML؟
HTML اختصار لـ HyperText Markup Language — أي "لغة ترميز النص التشعبي".
لا تخف من هذا الاسم الطويل. سنشرحه بمثال بسيط جداً:
تخيّل أنك تريد إعطاء تعليمات لشخص لا يرى ما تراه. تقول له: "هذا الكلام عنوان رئيسي، وهذا الكلام فقرة عادية، وهنا صورة". هذا بالضبط ما تفعله HTML — تُخبر المتصفح كيف يعرض المحتوى.
كل "تعليمة" في HTML تُسمى وسماً (Tag)، وتُكتب داخل أقواس مثل هذه: <p>
التعريف البسيط: HTML هي لغة نستخدمها لإخبار المتصفح (Chrome، Firefox...) ماذا يعرض وكيف يُنظّم المحتوى على الصفحة.
لماذا يجب أن تتعلم HTML؟
إذا كنت تريد تطوير مواقع الويب، فـ HTML هي نقطة البداية الوحيدة. لا يوجد أي مسار آخر. حتى لغات مثل CSS وJavaScript وPHP — كلها تعمل فوق HTML.
وأهم ما يميز HTML على باقي اللغات:
- لا تحتاج إلى تثبيت أي برنامج — المتصفح يكفي
- النتيجة تظهر فوراً أمام عينيك
- الأخطاء لا توقف الصفحة (المتصفح يتجاوزها)
- قواعدها بسيطة وسهلة الحفظ
كيف تبدو صفحة HTML؟ — أول مثال لك
إليك أبسط صفحة HTML في العالم. انظر إليها بهدوء:
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الأولى</title>
</head>
<body>
<h1>أهلاً بك في عالم البرمجة!</h1>
<p>هذه أول صفحة ويب أصنعها بنفسي.</p>
</body>
</html>
ما معنى كل سطر؟
لنقرأ هذا المثال سطراً سطراً كأننا نقرأ كتاباً:
| الوسم | ماذا يعني بالعربي؟ |
|---|---|
<!DOCTYPE html> |
أول سطر دائماً — يقول للمتصفح: "هذا ملف HTML5 حديث" |
<html> |
الغلاف الخارجي — كل محتوى الصفحة يوضع بداخله |
<head> |
معلومات خفية عن الصفحة (لا يراها الزائر مباشرة) |
<title> |
العنوان الذي يظهر في تبويب المتصفح |
<body> |
كل ما يراه الزائر — العناوين، الصور، النصوص... |
<h1> |
عنوان رئيسي كبير (h = heading أي عنوان) |
<p> |
فقرة نصية (p = paragraph أي فقرة) |
القاعدة الأهم في HTML — الفتح والإغلاق
كل وسم في HTML يعمل بنظام بسيط جداً: افتح ثم أغلق.
تماماً مثل قوس الكتاب: تفتح قوساً ( ثم تُغلقه ).
<!-- فتح الوسم -->
<p>هذا النص داخل الوسم</p>
<!-- إغلاق الوسم: نفس الاسم + شرطة مائلة -->
الإغلاق يُكتَب بنفس اسم الوسم مع إضافة / في البداية.
مثلاً: <p> تُفتح، و </p> تُغلق.
كيف يعمل HTML في المتصفح؟
العملية بسيطة جداً:
- تكتب كود HTML في ملف بامتداد
.html - تفتح الملف في المتصفح (Chrome مثلاً)
- المتصفح يقرأ الوسوم ويفهمها
- يعرض الصفحة بالشكل الصحيح أمامك
مثلاً: عندما يرى المتصفح <h1>عنوان</h1>، يعرف تلقائياً أن هذا عنوان رئيسي ويجعله كبيراً وغامقاً.
لا تحتاج أنت أن تقول له "اجعله كبيراً" — هو يفهم من الوسم.
ما الذي لا تفعله HTML؟
HTML تُحدّد هيكل الصفحة ومحتواها فقط. لو أردت تلوين النصوص وتنسيقها — ذلك عمل CSS. ولو أردت أزرار تتفاعل عند الضغط — ذلك عمل JavaScript.
الثلاثة معاً مثل بناء بيت:
- HTML = الهيكل والجدران والأسقف
- CSS = الطلاء والديكور والجمال
- JavaScript = الكهرباء والأبواب الأوتوماتيكية والتفاعل
هل HTML صعبة؟
HTML من أسهل ما ستتعلمه في مسيرتك البرمجية. لا منطق معقد، لا معادلات، لا حسابات. فقط وسوم بسيطة تكتبها وترى نتيجتها فوراً.
معظم الناس يستطيعون بناء صفحتهم الأولى خلال ساعة واحدة من البداية. والدليل؟ أنت الآن في درسك الأول — بعد هذا الكورس كله ستكون قادراً على بناء مواقع حقيقية.
ماذا ستتعلم في هذا الكورس؟
هذا الكورس مبني من الصفر خصيصاً للمبتدئين العرب. ستتعلم:
- بنية صفحة HTML الكاملة (الدرس القادم مباشرة)
- العناوين، الفقرات، والتنسيق الأساسي
- الروابط والصور
- القوائم والجداول
- النماذج والأزرار
- HTML التشاركية مع الوسائط (فيديو، صوت)
- وسوم HTML الدلالية لتحسين SEO
- مرجع شامل لكل وسوم HTML
الأسئلة الشائعة — FAQ
هل HTML لغة برمجة؟
تقنياً، HTML هي لغة ترميز وليست لغة برمجة. لغة البرمجة تحتوي على منطق (شروط، حلقات، دوال). HTML تحتوي فقط على وصف للمحتوى. لكن هذا لا يهمك كثيراً — ما يهم أنك ستتعلمها وتبني مواقع حقيقية.
كم يستغرق تعلم HTML؟
أساسيات HTML يمكنك إتقانها في أسبوع إلى أسبوعين بممارسة يومية. لكن الإتقان الحقيقي (HTML + CSS + JavaScript) يتطلب شهرين إلى ستة أشهر حسب وقتك.
هل أحتاج إلى كمبيوتر قوي لتعلم HTML؟
لا. أي كمبيوتر يعمل عليه متصفح يكفيك تماماً. حتى من الموبايل يمكنك تعلم HTML بالكود وفهم المفاهيم.
ما الفرق بين HTML و CSS؟
HTML تُحدّد ماذا يظهر على الصفحة (نص، صورة، جدول...). CSS تُحدّد كيف يبدو ذلك (ألوان، أحجام، مسافات...). تعمل الاثنتان معاً دائماً، لكن البداية دائماً بـ HTML.