الصف الثاني الثانوي - حاسب وبرمجة الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية

البنية الهيكلية لصفحات الويب والوسوم القياسية في HTML5

انقر على أي جملة للاستماع إليها مباشرة 👆

تُعد لغة ترميز النص التشعبي HTML5 حجر الزاوية والعمود الفقري لبناء وتطوير كافة صفحات ومواقع الويب على شبكة الإنترنت العالمية. في هذا الدرس، نتعرف على البنية المعمارية الأساسية لصفحة الويب، ودور إعلان نوع المستند DOCTYPE، والعلاقة التكاملية بين وسوم الرأس ومحتوى جسم الصفحة، بالإضافة إلى كيفية توظيف وسوم العناوين والفقرات لتنظيم المحتوى التعليمي الرقمي بأسلوب قياسي متوافق مع معايير الويب العالمية.

1. مفهوم لغة HTML5 وبنيتها القياسية

لغة HTML (HyperText Markup Language) هي لغة ترميز وتوصيف قياسية تُستخدم لإنشاء وتحديد الهيكل البنائي لصفحات الويب. تتميز الإصدارة الخامسة HTML5 بدعمها المباشر للوسائط المتعددة دون الحاجة لملحقات برمجية إضافية وتوفير وسوم دلالية واضحة لمحركات البحث.

الهيكل الأساسي لصفحة HTML5 :

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>منصة الأمين التعليمية</title>
  </head>
  <body>
    <h1>أهلاً بكم في مقرر الحاسب والبرمجة</h1>
    <p>هذا النص يمثل فقرة توضيحية داخل جسم الصفحة.</p>
  </body>
</html>

2. وظائف الوسوم الأساسية في الهيكل المعماري

الوسم (Tag)	الوظيفة البرمجية والمعمارية	الموقع والأثر
`<!DOCTYPE html>`	يُعلم متصفح الويب بأن المستند مكتوب بمعايير لغة HTML5 القياسية.	أول سطر في الملف البرمجي خارج وسوم html.
`<html> ... </html>`	الحاوية الجذرية (Root Element) لكافة عناصر وكود الصفحة.	تتضمن خاصيتي اللغة `lang` واتجاه النص `dir`.
`<head> ... </head>`	يحتوي على البيانات الوصفية (Metadata) وإعدادات الترميز وربط الأنماط.	لا تظهر محتوياته مباشرة داخل نافذة المتصفح عدا شريط العنوان.
`<meta charset="UTF-8">`	يحدد نظام تشفير الحروف العالمي UTF-8 لدعم الحروف العربية بدقة.	يوضع إلزامياً داخل وسم الرأس head.
`<title> ... </title>`	يحدد العنوان النصي الذي يظهر في شريط عنوان المتصفح أو لسان التبويب.	يوضع داخل وسم head ويفيد في نتائج محركات البحث.
`<body> ... </body>`	جسم الصفحة الحاوي لكافة العناصر المرئية للمستخدم من نصوص وصور وجداول.	كل ما يظهر في نافذة العرض الرئيسية للمتصفح.

3. وسوم العناوين والفقرات النصية

توفر HTML5 ستة مستويات قياسية للعناوين تتيح بناء هرمية دلالية واضحة للمحتوى :

<h1> إلى <h6> : العناوين المتدرجة تنازلياً في الحجم والأهمية، حيث يمثل <h1> العنوان الرئيسي الأكثر أهمية، بينما <h6> يمثل العنوان الفرعي الأصغر.
<p> ... </p> : يُستخدم لإنشاء فقرة نصية مستقلة يسبقها ويعقبها فاصل أسطر رأسي تلقائي.
<br> : وسم إحداث كسر سطر دون مسافة رأسية كبيرة (وسم فردي ذاتي الإغلاق).
<hr> : وسم إدراج خط فاصل أفقي دلالي بين أقسام الصفحة.

أنشطة تطبيقية وتفكير برمجي

الإجابة البرمجية : يضمن نظام الترميز UTF-8 تفسير وعرض الحروف الأبجدية المتنوعة، لاسيما حروف اللغة العربية والرموز الخاصة، بشكل صحيح وسليم دون ظهور رموز غير مفهومة أو مشوهة في المتصفحات المختلفة.

الإجابة البرمجية : يُوضع داخل وسم الرأس <head>، وأثره المباشر هو تحديد النص الظاهر في شريط عنوان نافذة المتصفح أو على لسان التبويب (Tab Title)، ولا يظهر في المساحة البيضاء لجسم الصفحة.

اضغط على أي بطاقة لاكتشاف المعنى الدقيق، واضغط على أيقونة الصوت للاستماع للنطق:

HTML5

اضغط لاكتشاف الدلالة والشرح 👆

لغة توصيف النص التشعبي الإصدارة الخامسة

💡 إضاءة وتوضيح: HyperText Markup Language 5

DOCTYPE

اضغط لاكتشاف الدلالة والشرح 👆

إعلان تحديد إصدارة ونوع وثيقة الويب للمتصفح

💡 إضاءة وتوضيح: Document Type Declaration

Tag

اضغط لاكتشاف الدلالة والشرح 👆

الوسم أو علامة الترميز

💡 إضاءة وتوضيح: عنصر محاط بأقواس الزوايا

Metadata

اضغط لاكتشاف الدلالة والشرح 👆

البيانات الوصفية حول بنية الصفحة وتشفيرها

💡 إضاءة وتوضيح: بيانات عن البيانات توضع في وسوم meta

Charset

اضغط لاكتشاف الدلالة والشرح 👆

مجموعة تشفير المحارف والحروف المعتمدة

💡 إضاءة وتوضيح: نظام ترميز الحروف كـ UTF-8

Head

اضغط لاكتشاف الدلالة والشرح 👆

رأس الصفحة المخصص للإعدادات والروابط الوصفية

💡 إضاءة وتوضيح: عنصر الحاوية للبيانات غير المرئية مباشرة

Body

اضغط لاكتشاف الدلالة والشرح 👆

جسم الصفحة الحاوي للمحتوى المرئي للمستخدم

💡 إضاءة وتوضيح: عنصر يحتوي على كل ما يظهر في نافذة العرض

Heading

اضغط لاكتشاف الدلالة والشرح 👆

العنوان النصي الهرمي

💡 إضاءة وتوضيح: وسوم العناوين من h1 إلى h6

Paragraph

اضغط لاكتشاف الدلالة والشرح 👆

الفقرة النصية القياسية

💡 إضاءة وتوضيح: عنصر النص المعرف بالوسم

Attribute

اضغط لاكتشاف الدلالة والشرح 👆

الخاصية أو السمة المضافة للوسم

💡 إضاءة وتوضيح: تُكتب داخل وسم البداية مثل lang وdir

Element

اضغط لاكتشاف الدلالة والشرح 👆

عنصر الويب المكتمل

💡 إضاءة وتوضيح: يتكون من وسم البداية والمحتوى ووسم النهاية

Semantic HTML

اضغط لاكتشاف الدلالة والشرح 👆

الترميز الدلالي الهادف

💡 إضاءة وتوضيح: استخدام وسوم توضح المعنى الوظيفي للمحتوى

اضغط على الإجابة لتتحقق من فهمك وتكتشف التفسير النموذجي فورياً:

1 ما هو الوسم الذي يُعلن للمتصفح أن المستند مبني وفق المعايير القياسية للغة HTML5 ؟

2 أي من الوسوم التالية يُستخدم لإدراج عنوان الصفحة الذي يظهر في شريط العنوان أو لسان التبويب بالمتصفح ؟

القائمة الرئيسية

تابعنا على:

مقدمة في لغة HTML5 وبنية صفحة الويب الأساسية

البنية الهيكلية لصفحات الويب والوسوم القياسية في HTML5

1. مفهوم لغة HTML5 وبنيتها القياسية

الهيكل الأساسي لصفحة HTML5 :

2. وظائف الوسوم الأساسية في الهيكل المعماري

3. وسوم العناوين والفقرات النصية

أنشطة تطبيقية وتفكير برمجي

القائمة الرئيسية

المراحل التعليمية

الأدوات التعليمية

تابعنا على:

مقدمة في لغة HTML5 وبنية صفحة الويب الأساسية

البنية الهيكلية لصفحات الويب والوسوم القياسية في HTML5

1. مفهوم لغة HTML5 وبنيتها القياسية

الهيكل الأساسي لصفحة HTML5 :

2. وظائف الوسوم الأساسية في الهيكل المعماري

3. وسوم العناوين والفقرات النصية

أنشطة تطبيقية وتفكير برمجي

1. ما أهمية إدراج وسم <meta charset="UTF-8"> داخل مستند صفحة الويب ؟

2. أين يُوضع الوسم <title> وما هو أثره المباشر على صفحة الويب ؟