الروابط Links في HTML

توجد الروابط في جميع صفحات الويب تقريبًا. تتيح الروابط للمستخدمين التنقل من صفحة إلى أخرى.
ارتباطات HTML - ارتباطات تشعبية
روابط HTML هي ارتباطات تشعبية.
يمكنك النقر فوق رابط والانتقال إلى مستند آخر.
عند تحريك الماوس فوق ارتباط ، يتحول سهم الماوس إلى يد صغيرة.
ملاحظة: لا يجب أن يكون الرابط نصًا. يمكن أن يكون الارتباط صورة أو أي عنصر HTML آخر!
بناء الجملة - لروابط HTML

تحدد علامة <a> ارتباطًا تشعبيًا. على النحو التالي:
<a href="url"> نص الرابط </a>

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

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

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

مثال

يوضح هذا المثال كيفية إنشاء ارتباط إلى itqan7.blogspot.com:


    <a href="https://itqan7.blogspot.com//"> قم بزيارة
    itqan7.blogspot.com! </a>

بشكل افتراضي ، ستظهر الروابط على النحو التالي في جميع المتصفحات:

تم وضع خط أسفل الرابط غير مرغوب فيه باللون الأزرق
الارتباط الذي تمت زيارته مسطر وأرجواني
الارتباط النشط مسطر باللون الأحمر

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

روابط HTML-السمة الهدف(The target Attribute)

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

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

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

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

مثال

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


<a href="https://itqan7.blogspot.com//" target="_blank"> تفضل بزيارة
itqan7.blogspot.com! </a>

الروابط المطلقة مقابل الروابط النسبية

Absolute URLs vs. Relative URLs

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

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

مثال

<h2> عناوين URL المطلقة </ h2> 
 <p> <a href="https://www.w3.org/"> W3C </a> </p> 
 <p> <a href="https://www.google.com/"> Google </a></p>
 <h2> عناوين URL النسبية </ h2> 
 <p> <a href="https://itqan7.blogspot.com/search/label/html"> صور HTML </a> </p>
 <p> <a href="/css/default.asp"> دروس CSS </a> </p>

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

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

مثال


<a href="https://itqan7.blogspot.com/search/label/html">  
    <img src =
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6Yenp3QJVuTd-_YfmDshjloldWhFYQlPaB0K4rT_GxWq41oQSirufPUGJK33wW0v-oiBZhyQB9hplQnvxVyk5cGI4BbDGOsi7aZSHfD0eyPVgTB9Q-XpDEitg45ai54g2_EVihByhjJt/w800/ITQA71.png"
    alt = "دروس HTML" style = "width: 42px؛ height: 42px؛"> 
 </a>

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

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

مثال

 
    <a href="mailto:myname@example.com"> إرسال بريد إلكتروني </a>

زر(button) كارتباط

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

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

مثال


    <button onclick = "document.location = 'https://itqan7.blogspot.com/search/label/html'"> دروس HTML
    </button>

نصيحة: تعرف على المزيد حول JavaScript في برنامج JavaScript التعليمي.

عناوين (titles) الارتباط

تحدد سمة العنوان (titles attribute) معلومات إضافية حول العنصر. غالبًا ما يتم عرض المعلومات كنص تلميح أداة عندما يتحرك الماوس فوق العنصر.

مثال


<a href="https://itqan7.blogspot.com/search/label/html" title="تفضل بزيارة برنامج HTML التعليمي">
    تفضل بزيارة برنامج HTML التعليمي 
</a>

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

مثال

استخدم عنوان URL كاملًا للارتباط بصفحة ويب:


 <a href="https://itqan7.blogspot.com/search/label/html"> برنامج HTML
    تعليمي </a>

مثال

ارتباط بصفحة موجودة في مجلد html على موقع الويب الحالي:

<a href="/html/default.html"> برنامج HTML تعليمي </a>

مثال

ارتباط بصفحة موجودة في نفس المجلد مثل الصفحة الحالية:

<a href="default.html"> برنامج HTML تعليمي </a>

يمكنك قراءة المزيد حول مسارات الملفات في الفصل مسارات ملفات HTML.

ملخص الفصل

استخدم عنصر <a> لتحديد ارتباط
استخدم السمة href لتحديد عنوان الارتباط
استخدم السمة الهدف (target) لتعريف مكان فتح المستند المرتبط
استخدم عنصر <img> (داخل <a>) لاستخدام صورة كرابط
استخدم نظام mailto: داخل سمة href لإنشاء ارتباط يفتح برنامج البريد الإلكتروني للمستخدم

الدرس السابق الدرس التالي