شرح ما هي لغة HTML ؟ في HTML بالتفصيل مع الأمثلة

شرح ما هي لغة HTML ؟ في HTML بالتفصيل مع الأمثلة | نوفيل

جدول مرجعي سريع

المفهوم	التعريف	مثال
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	<!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>

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>

ما هي لغة HTML ؟

جدول مرجعي سريع

الشرح

الصياغة (Syntax)

أمثلة عملية

نصائح احترافية