أنواع الروابط في HTML – شرح href وtarget واستخدام وسم a بالتفصيل
لو بتتعلم HTML أو داخل مجال تصميم المواقع، يبقى أول حاجة لازم تتعلمها كويس هي الروابط أو اللينكات. الروابط هي اللي بتخلّي المستخدم يتنقل من صفحة للتانية أو من موقع للتاني، ودي من أساسيات بناء أي موقع ناجح.
ما هو الرابط في HTML؟
الرابط هو عنصر في صفحة الويب يسمح للمستخدم إنه يضغط عليه علشان يروح لمكان تاني، سواء داخل نفس الموقع أو خارجه. في لغة HTML، بنستخدم وسم اسمه <a> وده اسمه الكامل: Anchor Element أو "وسم الربط".
الصيغة الأساسية للرابط بتكون بالشكل التالي:
<a href="https://example.com">اضغط هنا</a>هنشرح دلوقتي كل جزء من الكود ده:
- <a>: ده وسم البداية اللي بيعني Anchor أو الربط.
- href: وده اختصار لـ Hypertext Reference، يعني المرجع اللي هينقلك ليه الرابط.
- "https://example.com": العنوان اللي هتروح له عند الضغط على الرابط.
- اضغط هنا: النص اللي بيظهر للمستخدم وبيكون قابل للنقر.
- </a>: وده وسم الإغلاق.
شرح السمة href
كلمة href هي السمة الأساسية في وسم الرابط، وهي اللي بنكتب فيها عنوان أو رابط الوجهة اللي عايزين المستخدم يروح لها. ممكن يكون العنوان موقع كامل زي "https://google.com" أو صفحة داخلية زي "contact.html".
شرح السمة target
السمة target بتحدد إذا كان الرابط هيفتح في نفس التبويب أو في تبويب جديد. القيم المتاحة:
- _self: وده الافتراضي، يعني الرابط هيفتح في نفس التبويب.
- _blank: يعني الرابط هيفتح في تبويب جديد.
مثال:
<a href="https://google.com" target="_blank">افتح جوجل</a>معلومة: علامة "_" اسمها باللغة الإنجليزية Underscore وبالعربية "شرطة سفلية".
أنواع الروابط في HTML
1. الروابط الخارجية (External Links)
ودي الروابط اللي بتفتح مواقع تانية مختلفة تمامًا عن موقعك.
<a href="https://facebook.com">فيسبوك</a>2. الروابط الداخلية (Internal Links)
روابط بتربط بين صفحات داخل نفس الموقع.
<a href="about.html">من نحن</a>3. الروابط داخل نفس الصفحة (Page Anchors)
لما تحب تنقل المستخدم لجزء معين داخل نفس الصفحة، بتستخدم خاصية id مع علامة #.
<a href="#services">اذهب إلى الخدمات</a>
...
<h2 id="services">الخدمات</h2>معلومة: علامة # اسمها Hash أو "علامة الشباك".
الفرق بين الرابط المطلق والنسبي
الرابط المطلق (Absolute URL)
بيحتوي على عنوان الموقع كامل، بما في ذلك البروتوكول (زي https):
<a href="https://youtube.com">يوتيوب</a>الرابط النسبي (Relative URL)
بيستخدم اسم الصفحة أو المسار الداخلي فقط، بدون الدومين:
<a href="contact.html">اتصل بنا</a>استخدام الصور كرابط (Image as a Link)
ممكن تستخدم صورة علشان تكون هي نفسها الرابط، عن طريق وضع وسم <img> داخل <a>:
<a href="index.html">
<img src="logo.png" alt="شعار الموقع">
</a>- img: اختصار لكلمة Image، يعني صورة.
- src: Source، يعني مصدر الصورة.
- alt: Alternative Text، يعني النص البديل في حالة عدم تحميل الصورة.
استخدام الأزرار كرابط (Button as a Link)
ممكن تخلي الزر يفتح رابط معين عن طريق وضعه داخل عنصر <a>:
<a href="contact.html">
<button>اتصل بنا</button>
</a>روابط البريد الإلكتروني (Email Links)
لو عايز الزائر يبعتلك إيميل مباشرة عند الضغط على رابط، استخدم mailto:
<a href="mailto:info@example.com">راسلنا عبر البريد الإلكتروني</a>روابط الهاتف (Phone Links)
مناسبة للموبايل، بتسمح للمستخدم إنه يتصل مباشرة:
<a href="tel:+201234567890">اتصل بنا الآن</a>نصائح عند استخدام الروابط
- اكتب نصوص واضحة تعبر عن محتوى الرابط.
- استخدم target="_blank" عند الروابط الخارجية للحفاظ على الزائر داخل موقعك.
- تأكد من صحة الروابط، خصوصًا الداخلية، علشان متحصلش أخطاء 404.
- استخدم روابط البريد والهاتف في مواقع الجوال لتسهيل التواصل.
الخاتمة
الروابط في HTML من أساسيات أي صفحة ويب ناجحة. في الشرح ده، عرفنا:
- يعني إيه رابط ووسم Anchor
- إزاي نستخدم href و target
- أنواع الروابط المختلفة
- الفرق بين الرابط المطلق والنسبي
- إزاي الصورة أو الزر يكونوا روابط
- روابط البريد الإلكتروني والتليفون
ابدأ دلوقتي جرب الأمثلة دي بنفسك في محرر كود HTML، وشوف النتائج بعينك. ومع الممارسة هتقدر تتحكم في كل رابط في موقعك زي المحترفين.
لو عندك أي استفسار أو محتاج توضيح أكتر في جزء معين، ابعت لنا في التعليقات.