links الروابط في لغة HTML عبارة عن hyperlinks وكما ذكرنا مسابقاً هي نظام برمجي، يربط الصفحات بعضها لبعض، حيث يقوم عنصر link بربط أي نص أو أي عنصر في الصفحة الحالية مع صفحة ويب أخرى.

توجد الروابط في جميع صفحات الويب تقريبًا، ففي Facebook مثلاً عند الضغط على اسم صديقك، ينقلك المتصفح إلى صفحته الشخصية.

كما ليس من الضروري أن يكون الرابط نصًا، فقد يكون صورة أو عنصر HTML آخر.

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

تستخدم links للتنقل من صفحة HTML الحالية إلى:

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

ملاحظة

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

</> HTML link syntax
طريقة كتابة link في لغة HTML

لإنشاء link رابط في صفحة HTML نستخدم العنصر <a> وهو من نوع nested elements العناصر الـمُتداخلة.

ينقسم العنصر <a> كما هو موضح في الصورة إلى:

open tag علامة بداية العنصر [ <a> ].
content المحتوى الذي سيظهر في صفحة HTML.
close tag علامة إغلاق العنصر [ </a> ] .

وبالتالي أي نص أو عنصر يوضع بين [ a> open tag> ] و [ a> close tag/> ] يصبح جزءاً من link الرابط الذي سوف يراه المستخدم في صفحة HTML.

ولكن عند كتابة العنصر <a> هكذا فقط، لن يقوم المتصفح بفتح أي صفحة HTML أخرى عند الضغط على link الرابط، وذلك لأننا لم نقم بتحديد الرابط بعد.

ولنقوم بذلك سنحتاج لإضافة attribute خاصية إضافية لهذا العنصر، سوف تتعرف عليها في هذا الدرس.

Link syntax

طريقة كتابة عنصر <a> لإنشاء link رابط.

<a>link text</a>

عند تحريك مؤشر mouse الفأرة أعلى أي link رابط، سيتحول هذا المؤشر إلى يد صغيرة.

</> href attribute with links in html
خاصية href مع الروابط في لغة html

تعتبر attribute [ href ] الخاصية الأكثر أهمية لعنصر <a>، فهي تشير إلى عنوان link الرابط أو العنصر المقصود الذهاب إليه داخل صفحة HTML.

يجب أن تحتوي open tag علامة البدء [ <a> ] على الخاصية [ href attribute ] لنضع بداخلها value قيمة، وهذه القيمة تحمل بداخلها وظائف يقوم بها عنصر <a> وهي:

internal link رابط صفحة HTML داخلي.
external link رابط صفحة HTML خارجي.
sections of a page عنوان جزء من الصفحة.
media files أجزاء من ملفات الوسائط، مثل: الفيديوهات، والصوتيات.
telephone numbers أرقام الهواتف.
email addresses عناوين البريد الإلكتروني.
sms numbers إرسال الرسائل.

Internal HTML link

مثال يوضح internal links الروابط الداخلية في صفحة HTML.

<a href="value">Visit closetag.com!</a>

ملاحظة

يجب وضع value القيم الخاصة بـ href attribute داخل علامات تنصيص، سواء double quotes علامات تنصيص مزدوجة [ " " ] أو single quotes علامات تنصيص مفردة [ ' ' ].

</> absolute URLs vs. relative URLs in HTML
الروابط الداخلية والروابط الخارجية في لغة html

relative URLs الروابط الداخلية وabsolute URLs الروابط الخارجية هي ربط نص أو عنصر، برابط صفحة داخلية أو رابط صفحة خارجية.

الروابط الداخلية relative URLs أو internal URL هي صفحة بجوار الصفحة التي نُنشأ بداخلها هذا الرابط، وتكون في نفس التطبيق أو نفس الموقع الإلكتروني same domain name.

فإذا كنت تنشأ الرابط بداخل صفحة اسمها index.html والنص مربوط بصفحة أخرى contact.html بجوار صفحة HTML، فهذه هي الروابط الداخلية.

الروابط الخارجية absolute URLs أو external URL وهي صفحة ليست بجوار الصفحة التي نُنشأ بداخلها هذا الرابط، وتكون من خارج التطبيق لتطبيق آخر أو موقع إلكتروني أخر another domain name.

فإذا كنت تنشأ الرابط بداخل صفحة اسمها index.html والنص مربوط بصفحة خارجية أخرى من موقع google.com مثلاً، فهذه صفحة خارجية ليس لها علاقة بالصفحة الأولى.

HTML internal links

مثال توضيحي لاستخدام internal links الروابط الداخلية داخل صفحة HTML.

<a href="contact.html">Visit closetag.com!</a>

جربها بنفسك

HTML external links

مثال توضيحي لاستخدام external links الروابط الخارجية داخل صفحة HTML.

<a href="https://www.closetag.com">Visit closetag.com!</a>

جربها بنفسك

ملاحظة

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

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Links
الروابط في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Links HTML