وسم الإرتباط التشعبي - الروابط - في لغة الترميز HTML

ما هو تعريف الإرتباط التشعبي - hyberlink - Web Link - anchore؟ ما هي مكونات وسم الإرتباط التشعبي (anchor Tag) - العنصر a؟ وتعرف على أهم الأوصاف - attributes المستخدمة لإنشاء الإرتباط التشعبي، الوصف href، الوصف target، الوصف rel.

ما هو تعريف الإرتباط التشعبي؟

وسم الإرتباط التشعبي ويعرف إختصارا بـ الرابط وله عدة مسميات باللغة الإنجليزية منها hyperlink أو Web link أو anchor، ويرمز له بالرمز <a> وهو إختصار لكلمة anchor، ويعد الرابط التشعبي هو أهم ما يميز لغة الترميز HTML بإعتبارها وسيلة لنشر وتنسيق المحتوى النصي، حيث يسمح إستخدام الرابط التشعبي بالتفاعل مع صفحة الويب، والتنقل من صفحة إلى أخرى.

يستخدم الرابط التشعبي لكي يشير إلى وجهة ما Destination، وقد تكون هذه الوجهة أي من موارد الويب مثل (عنوان ويب، صورة، فيديو، ملف HTML، عنصر من عناصر HTML، ...)، وعادة ما يتم التفاعل مع الرابط التشعبي من خلال الضغط عليه بزر الماوس أو بتحديده بإستخدام لوحة المفاتيح أو حتى الضغط عليه بإستخدام الأجهزة التي تعمل باللمس.

مكونات وسم الإرتباط التشعبي - العنصر <a>

يجب أن يبدأ الإرتباط التشعبي بوسم البداية وينتهي بوسم النهاية وأن يحتوي على الوصف href، والوصف هنا هو ترجمة الكلمة attribute، والمثال التالي يوضح المكونات الأساسية لإنشاء إرتباط تشعبي

HTML5

<a href="https://abuelfateh.com/">موقع أبوالفتح الإلكتروني</a>

عند تجربة المثال السابق في صفحة HTML سوف تلاحظ ظهور الجملة (موقع أبوالفتح الإلكتروني)، وعند الضغط عليها سوف يتم تحويل المتصفح إلى عنوان الموقع الإلكتروني الموجود بين علامات التنصيص، والموقع الإلكتروني هو أحد موارد الويب والتي يتم إستخدامها مع الوصف href.

الوصف href

هو إختصار للمصطلح Hypertext REFerence، ويعتبر إستخدام الوصف href إجباري، فلا يمكن تحديد الوجهة التي يشير إليها الرابط بدون إستخدام هذا الوصف، وعادة ما يشار إلى قيمة هذا الوصف بعنوان الـ URL، والأمثلة التالية توضح إستخدام عنوان الـ URL مع الوصف href

HTML5

<a href="">رابط فارغ لإعادة تحميل نفس الصفحة</a>
<a href="https://abuelfateh.com/">زيارة موقع أبوالفتح</a>
<a href="test.html">الذهاب إلى صفحة أخرى</a>
<a href="#header">الذهاب إلى أعلى الصفحة</a>
<a href="mailto:ask@abuelfateh.com?subject=Request&body=I%20want%20to%20learn%20HTML">إرسال رسالة بريد إلكتروني</a>
<a href="tel:0021000000000">إتصل بنا</a>
<a href="javascript:alert('Welcome at abuelfateh\'s Website');">تشغيل أكواد جافا سكريبت</a>

عند تجربة الأمثلة السابقة في صفحة HTML، وعند الضغط على الروابط سوف تلاحظ التالي

• في المثال الأول عند ترك قيمة الوصف فارغة href=""، سوف يقوم بإعادة تحميل نفس الصفحة.
• في المثال href="https://abuelfateh.com/"، سوف يتم فتح رابط الموقع في نفس الصفحة.
• في المثال href="blog.html"، يجب أن يحتوي المجلد على ملف HTML آخر يسمى test.html، وفي هذه الحالة سوف يتم تحميل الصفحة الأخرى في نفس المتصفح.
• في المثال href="#header"، علامة الـ # تشير إلى إستخدام الوصف id المسمى header، وعادة ما يتم إستخدام هذا المثال لكي يشير إلى أول عنصر في صفحة الـ HTML لكي يتم الذهاب إليه أو ما يعرف بـ scroll.
• في المثال href="mailto:..."، هنا إستخدمنا البروتوكول الخاص بإرسال رسالة بريد إلكتروني، فإن كان جهازك يحتوي على برنامج لمتابعة البريد الإلكتروني سوف يفتح البرنامج ويظهر لك محتوي الـ Subject و محتوى الرسالة كما هو موضح في المثال.
• في المثال href="tel:..."، فيعد هذا إستخداما حديثا للوصف href حيث عند تجربته من خلال متصفح يعمل على هاتف (Smart Phone) سوف يعرض عليك الإتصال مباشرة بالرقم.
• في المثال href="javascript:..."، هذا الإستخدام للوصف href يقوم بتشغيل أكواد JavaScript، وفي هذا المثال سوف يظهر رسالة للترحيب بكم في موقعنا.

الوصف target

<a href="#" target="_self|_blank|_top|_parent|framename">Link</a>

ويعد من الـ attributes المهمة لإنشاء رابط تشعبي، حيث أن الوصف target هو الذي يحدد أين سيتم فتح عنوان الـ URL، وعادة عند إنشاء رابط تشعبي إذا لم يتم تحديد أو كتابة هذا الوصف فإنه يتم فتح الرابط في نفس الصفحة وهذا هو الوضع الإفتراضي للوصف target، ويوجد خمس قيم يمكن أن يتم إستخدامها مع الوصف target

• target="_self": يتم فتح الرابط في نفس الصفحة، وهي القيمة الإفتراضية للوصف.
• target="_blank": يتم فتح الرابط في صفحة جديدة، وعادة ما يكون تبويب جديد في المتصفح (Tab).
• target="_parent": عادة ما يكون إستخدام هذه القيمة مرتبط بالعنصر iframe، أي أن الرابط التشعبي ضمن عناصر الـ iframe، وبالتالي عند الضغط على الرابط يتم تشغيله في الصفحة التي تحتوي على الـ iframe.
• target="_top": تستخدم هذه القيمة أيضا مع العنصر iframe ولكن يتم فتح الرابط في الصفحة الرئيسية التي تحتوي على عنصر الـ iframe أو عناصر الـ iframe، وتستخدم أيضا هذه القيمة في الجوالات ليتم فتح الرابط في التطبيق الخاص به، فعند إستخدام رابط للنشر على facebook ويحتوي على هذه القيمة عادة ما يتم تشغيل تطبيق الـ facebook.
• target="framename": بالطبع يتم إستبدال الـ framename بإسم العنصر iframe، حتى يتم فتح الرابط بداخل الـ iframe.

الوصف rel

<a href="#" rel="nofollow|noreferrer|help|license|search|...">Link</a>

يسمى هذا الوصف بـ rel إختصارا للكلمة relationship، وهذا الوصف يحدد العلاقة بين مصدر الرابط (الصفحة التي تحتوي على الرابط) والصفحة المشار إليها، ويستخدم هذا الوصف لكي يحدد لـ screen readers، أو عناكب البحث (Bots) محتوى الرابط وعلاقته بالصفحة المشار إليها، وعادة ما يتم إستخدام هذا الوصف في عملية تحسين محركات البحث للموقع، وعدم إستخدام هذا الوصف لا يؤثر على الرابط التشعبي، وسوف نذكر بعض القيم المهمة التي يمكن إستخدامها مع الوصف rel

rel="nofollow"

يتم إستخدام هذه القيمة لتحدد لعناكب البحث (زاحف الويب)، أن هذا الرابط لا يجب إتباعه، ولا يجب أن يحصل على مصداقية من الموقع الذي يشير إليه، فعادة عندما يتم الإشارة إلى موقع ما من خلال موقع آخر، فإن الموقع المشار إليه يحصل على نسبة مصداقية من الموقع الذي يشير إليه.

وعادة ما يستخدم هذا الوصف في المواقع في الجزء الذي يقوم المستخدم بإدخال البيانات، مثل التعليقات في المنتديات والمدونات، ويستخدم أيضا مع روابط الإعلانات، وقد قامت جوجل مؤخرا بنشر قيمتين جديدتين لتطوير هذا الوصف، وهماrel="sponsored" و rel="ugc".

rel="noreferrer"

عند زيارة أي صفحة ويب، عادة ما يتم حفظ مصدر الزيارة (عنوان الموقع الذي يشير إلى صفحة الويب)، فعلى سبيل المثال عند زيارة موقعنا من خلال محرك البحث google، فإن متصفح الإنترنت الخاص بك سوف يرسل لنا بيانات تشير إلى أن مصدر الزيارة هي موقع google، فإن كنت ترغب في عدم تتبع عنوان الموقع الخاص بك عند زيارة صفحات أخرى يمكنك إستخدام هذا الوصف لذلك.

rel="help"

تستخدم هذه القيمة مع الوصف rel لكي تحدد أن نوع الصفحة المشار إليها تحتوي على معلومات خاصة بالمساعدة، وعادة ما تستخدم هذه القيمة مع صفحات الدعم الفني، وصفحات التوثيق الكاملة (Documentation).

rel="license"

تستخدم هذه القيمة مع روابط الصفحات التي تحتوي على معلومات تخص حقوق الملكية.

rel="sponsored"

هذه القيمة تم تطويرها حديثا من قبل شركة جوجل، وهي قيمة أكثر وضوحا من القيمة nofollow، فهي تحدد لزاحف الويب الخاص بمحرك البحث جوجل نوع العلاقة بين موقعك وبين الرابط المشار إليه، وتستخدم هذه القيمة مع الروابط الخاصة بالإعلانات أو روابط الرعاية (Sponsorship)، ويمكنك إستخدام هذه القيمة مع القيمة nofollow حتى تدعم محركات البحث التي لم تقم بعد بدعم هذه القيمة، ليصبح الوصف rel="nofollow sponsored".

rel="ugc"

وهي أيضا قيمة جديدة لتطوير القيمة nofollow، وهي إختصار للجملة الإنجليزية User Generated Content، ويوصى بإستخدام هذه القيمة مع الروابط الموجودة في منطقة التعليقات في المدونات والمنتديات، ويمكنك أيضا إستخدام القيمة nofollow مع هذه القيمة لتدعم التوافق مع النسخة الأقدم، ليصبح الوصف rel="nofollow ugc".

ويمكنك تعلم المزيد عن الرابط التشعبي من خلال زيارة الموقع التالي https://www.w3.org/TR/html40/struct/links.html.