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

8 نوفمبر، 2021 * تيتو 4 تك

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

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

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

ربط المستندات (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 تك

سمة الهدف (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

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

يمكنك تعيين ألوان الروابط والروابط النشطة والروابط التي تمت زيارتها باستخدام 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 تك

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

يمكنك إنشاء رابط نصي لجعل ملفات 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>

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

تحميل برنامج ايوبيت انستلر

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

8 نوفمبر، 2021 * تيتو 4 تك

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

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

التسميات