روابط HTML

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


روابط HTML – الارتباطات التشعبية

ارتباطات HTML هي ارتباطات تشعبية.

يمكنك النقر على رابط والقفز إلى مستند آخر.

عند تحريك الماوس فوق ارتباط، سوف يتحول سهم الماوس إلى يد صغيرة.

ملاحظة: لا يلزم أن يكون الارتباط نصا. يمكن أن تكون صورة أو أي عنصر HTML آخر.


روابط HTML – بناء الجملة

في HTML، يتم تعريف الارتباطات بالعلامة <a>

مثل

<a href="arschools.com">هذا رابط</a>

تحدد السمة href عنوان الوجهة الي الرابط arschools.com

نص الرابط هو الجزء المرئي من الرابط المحصور بين <a/>هذا رابط<.. ويعني ان الجزئ المرئي هو كلمة هذا رابط فقط

سيؤدي النقر على نص الرابط إلى إرسالك إلى العنوان المحدد.

ملاحظة: بدون شرطة مائلة للأمام في نهاية عناوين المجلدات الفرعية، قد تقوم بإنشاء طلبين إلى الملقم. سيقوم العديد من الملقمات تلقائيا بإضافة شرطة مائلة للأمام إلى نهاية العنوان، ثم إنشاء طلب جديد.


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

استخدم المثال أعلاه عنوان URL مطلق (عنوان ويب كامل).

يتم تحديد ارتباط محلي (رابط إلى نفس موقع ويب) مع URL (بدون http://www&#8230;.)

مثل

<a href="css-html">هذا رابط</a>

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


ألوان ارتباط HTML

بشكل افتراضي، سيظهر رابط كهذا (في جميع المستعرضات):

  • يتم تسطير الرابط بسطر اسفله باللون الازرق
  • ويتم تسطير ارتباط تمت زيارته اسفله وباللون الارجواني
  • يتم تسطير ارتباط نشط او تم وضع المؤشر عليه بدون الضغط الي اللون الاحمر

يمكنك تغيير الألوان الافتراضية باستخدام CSS في الامام


روابط HTML – السمة الهدف

تحدد السمة target مكان فتح المستند المرتبط.

يمكن أن تحتوي السمة الهدف على إحدى القيم التالية:

  • _blank – فتح المستند المرتبط في نافذة أو علامة تبويب جديدة
  • _self – فتح المستند المرتبط في نفس النافذة/علامة التبويب أثناء النقر فوقه (هذا افتراضي)
  • _parent – فتح المستند المرتبط في الإطار الأصل
  • _top – فتح المستند المرتبط في النص الكامل للنافذة
  • اسم الإطار – فتح المستند المرتبط في إطار مسمى

هذا المثال سيتم فتح المستند المرتبط في إطار مستعرض جديد/علامة التبويب:

مثال

<a href="css-html" target="_blank">هذا رابط</a> 
<a href="arschools.com/html/css-html/"  target="_blank">هذا رابط2</a>
<a href="arschools.com/html/css-html/"  target="_self">3هذا رابط</a>

نصيحة: إذا كانت صفحة الويب مقفلة في إطار، فيمكنك استخدامها للخروج من الإطار target="_top"

مثل

<a href="css-html"  target="_top">هذا رابط</a>
<a href="arschools.com/html/css-html/"  target="_top">2هذا رابط</a>

روابط HTML – صورة كرابط

من الشائع استخدام الصور كروابط:

مثل

<a href="css-html">
  <img src="https://vlive.xyz/AanoN" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

عناوين الارتباطات

السمة تحديد معلومات إضافية حول عنصر. تظهر المعلومات غالبا كنص تلميح أداة عندما يتحرك الماوس فوق العنصر.title

مثل

<a href="https://arschools.com/html/css-html/" title="هذا رابط يقوم بارسالك الي الدرس الس">aمرحبا هذا رابط</a>

روابط HTML – إنشاء إشارة مرجعية

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

يمكن أن تكون الإشارات المرجعية مفيدة إذا كانت صفحة الويب الخاصة بك طويلة جدا.

لإنشاء إشارة مرجعية، يجب أولا إنشاء الإشارة المرجعية، ثم إضافة ارتباط إليها.

عند النقر فوق الارتباط، سيتم تمرير الصفحة إلى الموقع باستخدام الإشارة المرجعية.

مثل

أولا، إنشاء إشارة مرجعية باستخدام السمة id

ثم قم بإضافة ارتباط إلى الإشارة المرجعية (“الانتقال إلى الفصل 4”)، من داخل نفس الصفحة

<!DOCTYPE html>
<html>
<body>
<p><a href="#s4">اقفز الي الجزئ 4</a></p>
<h2>الجزئ 1</h2>
<p>هذا نص الجزء .........</p>
  
<h2>الجزئ 2</h2>
<p>هذا نص الجزء .........</p>
  
<h2>الجزئ 3</h2>
<p>هذا نص الجزء .........</p>
  
<h2  id="s4">الجزئ 4</h2>
<p>هذا نص الجزء .........</p>
  
<h2>الجزئ 5</h2>
<p>هذا نص الجزء .........</p>
  
<h2>الجزئ 6</h2>
<p>هذا نص الجزء .........</p>
</body>
</html>

تم القفز عن طريق العثور علي الid الذي يحمل عنوان s4 في الصفحة من خلال وضع s4# عوضا عن الابط في السمة href


ملخص الفصل

  • استخدام <a> العنصر لتعريف ارتباط
  • واستخدم السمة href لتعريف عنوان الارتباط
  • استخدم السمة target لتحديد مكان فتح المستند المرتبط
  • واستخدم العنصر ( <img> داخل <a>) لاستخدام صورة كرابط
  • استخدام السمة id (معرف = “القيمة“) لتعريف الإشارات المرجعية في صفحة
  • واستخدم السمةhref بالطريقة التالية (“#القيمة“=href ) للارتباط بالإشارة المرجعية