توصيات الدورات

HTML <a> علامة

خصوصية href لعلامة HTML <a>

href تعريف وشرح

href تحدد خاصية href عنوان الصفحة التي يشير إليها الرابط. href يمكن أن تكون قيمة الخاصية URL للوثيقة المحددة، أو قائمة بتعبيرات جافا سكريبت والطرق والوظائف. يمكن أن تكون قيمة الخاصية أي URL صالح للوثيقة، بما في ذلك معرفات الأجزاء وقطع جافا سكريبت. إذا اخترع المستخدم محتوى علامة <a>، فإن المتصفح سيحاول استرداد وتعليمه

إذا href إذا لم يكن هناك خاصية، فإن علامة <a> لن تكون رابطًا.

نصيحة:يمكنك استخدام href="#top" أو href="#" للروابط إلى أعلى الصفحة الحالية!

صنع رابط نصي

مؤشر بسيط على مستند آخر يمكن أن يكون في شكل:

<a href="http://www.codew3c.com/index.html">CodeW3C.com أونلاين تعليمات</a>

يظهر المتصفح العبارة "CodeW3C.com تعليمات عبر الإنترنت" (عادةً نص تحتلقة بلون أزرق) كeffekt، حتى يعرف المستخدم أنها رابط يمكن ربطه إلى مستند آخر. مثل هذا:

CodeW3C.com على الإنترنت تعليمات

يمكن للنظام الأساسي أيضًا استخدام خيارات المتصفح لتحديد لون النص، وإعداد لون النص قبل الرابط ولون النص بعد الرابط.

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

صنع رابط صورة

يمكن أن تحتوي الأنقاط المعقدة أيضًا على صور. هذا LOGO هو رابط صورة، عند النقر على هذه الصورة، يمكنك العودة إلى الصفحة الرئيسية لـ W3school:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

سيضيف الكود التالي رابطًا عودة إلى الصفحة الرئيسية لـ CodeW3C.com:

CodeW3C.com على الإنترنت تعليمات

معظم متصفحات الصور ستضيف حواف خاصة حول الصور كجزء من الرابط. من خلال وضع الصورة في علامة <img>، خصائص الحوافإعداد 0 يمكنه حذف حواف رابط الهyperlink. يمكن أيضًا استخدام خصائص حواف CSSلجعل تغيير تصميم الحواف العناصر عالميًا.

مثال

مثال 1

يحدد خاصية href وجهة الرابط:

<a href="https://www.codew3c.com">زيارة CodeW3C.com</a>

تجربة شخصية

مثال 2

كيفية استخدام الصورة كرابط:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

تجربة شخصية

مثال 3

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

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

تجربة شخصية

مثال 4

كيفية ربط إلى رقم هاتف:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

تجربة شخصية

مثال 5

كيفية ربط إلى جزء آخر في نفس الصفحة:

<a href="#section2">انتقل إلى الفصل الثاني</a>

تجربة شخصية

مثال 6

كيفية ربط إلى جافا سكربت:

<a href="javascript:alert('Hello World!');"> تنفيذ جافا سكربت</a>

تجربة شخصية

النحو

<a href="URL">

قيمة الخاصية

القيمة الوصف
URL

URL للرابط.

القيم المحتملة:

  • URL مطلقة - تشير إلى موقع آخر (مثل href="http://www.example.com/index.html")
  • URL مطلقة - تشير إلى ملف داخل الموقع (مثل href="index.html")
  • الروابط إلى العناصر في الصفحة التي تحتوي على id معين (مثل href="#section2")
  • البروتوكولات الأخرى (مثل https://、ftp://、mailto:、file: إلخ)
  • السكرابت (مثل href="javascript:alert('Hello');")

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم

HTML <a> علامة