في هذا الدرس 7تصفّح المواضيع
يتألف أي مستند HTML من وحدات بنائية مترابطة تُسمى العناصر (Elements). ولا يقتصر مفهوم العنصر القياسي على الوسم وحده، بل يشمل الكيان الكامل المكوَّن من ثلاثة أجزاء متلازمة: وسم البداية (Opening Tag)، والمحتوى الداخلي (Content)، ووسم النهاية (Closing Tag).
ومن الضروري التمييز بدقة بين «الوسم» و«العنصر»؛ فالرمزان <h1> و </h1> يمثلان علامتَي الحدود فقط، بينما يمثل الهيكل الكامل من نقطة الفتح مروراً بالنص الداخلي وحتى نقطة الإغلاق عقدة العنصر الفعلية داخل شجرة DOM في ذاكرة المتصفح.
يُكتب وسم البداية بوضع اسم العنصر بين قوسين زاويين هكذا <p>، في حين يتطابق معه وسم النهاية تماماً مع إضافة شرطة مائلة أمامية / قبل اسم العنصر مباشرةً هكذا </p>. وانتبه دائماً لعدم الخلط بين الشرطة الأمامية الصحيحة / والشرطة العكسية \ التي لا يعترف بها محلل اللغة كعلامة إغلاق.
يؤدي نسيان كتابة وسم الإغلاق في عناصر العناوين أو المستند مثل <h1> أو <h2> أو <title> إلى امتداد نطاق العنصر عن طريق الخطأ ليشمل السطور التالية في الصفحة.
<h1>HTML Elements</h1>
<h2>Course Overview</h2>
<p>Every paired tag must close cleanly.</p>
<p>Use a forward slash in every closing tag.</p>لا تحتاج جميع عناصر اللغة إلى احتواء نص بداخلها؛ إذ توجد فئة خاصة تُسمى العناصر الفارغة (Void Elements) تؤدي وظيفة مكتفية بذاتها مثل كسر السطر الحالي أو رسم فاصل أفقي بين موضوعين (وكذلك عناصر الصور وحقول الإدخال التي ستتعرف عليها لاحقاً)، ولذلك تكتفي بوسم واحد فقط ويُمنع بتاتاً كتابة وسم إغلاق لها.
| نمط العنصر | الوظيفة الأساسية | الخطأ الشائع الواجب تجنبه |
|---|---|---|
<br> | كسر السطر الحالي داخل عنوان بريدي أو فقرة متعددة الأسطر | كتابة </br> لأن المتصفح يحسبه سطراً إضافياً ثانياً! |
<hr> | فاصل موضوعي أفقي يفصل بصرياً ودلالياً بين فكرتين | محاولة حشر نص داخل <hr>...</hr> |
<p>...</p> | عنصر حاوٍ مزدوج يحيط بالنص بوسم بداية ووسم نهاية | معاملة العناصر الحاوية كعناصر فارغة وترك </p> |
<h2>Campus Address</h2>
<p>Cairo Campus<br>Building 4, Floor 2</p>
<hr>
<h2>Support Hours</h2>
<p>Sunday to Thursday<br>09:00 AM to 05:00 PM</p>تُبنى صفحات الويب الحقيقية بوضع العناصر داخل بعضها في علاقة «أب وابن وحفيد» تُعرف باسم التداخل الهرمي (Nesting). وحتى يتمكن المتصفح من تشييد شجرة DOM سليمة بلا التباس، يجب الالتزام الصارم بقاعدة الأخير فتحاً هو الأول إغلاقاً (LIFO): أي أن العنصر الداخلي الأقرب للمحتوى يجب أن يُغلق بالكامل قبل إغلاق العنصر الأب المحيط به.
<body>
<h1>Security Bulletin</h1>
<h2>Daily Check</h2>
<p>Verify nested tags<br>before saving the file.</p>
</body>يمتلك كل عنصر مرئي في HTML سلوك تدفق افتراضياً في المتصفح حتى قبل إضافة أي تنسيقات CSS، وينقسم هذا السلوك إلى نمطين أساسيين:
- العناصر الكتلية (Block-Level Elements): مثل
<h1>و<h2>و<p>و<hr>؛ تبدأ دائماً في سطر جديد مستقل وتمتد أفقياً لتحجز عرض الحاوية الأب بالكامل. - العناصر السطرية وكسر السطر (Inline Flow): العناصر السطرية النصية (كوسوم إبراز الكلمات والروابط التي ستدرسها في الدروس القادمة) تنساب أفقياً ضمن السطر الحالي ولا تحجز إلا المساحة الدقيقة لكلماتها، بينما يكسر الوسم الفارغ
<br>السطر داخل الفقرة الواحدة دون إنشاء صندوق كتلي جديد.
استكشف في الأداة البصرية التالية حدود الصناديق الفعلية للعناصر الكتلية والتدفق السطري وتكامل العناصر الحاوية مع الفارغة:
تتعامل مواصفة HTML5 مع أسماء الوسوم بوصفها غير حساسة لحالة الأحرف (Case-Insensitive)؛ أي أن المتصفح يفسّر <H1> و <P> كما يفسّر <h1> و <p> تماماً. ورغم ذلك، تُجمع أدلة الجودة الهندسية لدى W3C و MDN وفرق التطوير العالمية على قاعدة ذهبية واحدة: اكتب جميع وسوم HTML بحروف إنجليزية صغيرة دائماً (lowercase).
تحقق الحروف الصغيرة قراءةً أسرع بكثير للعين، وتمنع فوضى عدم تطابق الفتح والإغلاق مثل <H2>...</h2>، كما تضمن توافق أسلوبك مع البيئات الصارمة الحساسة لحالة الأحرف كالرسوم المتجهة المدمجة ومعيار XHTML وقوالب الواجهات الحديثة.
تطبّق المتصفحات افتراضياً آلية ذكية تُسمى دمج المسافات البيضاء (Whitespace Collapsing)؛ فمهما وضعت داخل الكود المصدري من مسافات متتالية أو ضغطات زر الجدولة (Tab) أو نزول لأسطر جديدة، يختزلها المتصفح عند العرض في مسافة مفردة واحدة فقط.
تمنحك هذه القاعدة حرية هندسية ممتازة لتنسيق ملفاتك عبر المسافات البادئة (Indentation) بمقدار مسافتين أو أربع مسافات لكل مستوى تداخل، بحيث يسهل اكتشاف أي وسم ناقص بنظرة واحدة دون أن تتأثر المسافات الظاهرة للزائر.
<h2>Whitespace Demo</h2>
<p>One space or ten spaces</p>
<p>
Multi-line source text renders on one clean line.
</p>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تشريح عنصر HTML إلى وسم بداية ومحتوى ووسم نهاية، وتعرفت على العناصر الفارغة ذات الوسم الواحد، وقاعدة التداخل المتناظر (LIFO)، والفرق البصري بين العناصر الكتلية والسطرية، ودمج المسافات البيضاء. الخطوة التالية: انتقل إلى درس «خصائص العناصر في لغة HTML» لتتعلم تزويد الوسوم ببيانات إضافية تتحكم في وجهتها وهويتها وسلوكها.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML Element عنصر HTML
- الوحدة البنائية الكاملة في شجرة المستند، وتتألف من وسم البداية والمحتوى الداخلي ووسم النهاية، أو من وسم مفرد في حالة العناصر الفارغة.
- للمراجعة
- 02 Void Element العنصر الفارغ
- عنصر يؤدي وظيفة مستقلة مكتفية بذاتها مثل <br> أو <hr>، ولا يقبل محتوى نصياً بداخله ويُمنع كتابة وسم إغلاق له.
- للمراجعة
- 03 Block-Level Element العنصر الكتلي
- عنصر يبدأ دائماً على سطر جديد مستقل ويحجز العرض الأفقي المتاح لحاويته بالكامل مثل <h1> و <h2> و <p> و <hr>.
- للمراجعة
- 04 Inline Element العنصر السطري
- عنصر ينساب أفقياً داخل السطر النصي الحالي دون كسره ولا يحجز من العرض إلا المساحة الدقيقة لكلماته.
- للمراجعة
- 05 Whitespace Collapsing دمج المسافات البيضاء
- السلوك القياسي في المتصفح الذي يختزل المسافات المتتالية والأسطر الجديدة في الكود المصدري إلى مسافة مرئية واحدة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 LIFO LIFO
- Last-In, First-Out
- قاعدة التداخل الهرمي التي تقضي بأن آخر وسم داخلي تم فتحه يجب أن يكون أول وسم يتم إغلاقه.
- للمراجعة
- 02 XHTML XHTML
- Extensible HyperText Markup Language
- صياغة قديمة صارمة للغة HTML قائمة على قواعد XML كانت تشترط إغلاق العناصر الفارغة بشرطة مائلة ذيلية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أعد كتابة مقطع متقاطع خاطئ مثل <body><p>System Alert</body></p> بحيث يُغلق العنصر الابن <p> بالكامل قبل إغلاق العنصر الأب <body> وفق قاعدة LIFO.
-
بدّل بين الأنماط الثلاثة في أداة التدفق البصري داخل الدرس، ثم اكتب مقطعاً محلياً يجمع عنواناً <h1> وعنواناً فرعياً <h2> وفقرة <p> تتضمن <br> مع فاصل <hr>.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.