في HTML، تعتبر علامة link عنصرًا ذاتي الإغلاق، وعادةً ما توجد في القسم head للمستند. يتم استخدامه لإنشاء ارتباطات مع الموارد الخارجية، مثل أوراق الأنماط والأيقونات وما إلى ذلك. تحتوي علامة link على سمات متعددة، منها الأكثر استخدامًا rel و href .
تحدد السمة rel العلاقة بين المستند الحالي والمورد المرتبط. قيم سمات rel الشائعة هي:
stylesheet : تمثل رابطًا إلى ورقة أنماط CSS خارجية. icon : تمثل أيقونة مرتبطة بموقع ويب، مثل الأيقونة المفضلة. يتم استخدام سمة href لتحديد عنوان URL للمورد المرتبط.
مثال نموذجي لعلامة link هو:
<!DOCTYPE html> <أتش تي أم أل> <الرأس> <ميتا محارف = "UTF-8"> <title>موقعي الإلكتروني</title> <!-- رابط إلى ورقة أنماط CSS خارجية --> <link rel="stylesheet" href="styles.css"> <!-- رابط أيقونة الموقع --> <link rel="icon" href="favicon.ico"> </الرأس> <الجسم> <h1>الرابط!</h1> <p>هذه مقدمة للارتباط. </ص> </الجسم> </html>
في هذا المثال، نستخدم علامتي link . تقوم علامة link الأولى بربط مستند HTML بورقة أنماط CSS الخارجية styles.css ، والتي تُستخدم لتحديد نمط الصفحة. تربط علامة link الثانية مستند HTML بموقع الويب favicon.ico ، والذي سيتم عرضه عندما يفتح المستخدم موقع الويب في المتصفح.
بالطبع، تحتوي علامة link على سمات واستخدامات أخرى، فيما يلي بعض السمات وحالات الاستخدام الشائعة:
type : يتم استخدام هذه السمة لتحديد نوع MIME للمورد المرتبط. على سبيل المثال، عند الارتباط بورقة أنماط CSS، يمكنك تحديد نوعها كـ text/css . في معظم الحالات، يمكن للمتصفحات التعرف تلقائيًا على أنواع الموارد، وبالتالي فإن سمة type غير مطلوبة. مثال:
<link rel="stylesheet" href="styles.css" type="text/css">
media : تسمح لك هذه السمة بتحديد أنواع الوسائط التي تنطبق عليها ورقة الأنماط. على سبيل المثال، يمكنك إنشاء ورقة أنماط خاصة بالطباعة يتم استخدامها عندما يقوم المستخدمون بطباعة صفحة. مثال:
<link rel="stylesheet" href="print.css" media="print">
sizes : عند استخدام علامة link للربط بأيقونات ذات أحجام متعددة، يمكنك استخدام سمة sizes لتحديد حجم الأيقونة. يعد هذا مفيدًا في المواقف التي يتم فيها عرض الرموز بأحجام مختلفة حسب الجهاز. مثال:
<link rel="icon" href="icon-48x48.png" الأحجام="48x48"> <link rel="icon" href="icon-96x96.png" الأحجام="96x96">
crossorigin : عند الارتباط بمورد عبر الأصل، يمكنك استخدام سمة crossorigin لتحديد إعدادات CORS (مشاركة الموارد عبر الأصل) للمورد. مثال:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : يتم استخدام هذه السمة لضمان سلامة الموارد الخارجية ويمكن استخدامها مع السمة crossorigin . من خلال منح المورد تجزئة قائمة على المحتوى (مثل SHA-256)، يمكنك التأكد من عدم التلاعب بالمورد. مثال:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" Integrity="sha256-base64-encoded-hash">
preload : يمكن استخدام rel="preload" لتحميل الموارد المهمة مسبقًا، مثل الخطوط أو الصور أو البرامج النصية. يؤدي هذا إلى تحسين أداء تحميل الصفحة. مثال:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
هذه بعض السمات والاستخدامات الشائعة لعلامة link .
بالإضافة إلى ما سبق ذكره، يحتوي rel على المزيد من قيم السمات:
alternate : استخدم rel="alternate" لتوفير إصدارات بديلة من المستند، مثل الصفحات بلغة مختلفة أو لأجهزة مختلفة. مثال:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="الشاشة فقط و(الحد الأقصى للعرض: 640 بكسل)" href="https://link.com/mobile/a">
dns-prefetch : يمكن حل أسماء النطاقات مسبقًا من خلال rel="dns-prefetch" لتقليل وقت بحث DNS وتسريع تحميل الموارد. مثال:
<link rel="dns-prefetch" href="//link.com">
preconnect : على غرار dns-prefetch ، يمكن لـ rel="preconnect" إنشاء اتصال TCP مسبقًا بمورد طرف ثالث، مما يقلل الوقت المطلوب لإنشاء اتصال. مثال:
<link rel="preconnect" href="https://link.com">
prefetch : استخدم rel="prefetch" للجلب المسبق للموارد وتخزينها مؤقتًا لاستخدامها في الصفحات اللاحقة. يعد هذا مفيدًا للتحميل المسبق للموارد التي يمكن استخدامها في الصفحة. مثال:
<link rel="prefetch" href="pre-page.html">
canonical : يمكن أن يؤدي استخدام rel="canonical" إلى تزويد محركات البحث بعنوان URL الأساسي للصفحة، مما يساعد على تجنب مشكلات المحتوى المكررة. مثال:
<link rel="canonical" href="https://link.com/a/post">
license : استخدم rel="license" لتحديد عنوان URL لترخيص المستند. مثال:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : استخدم rel="manifest" لربط ملف بيان تطبيق الويب (عادةً بتنسيق JSON) بمستند HTML. يحتوي ملف البيان على البيانات الوصفية لتطبيق الويب، مثل الاسم والوصف والأيقونة وما إلى ذلك. مثال:
<link rel="manifest" href="manifest.json">
يرجى ملاحظة أن المتصفحات المختلفة قد يكون لها درجات متفاوتة من الدعم لهذه الخصائص والوظائف. يوصى بمراجعة الوثائق ذات الصلة عند استخدام الميزات الجديدة لضمان التوافق والأداء الوظيفي.
وبهذا تنتهي هذه المقالة حول الاستخدام المحدد لسمة علامة الرابط في HTML. لمزيد من المعلومات حول سمة علامة الرابط HTML، يرجى البحث في المقالات السابقة على downcodes.com أو الاستمرار في تصفح المقالات ذات الصلة أدناه المستقبل.