❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <link>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي

تعريفه

بشكل عام نستخدم الوسم <link> بداخل الوسم <head> على النحو التالي لتضمين ملفات خارجية في الصفحة.

<head>
    <link rel="file-type" href="url"/>
    ...
</head>
  • مكان الكلمة url نضع رابط الملف الذي سيتم تضمينه في الصفحة.
  • مكان الكلمة file-type نحدد نوع الملف الذي سيتم تضمينه.

غالباً ما نستخدم هذا الوسم لتضمين ملفات التصميم التي يكون إمتدادها .css كما أننا نستخدمه لتعيين أيقونة الصفحة ( Favicon ) التي تظهر في تبويب المتصفح ( Browser Tab ).

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <link>.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.


الخاصية crossorigin

نضيفها للوسم في حال أردنا تضمين ملف موجود في موقع آخر لتحديد ما هي المعلومات التي سيتم إرسالها مع طلب الحصول على الملف من ذاك الموقع.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
25 79 18 15 ؟ 37 مدعوم 18 ؟ ؟ مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية crossorigin لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب الذي يقضي بجلب الملف.

القيمة معناها
anonymous في حال وضع هذا القيمة فهذا يعني أن الملف الذي يتم طلبه لن يتم طلب إحضار معلومات الـ cors معه.
use-credentials في حال وضع هذا القيمة فهذا يعني أنه لن يتم طلب إحضار أي معلومات إضافية مع الملف المطلوب.

الخاصية href

نضيفها للوسم لتحديد رابط الملف الذي سيتم تضمينه في الصفحة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

الخاصية hreflang

يمكن إضافتها للوسم بهدف تحديد لغة الرابط الذي سيتم توجيه المستخدم إليه.
ينصح بإضافتها للوسم في حال تم مسبقاً إضافة الخاصية href.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

الخاصية referrerpolicy

يمكن إضافتها للوسم بهدف تحديد المعلومات التي سيتم إرسالها مع طلب إحضار الملف.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
51 79 50 38 11.1 51 51 50 41 غير مدعوم 7.2

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

القيمة معناها
no-referrer لعدم إرسال أي معلومة مع طلب إحضار الملف.
no-referrer-when-downgrade لعدم إرسال أي معلومة في Header طلب إحضار الملف ( أي المعلومات التي ترسلها الصفحة للموقع و لا تظهر في الرابط ) إذا كان الموقع الذي سيتلقى الطلب لا يستخدم البروتوكل https و هذا هو الحال الإفتراضي.
origin لإرسال المعلومات التالية فقط مع طلب إحضار الملف ( scheme - host - port ).
origin-when-cross-origin لإرسال المعلومات التالية مع طلب إحضار الملف ( scheme - host - port ) بالإضافة إلى المسار ( path ) في حال كان الرابط موجود في نفس الموقع.
unsafe-url لإرسال المعلومات التالية فقط مع طلب إحضار الملف ( origin - path ) أي بدون أي معلومة حساسة مثل إسم المستخدم و كلمة مروره.

الخاصية rel

يمكن إضافتها للوسم بهدف تحديد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم طلب الملف منه و هذا الأمر مهم جداً بالنسبة لمحركات البحث.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحدد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه.

القيمة معناها
alternate للإشارة إلى أن الرابط الموضوع هو رابط بديل للرابط الحالي في حال كان هذا البديل أفضل و يلائم باقي الخصائص الموضوعة.
author للإشارة إلى أن الرابط الموضوع هو لصفحة تصف مؤلف المحتوى أو توفر طريقة للتواصل معه.
canonical للإشارة إلى أن الرابط الموضوع هو للصفحة الأساسية.
help للإشارة إلى أن الرابط الموضوع يقدم مساعدة.
icon لتحديد أيقونة الصفحة التي سيتم عرضها في تبويب ( Tab ) المتصفح.
في حال وضع عدة أيقونات بواسطة عدة وسوم <link rel="icon"> و كانت الصفحة تستخدم الخصائص media و type و sizes فإن المتصفح سيقوم باختيار الأيقونة الأنسب منهم.
في أنظمة IOS لتعيين الأيقونات يجب استخدام الخصائص apple-touch-icon و apple-touch-startup-image مع الخاصية sizes و لمزيد من التفاصيل أدخل هنا
license للإشارة إلى أن الرابط الموضوع يوضح رخصة المحتوى المعروض في الصفحة.
modulepreload للإشارة إلى أن رابط السكربت الموضوع يجب تحميله في الأول من أجل استخدامه لاحقاً.
next للإشارة إلى أن الرابط الموضوع هو الرابط التالي الذي يجب الإنتقال إليه لمتابعة أمر ما.
noreferrer لمنع المتصفح من إرسال أي معلومات مع طلب المستخدم مما يعني أن المستخدم سيكون مجهول بالنسبة للموقع الذي يتم نقله إليه حين ينقر على الرابط.
pingback لإعلام الرابط الموضوع بأنه يوجد صفحة تستخدمه.
preload للإشارة إلى أن رابط الملف الموضوع يجب تضمينه بالأول قبل تضمين أي ملفات أخرى.
في العادة ملفات الخطوط ( Fonts ) يتم تضمينها بالأول.
prev للإشارة إلى أن الرابط الموضوع هو الرابط التالي الذي يجب الإنتقال إليه لمتابعة أمر ما.
search لإظهار زر للبحث مبني على نتائج بحث سابقة تم إجراؤها بواسطة المتصفح.
لا ننصح بهذا الأمر لأنه يتطلب ذكر معلومات خاصة تساعد في البحث في كل صفحة يتم إنشاؤها في الموقع حتى ينجح ذلك بالإضافة إلى أن المستخدم في العادة يفضل أن يستخدم مربع بحث عادي موجود في الموقع أو يستخدم بحث جوجل.
stylesheet للإشارة إلى أن الرابط الموضوع هو رابط لملف CSS.

الخاصية type

يمكنك إضافتها للوسم لتحديد نوع محتوى الرابط بأسلوب MIME.
على سبيل المثال إذا أردت الإشارة إلى أن الرابط الموضوع يشير لملف .css يمكنك إضافة الخاصية type="text/css" للوسم و إذا أردت الإشارة إلى أن الرابط الموضوع يشير لملف .html يمكنك إضافة الخاصية type="text/html" للوسم.

ملاحظة: بالنسبة لملفات التصميم التي نوعها .css فإنه يفضّل تحديد نوعها هكذا rel="stylesheet" بدلاً من تحديده هكذا type="text/css".

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

إستخدامه

في المثال التالي قمنا بوضع أيقونة موقع هرمش نفسها بجانب عنوان الصفحة.

المثال الأول

<!DOCTYPE html>
<html>
    <head>
        <title>Watch Harmash favicon</title>
        <link rel="icon" type="image/x-icon" href="/tutorials/html/tags/link/favicon.PNG">
    </head>
</html>
جرب الكود

في المثال التالي قمنا بإعداد ملف تصميم إسمه style.css ثم قمنا بتضمينه في الصفحة.
ملاحظة: كود التصميم الموضوع في هذ الملف سيتم تطبيقه على عناصر الصفحة.

المثال الثاني

<!DOCTYPE html>
<html>
    <head>
        <!-- style.css هنا قمنا بتضمين الملف -->
        <link rel="stylesheet" href="/tutorials/html/tags/link/style.css">
    </head>
</html>
جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

link {
    display: none;
}