تعلم لغة html

الروابط في HTML

صورة
صدام العويري
اخر تحديث :

HTMLالروابط

مفهوم الرابط

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


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

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

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

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

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

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

  • مكان الكلمة text نضع النص الذي نريده أن يظهر في الصفحة و الذي يمكن النقر عليه.

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


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

مثال

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


		<p><a href="https://alawirisaddam.blogspot.com">Go to alwirisaddam.com</a></p>
		

		</body>
		</html>

المخرجات:

Go to alawirisaddam.com

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

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


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

مثال

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


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

		</body>
		</html>

المخرجات:

saddam teaches you every thing you need.

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

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


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

مثال

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


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

		</body>
		</html>

المخرجات:

Send Email

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

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


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

المثال الأول

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


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

		</body>
		</html>

المخرجات:

Jump to Paragraph 5


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

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

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


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

		</body>
		</html>

المخرجات:

Go to sample.html then jump to Paragraph 5

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

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


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

مثال

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


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

		</body>
		</html>

المخرجات:

Go to alawirisaddam.com Go to alwirisaddam.com

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

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

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

  • _self في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).

  • _blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و إظهار محتوى الرابط فيه.

  • _top في حال أردت يتم فتح محتوى الرابط في نفس الصفحة مع إزالة أي صفحات متداخلة موضوعة في الصفحة الحالية.

  • _parent في حال أردت يتم فتح محتوى الرابط مكان الصفحة الموجودة فيها الصفحة الحالية.



ملاحظة

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

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


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

مثال

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


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

		</body>
		</html>

المخرجات:

Open alawirisaddam.com in the current window (iframe)

Open alawirisaddam.com in a new tab

Open alawirisaddam.com in the full window

Open alawirisaddam.com in the parent window (parent iframe)

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

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

  • مكان الكلمة text نضع النص الذي نريده أن يظهر على الزر.

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


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

مثال

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


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

		</body>
		</html>

المخرجات:

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

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

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


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

مثال

		<!DOCTYPE html>
		<html>
		<head>

		</head>
		<body>


		<a href="https://alawirisaddam.blogspot.com"><img src="http://alawirisaddam.droppages.com/template/images/sadda1.png"/></a>
		

		</body>
		</html>

المخرجات:

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

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


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

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


2- روابط صور

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


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

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


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

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

<!--article>

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

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


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

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


2- روابط صور

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


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

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


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

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

تعديل المقال
الأقسام

مقالات قد تهمك