ما هي الروابط في HTML؟
الروابط (Hyperlinks) تُستخدم للتنقل بين الصفحات، سواءً كانت صفحات داخل موقعك أو صفحات خارجية.
1. الوسم الأساسي للروابط: <a>
الوسم <a> هو اختصار لكلمة Anchor، ويُستخدم لإنشاء رابط.
الخاصية الأساسية في هذا الوسم هي href، والتي تحدد عنوان الرابط.
مثال على رابط خارجي:
<a href="https://www.google.com">اذهب إلى جوجل</a>
هذا الرابط عند الضغط عليه يفتح موقع Google.
مثال على رابط داخلي:
<a href="about.html">من نحن</a>
هذا ينقلك إلى صفحة داخلية في موقعك (ملف اسمه about.html).
2. فتح الرابط في نافذة جديدة
لجعل الرابط يفتح في تبويب جديد، نستخدم الخاصية target="_blank":
<a href="https://www.youtube.com" target="_blank">اذهب إلى يوتيوب</a>
3. رابط إلى بريد إلكتروني
لإنشاء رابط يُرسل رسالة إلى بريد إلكتروني:
<a href="mailto:example@email.com">راسلنا</a>
4. رابط إلى رقم هاتف
مفيد جدًا للمواقع على الجوال:
<a href="tel:+1234567890">اتصل بنا</a>
5. روابط داخل نفس الصفحة (Anchor Links)
للتنقل داخل نفس الصفحة إلى قسم معين:
<!-- رابط -->
<a href="#contact">اذهب إلى قسم التواصل</a>
<!-- القسم الذي سينقلك إليه -->
<h2 id="contact">التواصل معنا</h2>
مثال عملي كامل
<!DOCTYPE html>
<html>
<head>
<title>درس الروابط</title>
</head>
<body>
<h1>روابط مفيدة</h1>
<p><a href="https://www.google.com" target="_blank">زيارة Google</a></p>
<p><a href="mailto:info@example.com">راسلنا عبر البريد</a></p>
<p><a href="tel:+201234567890">اتصل بنا</a></p>
<hr>
<a href="#footer">اذهب إلى نهاية الصفحة</a>
<p style="margin-top: 600px;"></p> <!-- فقط لخلق مسافة للتجربة -->
<h3 id="footer">شكراً لزيارتك</h3>
</body>
</html>
الواجب العملي
- أنشئ صفحة HTML فيها:
- رابط خارجي إلى موقع مشهور.
- رابط يفتح في تبويب جديد.
- رابط لإرسال بريد إلكتروني.
- رابط لرقم هاتف.
- رابط ينقلك إلى قسم معين في نفس الصفحة.
ماذا سنتعلم في الدرس القادم؟
في الدرس الرابع سنتعلّم كيفية إضافة الصور داخل صفحات HTML باستخدام الوسم <img>.