الروابط في HTML: الوسم a والخاصية href

الدرس 4 من 17 · HTML

الروابط هي ما يجعل الويب «شبكة» حقيقية. بضغطة واحدة تنتقل من صفحة إلى أخرى، ومن موقع إلى موقع في الطرف الآخر من العالم. في هذا الدرس ستتعلم كيف تصنع رابطاً، والفرق بين أنواع العناوين، وكيف تربط صفحات موقعك ببعضها.

الوسم a

الرابط يُكتب بالوسم <a> (اختصار anchor أي «مرساة»)، والخاصية href تحدد إلى أين يذهب:

<a href="https://www.wikipedia.org">افتح ويكيبيديا</a>

href: عنوان الوجهة.
النص بين وسمي الفتح والإغلاق هو ما يراه الزائر ويضغط عليه.

تخيّل الرابط مثل لافتة طريق: النص المكتوب على اللافتة هو ما تقرؤه، و href هو المكان الذي يوصلك إليه الطريق فعلاً.

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

هناك نوعان من العناوين:

1. الرابط المطلق (Absolute URL): العنوان الكامل ببروتوكوله واسم الموقع. نستخدمه للمواقع الأخرى:

<a href="https://developer.mozilla.org">توثيق MDN</a>

2. الرابط النسبي (Relative URL): مسار بالنسبة لمكان الصفحة الحالية. نستخدمه للتنقل داخل موقعك. افترض أن موقعك منظم هكذا:

my-site/
├─ index.html
├─ about.html
└─ lessons/
   └─ html.html

أنت في	تريد الذهاب إلى	اكتب
`index.html`	`about.html`	`href="about.html"`
`index.html`	`lessons/html.html`	`href="lessons/html.html"`
`lessons/html.html`	`index.html`	`href="../index.html"`

الرمز ../ يعني «اصعد مجلداً واحداً للأعلى». وهو مثل أن تقول لصديقك في البيت: «اخرج من غرفتك أولاً، ثم ادخل المطبخ».

هناك أيضاً المسار الذي يبدأ بـ / مثل href="/about.html"، ومعناه «ابدأ من جذر الموقع». هذا يعمل عندما يكون موقعك مرفوعاً على خادم، لكنه قد لا يعمل عند فتح الملفات مباشرة من جهازك.

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

افتراضياً، يفتح الرابط في نفس التبويب. لفتحه في تبويب جديد أضف target="_blank":

<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">
  ويكيبيديا (تفتح في تبويب جديد)
</a>

الخاصية rel="noopener noreferrer" إضافة أمان: تمنع الصفحة الجديدة من التحكم في صفحتك. المتصفحات الحديثة تطبّق noopener تلقائياً، لكن كتابتها عادة جيدة.

القفز داخل نفس الصفحة

في الصفحات الطويلة يمكنك صنع فهرس ينقل الزائر لقسم معين. أعطِ القسم معرّفاً بالخاصية id، ثم اربط به بعلامة #:

<a href="#contact">انتقل لقسم التواصل</a>

<!-- ... محتوى طويل ... -->

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

قيمة id يجب أن تكون فريدة في الصفحة، أي لا يتكرر نفس الـ id لعنصرين.

ويمكنك الدمج: href="about.html#team" تفتح صفحة about.html وتقفز مباشرة لقسم team فيها.

روابط البريد والهاتف

<a href="mailto:[email protected]">راسلنا بالبريد</a>
<a href="tel:+201000000000">اتصل بنا</a>

mailto: تفتح برنامج البريد مع كتابة العنوان تلقائياً.
tel: على الموبايل تفتح شاشة الاتصال بالرقم مباشرة.

الرابط يمكن أن يكون صورة

ما بداخل <a> لا يجب أن يكون نصاً فقط، فيمكن أن يكون صورة أو حتى قسماً كاملاً:

<a href="index.html">
  <img src="logo.png" alt="الصفحة الرئيسية">
</a>

ستتعلم وسم الصور بالتفصيل في الدرس القادم.

جرّب بنفسك

في الناتج ستلاحظ شكل الروابط الافتراضي: لون أزرق وخط تحت النص. صندوق التجربة بيئة معزولة، لذلك قد لا تفتح بعض الروابط داخله؛ جرّبها في ملف على جهازك لترى عملها كاملاً. غيّر النصوص والعناوين، وأضف رابطاً لموقعك المفضل:

جرّب بنفسكHTML

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

نسيان https:// في الروابط الخارجية: href="www.google.com" سيُفهم كملف داخل موقعك! اكتب العنوان كاملاً https://www.google.com.
مسارات نسبية خاطئة: إذا كانت صفحتك داخل مجلد، تذكّر ../ للخروج منه. وانتبه لحالة الأحرف: About.html تختلف عن about.html على أغلب الخوادم.
تكرار نفس الـ id: الرابط #contact سيقفز لأول عنصر فقط، وهذا يربك الصفحة. اجعل كل id فريداً.

اختبر نفسك

سؤال

أنت في الصفحة lessons/css.html وتريد رابطاً للصفحة index.html الموجودة خارج المجلد. ماذا تكتب؟

سؤال

ماذا تفعل الخاصية target='_blank'؟

الخلاصة

الرابط بالوسم <a>، والوجهة في الخاصية href.
الروابط المطلقة للمواقع الأخرى، والنسبية للتنقل داخل موقعك، و ../ للصعود مجلداً.
target="_blank" لتبويب جديد، ومعها rel="noopener noreferrer".
href="#id" للقفز لقسم في نفس الصفحة، و mailto: و tel: للبريد والهاتف.
اكتب نصاً واضحاً للرابط بدل «اضغط هنا».

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.