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 ، أما إذا كان الرابط يقود إلى رابط داخلي في نفس موقع الويب، فيمكن كتابة المسار الخاص بالصفحة فقط.

مصطلحات الدرس

HTML Links

روابط HTML

Links

روابط

Hand

يد أو كف

Nested

متداخلة

Tag Name

إسم العلامة

Attribute

سمة

Style

نمط أو شكل

رابط لم تتم زيارته

رابط تمت زيارته

رابط نشط أو مفعل

سمة الهدف

الهدف

Self_

تعني فتح الرابط في نفس الصفحة

blank_

تعني فتح الرابط في صفحة جديدة

Tab

نافذة

Title

عنوان

Title Attribute

سمة العنوان

Value

قيمة

Mail To

بريد إليكتروني إلي..

اختصارات الدرس

HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت

Href

Hypertext Reference

مرجع النص التشعبي

Https

Hypertext Transfer Protocol Secure

بروتوكول نقل النصوص الآمن

link

CSS

Cascading Style Sheets

صفحات التنسيق المتتالية

link

معلومات تهمك

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

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

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Links HTML