تحديد أيقونة خاصة لموقع الويب و أيقونات مخصصة لكل صفحة من صفحات الموقع في لغة HTML الدرس|23| - Programmer Tech

Programmer Tech

تعلم البرمجة - علوم الكمبيوتر - أمن المعلومات - القرصنة الأخلاقية

إعلان اعلى المقالة

الأحد، 27 يونيو 2021

تحديد أيقونة خاصة لموقع الويب و أيقونات مخصصة لكل صفحة من صفحات الموقع في لغة HTML الدرس|23|


العنصر link نوع icon في HTML

سوف نتحدث في درسنا هذا و نتعرف على العنصر link من نوع icon, من خلال هذا العنصر يُمكنك أن تقوُم بتحديد الأيقونة التي تظهَر أعلى شريط title في صفحة الويب.

 

أو الأيقونة في حال قُمت بنشر موقعك على الإنترنت بمحركات البحث سيتم عرضها بجانب رابط موقعك بدل علامة الكرة الأرضية التي تكون إفتراضية بحال لم تحدد أيقونة له, أو الأيقونة عندما يقوم شخص ما بمشاركة رابط الموقع الخاص بك في مواقع التواصل تظهَر هذه الايقونة كصورة للموقع.

<head>
    <link rel="icon" href="img/lgoo.jpg" />
</head>


قُمنا بإضافة الوسم link ضمن الـ head ووضعنا rel ثم أعطيناه القيمة icon من أجل تحديد الأيقونة بجانب إسم الموقع في title ثم إستخدمنا href لتحديد مسار الصورة و الصورة هنا موجودة ضمن مجلد إسمه img ثم إسم الصورة و إمتدادها, الأفضل أن تكون صور الأيقونة محصور إمتدادها jpg أو png كإختيار أفضل, و عندما نقوم بتشغيل الكود السابق في المتصفح سوف يظهر لنا بالشكل الآتي

كما نلاحظ أنه قد تم عرض الصورة التي إخترناها كأيقونة لموقعنا.


عرض الأيقونة على جميع المتصفحات

لضمان عرض هذه الأيقونة بجميع محركات البحث و أيضاً الأجهزة التي تعمل بنظام apple توجد عدة قيم للقيام بهذا الأمر بسهولة فقط نقوم بنسخ السطر السابق مرتين ووضع القيم به, سوف نجمعها لكم بالكود الآتي

<head>
    <link rel="icon" href="img/lgoo.jpg" />
    <link rel="shortcut" href="img/lgoo.jpg" />
    <link rel="apple-touch-icon" href="img/lgoo.jpg" />
</head>

 

 

شرح المثال السابق

قُمنا بإضافة الوسم link ضمن الـ head ووضعنا rel ثم أعطيناه القيمة icon من أجل تحديد الأيقونة بجانب إسم الموقع في title ثم إستخدمنا href لتحديد مسار الصورة و الصورة هنا موجودة ضمن مجلد إسمه img ثم إسم الصورة و إمتدادها, ثم قمنا بنسخ السطرين و إستبدال القيمة icon في السطر الثاني إلى shortcut من أجل متصفحات البحث جميعها, و في السطر الثال وضعنا القيمة apple-touch-icon من أجل عرضها على أجهزة شركة apple.

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

و أيضاً يُمكن تحديد أيقونات متعددة و مختلفة لكل صفحة من صفحات الموقع الخاص بك, بحيث كل صفحة يتم تحويل الزائر لها يتم عرض أيقونة مختلفة عن أيقونة باقي الصفحات.

إضغط هنا لمتابعة جميع دروس HTML.

ليست هناك تعليقات:

إرسال تعليق

facebook

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *