الروابط

في مقدّمة السمات، شاركنا مثالاً على كيفية إضافة السمات إلى علامة الفتح. استخدم المثال العلامة <a>، ولكن لم تتم مناقشة العنصر أو السمات المحدّدة التي تم تقديمها في هذا المثال.

تنشئ علامة الربط <a>، بالإضافة إلى السمة href، رابطًا تشعبيًا. الروابط هي أساس الإنترنت. احتوت أول صفحة ويب على 25 رابطًا، وكتب فيها: "كل ما هو متاح على الإنترنت حول W3 مرتبط بهذا المستند بشكل مباشر أو غير مباشر". من المرجّح أنّ كل ما هو متاح على الإنترنت بشأن W3 مرتبط بشكل مباشر أو غير مباشر بهذا المستند أيضًا.

لقد تطوّرت قوة الويب وعلامة <a> بشكل كبير منذ أن نشر "تيم بيرنرز لي" هذا التفسير الأول في أغسطس 1991. تمثّل الروابط صلة بين مرجعَين، أحدهما هو المستند الحالي. يمكن إنشاء الروابط من خلال <a> و<area> و<form> و<link>. تعرّفت على <link>، وسنتعرّف على النماذج في قسم منفصل. يتوفّر أيضًا قسم كامل للتعرّف على النماذج. في هذه الجلسة، سنتعرّف على علامة <a> المكوّنة من حرف واحد والتي ليست بسيطة كما تبدو.

السمة href

على الرغم من أنّ السمة href ليست إلزامية، إلا أنّها تظهر في جميع علامات <a> تقريبًا. يؤدي توفير عنوان الرابط التشعّبي إلى تحويل <a> إلى رابط. يُستخدَم السمة href لإنشاء روابط تؤدي إلى أقسام أخرى في الصفحة الحالية أو صفحات أخرى ضمن الموقع الإلكتروني أو مواقع إلكترونية أخرى تمامًا. ويمكن أيضًا ترميزها لتنزيل الملفات أو إرسال رسالة إلكترونية إلى عنوان محدّد، بما في ذلك الموضوع ومحتوى نص الرسالة الإلكترونية المقترَح.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

يتضمّن الرابط الأول عنوان URL مطلقًا، ويمكن استخدامه على أي موقع إلكتروني في العالم للانتقال إلى الصفحة الرئيسية لموقع MLW. تتضمّن عناوين URL المطلقة بروتوكولاً، وهو https:// في هذه الحالة، واسم نطاق. عندما تتم كتابة البروتوكول على النحو //، يكون بروتوكولاً ضمنيًا ويعني "استخدام البروتوكول نفسه الذي يتم استخدامه حاليًا".

لا تتضمّن عناوين URL النسبية بروتوكولاً أو اسم نطاق. وهي "نسبية" للملف الحالي. ‫MLW هو موقع إلكتروني من صفحة واحدة، ولكن سلسلة HTML هذه تتضمّن عدة أقسام. من أجل الربط من هذه الصفحة إلى درس السمات، يتم استخدام عنوان URL نسبي <a href="../attributes/">Attributes</a>.

الرابط الثاني هو مجرد معرّف جزء من رابط، وسيؤدي إلى العنصر الذي يتضمّن id="teachers", إذا كان متوفّرًا على الصفحة الحالية. تتيح المتصفحات أيضًا استخدام رابطَين "أعلى الصفحة": يؤدي النقر على <a href="#top">Top</a> (غير حساس لحالة الأحرف) أو حتى على <a href="#">Top</a> إلى إعادة المستخدم إلى أعلى الصفحة، ما لم يكن هناك عنصر يحمل المعرّف top مضبوطًا بحالة الأحرف نفسها.

مستند MLW طويل إلى حدّ ما. لتوفير عناء التمرير، يمكنك إضافة رابط للعودة إلى أعلى الصفحة من أسفل قسم #المعلّمون:

<a href="#top">Go to top.</a>

يجمع الرابط الثالث بين القيمتين: فهو يحتوي على عنوان URL مطلق متبوعًا بجزء من الرابط. يتيح ذلك الربط مباشرةً بقسم في عنوان URL المحدّد، وفي هذه الحالة، القسم #teachers من الصفحة الرئيسية لموقع MLW. يتم تحميل صفحة MLW وينتقل المتصفّح إلى قسم المعلّمين، بدون إرسال الجزء في طلب HTTP.

يمكن أن تبدأ السمة href بالرمز mailto: أو tel: لإرسال رسائل إلكترونية أو إجراء مكالمات، مع العلم أنّ طريقة معالجة الرابط تعتمد على الجهاز ونظام التشغيل والتطبيقات المثبّتة.

لا يشترط أن يتضمّن الرابط mailto عنوان بريد إلكتروني، ولكن يمكن أن يتضمّنه، بالإضافة إلى النص cc وbcc وsubject وbody، وذلك لتعبئة الرسالة الإلكترونية مسبقًا. سيتم تلقائيًا فتح برنامج البريد الإلكتروني. يمكنك ملء موضوع الرسالة الإلكترونية ونصها مسبقًا بدون إضافة عنوان بريد إلكتروني، وذلك للسماح لزائري الموقع الإلكتروني بدعوة أصدقائهم. في الرابط الذي يظهر في تذييل المستند، نُدرج عنوان URL الخاص بالتسجيل:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

تفصل علامة الاستفهام (?) بين mailto: وعنوان البريد الإلكتروني، إن وُجد، وبين عبارة البحث. في طلب البحث، تفصل علامات العطف (&) بين الحقول، وتساوي علامات المساواة (=) بين كل اسم حقل وقيمته. يتم ترميز السلسلة بأكملها باستخدام الترميز بالنسبة المئوية، وهو أمر ضروري بالتأكيد إذا لم يتم وضع قيمة href بين علامات اقتباس أو إذا كانت القيم تتضمّن علامات اقتباس.

يعتمد التطبيق الذي يتم فتحه عندما ينقر المستخدم على رابط tel أو يضغط عليه أو يضغط على مفتاح Enter على نظام التشغيل والتطبيقات المثبَّتة والإعدادات التي ضبطها المستخدم على جهازه. قد يفتح هاتف iPhone تطبيق FaceTime أو تطبيق الهاتف أو جهات الاتصال. قد يفتح كمبيوتر Windows المكتبي تطبيق Skype إذا كان مثبّتًا.

تتوفّر عدة أنواع أخرى من عناوين URL، مثل blobs وعناوين URL للبيانات (يمكنك الاطّلاع على أمثلة في مناقشة السمة download). بالنسبة إلى المواقع الإلكترونية الآمنة (التي يتم عرضها عبر https)، من الممكن إنشاء بروتوكولات خاصة بالتطبيقات وتشغيلها باستخدام registerProtocolHandler().

عند تضمين روابط من المحتمل أن تفتح تطبيقات أخرى مثبَّتة، من الجيد إعلام المستخدم بذلك. احرِص على أن يوضّح النص بين علامتَي الفتح والإغلاق للمستخدم نوع الرابط الذي سيتم تفعيله. يمكن استخدام أدوات اختيار سمات CSS، مثل [href^="mailto:"] و[href^="tel:"] و[href$=".pdf"]، لاستهداف الأنماط حسب نوع التطبيق.

المراجع القابلة للتنزيل

يجب تضمين السمة download عندما تشير السمة href إلى مورد قابل للتنزيل. قيمة السمة download هي اسم الملف المقترَح للمورد الذي سيتم حفظه في نظام الملفات المحلي للمستخدم. يستخدم SVGOMG، وهو أداة تحسين لملفات SVG، السمة download لاقتراح اسم ملف للبيانات الثنائية الكبيرة القابلة للتنزيل التي تنشئها أداة التحسين. عند تحسين hal.svg، يكون فتح علامة رابط التنزيل في SVGOMG مشابهاً لما يلي:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

يتوفّر أيضًا عرض توضيحي <canvas> ينشئ عنوان URL لبيانات PNG يمكن تنزيله.

لإنشاء رابط يؤدي إلى مورد قابل للتنزيل، أدرِج عنوان URL الخاص بمادة العرض كقيمة للسمة href، واسم ملف مقترَح للمستخدم كقيمة للسمة download.

سياق التصفّح

تتيح السمة target تحديد سياق التصفّح لتنقّل الروابط (وإرسال النماذج). تمت مناقشة الكلمات الرئيسية الأربع التي لا تراعي حالة الأحرف والمسبوقة بشرطة سفلية مع العنصر <base>. يشمل ذلك ما يلي:

• (الإعداد التلقائي) _self: فتح الرابط في النافذة الحالية
• _blank: فتح الرابط في علامة تبويب جديدة
• ‫_parent: فتح الرابط في العنصر الرئيسي أو إطار iframe
• ‫_top: فتح الرابط في العنصر الأصل الأعلى مستوى ويكون ذلك مفيدًا بشكل خاص إذا كان الرابط متداخلاً بشكل كبير.

إذا لم يكن الرابط متداخلاً، سيعمل _top و_parent بالطريقة نفسها التي يعمل بها _self. لا تقتصر السمة target على هذه المصطلحات الرئيسية الأربعة، بل يمكن استخدام أي مصطلح.

لكل سياق تصفّح (أو كل علامة تبويب في المتصفّح) اسم سياق تصفّح. يمكن للروابط فتح روابط في علامة التبويب الحالية أو علامة تبويب جديدة بدون اسم أو علامة تبويب جديدة أو حالية باسم. تكون القيمة التلقائية للاسم هي السلسلة الفارغة.

لفتح رابط في علامة تبويب جديدة، يمكن للمستخدم النقر بزر الماوس الأيمن واختيار "فتح في علامة تبويب جديدة". يمكن للمطوّرين فرض ذلك من خلال تضمين target="_blank".

يتم فتح رابط يتضمّن target="_blank" في علامة تبويب جديدة باسم فارغ، ما يؤدي إلى فتح علامة تبويب جديدة بدون اسم عند النقر على كل رابط. قد يؤدي ذلك إلى إنشاء العديد من علامات التبويب الجديدة. عدد علامات التبويب كبير جدًا. على سبيل المثال، إذا نقر المستخدم على <a href="registration.html" target="_blank">Register Now</a> 15 مرة، سيتم فتح نموذج التسجيل في 15 علامة تبويب منفصلة. يمكن حلّ هذه المشكلة من خلال توفير اسم سياق علامة تبويب. من خلال تضمين السمة target مع قيمة حساسة لحالة الأحرف، مثل <a href="registration.html" target="reg">Register Now</a>، ستفتح النقرة الأولى نموذج التسجيل في علامة التبويب reg الجديدة. سيؤدي النقر على هذا الرابط 15 مرة أخرى إلى إعادة تحميل عملية التسجيل في سياق التصفّح reg بدون فتح أي علامات تبويب إضافية.

تتحكّم السمة rel في أنواع الروابط التي ينشئها الرابط، وتحدّد العلاقة بين المستند الحالي والمورد المرتبط به في الارتباط التشعبي. يجب أن تكون قيمة السمة عبارة عن قائمة مفصولة بمسافات تتضمّن قيمة واحدة أو أكثر من نقاط سمة rel التي يتيحها العلامة <a>.

يمكن تضمين الكلمة الرئيسية nofollow إذا كنت لا تريد أن تتّبع برامج الزحف الرابط. يمكن إضافة القيمة external للإشارة إلى أنّ الرابط يؤدي إلى عنوان URL خارجي وليس إلى صفحة ضمن النطاق الحالي. تشير الكلمة الرئيسية help إلى أنّ الرابط التشعّبي سيقدّم مساعدة حساسة للسياق. سيؤدي تمرير مؤشر الماوس فوق رابط يحتوي على القيمة rel إلى عرض مؤشر مساعدة بدلاً من مؤشر الماوس العادي. لا تستخدِم هذه القيمة فقط للحصول على مؤشر المساعدة، بل استخدِم السمة cursor في CSS بدلاً من ذلك. يمكن استخدام القيمتَين prev وnext في الروابط التي تشير إلى المستند السابق والمستند التالي في سلسلة.

على غرار <link rel="alternative">، يعتمد معنى <a rel="alternative"> على السمات الأخرى. ستتضمّن بدائل خلاصة RSS أيضًا type="application/rss+xml" أو type="application/atom+xml، وستتضمّن التنسيقات البديلة السمة type، وستتضمّن الترجمات السمة hreflang. إذا كان المحتوى بين علامات الفتح والإغلاق بلغة أخرى غير لغة المستند الرئيسية، أدرِج السمة lang. إذا كانت لغة المستند المرتبط بنص تشعّبي مختلفة، أدرِج السمة hreflang.

في هذا المثال، نضمّن عنوان URL الخاص بالصفحة المترجَمة كقيمة href، rel="alternate" للإشارة إلى أنّها نسخة بديلة من الموقع الإلكتروني، وتوفّر السمة hreflang لغة الترجمات:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

إذا كانت الترجمة الفرنسية عبارة عن ملف PDF، يمكنك تقديم السمة "النوع" مع نوع MIME الخاص بملف PDF للمرجع المرتبط. على الرغم من أنّ نوع MIME هو مجرد نصيحة، إلا أنّه من المستحسن دائمًا إعلام المستخدم بأنّ الرابط سيفتح مستندًا بتنسيق مختلف.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

تتبُّع النقرات على الروابط

إحدى طرق تتبُّع تفاعلات المستخدِمين هي إرسال طلب ping إلى عنوان URL عند النقر على رابط. تتضمّن السمة ping، إذا كانت متوفّرة، قائمة مفصولة بمسافات تتضمّن عناوين URL آمنة (تبدأ بـ https) يجب إرسال إشعار بها أو إرسال إشارة إليها إذا فعّل المستخدم الارتباط التشعّبي. يرسل المتصفّح طلبات POST مع النص الأساسي PING إلى عناوين URL المُدرَجة كقيمة للسمة ping.

نصائح بشأن تجربة المستخدم

• ضَع تجربة المستخدم في اعتبارك دائمًا عند كتابة رمز HTML. يجب أن توفّر الروابط معلومات كافية عن المرجع المرتبط بها ليعرف المستخدم ما سينقر عليه.
• ضمن فقرة نصية، يجب أن يختلف مظهر الروابط بشكل كافٍ عن النص المحيط بها، كي يتمكّن المستخدمون من التمييز بسهولة بين الروابط والمحتوى الآخر. استخدِم مؤشرات مرئية متعددة، مثل اللون والخط السفلي. لا يكفي استخدام اللون وحده.
• تضمين أنماط التركيز دائمًا يساعد ذلك المستخدمين الذين يتنقلون باستخدام لوحة المفاتيح في معرفة مكانهم عند التنقل بين عناصر المحتوى باستخدام مفتاح Tab.
• المحتوى بين علامة الفتح <a> وعلامة الإغلاق </a> هو الاسم التلقائي الذي يمكن الوصول إليه للرابط، ويجب أن يوضّح للمستخدم الصفحة المقصودة للرابط أو الغرض منه. إذا كان محتوى الرابط عبارة عن صورة، سيكون وصف alt هو الاسم الذي يسهل الوصول إليه. يجب أن يكون نص الرابط ونص alt أكثر وصفًا من "انقر هنا" أو "مزيد من المعلومات". بدلاً من ذلك، يجب أن يقدّم للمستخدم معلومات حول المكان الذي سينتقل إليه عند تفعيل الرابط. وهذا أمر بالغ الأهمية لمستخدمي برامج قراءة الشاشة ولنتائج محركات البحث.
• لا تضمِّن محتوًى تفاعليًا، مثل <button> أو <input>، داخل رابط. لا تضمِّن رابطًا داخل <button> أو <label> أيضًا. على الرغم من أنّ صفحة HTML ستظل معروضة، إلا أنّ تضمين عناصر قابلة للتركيز وقابلة للنقر داخل عناصر تفاعلية يؤدي إلى تجربة سيئة للمستخدم.
• في حال توفُّر السمة href، سيؤدي الضغط على مفتاح Enter أثناء التركيز على العنصر <a> إلى تفعيله.
• لا تقتصر الروابط على HTML. يمكن أيضًا استخدام العنصر a ضمن SVG، ما يؤدي إلى إنشاء رابط باستخدام السمتَين "href" أو "xlink:href".

الروابط وJavaScript

تعرض السمة links عنصر HTMLCollection مطابقًا لعنصرَي a وarea اللذين يتضمّنان السمة href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

في هذا القسم، تعرّفت على كل ما يتعلّق بالروابط. يتناول القسم التالي القوائم، وهي ضرورية لإنشاء قوائم بالروابط، تُعرف أيضًا باسم التنقل.

اختبِر معلوماتك

اختبِر معلوماتك حول الروابط.