يمكن أن تحتوي صفحة الويب على روابط مختلفة تنقلك مباشرةً إلى صفحات أخرى وحتى إلى أجزاء معينة من صفحة معينة. تُعرف هذه الروابط بالارتباطات التشعبية.
تسمح الارتباطات التشعبية للزوار بالتنقل بين مواقع الويب بالنقر فوق الكلمات والعبارات والصور. وبالتالي يمكنك إنشاء ارتباطات تشعبية باستخدام نص أو صور متوفرة على صفحة ويب.
ملاحظة - أوصيك بالاطلاع على المقال الخاص بفهم عنوان 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 تك (في هذا المثال):
إضغط هنا
سمة الهدف (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>
سيؤدي هذا إلى النتيجة التالية. ما عليك سوى التحقق من لون الرابط قبل النقر فوقه ، ثم تحقق من لونه عند تنشيطه وعند زيارة الرابط.
إضغط علي الرابط هذا
روابط التحميل
يمكنك إنشاء رابط نصي لجعل ملفات 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>
سينتج هذا الارتباط التالي وسيتم استخدامه لتنزيل ملف :