الروابط

في مقدمة قسم السمات، رأيت مثالاً يوضح كيفية إضافة السمات إلى العلامة الافتتاحية. استخدم المثال العلامة <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 وثيقة طويلة إلى حد ما. لحفظ عملية التمرير، يمكنك إضافة رابط للرجوع إلى أعلى الصفحة من أسفل قسم #teachers:

<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 أو إذا كانت القيم تتضمّن علامات اقتباس.

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

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

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

الموارد القابلة للتنزيل

يجب تضمين السمة download عندما تشير السمة href إلى مورد قابل للتنزيل. قيمة سمة التنزيل هي اسم الملف المقترَح لحفظ المورد في نظام الملفات المحلي لدى المستخدم. يستخدم SVGOMG، محرِّر الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) السمة download لاقتراح اسم ملف للكائن القابل للتنزيل والخاص بكائن SVG (الذي ينشئه المحرِّر). عند تحسين 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، يمكنك تقديم سمة type (النوع) مع ملف PDF من النوع MIME للمورد المرتبط. في حين أنّ نوع MIME هو إرشادي تمامًا، من الأفضل دائمًا إعلام المستخدم بأنّ رابطًا سيفتح مستندًا بتنسيق مختلف.

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

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

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

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

• ضع في اعتبارك دائمًا تجربة المستخدم عند كتابة HTML. يجب أن توفر الروابط معلومات كافية حول المورد المرتبط حتى يعرف المستخدم ما الذي ينقر عليه.
• ضمن جزء نصي، تأكَّد من أنّ مظهر الروابط الخاصة بك يختلف بدرجة كافية عن النص المحيط به ليتمكّن المستخدمون من التعرّف بسهولة على الروابط من باقي المحتوى، مع التأكّد من أنّ اللون وحده ليس الوسيلة الوحيدة للتمييز بين النص والمحتوى المحيط به.
• ضمّن أنماط التركيز دائمًا؛ وهذا يمكِّن أدوات التنقل في لوحة المفاتيح من معرفة مكانهم عند التنقل في المحتوى.
• المحتوى بين علامة الفتح <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

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

التحقّق من استيعابك

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