روابط HTML
يستخدم HTML الروابط للاتصال بدокумент آخر على الإنترنت.
يمكن العثور على الروابط في معظم الصفحات على الإنترنت. يمكنك الضغط على الروابط للانتقال من صفحة إلى أخرى.
مثال
- إنشاء الروابط العليا
- هذا المثال يوضح كيفية إنشاء روابط في مستند HTML.
- استخدام الصور كروابط
- هذا المثال يوضح كيفية استخدام الصور كروابط.
روابط HTML (الروابط)
يمكن أن يكون الروابط كلمة واحدة، كلمة، أو مجموعة من الكلمات، أو حتى صورة، يمكنك الضغط على هذه المواد للانتقال إلى مستند جديد أو جزء من المستند الحالي.
عندما تتحرك إشارة الماوس إلى رابط في الصفحة، يتحول السهم إلى يد صغيرة.
نحن نستخدم <a> لإنشاء روابط في HTML.
هناك طريقتان لاستخدام علامة <a>:
- من خلال استخدام خاصية href - إنشاء رابط إلى وثيقة أخرى
- من خلال استخدام خاصية name - إنشاء وسم داخل الوثيقة
قراءة متابعة:ما هو النص التفاعلي؟
نحوja الروابط HTML
كود الروابط بسيط جدًا. يمكن أن يكون مثل هذا:
<a href="url">نص الرابط</a>
تحدد خاصية href الهدف الذي يتم ربطه.
النص بين العلامات البدائية والنهاية يتم عرضه كروابط.
مثال
<a href="http://www.codew3c.com/">زيارة CodeW3C.com</a>
سيظهر هذا السطر كالتالي:زيارة CodeW3C.com
سيقود النقر على هذا الروابط المستخدم إلى صفحة منزل CodeW3C.com.
نصيحة:"نص الرابط" لا يجب أن يكون نصًا فقط. يمكن أن يكون الصورة أو عنصر HTML آخر.
روابط HTML - خاصية target
باستخدام خاصية Target، يمكنك تحديد مكان عرض الوثيقة التي يتم ربطها.
سيفتح هذا السطر الوثيقة في نافذة جديدة:
<a href="http://www.codew3c.com/" target="_blank">زيارة CodeW3C.com!</a>
روابط HTML - خاصية name
تحدد خاصية name اسم العنصر (anchor).
يمكنك استخدام خاصية name لإنشاء وسم في صفحة HTML.
الوسم لا يظهر بأي طريقة خاصة، ويعتبر غير مرئي للقراء.
عند استخدام العناصر المسمى (named anchors)، يمكننا إنشاء روابط تؤدي مباشرة إلى العنصر المسمى (مثل جزء صغير من الصفحة)، مما يمنح المستخدمين القدرة على البحث عن المعلومات التي يحتاجونها دون الحاجة إلى التمرير باستمرار في الصفحة.
نحوja العنصر المسمى:
<a name="label">الوسم (النص الذي سيظهر على الصفحة)</a>
نصيحة:يمكن أن يكون اسم العنصر أي اسم تريده.
نصيحة:يمكنك استخدام خاصية id بدلاً من خاصية name، وسيكون التعيين صالحًا أيضًا.
مثال
أولاً، سنقوم بتعيين اسم للعنصر في وثيقة HTML (إنشاء وسم):
<a name="tips">ملاحظات أساسية - نصوص مفيدة</a>
ثم، سنقوم بإنشاء رابط إلى هذا العنصر في نفس الوثيقة:
<a href="#tips">نصوص مفيدة</a>
يمكنك أيضًا إنشاء رابط إلى هذا العنصر في صفحات أخرى:
<a href="http://www.codew3c.com/html/html_links.asp#tips">نصائح مفيدة</a>
في الكود أعلاه، قمنا بإضافة رمز # واسم العنصر المعلق إلى نهاية URL، مما يمكننا من ربط مباشرة إلى العنصر المعلق tips.
التأثير المحدد:نصائح مفيدة
ملاحظات أساسية - نصائح مفيدة:
ملاحظة:يرجى دائمًا إضافة الشق المائل إلى الدليل الفرعي. إذا كتبت الرابط كما يلي: href="http://www.codew3c.com/html"، فإنه سيتم إرسال طلبين HTTP إلى الخادم. هذا يحدث لأن الخادم سيضيف الشق المائل إلى هذا العنوان، وسيقوم بإنشاء طلب جديد، مثل هذا: href="http://www.codew3c.com/html/".
نصيحة:يستخدم العنصر المعلق عادةً لإنشاء قوائم في بداية وثائق كبيرة. يمكن تخصيص عنصر معلق لكل فصل، ثم وضع الروابط إلى هذه العناصر في الجزء العلوي من الوثيقة. إذا كنت تزور ويكيبيديا غالبًا، ستجد أن تقريبًا كل بند يستخدم هذا النوع من التوجيه.
نصيحة:إذا لم يجد المتصفح العنصر المعلق المحدد، فإنه سيتم تحديد أعلى الوثيقة. لن تحدث أي أخطاء.
مزيد من الأمثلة
- فتح الروابط في نافذة متصفح جديدة
- هذا المثال يوضح كيفية فتح صفحة في نافذة جديدة، مما يجعل الزائر لا يحتاج إلى مغادرة موقعك.
- الروابط إلى مواقع مختلفة في نفس الصفحة
- هذا المثال يوضح كيفية استخدام الرابط للانتقال إلى جزء آخر من الوثيقة
- الخروج من الصندوق
- هذا المثال يوضح كيفية الخروج من الصندوق، إذا كانت الصفحة محكومة بالصندوق.
- إنشاء رابط بريد إلكتروني
- هذا المثال يوضح كيفية ربط الصفحة ببريد إلكتروني. (هذا المثال يعمل فقط بعد تثبيت برنامج العميل للبريد الإلكتروني.)
- إنشاء رابط بريد إلكتروني 2
- هذا المثال يوضح رابط بريد إلكتروني معقد.
علامة رابط HTML
| العلامة | الوصف |
|---|---|
| <a> | تعريف العنصر المعلق. |
