10- الروابط في HTML

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

HTML Links – Hyperlinks

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

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

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

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

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

يتم تعريف ارتباط التشعب النصي في HTML باستخدام العلامة <a>. فيما يلي بناء الجملة الخاصة بها:

<a href="url">link text</a>

أهم سمة في عنصر <a> هي سمة href، والتي تشير إلى وجهة الرابط.

نص الرابط هو الجزء الذي سيكون مرئيًا للقارئ.

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

مثال

يوضح هذا المثال كيفية إنشاء رابط إلى menoufy.me

<a href="https://menoufy.me/">Visit menoufy.me</a>

تلقائيًا ، ستظهر الروابط على النحو التالي في جميع المتصفحات:

• الرابط غير المزور: مسطر تحت باللون الأزرق.
• الرابط المزور: مسطر تحت باللون الأرجواني.
• الرابط النشط: مسطر تحت باللون الأحمر.

نصيحة: يمكن بالطبع تنسيق الروابط باستخدام CSS، للحصول على مظهر مختلف!

روابط HTML – سمة target

افتراضيًا ، سيتم عرض الصفحة المرتبطة في نافذة المتصفح الحالية. لتغيير ذلك ، يجب عليك تحديد هدف آخر للرابط.

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

يمكن أن تأخذ سمة target إحدى القيم التالية:

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

مثال

استخدم target="_blank" لفتح المستند المرتبط في نافذة أو علامة تبويب متصفح جديدة:

<a href="https://menoufy.me//" target="_blank">Visit menoufy.me</a>

عناوين URL المطلقة مقابل النسبية

النموذجان أعلاه يستخدمان عنوان URL مطلقًا (عنوان ويب كامل) في سمة href.

يتم تحديد رابط محلي (رابط إلى صفحة داخل نفس الموقع الإلكتروني) باستخدام عنوان URL نسبي (بدون جزء “https://www”):

مثال

<h2>Absolute URLs</h2>
<p><a href="https://menoufy.me//">menoufy</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="menoufy.me/?p=1423">HTML Images</a></p>

روابط HTML – استخدام صورة كرابط

لاستخدام صورة كرابط ، ضع علامة <img> داخل علامة <a>:

مثال:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

الربط إلى عنوان بريد إلكتروني

استخدم mailto: داخل سمة href لإنشاء رابط يفتح برنامج البريد الإلكتروني للمستخدم (ليسمح له بإرسال بريد إلكتروني جديد):

مثال:

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

الزر كرابط

لاستخدام زر HTML كرابط ، عليك إضافة بعض أكواد JavaScript.

يسمح لك JavaScript بتحديد ما يحدث في أحداث معينة ، مثل النقر على زر:

مثال:

<button onclick="document.location='default.asp'">HTML Tutorial</button>

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

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

مثال:

<a href="https://menoufy.me/" title="Go to menoufy.me home page">Visit our HTML Tutorial</a>

ألوان روابط HTML المختلفة

يتم عرض رابط HTML بلون مختلف اعتمادًا على ما إذا كان قد تمت زيارته أم لا ، أو لم تتم زيارته ، أو نشط.

ألوان روابط HTML

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

• رابط غير مزور: مسطر تحت وباللون الأزرق.
• رابط مزور: مسطر تحت وباللون الأرجواني.
• رابط نشط: مسطر تحت وباللون الأحمر.

يمكنك تغيير ألوان حالة الرابط باستخدام CSS:

مثال

هنا ، سيكون الرابط غير المزور أخضر بدون خط. سيكون الرابط المزور ورديًا بدون خط. سيكون الرابط النشط أصفر ومسطرًا. بالإضافة إلى ذلك ، عند تحريك الماوس فوق الرابط (a:hover) ، سيصبح أحمر ومسطرًا:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

أزرار الروابط

يمكن أيضًا تنسيق رابط كزر باستخدام CSS:

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

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

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

إنشاء علامة مرجعية في HTML

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

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

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

مثال

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

<h2 id="C4">Chapter 4</h2>

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

<a href="#C4">Jump to Chapter 4</a>

يمكنك أيضًا إضافة رابط إلى علامة مرجعية في صفحة أخرى:

<a href="html_demo.html#C4">Jump to Chapter 4</a>