الروابط النصية (Text Links) في HTML

Nov. 8, 2021 | تيتو 4 تك

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

تسمح الارتباطات التشعبية للزوار بالتنقل بين مواقع الويب بالنقر فوق الكلمات والعبارات والصور. وبالتالي يمكنك إنشاء ارتباطات تشعبية باستخدام نص أو صور متوفرة على صفحة ويب.

ملاحظة - أوصيك بالاطلاع على المقال الخاص بفهم عنوان URL

 

yes  ربط المستندات (Linking)

 

يتم تحديد ارتباط باستخدام علامة HTML <a>. تسمى هذه العلامة علامة الارتساء وأي شيء يقع بين علامة <a> الافتتاح وعلامة الإغلاق </a> يصبح جزءًا من الرابط ويمكن للمستخدم النقر فوق هذا الجزء للوصول إلى المستند المرتبط. فيما يلي بناء الجملة البسيط لاستخدام <a> العلامة.

 

<a href = "Document URL" ... attributes-list>Link Text</a> 

 

مثال
لنجرب المثال التالي الذي يربط https://tito4tech.com/  بصفحتك هذه :

 

<!DOCTYPE html>
<html>
   
   <head>
      <title> مثال علي الرابط التشعبي </title>
   </head>
	
   <body>
      <p> إضغط هنا </p>
      <a href = "https://tito4tech.com/" target = "_self">تيتو 4 تك</a>
   </body>
	
</html>

 

 

سيؤدي هذا إلى النتيجة التالية ، حيث يمكنك النقر فوق الارتباط الذي تم إنشاؤه للوصول إلى الصفحة الرئيسية لـ تيتو 4 تك (في هذا المثال):

 

إضغط هنا

تيتو 4 تك

 

yes  سمة الهدف (target) 

 

لقد استخدمنا سمة الهدف في مثالنا السابق. تُستخدم هذه السمة لتحديد مكان فتح المستند المرتبط. فيما يلي الخيارات الممكنة :

 

 

الاختيار

 

الوصف

_blank

 

يفتح المستند المرتبط في نافذة أو علامة تبويب جديدة

 

_self

 

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

 

_parent

 

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

 

_top

 

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

 

targetframe

 

يفتح المستند المرتبط في إطار هدف مسمى

 

 

مثال
جرب المثال التالي لفهم الاختلاف الأساسي في بعض الخيارات المعطاة لسمة الهدف

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي الرابط التشعبي </title>
   </head>
	
   <body>
      <p> إضغط علي أي من الروابط التالية </p>
      <a href = "https://tito4tech.com/" target = "_blank">Opens in New</a> |
      <a href = "https://tito4tech.com/" target = "_self">Opens in Self</a> |
      <a href = "https://tito4tech.com/" target = "_parent">Opens in Parent</a> |
      <a href = "https://tito4tech.com/" target = "_top">Opens in Body</a>
   </body>

</html>

 

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

 

إضغط علي أي من الروابط التالية

Opens in New | Opens in Self | Opens in Parent | Opens in Body

 

 

enlightened  ضبط ألوان الروابط

 

يمكنك تعيين ألوان الروابط والروابط النشطة والروابط التي تمت زيارتها باستخدام link و alink  و vlink لعلامة <body>.

مثال
احفظ ما يلي في test.html وافتحه في أي متصفح ويب لترى كيف تعمل.

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي الرابط التشعبي </title>
   </head>

   <body alink = "yellow" link = "blue" vlink = "black">
      <p> إضغط علي الرابط هذا </p>
      <a href = "https://tito4tech.com/" target = "_blank" >تيتو 4 تك</a>
   </body>

</html>

 

 

سيؤدي هذا إلى النتيجة التالية. ما عليك سوى التحقق من لون الرابط قبل النقر فوقه ، ثم تحقق من لونه عند تنشيطه وعند زيارة الرابط.

 

إضغط علي الرابط هذا

تيتو 4 تك

 

 

enlightened  روابط التحميل

 

يمكنك إنشاء رابط نصي لجعل ملفات PDF أو DOC أو ZIP قابلة للتنزيل. هذا بسيط جدا. ما عليك سوى تقديم عنوان URL الكامل للملف القابل للتنزيل على النحو التالي :

 

<!DOCTYPE html>
<html>

   <head>
      <title> مثال علي الرابط التشعبي </title>
   </head>
	
   <body>
      <a href = "https://tito4tech.com/media/software/iobit-uninstaller-11-0-1-16.exe">تحميل برنامج ايوبيت انستلر</a>
   </body>
	
</html>

 

سينتج هذا الارتباط التالي وسيتم استخدامه لتنزيل ملف :