في هذا الدرس 7تصفّح المواضيع
يمثل عنصر رأس الصفحة
<head> غرفة التحكم الإدارية والتوجيهية المركزية لمستند HTML. يستقر هذا العنصر مباشرة بين وسم البداية <html> وحاوية المحتوى المرئي <body>، ليضم البيانات الوصفية الرقمية التي توجه سلوك المتصفح، وتضبط ترميز النصوص، وتحدد مسارات الملفات التابعة.على خلاف عنصر
<body> الذي تُعرض عناصره بصرياً على الشاشة للمستخدمين، تتصف عناصر رأس الصفحة بأنها تعليمات غير مرئية موجهة للمحركات والأنظمة التقنية؛ حيث تزود عناكب محركات البحث، وشبكات التواصل، ومحركات المعالجة بالبيانات اللازمة لقراءة الصفحة وتهيئتها قبل رسمها.يعد عنصر
<title> عنصراً إلزامياً داخل رأس الصفحة، حيث يحدد الاسم النصي الرسمي للمستند. يظهر هذا العنوان بوضوح على لسان تبويب المتصفح، ويشكل التسمية الافتراضية عند حفظ الصفحة في المفضلة، كما يمثل العنوان الرئيسي القابل للنقر في نتائج محركات البحث.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CloseTag - Modern Web Architecture Curriculum</title>
</head>
<body>
<h1>Welcome to Web Engineering</h1>
</body>
</html>لتحقيق أفضل ظهور في نتائج البحث وسهولة القراءة، يُنصح بصياغة العنوان وفق هيكل منتظم: موضوع الصفحة المحدد أولاً متبوعاً باسم الموقع أو المنصة، مع إبقاء طول النص بين 50 و60 حرفاً لتفادي اقتطاع الكلمات في شاشات الهواتف وأجهزة الحاسوب.
يمثل عنصر الرابط
<link> وسماً أحادياً فارغاً يربط بين المستند الحالي وموارد خارجية مستقلة. يتولى هذا العنصر استدعاء ملفات التنسيق الخارجية، وأيقونات اللسان المفضلة، وروابط المصدر القياسية، وإشارات التحميل الشبكي المسبق فائقة السرعة.
يوضح الجدول المرجعي التالي أشهر أنواع العلاقات والروابط التقنية المدارة عبر خاصية
rel في تطبيقات الويب الحديثة:| نوع العلاقة | قيمة خاصية الرابط | وظيفة المورد في المستند |
|---|---|---|
| ملف تنسيق خارجي | rel="stylesheet" |
استدعاء قواعد وقوالب تنسيق CSS لبناء المظهر البصري |
| أيقونة لسان المتصفح | rel="icon" |
عرض أيقونة الهوية البصرية بجوار اسم الصفحة والمفضلة |
| الرابط القياسي الأصيل | rel="canonical" |
تحديد الرابط المعتمد لمنع مشاكل تكرار المحتوى بمحركات البحث |
| الاتصال الشبكي المسبق | rel="preconnect" |
بدء مصافحة الخادم وترجمة النطاق مبكراً لتسريع التحميل |
| التحميل المسبق ذو الأولوية | rel="preload" |
إلزام المتصفح بتنزيل الملفات الحيوية قبل اكتشافها في الشيفرة |
HTML
<!-- Core external resource links in head -->
<link rel="stylesheet" href="/css/main.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="canonical" href="https://example.com/tutorials/html">
<link rel="preconnect" href="https://fonts.googleapis.com">عندما تحتاج الصفحة إلى قواعد تنسيق خاصة ومحدودة لا تستدعي إنشاء ملف خارجي مستقل، يتيح عنصر
<style> تضمين شيفرات CSS مباشرة داخل رأس الصفحة. تسري قواعد التنسيق المكتوبة هنا على جميع عناصر المستند وفق أسبقية محددات CSS.في هندسة أداء الويب الحديثة، تُستخدم وسوم
<style> بشكل استراتيجي لتضمين شيفرات التنسيق الحرجة للجزء العلوي من الشاشة مباشرة، مما يلغي فترات الانتظار الشبكية ويمكن المتصفح من رسم المحتوى الأولي فوراً دون تأخير.يتولى عنصر السكريبت
<script> استدعاء أو كتابة الشيفرات البرمجية التنفيذية. عند وضع السكريبت داخل رأس الصفحة دون خصائص تحكم، يوقف المتصفح تحليل شجرة العناصر فوراً حتى يكتمل تنزيل الملف وتنفيذه، مما يسبب بطء ظهور واجهة المستخدم.
لحل مشكلة تعطيل تحليل الصفحة، يقدم معيار HTML5 خاصيتين تنفيذيتين هما
defer و async. تضمن خاصية defer تنزيل الملفات في الخلفية مع تنفيذها بترتيبها الصارم فور اكتمال بناء شجرة عناصر الصفحة، مما يجعلها الخيار القياسي الموصى به لملفات رأس الصفحة.
HTML
<!-- Non-blocking deferred script in head -->
<script src="/examples/global.js" defer></script>يعد عنصر المسار الأساسي
<base> وسماً فارغاً يحدد العنوان المرجعي الافتراضي والنافذة المستهدفة لكافة الروابط والصور والنماذج النسبية في المستند. يجب وضع هذا الوسم في بداية رأس الصفحة قبل أي عنصر آخر يستدعي روابط أو ملفات خارجية.
HTML
<!-- Base URL and default target in head -->
<head>
<base href="https://static.example.com/assets/" target="_blank">
<link rel="stylesheet" href="styles/core.css">
</head>يتيح لك مختبر الفحص التفاعلي التالي استكشاف كيفية تحكم عناصر رأس الصفحة في هوية اللسان، ودورة حياة السكريبت المؤجل، وحساب المسارات الأساسية، وعرض المحتوى البديل:
يوفر عنصر المحتوى البديل
<noscript> واجهة بديلة ميسرة للمستخدمين الذين لا تدعم متصفحاتهم تشغيل لغات البرمجة التنفيذية أو قاموا بتعطيلها لأسباب أمنية. عند تفعيل السكريبت، يتجاهل المتصفح تماماً كافة العناصر الموجودة داخل وسوم <noscript>.
HTML
<!-- Accessible fallback in head or body -->
<noscript>
<link rel="stylesheet" href="/css/static-fallback.css">
<p>JavaScript is disabled; some features may be limited.</p>
</noscript>
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس دور عنصر رأس الصفحة head، وضبط عنوان الصفحة title، وربط الموارد الخارجية link، وتضمين التنسيقات style، وتحميل السكريبت المؤجل defer، وضبط المسار base والمحتوى البديل noscript. الخطوة التالية تأخذنا إلى عالم هندسة البيانات الوصفية المتقدمة في درس وسم البيانات الوصفية meta.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Document Head رأس الصفحة
- الحاوية الإدارية head التي تضم البيانات الوصفية وروابط الموارد التوجيهية لمستند HTML.
- للمراجعة
- 02 Document Title عنوان المستند
- النص التعريفي الأساسي title المعروض في لسان تبويب المتصفح ونتائج محركات البحث.
- للمراجعة
- 03 Deferred Script سكريبت مؤجل
- ملف برمجي يُنزل بالتوازي مع قراءة الصفحة ولا ينفذ إلا بعد اكتمال بناء شجرة عناصر DOM.
- للمراجعة
- 04 Base URL المسار الأساسي
- مسار جذري معتمد يحدده عنصر base وتُحسب بالنسبة له كافة الروابط النسبية في الصفحة.
- للمراجعة
- 05 Fallback Script Content المحتوى البديل للبرمجيات
- محتوى مخصص داخل وسم noscript يُعرض حصرياً عند تعطيل لغات البرمجة لدى المتصفح.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 CSSOM CSSOM
- Cascading Style Sheets Object Model
- شجرة كائنات قواعد التنسيق التي ينشئها المتصفح بالتوازي مع شجرة عناصر DOM لتطبيق الأنماط.
- للمراجعة
- 02 SRI SRI
- Subresource Integrity
- ميزة أمان تمكن المتصفحات من التحقق من عدم التلاعب بملفات السكريبت الخارجية عبر التجزئة الرقمية.
- للمراجعة
- 03 FCP FCP
- First Contentful Paint
- مؤشر أداء يقيس الوقت المنقضي من بدء الانتقال حتى رسم أول عنصر نصي أو مرئي على الشاشة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ كتلة رأس صفحة سليمة تتضمن وسم title موجزاً ورابطاً يشير لأيقونة اللسان المفضلة favicon.
-
اكتب وسوم link برأس الصفحة لربط ملف CSS خارجي وإرسال إشارة اتصال مسبق بخادم الخطوط.
-
استدع ملفي سكريبت خارجيين برأس الصفحة باستخدام خاصية defer لضمان عدم حجب معالجة العناصر.
-
أنشئ رسالة توجيهية داخل وسم noscript توضح للمستخدمين أن بعض المزايا تتطلب تفعيل لغة البرمجة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
3أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.