| المفهوم | التعريف | مثال |
|---|---|---|
| HTML | لغة توصيف النص التشعبي — تحدد هيكل صفحات الويب | <!DOCTYPE html> |
| Tag (وسم) | كلمة داخل أقواس زاوية تُعرّف عنصراً في HTML | <h1>، <p>، <a> |
| Element (عنصر) | وسم الفتح + المحتوى + وسم الإغلاق مجتمعين | <p>نص</p> |
| Attribute (خاصية) | معلومة إضافية تُضاف داخل وسم الفتح | href="..." في <a> |
| DOM | التمثيل الشجري للصفحة الذي يبنيه المتصفح في الذاكرة | شجرة html > head + body |
| <!DOCTYPE html> | إعلان يخبر المتصفح أن هذا مستند HTML5 | يكتب دائماً في أول سطر |
| UTF-8 | ترميز النص العالمي الذي يدعم العربية وكل اللغات | <meta charset="UTF-8"> |
| Browser Parsing | عملية قراءة وتفسير HTML من قِبَل المتصفح | تحدث تلقائياً عند فتح الصفحة |
HTML اختصار لـ HyperText Markup Language، وهي اللغة الأساسية التي تُبنى بها كل صفحات الويب على الإطلاق. منذ عام 1991 حين ابتكرها العالم تيم بيرنرز لي، أصبحت HTML الركيزة الأولى التي لا غنى عنها في تطوير الويب.
الفرق الجوهري بين HTML والبرمجة الحقيقية: HTML ليست لغة برمجة بالمعنى الدقيق — فهي لا تحتوي على متغيرات أو حلقات أو شروط. هي لغة توصيف (Markup Language) تخبر المتصفح "ما هذا الشيء؟" وليس "كيف يتصرف؟". المتصفح يقرأ هذه التعليمات ويبني من خلالها ما يُسمى DOM (Document Object Model) — وهو تمثيل شجري لعناصر الصفحة في الذاكرة.
كيف تعمل HTML؟ عندما تكتب عنوان صفحة في المتصفح، يحدث هذا بالترتيب: أولاً يُرسل المتصفح طلباً للخادم (Server Request)، ثم يستقبل ملف HTML من الخادم (Response)، ثم يُحلل المتصفح الوسوم ويبني شجرة DOM (Parsing)، ثم يُطبق الـ CSS على العناصر لتنسيقها (Styling)، وأخيراً يُنفذ JavaScript ليضيف التفاعلية (Scripting). النتيجة النهائية هي الصفحة التي تراها أمامك.
الثلاثي الأساسي لتطوير الويب: HTML تُحدد هيكل ومحتوى الصفحة، وCSS تُحدد الشكل والتصميم والألوان، وJavaScript تُضيف السلوك والتفاعلية. مثل البناء تماماً: HTML هي الطوب والجدران، CSS هي الدهانات والزخارف، وJavaScript هي الكهرباء والتمديدات.
ملف HTML في جوهره ليس سوى ملف نصي عادي بامتداد .html أو .htm — يمكنك فتحه وتعديله بأي محرر نص بسيط مثل Notepad، لكن المحررين المتخصصين مثل VS Code يجعلون الكتابة أسرع وأسهل بكثير. المتصفح هو الذي يُفسر هذا الملف ويحوّله إلى صفحة مرئية.
| 1 | <!-- هذا هو مثال على ملف HTML كامل --> |
| 2 | <!DOCTYPE html> |
| 3 | <html lang="ar" dir="rtl"> |
| 4 | <head> |
| 5 | <meta charset="UTF-8" /> |
| 6 | <title>أول صفحة HTML</title> |
| 7 | </head> |
| 8 | <body> |
| 9 | <h1>مرحباً بالعالم!</h1> |
| 10 | <p>هذه أول صفحة HTML أكتبها.</p> |
| 11 | </body> |
| 12 | </html> |
مثال 1: كيف يُفسر المتصفح HTML — مثال بسيط
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>كيف تعمل HTML</title> |
| 6 | </head> |
| 7 | <body> |
| 8 | |
| 9 | <!-- هذا العنوان سيظهر كبيراً وبخط عريض --> |
| 10 | <h1>مرحباً! أنا صفحة HTML</h1> |
| 11 | |
| 12 | <!-- هذه فقرة نصية عادية --> |
| 13 | <p>المتصفح قرأ هذا الوسم وعرفَ أنه فقرة.</p> |
| 14 | |
| 15 | <!-- هذا رابط يمكن النقر عليه --> |
| 16 | <a href="https://example.com">اضغط هنا</a> |
| 17 | |
| 18 | <!-- هذه صورة --> |
| 19 | <img src="photo.jpg" alt="صورة توضيحية"> |
| 20 | |
| 21 | </body> |
| 22 | </html> |
مثال 2: HTML و CSS و JavaScript معاً — الثلاثي
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>الثلاثي الأساسي</title> |
| 6 | <!-- CSS: التصميم --> |
| 7 | <style> |
| 8 | h1 { color: #3b82f6; font-size: 2rem; } |
| 9 | button { padding: 10px 20px; cursor: pointer; } |
| 10 | </style> |
| 11 | </head> |
| 12 | <body> |
| 13 | |
| 14 | <!-- HTML: الهيكل والمحتوى --> |
| 15 | <h1>عنوان الصفحة</h1> |
| 16 | <p id="message">هذا النص سيتغير عند الضغط على الزر</p> |
| 17 | <button onclick="changeText()">غيّر النص</button> |
| 18 | |
| 19 | <!-- JavaScript: التفاعلية --> |
| 20 | <script> |
| 21 | function changeText() { |
| 22 | document.getElementById('message').textContent = 'تم تغيير النص بنجاح!'; |
| 23 | } |
| 24 | </script> |
| 25 | |
| 26 | </body> |
| 27 | </html> |