HTML a Tag - الرابط التشعبي

ما هو تعريف الإرتباط التشعبي - 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="http://abuelfateh.com/">موقع أبوالفتح الإلكتروني</a>

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

الوصف href

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

HTML5

<a href="">رابط فارغ لإعادة تحميل نفس الصفحة</a>
<a href="http://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="http://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

  • nofollow: يتم إستخدام هذه القيمة لنحدد لعناكب البحث أن هذا الرابط لا يجب تتبعه وبالتالي لن يتم فهرسته (حفظ محتوياته على خوادم محركات البحث).
  • noreferrer: عند زيارة أي صفحة للويب فعادة ما يتم حفظ مصدر الزيارة من قبل المتصفح، فعلى سبيل المثال إذا قمت بزيارة موقعنا من خلال محرك البحث google، فسوف يرسل لنا متصفحك أنك قمت بزيارة موقعنا من خلال موقع google، وعند إستخدام هذه القيمة مع الوصف rel، فإنك تجبر المتصفح على عدم إرسال مصدر الزيارة إلى الصفحة الأخرى التي يشير إليها الرابط.
  • help: تستخدم هذه القيمة لكي تحدد أن الصفحة المشار إليها هي صفحة للمساعدة.
  • license: تحدد أن الصفحة المشار إليها تحتوي على معلومات تخص حقوق الملكية.

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