إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    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;
    }
    	
    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات الأمن السيبراني

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب