HTMLالوسم <a>

تعريفه

بشكل عام نستخدم الوسم <a> على هذا النحو <a href="url">text</a> لعرض رابط في الصفحة.

• مكان الكلمة text نضع النص الذي نريده أن يظهر أمام المستخدم و الذي يمكنه النقر عليه.
• مكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه عندما ينقر على النص الظاهر له في الصفحة.

إفتراضياً، الرابط الذي يتم إضافته في الصفحة يظهر على النحو التالي:

• إن لم يتم فتح الرابط من قبل، فإنه يظهر بلون أزرق و تحته خط.
• إن تم فتح الرابط من قبل، فإنه يظهر بلون بنفسجي و تحته خط.
• أثناء النقر على الرابط، فإنه يظهر بلون أحمر.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <a>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية download

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية href

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

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية hreflang

يمكن إضافتها للوسم بهدف تحديد لغة الرابط الذي سيتم توجيه المستخدم إليه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية referrerpolicy

يمكن إضافتها للوسم بهدف تحديد معلومات المرسل التي سيتم إرسالها مع طلب المستخدم إلى الموقع الذي سيتلقى طلبه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

الخاصية rel

يمكن إضافتها للوسم بهدف تحديد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه و هذا الأمر مهم جداً بالنسبة لمحركات البحث.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحدد ما هي طبيعة العلاقة بين الرابط الحالي و الرابط الذي يتم توجيه المستخدم إليه.

الخاصية target

نضيفها للوسم لتحديد أين سيتم فتح الرابط.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

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

الخاصية title

نضيفها للوسم لإظهار تلميح عند تمرير الماوس فوقه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية type

نضيفها للوسم لتحديد نوع محتوى الرابط بأسلوب MIME و هذا الأمر يمكنك فعله بشكل إختياري لأنه غير ضروري.
كمثال بسيط، إذا أردت الإشارة إلى أن الرابط الموضوع يشير لملف CSS يمكنك إضافة الخاصية type="text/css" للوسم.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإضافة رابط للصفحة الرئيسية في موقع هرمش.

<a href="https://harmash.com">Go to harmash.com</a>

في المثال التالي قمنا بإضافة تلميح للرابط يتم إظهاره عند تمرير الماوس فوقه.

<a href="https://harmash.com" title="Go to harmash.com">harmash</a>

في المثال التالي قمنا بإضافة رابط عند النقر عليه يقوم بفتح تطبيق البريد الإلكتروني الموجود في جهاز المستخدم و تحديد الجهة التي سيتم إرسال البريد إليها.

<a href="mailto:someone@example.com">Send Email</a>

في المثال التالي قمنا بإضافة الخاصية rel="nofollow" للوسم للإشارة إلى أن الرابط هو رابط إعلاني.

<a href="https://twitter.com/harmashcom" rel="nofollow">follow us</a>

في المثال التالي قمنا بإضافة الخاصية target="_blank" للوسم حتى يتم فتحه في تبويب جديد عندما يتم النقر عليه.

<a href="https://harmash.com/learn-typing">Learn Typing</a>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

a:link، a:visited {
    color: (internal value);
    text-decoration: underline;
    cursor: auto;
}

a:link:active، a:visited:active {
    color: (internal value);
}

نصائح و ملاحظات

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

في المثال التالي قمنا بإضافة رابطين، الأول يظهر كرابط عادي و لكن عند النقر عليه لا يحدث أي شيء و الثاني لا يظهر من الأساس كرابط.

<a href="#">Go to harmash.com</a>
<a>Go to harmash.com</a>