الروابط <a> في لغة HTML
هي اختصار للكلمة الإنجليزية Anchor تعني مرساة أو ركيزة وهي بالفعل ركيزة صفحات الويب هي جزء رئيسي وواحد من أهم مكونات وأحجار الأساس في صفحة الويب على الإطلاق.
فالروابط هي ما يربط صفحات الإنترنت كلها ببعضها ليس فقط داخل الموقع الواحد بل بين المواقع بعضها البعض
بدونها لا يوجد معنى للويب , يمكن أن نقول أنها أهم عنصر تفاعلي في صفة الويب.
المكونات الأساسية للروابط
<a href="https://www.example.com">محتوى الرابط</a>
href
هي اختصار hypertext reference أو مرجع النص التشعبي , وهي المرجع الذي يفتحه الرابط .
ببساطة هو رابط أو عنوان صفحة الويب التي سيتم فتحها عند الضغط على الرابط , وهذا لا يكون ظاهر للمستخدم.
أمثلة لبعض الإستخدامات المختلفة لـ href
<a href="mailto:[email protected]">بريد الكتروني</a>
<a href="tel:+1234567890">اتصال الهاتف</a>
<a href="#contact">انتقل إلى الاتصال</a>
[[mailto:]]
هذه الكلمة تكتب في خانة الرابط وبعدها يضاف البريد الإلكتروني وتجعل الرابط يفتح تطبيق المراسلة عبر البريد .
[[tel:]]
هذه مخصصة لعمل اتصال بالهاتف فيضاف بعدها رقم الهاتف المراد الإتصال به وهذه تعمل بشكل صحيح على أجهزة الهاتف.
[[#]]
هذا الرمز يخص الإنتقال بمعنى لو أضفته هكذا دون أي شئ سينقلك لأعلى الصفحة لكن لو أضفت بعده معرف ID حينها سينقلك للجزء الخاص بهذا المعرف في الصفحة
محتوى الرابط
وهذا هو ما يكون ظاهر للمستخدم
أمثلة لبعض استخدامات المحتوى
<a href="https://www.example.com">نص عادي</a>
<a href="https://www.example.com"><img src="/img.jpg" alt="صورة" /></a>
<a href="https://www.example.com"><p>كود <span style="color:red">HTML</span> كامل<p></a>
- أول سطر: هو رابط بنص عادي جداً يمكن حتى أن يكون النص هو رابط ايضاً لكنه سيعامل كنص وليس كرابط الرابط هو الجزء فقط الذي داخل href
- ثاني سطر : هو كود صورة ستكون صورة ظاهرة وعند الضغط عليها تفتح الرابط
- ثالث سطر : هو نص وكود HTML كامل يمكنك أن تصنع كود كامل و تجعل هذا الكود كله في النهاية عند الضغط عليه يفتح الرابط
أهم الخصائص الإضافية للروابط
خاصية target
<a href="https://www.example.com" target="_blank">محتوى الرابط</a>
هي خاصية تحدد أين سيتم فتح الرابط وتنقسم الي :
[[_self]]الافتراضي، يفتح في نفس النافذة/التبويب[[_blank]]يفتح في نافذة/تبويب جديد[[_parent]]يفتح في الإطار الأب[[_top]]يفتح في جسم النافذة بالكامل
الذي يهمك منهم وستستخدمه بالفعل هو [[_blank]]
خاصية rel
<a href="https://www.example.com" rel="nofollow">محتوى الرابط</a>
هي خاصية تتعلق بتتبع محركات البحث للرابط وتنقسم الى :
-
[[nofollow]]يخبر محركات البحث بعدم المتابعة -
[[noopener]] -
[[noreferrer]]يمنع إرسال معلومات المرجع -
[[sponsored]]يحدد الروابط المدفوعة/الممولة
يمكنك التعرف أكثر حول هذا الجزء من هنــــا
خاصية download
<a href="/file.pdf" download>محتوى الرابط</a>
هي فقط تلك الكلمة يتم إضافتها تجعل الرابط يفتح صندوق الحفظ او التحميل في المتصفح وتستخدم عادة إن كان الرابط هو عبارة عن ملف على موقعك تريد من الناس تحميله
سؤال هل يمكن استخدام تلك الخواص مع بعضها بهذا الشكل ؟
<a href="https://www.example.com" target="_blank" rel="nofollow" download>محتوى الرابط</a>
نعم ممكن ولكن خاصية download يفضل أن تستخدم وحدها لأنها سيكون لها الأولوية من المتصفح وستتجاوز الخواص الأخرى كذلك هي ملفات في موقعك فتتبعها مهم من محركات البحث.
خاصية title
<a href="https://www.example.com" title="معلومات إضافية عن الرابط">محتوى الرابط</a>
هذه الخاصية يمكنك أن تستخدمها مع أى من الخواص أو بمفردها هي خاصية فقط تعطي معلومات إضافية عن الرابط عند تمرير الماوس استخدمها إن أردت توضيح شئ معين لم توضحه في المحتوى , وليس شرط أن تضيفها أصلاً
هذا الموضوع بشكل عام واحد من أهم الموضوعات التي يجب عليك فهمها بشكل جيد لأنك ستستخدمها دائماً طالما أنت تدون أو تعمل على الإنترنت
جزاك الله خيرا على كل مجهوداتك التي تقوم بها
ردحذفتُحسب لك أجرا عظيم عند الله عز وجل
الله يحفظك ويبارك فيك
اللهم آمين , شاكر لك كثيراً الدعم والتشجيع أخي منير
حذف