العلامات المستخدمة في القسم الرئيسي
تشرح هذه المقالة الوسوم المستخدمة في قسم الرأس.۔
يشرح العلامات المستخدمة في قسم الرأس، مثل <link>، <script>، <style>۔
YouTube Video
العلامات المستخدمة في القسم الرئيسي
علامة <title>
1<title>Document Title</title>- وسم
<title>يحدد عنوان الوثيقة۔ يتم عرض هذا العنوان في تبويب المتصفح ويستخدم في العلامات المرجعية ونتائج البحث۔
علامة <link>
- يستخدم وسم
<link>لربط الموارد الخارجية بالوثيقة الحالية۔ يُستخدم عادة لربط ملفات CSS الخارجية ولكنه يمكن أيضًا استخدامه للأيقونات والموارد الخارجية الأخرى۔
سمة rel لوسم <link>
يُستخدم خاصية rel لتحديد العلاقة بين المورد المربوط والوثيقة الحالية في وسم <link>.۔ هناك العديد من الأنواع للقيم الخاصة بخصائص rel، ولكننا سنشرح هنا الأكثر أهمية واستخداماً.۔
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheetتُستخدم لربط ملف نمط خارجي.۔
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"تُحدد الأيقونة المعروضة في تبويب المتصفح أو العلامة المرجعية.۔ عند تحديد الفافيكون الصحيح، يتم تعزيز العلامة التجارية للموقع والتمييز البصري.۔
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preloadتُستخدم لتحميل الموارد مسبقًا قبل بدء تجسيد الصفحة.۔ تعتبر مفيدة بشكل خاص للموارد التي يكون توقيتها مهماً، مثل الخطوط أو الصور الكبيرة.۔ يعمل ذلك على تحسين الأداء وتحسين تجربة المستخدم.۔
canonical
1<link rel="canonical" href="https://example.com/page.html">canonicalتُستخدم لإبلاغ محركات البحث حول النسخة الأصلية لصفحة.۔ في حالة المحتوى المكرر، يساعد تحديد عنوان URL الأصلي في توحيد ترتيب محرك البحث من منظور تحسين محركات البحث ويضمن فهرسة المحتوى بشكل صحيح.۔
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternateتُستخدم للإشارة إلى الصفحات المتعلقة بلغات أو تنسيقات مختلفة لمحركات البحث والمتصفحات.۔ في المواقع متعددة اللغات، يمكنك تحديد URL لكل إصدار لغة بالاقتران مع خاصيةhreflangلتوفير الصفحات للمستخدمين باللغة المناسبة.۔
manifest
1<link rel="manifest" href="/manifest.json">- يقدم
manifestللمتصفح ملف تعريف يتضمن معلومات التكوين لتطبيق الويب التقديمي (PWA).۔ يحتوي هذا الملف على معلومات مثل أيقونة التطبيق، لون السمة، ووضع العرض، مما يساعد في تثبيت وتشغيل تطبيق الويب التقدمي (PWA) على الأجهزة المحمولة۔
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- عند الإشارة إلى الموارد الخارجية، يمكن أن يُحسّن إجراء حل DNS للنطاق مسبقًا من سرعة تحميل الصفحة۔ يكون هذا فعالًا بشكل خاص للصفحات التي تحتوي على العديد من الموارد الخارجية أو حيث تكون تجربة المستخدم السريعة مطلوبة۔
علامة <style>
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style>- يستخدم وسم
<style>لتعريف أوراق الأنماط الداخلية۔ يستخدم لتطبيق أنماط CSS على العناصر الموجودة في الصفحة، مما يتيح لك كتابة CSS بدون استخدام ملفات خارجية۔
علامة <script>
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script>- يستخدم وسم
<script>لتضمين كود JavaScript في مستند HTML۔ يمكنك أيضًا ربط ملفات JavaScript خارجية، والتحكم في السلوك الديناميكي للصفحة۔ استخدم السمةsrcلتحديد ملف البرنامج النصي۔
الخصائص async وdefer
يدعم وسم <script> سمتين، async و defer، واللتين تؤثران على توقيت تحميل وتنفيذ البرنامج النصي۔ عادةً، يتم تنفيذ البرامج النصية بالتسلسل بواسطة المتصفح، لكن استخدام هذه السمات يمكن أن يُحسّن أداء الصفحة وتجربة التحميل۔
خاصية async
1<script src="script.js" async></script>- يتيح استخدام السمة
asyncتحميل البرنامج النصي بشكل متزامن۔ يقوم المتصفح بتحميل البرنامج النصي بالتوازي مع الموارد الأخرى وتنفيذه فور اكتمال التحميل۔ asyncمناسب بشكل أساسي للبرامج النصية المستقلة ويُستخدم عندما لا يعتمد البرنامج النصي على تحميل برامج نصية أخرى أو DOM۔
خاصية defer
1<script src="script.js" defer></script>- يتيح استخدام السمة
deferتحميل البرنامج النصي بشكل غير متزامن ولكن يتم تنفيذه بعد اكتمال تحليل HTML۔ لا يتم حجب عرض الصفحة أثناء تنفيذ البرنامج النصي، مما يعزز تجربة المستخدم۔ deferفعالة عندما تحتاج البرامج النصية إلى التنفيذ بعد أن يتم تحميل DOM بالكامل۔ على سبيل المثال، يكون مناسبًا عندما تريد تشغيل البرنامج النصي بعد تحميل التخطيط الكامل وعناصر الصفحة۔
سياسة CORS والعنصر crossorigin
عند تحميل برامج نصية خارجية، قد تُفرض قيود أمنية بناءً على سياسة نفس الأصل (Same-Origin Policy)۔ في مثل هذه الحالات، يمكن استخدام السمة crossorigin للسماح بمشاركة الموارد۔
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>يمكن تعيين خاصية crossorigin بالقيمتين التاليتين:۔
anonymous: يرسل الطلبات دون تضمين بيانات الاعتماد۔use-credentials: يرسل الطلبات متضمنةً بيانات الاعتماد۔
خاصية type
يمكن أن يستخدم وسم <script> السمة type لتحديد نوع البرنامج النصي۔ افتراضيًا، يتم استخدام JavaScript، لكن يمكنك أيضًا تحديد أنواع معينة من البرامج النصية (مثل JavaScript النوع المعياري أو لغة القوالب)۔
وحدات JavaScript
1<script type="module" src="module.js"></script>-
منذ ECMAScript 2015 (ES6)، تم تقديم وحدات JavaScript، مما يتيح تقسيم الشيفرة إلى وحدات، مع تعزيز إمكانية إعادة الاستخدام۔ عبر تحديد
type="module"، يمكنك التعامل مع البرنامج النصي كوحدة۔ -
يمكن تقسيم الوحدات إلى وحدات أخرى باستخدام
importوexport۔
البرامج النصية غير جافا سكريبت
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- يمكن أيضًا تحديد برامج نصية غير JavaScript داخل علامة
<script>۔ على سبيل المثال، استخدمtype="application/ld+json"عند وصف البيانات المهيكلة مثل JSON-LD۔ هنا، JSON-LD هو شكل ينظم البيانات على صفحة الويب، مما يسمح لمحركات البحث والتطبيقات الأخرى بفهم البيانات بشكل أعمق۔
ملاحظات حول استخدام وسم <script>
- ترتيب البرامج النصية: يجب تحميل المكتبات التي تعتمد عليها البرامج النصية قبل البرامج النصية التابعة.۔ على سبيل المثال، يجب تحميل البرامج النصية التي تستخدم jQuery بعد jQuery نفسه.۔
- تحسين الأداء: لتجنب التأثير على سرعة تحميل الصفحة، قم بتحميل البرامج النصية فقط عند الضرورة وتجنب تشغيل البرامج النصية غير الضرورية.۔
- إجراءات الأمان: عند استخدام برامج نصية خارجية، تأكد من تحميلها من مصادر موثوق بها لمنع تضمين برامج نصية خبيثة.۔
وسم <base>
1<base href="https://example.com/">- تحدد علامة
<base>عنوان URL الأساسي لجميع عناوين URL النسبية في المستند.۔ عنوان URL المحدد في خاصيةhrefيصبح الأساس لالمسارات النسبية في الروابط والصور.۔ عادة ما تُستخدم مرة واحدة فقط لكل صفحة.۔
وسم <noscript>
1<noscript>Your browser does not support JavaScript!</noscript>- تحدد علامة
<noscript>المحتوى الذي يتم عرضه عندما يكون JavaScript معطلاً في المتصفح.۔ يُستخدم لتوفير محتوى بديل للبيئات التي لا تدعم JavaScript.۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔