مقدمة HTML
HTML هو أساس كل صفحة ويب تفتحها. قبل تنسيق CSS أو سلوك JavaScript، يحتاج المتصفح إلى بنية واضحة توضّح ماهية كل جزء من المحتوى.
ما هو HTML؟
HTML (HyperText Markup Language) هي اللغة القياسية لتنظيم محتوى صفحات الويب. تكتب وسومًا حول النص والوسائط ليعرف المتصفح أين العناوين والفقرات والروابط والصور والعناصر الأخرى.
لماذا يهم HTML؟
بدون HTML لا يفهم المتصفح معنى المحتوى وترتيبه جيدًا. HTML ليست لغة برمجة؛ إنها لغة ترميز: تعلّم المحتوى ليتمكن البرنامج (وأدوات المساعدة) من تفسيره بشكل صحيح.
نظرة أولى على الوسوم
يستخدم HTML وسومًا بين أقواس زاوية. لمعظم العناصر وسم فتح ووسم إغلاق.
مرحبًا HTML
html<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>This is my first paragraph.</p>
</body>
</html>ماذا يوضح هذا المثال
<!DOCTYPE html>يخبر المتصفح أن المستند HTML حديث<html>هو العنصر الجذر للصفحة<head>يحفظ معلومات الصفحة مثل العنوان<body>يحوي المحتوى الذي يراه الزائر<h1>عنوان رئيسي<p>فقرة
كيف يستخدم المتصفح HTML
عند فتح ملف HTML يقرأ المتصفح الترميز من الأعلى للأسفل، ويبني بنية تُسمى DOM، ويعرض المحتوى وفق الوسوم. النتيجة المرئية هي الصفحة؛ والوسوم هي التعليمات خلفها.
HyperText والروابط
تشير HyperText في HTML إلى نص يمكنه الاتصال بمستندات أخرى عبر الروابط. ربط الصفحات هو ما يحوّل ملفات منفصلة إلى موقع ويب.
رابط بسيط
html<a href="https://example.com">Visit Example</a>ينشئ العنصر <a> رابطًا تشعبيًا. تخزن الخاصية href عنوان الوجهة. ستدرس الروابط لاحقًا؛ يكفي هنا معرفة أن الروابط جزء مما يجعل HTML «hyper».
جرّبها بنفسك
أنشئ ملفًا باسم index.html، الصق مثال الصفحة الكاملة، احفظه وافتحه في المتصفح. غيّر نص العنوان وحدّث الصفحة لترى النص الجديد فورًا.
أخطاء شائعة
- التعامل مع HTML كلغة برمجة ذات حلقات ومنطق — استخدم JavaScript للسلوك لاحقًا
- نسيان وسوم الإغلاق للعناصر التي تحتاجها مما يكسر بنية الصفحة
- وضع المحتوى المرئي داخل
<head>بدل<body> - تخطي
<!DOCTYPE html>وظهور سلوكيات قديمة غير متوقعة
الملخص
- HTML ينظم محتوى الصفحة بالوسوم
- لغة ترميز وليست لغة برمجة
- الصفحة الأساسية تشمل doctype و html و head و body
- العناوين والفقرات عناصر مبكرة شائعة
- الروابط تربط الصفحات وتصنع HyperText
- تدرب بتحرير ملف HTML صغير وعرضه في المتصفح
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى