مقدمة إلى HTML

ما هو HTML؟

HTML (لغة ترميز النص التشعبي) هي اللغة القياسية لإنشاء صفحات الويب. إنها ليست لغة برمجة، بل لغة ترميز — فهي تستخدم الوسوم (tags) لإخبار المتصفح بكيفية عرض المحتوى.

كل صفحة ويب تراها، من المدونات البسيطة إلى منصات التجارة الإلكترونية المعقدة، مبنية باستخدام HTML في الأساس. يحدد HTML هيكل الصفحة: العناوين، الفقرات، الصور، الروابط، الجداول... "الهيكل العظمي" لكل شيء يُنشأ بواسطة HTML.

💡 تشبيه بسيط: تخيل صفحة الويب كمنزل. HTML هو الهيكل الإنشائي (الجدران، الأبواب، النوافذ)، CSS هو الديكور (الألوان، التنسيق)، وJavaScript هو النظام الكهربائي والسباكة (الميزات التفاعلية).

مستند HTML بسيط

كل مستند HTML يتكون من سلسلة من الوسوم. فيما يلي أبسط هيكل لمستند HTML:

HTML

<!DOCTYPE html>
### مثال
<html>
<head>
<title>موقعي الأول</title>
</head>
<body>
<h1>مرحباً بالعالم!</h1>
<p>هذه هي فقرتي الأولى.</p>
</body>
</html>

تحليل الكود

<!DOCTYPE html> — إعلان نوع المستند، يخبر المتصفح أن هذا مستند HTML5
<html> — العنصر الجذر لمستند HTML، كل شيء يوضع داخل هذه العلامة
<head> — منطقة رأس المستند، تحتوي على البيانات الوصفية (العنوان، الترميز، إلخ.)
<title> — يحدد عنوان الصفحة الذي يظهر في علامة تبويب المتصفح
<body> — منطقة جسم المستند، كل المحتوى المرئي يوضع هنا
<h1> — عنوان المستوى الأول، عادةً أكبر نص في الصفحة
<p> — علامة الفقرة، تستخدم لتغليف كتلة من النص

بناء جملة وسوم HTML

وسوم HTML عادةً ما تأتي في أزواج: وسم البداية و وسم النهاية:

HTML

<اسمالوسم>المحتوى هنا</اسمالوسم>

وسم البداية: <اسمالوسم> — أقواس زاوية تحيط باسم الوسم
وسم النهاية: </اسمالوسم> — مثل وسم البداية لكن مع شرطة مائلة
المحتوى: النص أو الوسوم الأخرى بين وسم البداية ووسم النهاية بعض الوسوم ليس لها محتوى وتسمى الوسوم الفارغة (void tags)، مثل علامة فاصل السطر <br> وعلامة الخط الأفقي <hr>.

✅ أفضل ممارسة: اكتب أسماء الوسوم بحروف صغيرة دائمًا. على الرغم من أن <TAGNAME> يعمل تقنيًا، إلا أن الحروف الصغيرة أكثر معيارية وقابلية للقراءة.

سمات HTML (Attributes)

يمكن أن تحتوي الوسوم على سمات لتوفير معلومات إضافية. تُكتب السمات في وسم البداية باستخدام الصيغة name="value":

HTML

<a href="https://www.example.com">هذا رابط</a>
<img src="/assets/images/tutorials/html-example-photo.webp" alt="صورة نموذجية">

href — عنوان URL الوجهة للرابط
src — مسار ملف الصورة
alt — نص بديل عندما لا يمكن تحميل الصورة (مهم لإمكانية الوصول)

⚠️ ملاحظة: يجب أن تُغلف قيم السمات بعلامات اقتباس. يُوصى باستخدام علامات الاقتباس المزدوجة " " للاتساق.

إصدارات HTML

مر HTML بعدة إصدارات منذ نشأته. نحن نستخدم حاليًا HTML5، أحدث معيار. قدم HTML5 العديد من الميزات الجديدة:

الوسوم الدلالية (<header> و <nav> و <article> وغيرها)
دعم الصوت والفيديو الأصلي (<audio> و <video>)
واجهة رسم Canvas
التخزين المحلي (localStorage)
دعم الصور المتجاوبة

📌 كن مطمئنًا: هذا البرنامج التعليمي مبني بالكامل على معيار HTML5. كل مفهوم تتعلمه حديث وجاهز للاستخدام.

أدوات التطوير

تحتاج فقط إلى شيئين لكتابة HTML:

محرر نصوص — VS Code (مجاني وخفيف)، Sublime Text، أو Notepad++
متصفح — Chrome، Edge، أو Firefox جميعها تعمل

اكتب الكود في محررك، احفظه كملف .html، ثم افتحه بالمتصفح — بهذه البساطة.

🚀 جرب بنفسك: افتح محرر النصوص الخاص بك، انسخ نموذج الكود أعلاه، احفظه باسم myfirst.html، ثم انقر نقرًا مزدوجًا لفتحه في المتصفح — لقد أنشأت للتو أول صفحة ويب لك!

❓ أسئلة شائعة

س ما الفرق بين HTML ولغات البرمجة؟ لماذا لا تعتبر HTML لغة برمجة؟

ج لغات البرمجة مثل Python وJava لديها متغيرات وحلقات تكرار ومنطق شرطي — يمكنها执行 حسابات واتخاذ قرارات. HTML ببساطة تصف هيكل الصفحة باستخدام الوسوم. ليس لديها منطق، لا تقوم بحسابات، لا تغير سلوكها. باختصار: لغات البرمجة "تفعل أشياء"، HTML "تصف كيف تبدو الأشياء".

س هل أحتاج إلى أي معرفة مسبقة لتعلم HTML؟ هل يمكنني تعلمه حتى لو لم أكن جيدًا في الإنجليزية؟

ج HTML هو أسهل نقطة دخول إلى البرمجة — لا حاجة لمعرفة مسبقة. ضعف اللغة الإنجليزية لن يعيقك. وسوم HTML تستخدم فقط بضع عشرة كلمة شائعة (مثل p لـ paragraph، h لـ heading)، وستحفظها من خلال الممارسة. الأهم هو فهم دلالات الوسوم ومنطق التداخل، وليس اللغة الإنجليزية.

س لماذا يجب أن يكون <!DOCTYPE html> في السطر الأول؟ ماذا يحدث إذا لم أضعه؟

ج بدون DOCTYPE، يدخل المتصفح في "وضع Quirks" — محرك عرض من التسعينيات يمكن أن يسبب مشاكل في التخطيط وأخطاء في CSS. DOCTYPE يخبر المتصفح بوضع العرض القياسي الحديث. ليس وسم HTML؛ هو تعليمة يجب أن تأتي قبل كل شيء آخر.

📖 ملخص

HTML هي لغة ترميز تستخدم الوسوم لوصف هيكل الصفحة، وليست لغة برمجة
كل مستند HTML يتبع هيكلًا ثابتًا: <!DOCTYPE html>، <html>، <head> + <body>
الوسوم عادةً ما تأتي في أزواج (بداية ونهاية)، وبعض الوسوم الفارغة ليس لها وسم نهاية
السمات توفر تكوينًا إضافيًا للوسوم، تُكتب في وسم البداية
نحن نستخدم حاليًا HTML5، الذي يضيف الوسوم الدلالية والصوت/الفيديو وميزات جديدة أخرى

📝 تمارين

أنشئ أول صفحة ويب لك: افتح محرر النصوص (أو VS Code)، انسخ مثال الكود الأول من هذا الفصل، احفظه باسم myfirst.html، وانقر نقرًا مزدوجًا لفتحه في المتصفح. عدّل المحتوى داخل وسمي <h1> و <p> لتعريف بنفسك، ثم احفظ وأنعش المتصفح لرؤية التغييرات.
لاحظ صفحة ويب حقيقية: افتح أي موقع ويب (مثل ويكيبيديا)، انقر بزر الماوس الأيمن واختر "عرض مصدر الصفحة"، وانظر كم وسمًا يمكنك التعرف عليه!