15- الروابط التشعبية – الروابط والصور – المستوى الاول
📌 الروابط التشعبية <a> في HTML
🔹 ما هو الوسم <a>؟
-
<a> اختصار لكلمة Anchor (مرساة).
-
يُستخدم لإنشاء روابط تشعبية (Hyperlinks) بين الصفحات أو داخل نفس الصفحة أو حتى للملفات والبريد الإلكتروني.
🔹 التركيب الأساسي
📌 المتغير الأهم هنا هو href (Hypertext REFerence):
-
هو المكان اللي هينتقل له المستخدم لما يضغط على الرابط.
✅ مثال بسيط:
🔎 النتيجة: يظهر نص “اذهب إلى جوجل”، ولما تضغط → يفتح موقع جوجل.
🔹 خصائص <a> الأساسية
1. الخاصية href
-
تحدد عنوان الوجهة.
-
ممكن تكون:
-
رابط كامل (Absolute URL):
-
-
رابط نسبي (Relative URL): (في نفس الموقع/المجلد)
-
2. الخاصية target
-
تحدد مكان فتح الرابط:
| القيمة | المعنى |
|---|---|
| _self | يفتح في نفس النافذة/التبويب (الافتراضي). |
| _blank | يفتح الرابط في تبويب جديد. |
| _parent | يفتح في الإطار الأب (للـ framesets). |
| _top | يفتح في نافذة المتصفح كاملة. |
✅ مثال:
3. روابط البريد الإلكتروني (mailto)
🔎 النتيجة: يفتح برنامج البريد الإلكتروني مع العنوان جاهز.
4. روابط الهاتف (tel)
🔎 النتيجة: على الموبايل يفتح تطبيق الاتصال مباشرة.
5. الروابط الداخلية (Anchor Links)
-
تقدر تعمل رابط يوصلك لقسم معين في نفس الصفحة باستخدام id.
✅ مثال:
🔹 تنسيقات الروابط (افتراضيًا)
-
الرابط العادي → أزرق وتحته خط.
-
بعد الزيارة → بنفسجي.
-
أثناء التمرير عليه → يتغير (عادةً أزرق غامق).
📌 تقدر تغير الشكل ده بـ CSS.
🔹 مثال عملي كامل
🔹 ملخص
-
<a> = وسم الروابط.
-
href = يحدد الوجهة (رابط خارجي، داخلي، بريد، هاتف).
-
target = يحدد مكان فتح الرابط (نفس النافذة، تبويب جديد…).
-
ممكن تعمل روابط داخلية للتنقل داخل نفس الصفحة.
اتصل الآن
تواصل واتساب
