أساسيات HTML
في الحصص السابقة تعرّفت على HTML واخترت محرراً. الآن ستبني صفحة أساسية كاملة: الهيكل القياسي الذي يجب أن يبدأ منه كل ملف HTML حديث، مع قدر صغير من المحتوى المرئي.
ما هو مستند HTML الأساسي؟
مستند HTML الأساسي ملف نصي بهيكل خارجي ثابت. داخل هذا الهيكل تضع المحتوى الذي يراه الزوار. تقريباً كل صفحة في هذه الدورة تعيد استخدام نفس الهيكل الخارجي وتغيّر ما بداخل body.
إجابة مباشرة: الهيكل المطلوب
تتضمن الصفحة الأساسية الحديثة هذه الأجزاء بالترتيب:
<!DOCTYPE html>— يعلن مستند HTML5<html>— العنصر الجذر الذي يلف الصفحة كلها<head>— معلومات عن الصفحة (وليست المقال المرئي الرئيسي)<title>داخل head — نص لعلامة تبويب المتصفح والإشارات المرجعية<body>— المحتوى الذي يراه الناس على الصفحة
مستند HTML أساسي
html<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>هذا عنوان</h1>
<p>هذه فقرة.</p>
</body>
</html>قراءة المثال سطراً بسطر
- يجب أن يكون doctype أولاً ليستخدم المتصفح قواعد HTML الحديثة
- كل شيء آخر داخل
<html> ... </html> <head>يحمل العنوان؛ يلاحظه الزوار غالباً في اسم التبويب<body>يحمل العنوان والفقرة اللذين تراهما في مساحة الصفحة- معظم العناصر تحتاج وسم إغلاق مطابقاً بشرطة مائلة، مثل
</p>
head مقابل body
تخيّل <head> ملاحظات خلف الكواليس و<body> المسرح. محركات البحث والمتصفحات تستخدم العنوان وبيانات head الأخرى. من يقرأ الصفحة ينظر إلى body. وضع نص المقال الرئيسي داخل head فقط خطأ شائع للمبتدئين.
التداخل والترتيب
تتداخل عناصر HTML: يمكن لعنصر أن يجلس داخل عنصر آخر. أبقِ الوسوم في شجرة واضحة. أغلق الوسوم الداخلية قبل الخارجية. لهيكل أساسي حافظ على هذا الترتيب: doctype ثم html ثم head (مع title) ثم body.
جرّب بنفسك
- أنشئ ملفاً باسم
basic.htmlفي محررك - الصق المثال أعلاه
- غيّر نص العنوان ونص الترويسة
- احفظ الملف وافتحه في المتصفح
- بعد الحفظ والتحديث تأكد أن عنوان التبويب وترويسة الصفحة قد تحدّثا معاً
نصائح صغيرة توفّر الوقت لاحقاً
- فضّل أسماء وسوم بأحرف صغيرة (
<p>وليس<P>) لأسلوب HTML حديث متسق - استخدم مسافة بادئة للأسطر المتداخلة لترى أي الوسوم تنتمي معاً
- أبقِ
<h1>واحداً واضحاً كترويسة الصفحة الرئيسية في الأمثلة المبكرة - ستضيف charset والروابط والصور وغيرها لاحقاً؛ أتقن هذا الهيكل أولاً
أخطاء شائعة
- نسيان
<!DOCTYPE html>في الأعلى - إغلاق الوسوم بترتيب خاطئ (مثلاً إغلاق
htmlقبلbody) - وضع الترويسة المرئية داخل
<head>فقط - الحفظ دون امتداد
.htmlثم التساؤل عن سلوك المتصفح الغريب - كتابة وسم فتح دون شريك الإغلاق عندما يحتاج العنصر كليهما
ملخص
- تستخدم صفحة HTML الأساسية doctype وhtml وhead وtitle وbody
- يظهر العنوان غالباً في تبويب المتصفح
- المحتوى المرئي ينتمي إلى body
- العناصر تتداخل؛ أغلق الداخلية أولاً
- تدرّب بتعديل ملف صغير وتحديث المتصفح
- الحصص اللاحقة تضيف عناصر أكثر فوق نفس الهيكل
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى