شرح طريقة إضافة الروابط في لغة HTML مع توضيح الفرق بين الروابط المطلقة والنسبية
في هذا الدرس التعليمي، سنتعرف على كيفية إنشاء الروابط في لغة HTML، والتي تُعد من العناصر الأساسية في أي صفحة ويب. سنقوم بشرح كيفية كتابة كود الرابط، مع توضيح الفرق بين الرابط المطلق والرابط النسبي، بالإضافة إلى كيفية التحكم في طريقة فتح الرابط سواء في نفس الصفحة أو في تبويب جديد. وسنقوم بتجربة عملية باستخدام محرر الأكواد والمتصفح.
أولًا: ما هو الوسم <a> في HTML؟
وسم <a> هو الوسم المستخدم لإنشاء الروابط
التشعبية في صفحات الويب. هذا الوسم يُستخدم للربط بين الصفحات أو الملفات
المختلفة داخل الموقع أو خارجه.
الصيغة العامة للوسم:
<a href="الرابط">النص الظاهر للمستخدم</a>-
href: هي اختصار لـ "Hypertext Reference"، وتُستخدم لتحديد عنوان الرابط. -
النص بين الوسمين هو ما سيظهر للمستخدم ويمكنه الضغط عليه.
ثانيًا: الفرق بين الرابط المطلق والرابط النسبي
1. الرابط المطلق (Absolute URL):
الرابط المطلق هو رابط يحتوي على العنوان الكامل للصفحة أو الملف الذي نريد
الانتقال إليه، ويبدأ غالبًا بـ https://.
مثال:
<a href="https://www.example.com">زيارة موقع خارجي</a>في هذا المثال، سيتم توجيه المستخدم مباشرة إلى موقع خارجي بمجرد الضغط على الرابط.
2. الرابط النسبي (Relative URL):
الرابط النسبي يُستخدم عندما يكون الملف أو الصفحة داخل نفس الموقع أو نفس المجلد. في هذه الحالة لا نحتاج لكتابة العنوان الكامل.
مثال:
<a href="about.html">من نحن</a>هذا المثال يشير إلى صفحة موجودة داخل نفس المجلد الذي توجد فيه الصفحة الحالية.
ثالثًا: فتح الرابط في نفس التبويب أو في تبويب جديد
1. فتح الرابط في نفس التبويب (الوضع الافتراضي):
بشكل افتراضي، عندما تضغط على الرابط، يتم فتحه في نفس نافذة المتصفح.
<a href="page.html">صفحة داخلية</a>2. فتح الرابط في تبويب جديد:
لفتح الرابط في تبويب جديد، نستخدم الخاصية
target="_blank".
مثال:
<a href="https://www.example.com" target="_blank">افتح في تبويب جديد</a>هذا يُفيد عندما تريد أن يظل الزائر داخل موقعك بعد زيارة رابط خارجي.
رابعًا: تجربة عملية من محرر الأكواد
قم بفتح محرر أكواد بسيط مثل [Visual Studio Code] أو [Notepad++] أو حتى المفكرة، واكتب الكود التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>تجربة الروابط</title>
</head>
<body>
<h1>روابط HTML</h1>
<!-- رابط مطلق يفتح في نفس التبويب -->
<a href="https://www.google.com">اذهب إلى جوجل</a>
<br><br>
<!-- رابط مطلق يفتح في تبويب جديد -->
<a href="https://www.google.com" target="_blank">جوجل في تبويب جديد</a>
<br><br>
<!-- رابط نسبي لصفحة داخلية -->
<a href="contact.html">صفحة تواصل معنا</a>
</body>
</html>
بعد حفظ الملف بامتداد .html، يمكنك فتحه في المتصفح
لمشاهدة النتيجة وتجربة كل رابط بنفسك.
خامسًا: نصائح عند استخدام الروابط
-
تأكد دائمًا من صحة الرابط المكتوب في
href. -
تجنب وضع روابط تؤدي إلى صفحات فارغة أو غير موجودة.
-
استخدام
target="_blank"مهم عند ربط موقعك بمواقع خارجية. -
تأكد من أن الروابط داخل موقعك تعمل بشكل جيد على جميع الصفحات.
خاتمة:
الروابط عنصر أساسي في أي موقع إلكتروني، وتعلّم طريقة كتابتها بطريقة صحيحة يُعد من المهارات المهمة لأي شخص يعمل في مجال تطوير الويب. سواء كنت تقوم بإنشاء موقع بسيط أو معقد، فإن فهم الفرق بين الروابط المطلقة والنسبية، وطريقة فتحها، يساعد على تحسين تجربة المستخدم بشكل كبير.
هل ترغب أن أضيف قسم خاص بالأسئلة الشائعة أو فقرة تلخيصية قصيرة للدرس؟
شاهد الفيديو