روابط HTML
تم العثور على الروابط في جميع صفحات الويب تقريبًا. تتيح الروابط للمستخدمين النقر فوق طريقهم من صفحة إلى أخرى.
ارتباطات HTML - ارتباطات تشعبية
روابط HTML هي ارتباطات تشعبية.
يمكنك النقر فوق ارتباط والانتقال إلى مستند آخر.
عند تحريك الماوس فوق ارتباط ، يتحول سهم الماوس إلى يد صغيرة.
ملاحظة: لا يجب أن يكون الرابط نصًا. يمكن أن يكون الارتباط صورة أو أي عنصر HTML آخر!
روابط HTML - بناء الجملة
<a>تحدد علامة HTML الارتباط التشعبي. يحتوي على النحو التالي:
<a href="url">link text</a>
السمة الأكثر أهمية <a> للعنصر هي
hrefالسمة ، والتي تشير إلى وجهة الرابط.
نص الرابط هو الجزء الذي سيكون مرئيًا للقارئ.
سيؤدي النقر فوق نص الارتباط إلى إرسال القارئ إلى عنوان URL المحدد.
مثال
يوضح هذا المثال كيفية إنشاء ارتباط إلى W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
بشكل افتراضي ، ستظهر الروابط على النحو التالي في جميع المتصفحات:
- تم وضع خط أسفل الرابط غير مرغوب فيه باللون الأزرق
- الارتباط الذي تمت زيارته مسطر وأرجواني
- الارتباط النشط مسطر باللون الأحمر
نصيحة: يمكن بالطبع تصميم الروابط باستخدام CSS ، للحصول على مظهر آخر!
روابط HTML - السمة الهدف
بشكل افتراضي ، سيتم عرض الصفحة المرتبطة في نافذة المتصفح الحالية. لتغيير هذا ، يجب تحديد هدف آخر للارتباط.
تحدد السمة targetمكان فتح المستند المرتبط.
يمكن أن تحتوي targetالسمة على إحدى القيم التالية:
_self- تقصير. يفتح المستند في نفس النافذة / علامة التبويب التي تم النقر عليها_blank- يفتح المستند في نافذة أو علامة تبويب جديدة_parent- يفتح المستند في الإطار الأصلي_top- يفتح المستند في كامل نص النافذة
مثال
استخدم target = "_ blank" لفتح المستند المرتبط في نافذة أو علامة تبويب متصفح جديدة:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
عناوين URL المطلقة في مقابل عناوين URL النسبية
كلا المثالين أعلاه يستخدمان عنوان URL مطلق (عنوان ويب كامل) في hrefالسمة.
يتم تحديد ارتباط محلي (رابط إلى صفحة داخل نفس موقع الويب) بعنوان URL نسبي (بدون جزء "https: // www"):
مثال
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</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:[email protected]">Send email</a>
زر كارتباط
لاستخدام زر HTML كارتباط ، يجب عليك إضافة بعض كود JavaScript.
يتيح لك JavaScript تحديد ما يحدث في أحداث معينة ، مثل النقر فوق الزر:
مثال
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
نصيحة: تعرف على المزيد حول JavaScript في برنامج JavaScript التعليمي .
عناوين الارتباط
تحدد السمة titleمعلومات إضافية حول العنصر. غالبًا ما يتم عرض المعلومات كنص تلميح أداة عندما يتحرك الماوس فوق العنصر.
مثال
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
المزيد عن عناوين URL المطلقة وعناوين URL النسبية
مثال
استخدم عنوان URL كاملًا للارتباط بصفحة ويب:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
مثال
ارتباط بصفحة موجودة في مجلد html على موقع الويب الحالي:
<a href="/html/default.asp">HTML tutorial</a>
مثال
ارتباط بصفحة موجودة في نفس المجلد مثل الصفحة الحالية:
<a href="default.asp">HTML tutorial</a>
يمكنك قراءة المزيد حول مسارات الملفات في الفصل مسارات ملفات HTML .
ملخص الفصل
- استخدم
<a>العنصر لتحديد ارتباط - استخدم
hrefالسمة لتحديد عنوان الارتباط - استخدم
targetالسمة لتحديد مكان فتح المستند المرتبط - استخدم
<img>العنصر (من الداخل<a>) لاستخدام صورة كارتباط - استخدم
mailto:النظام الموجود داخلhrefالسمة لإنشاء ارتباط يفتح برنامج البريد الإلكتروني للمستخدم
علامات ارتباط HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .