HTML الروابط

مفهوم الرابط

الرابط ( Link ) في العادة عبارة عن نص يشير لعنوان صفحة أخرى عند النقر عليه يقوم المتصفح بنقلك إليها.
أيضاً, قد يكون الرابط يشير لملف أو برنامج ما عند النقر عليه يقوم المتصفح بسؤالك ما إن كنت تريد تحميله أم لا.


أشكال الروابط

  • يمكن وضع الرابط كنص ( Text Link ) عند النقر عليه يتم توجيهك لصفحة أخرى أو تحميل ملف ما.
  • يمكن وضع الرابط كزر ( Button Link ) عند النقر عليه يتم توجيهك لصفحة أخرى أو تحميل ملف ما.
  • يمكن وضع الرابط كصورة ( Image Link ) عند النقر عليها يتم توجيهك لصفحة أخرى أو تحميل ملف ما.

إضافة رابط في الصفحة

بشكل عام نستخدم الوسم <a> على هذا النحو <a href="url">text</a> لعرض رابط في الصفحة.

  • مكان الكلمة text نضع النص الذي نريده أن يظهر في الصفحة و الذي يمكن النقر عليه.
  • مكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه عند النقر على النص الذي يظهر في الصفحة.

في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

مثال

<p><a href="https://harmash.com">Go to harmash.com</a></p>
		

جرب الكود

إظهار تلميح عند تمرير الماوس فوق الرابط

في حال أردت إظهار تلميح عند تمرير الماوس فوق الرابط فيمكنك إضافة الخاصية title في الوسم <a> و تمرير التلميح الذي تريد عرضه كقيمة لها.


في المثال التالي قمنا بإضافة تلميح للرابط يتم إظهاره عند تمرير الماوس فوقه.

مثال

<p><a href="https://harmash.com" title="Go to harmash.com">harmash</a> teaches you every thing you need.</p>
		

جرب الكود

وضع رابط لبريد إلكتروني محدد

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


في المثال التالي قمنا بإضافة رابط عند النقر عليه يقوم بفتح تطبيق البريد الإلكتروني الموجود في جهاز المستخدم و تحديد الجهة التي سيتم إرسال البريد إليها.

مثال

<p><a href="mailto:someone@example.com">Send Email</a></p>
		

جرب الكود

روابط لعناصر محددة في الصفحة

في حال أردت وضع رابط يوجه المستخدم لعنصر محدد موجود في نفس الصفحة أو لعنصر محدد موجود في صفحة أخرى يمكنك إعطاء العنصر id و عندها الرابط الذي نريده أن يوجه المستخدم لذاك العنصر يجب أن نضع في نهايته الرمز # يليه id العنصر.


في المثال التالي قمنا بوضع رابط عند النقر عليه يقوم بنقل المستخدم لعنصر محدد في نفس الصفحة.

المثال الأول

<a href="#P5">Jump to Paragraph 5</a>
		

جرب الكود



في المثال التالي قمنا بوضع رابط عند النقر عليه يقوم بنقل المستخدم لعنصر محدد في صفحة أخرى.

المثال الثاني

<a href="sample.html#P5">Go to sample.html then jump to Paragraph 5</a>
		

جرب الكود


إضافة رابط وهمي

أثناء تصميم الصفحة, المصمم لا يحتاج أن يحدد قيمة الخاصية href لكل رابط موضوع في الصفحة.
في العادة حتى يظهر نص الرابط كأنه رابط عادي يمكن النقر عليه يمكنك ببساطة وضع الرمز # كقيمة للخاصية href و عندها كأنك تقول للمتصفح قم بتوجيه المستخدم إلى لا شيء.


في المثال التالي قمنا بإضافة رابطين, الأول يظهر كرابط عادي و لكن عند النقر عليه لا يحدث أي شيء و الثاني لا يظهر من الأساس كرابط.

مثال

<a href="#">Go to harmash.com</a>
<a>Go to harmash.com</a>
		

جرب الكود

تحديد أين سيتم فتح الرابط

إفتراضياً, عند النقر على رابط موجود في الصفحة نجد أنه يتم فتح الصفحة الجديدة مكان الصفحة الحالية كما لاحظنا في المثال السابق.

في حال أردت تحديد أين سيتم فتح الرابط يجب أن تضيف الخاصية target في الوسم <a> و إعطائها إحدى القيم التالية:

  • _self في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).
  • _blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و إظهار محتوى الرابط فيه.
  • _top في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة مع إزالة أي صفحات متداخلة موضوعة في الصفحة الحالية.
  • _parent في حال أردت أن يتم فتح محتوى الرابط مكان الصفحة الموجودة فيها الصفحة الحالية.


ملاحظة

شيء طبيعي جداً أن لا تكون قد فهمت أي شيء قلناه عن ما تفعله القيمة _top و القيمة _parent في حال تم وضعهما كقيمة للخاصية target لأنك لم تقم حتى الآن بتعريف صفحة تقوم بعرض صفحة أخرى بداخلها.

قد لا تحتاج إلى استخدام القيمتين _top و _parent طوال حياتك و لكن في حال احتجتهما يوماً فإنك ستكون حينها قد علمت سبب الحاجة لهما و ما معنى عرض صفحة بداخل صفحة. لذا الآن لا تتعب نفسك بمحاولة معرفة الفارق بينهما.


في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

مثال

<p><a href="https://harmash.com" target="_self">Open harmash.com in the current window (iframe)</a></p>
<p><a href="https://harmash.com">Open harmash.com in a new tab</a></p>
<p><a href="https://harmash.com" target="_top">Open harmash.com in the full window</a></p>
<p><a href="https://harmash.com" target="_parent">Open harmash.com in the parent window (parent iframe)</a></p>
		

جرب الكود

إضافة رابط كزر

في حال أردت وضع الرابط كزر بدل وضعه كنص, يمكنك وضعه بواسطة الوسم <button> على هذا النحو <button onlclick="document.location='url'">text</button>.

  • مكان الكلمة text نضع النص الذي نريده أن يظهر على الزر.
  • مكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه عند النقر على الزر.

في المثال التالي قمنا بإضافة رابط كزر عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

مثال

<button onclick="document.location='https://harmash.com'">Go to harmash.com</button>
		

جرب الكود

إضافة رابط كصورة

في حال أردت وضع الرابط كصورة بدل وضعه كنص, يمكنك وضعه رابط عادي بواسطة الوسم <a> و بداخله تقوم بوضع الصورة التي تريد فتج الرابط عند النقر عليها.

ستتعلم كيفية التعامل مع الصور في درس خاص و لكن الآن عليك معرفة أنه لوضع صورة نستخدم الوسم <img> على هذا النحو <img src="image_url"/>.
مكان الكلمة image_url نضع رابط الصورة التي سيتم عرضها.


في المثال التالي قمنا بإضافة صورة عند النقر عليها يتم توجيه المستخدم للصفحة الأولى في دورة HTML.

مثال

<a href="https://harmash.com/tutorials/html"><img src="/tutorials/html/links/html-5-icon.png"></a>
		

جرب الكود

تعامل المتصفح مع محتوى الروابط

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


1- روابط صفحات ويب

إذا وجد المتصفح أن الرابط هو رابط لملف إمتداده .html فإنه يعرض لك نتيجة الكود الموجود فيه, أي يعرضه لك كصفحة ويب عادية.
مثال: عند النقر على هذا الرابط سيتم فتح الصفحة الأولى في دورة "تعلم الكتابة" بجانب الصفحة الحالية.


2- روابط صور

إذا وجد المتصفح أن الرابط هو رابط لصورة فإنه يعرضها لك كما هي في الصفحة.
مثال: عند النقر على هذا الرابط سيتم عرض صورة شعار موقع هرمش بجانب الصفحة الحالية.


3- روابط ملفات نصية

إذا وجد المتصفح أن الرابط هو رابط لملف نصي إمتداده .txt أو .css أو .js أو أي نوع آخر من الملفات النصية فإنه يعرض لك النص الموجود فيه كما هو.
مثال: عند النقر على هذا الرابط سيتم عرض محتوى ملف جافاسكريبت بجانب الصفحة الحالية.


4- روابط ملفات غير نصية

إذا وجد المتصفح أن الرابط هو لبرنامج أو لملف لم يستطع التعرف على نوعه, فإنه لن يتمكن من عرضه في الصفحة و لذلك سيسألك ما إن كنت تريد تحميله.
مثال: عند النقر على هذا الرابط سيقوم المتصفح بفتح صفحة فارغة بجانب الصفحة الحالية سيسألك ما إن كنت تريد تحميل ملف مضغوط إسمه harmash-log.zip أم لا.

الدورات

أدوات مساعدة

الأقسام

دورات
مقالات أسئلة مشاريع كتب