الروابط: داخلية وخارجية والتنقل بالمراسي

عنصر الرابط

الروابط هي اساس شبكة الويب. بدونها ستكون كل صفحة مستندا معزولا لا توجد طريقة لربطه بمحتوى اخر. ينشئ عنصر <a> (المرساة) الروابط التشعبية واهم سمة فيه هي href (مرجع النص التشعبي) التي تحدد عنوان الوجهة. اي محتوى يوضع بين وسمي الفتح والاغلاق يصبح قابلا للنقر سواء كان نصا او صورا او حتى اقساما كاملة.

<a href="https://www.example.com">زيارة المثال</a>

<!-- رابط يغلف صورة -->
<a href="https://www.example.com">
  <img src="logo.png" alt="شعار المثال">
</a>

بشكل افتراضي تظهر الروابط كنص ازرق مع خط تحته. بعد زيارة الرابط يتحول لونه الى الارجواني. هذه هي الانماط الافتراضية للمتصفح لحالات الروابط والتي يمكن تخصيصها باستخدام CSS.

الروابط المطلقة مقابل النسبية

فهم الفرق بين الروابط المطلقة والنسبية امر اساسي لبناء المواقع بشكل صحيح. الرابط المطلق يحتوي على العنوان الكامل بما في ذلك البروتوكول واسم النطاق مثل https://www.example.com/about.html. وهو يعمل من اي مكان لانه يحدد المسار الكامل. الرابط النسبي يشير الى ملف بالنسبة لموقع الصفحة الحالية. اذا كانت صفحتك الحالية في /pages/contact.html وربطت بـ ../index.html فسينتقل المتصفح مجلدا واحدا للاعلى للعثور على الملف.

<!-- رابط مطلق: المسار الكامل مع النطاق -->
<a href="https://www.example.com/blog/post.html">اقرا المقال</a>

<!-- رابط نسبي: نفس المجلد -->
<a href="contact.html">اتصل بنا</a>

<!-- رابط نسبي: مجلد فرعي -->
<a href="blog/latest.html">اخر مقال</a>

<!-- رابط نسبي: المجلد الاب -->
<a href="../index.html">العودة للرئيسية</a>

<!-- رابط نسبي للجذر: يبدا من جذر الموقع -->
<a href="/about.html">عن الموقع</a>

فتح الروابط في تبويبات جديدة

تتحكم سمة target في مكان فتح الصفحة المرتبطة. تعيين target="_blank" يفتح الرابط في تبويب جديد. لكن هذا يطرح مشكلة امنية: الصفحة الجديدة تحصل على وصول لصفحتك من خلال كائن window.opener والذي يمكن استغلاله لهجمات التصيد. لمنع ذلك قرن دائما target="_blank" مع rel="noopener noreferrer".

<!-- يفتح في تبويب جديد مع سمات الامان -->
<a href="https://www.example.com"
   target="_blank"
   rel="noopener noreferrer">
  زيارة المثال (يفتح في تبويب جديد)
</a>

<!-- السلوك الافتراضي: يفتح في نفس التبويب -->
<a href="https://www.example.com">
  زيارة المثال (نفس التبويب)
</a>

روابط البريد الالكتروني والهاتف والتحميل

سمة href ليست مقتصرة على عناوين الويب. بروتوكول mailto: ينشئ رابطا يفتح برنامج البريد الالكتروني الافتراضي مع عنوان المستلم معبا مسبقا. بروتوكول tel: ينشئ رقم هاتف قابلا للنقر وهو مفيد بشكل خاص على الاجهزة المحمولة. سمة download تطلب من المتصفح تحميل الملف المرتبط بدلا من الانتقال اليه.

<!-- رابط بريد الكتروني -->
<a href="mailto:hello@example.com">ارسل بريدا</a>

<!-- بريد مع موضوع ونص -->
<a href="mailto:hello@example.com?subject=مرحبا&amp;body=لدي%20سؤال">
  بريد مع موضوع
</a>

<!-- رابط هاتف -->
<a href="tel:+1234567890">اتصل بنا: (123) 456-7890</a>

<!-- رابط تحميل -->
<a href="/files/resume.pdf" download>تحميل السيرة الذاتية (PDF)</a>

<!-- تحميل باسم ملف مخصص -->
<a href="/files/doc.pdf" download="my-resume.pdf">تحميل</a>

روابط المراسي والتنقل داخل الصفحة

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

<!-- روابط التنقل في الاعلى -->
<nav>
  <ul>
    <li><a href="#introduction">المقدمة</a></li>
    <li><a href="#features">المميزات</a></li>
    <li><a href="#contact">الاتصال</a></li>
  </ul>
</nav>

<!-- الاقسام المستهدفة في اسفل الصفحة -->
<section id="introduction">
  <h2>المقدمة</h2>
  <p>مرحبا بكم في موقعنا...</p>
</section>

<section id="features">
  <h2>المميزات</h2>
  <p>اليكم ما نقدمه...</p>
</section>

<section id="contact">
  <h2>الاتصال</h2>
  <p>تواصلوا معنا...</p>
</section>

<!-- رابط العودة للاعلى -->
<a href="#">العودة للاعلى</a>

حالات الروابط

للروابط اربع حالات يمكن تنسيقها باستخدام CSS. حالة :link تنطبق على الروابط التي لم تتم زيارتها. حالة :visited تنطبق على الروابط التي نقر عليها المستخدم سابقا. حالة :hover تنشط عندما يكون المؤشر فوق الرابط. حالة :active تنطبق في لحظة النقر على الرابط. تنسق هذه الحالات باستخدام اشباه الفئات في CSS ويجب تعريفها بهذا الترتيب المحدد الذي يسهل تذكره بعبارة "LoVe HAte" (Link, Visited, Hover, Active).