HTML Links | In Arabic

---

سوف نتعلم فى هذا الفصل “HTML Links” كل المعلومات والتفاصيل حول الروابط فى HTML وكيفية إستخدامها بطريقة صحيحة.

---

 

الروابط في لغة HTML

 

الروابط Links هي السمة المميزة للويب حيث تسمح لك بالانتقال من صفحة ويب إلى أخرى.

عند تحريك الماوس فوق الرابط، يتحول سهم الماوس إلى يد صغيرة.

 

إليك صورة توضيحية لكتابة الروابط فى لغة HTML بالتفصيل:

---

 

كيفية كتابة الروابط فى لغة HTML

 

• باستخدام وسم الـ <a> يمكنك إنشاء الروابط.
• النص بين وسم الإفتتاح لـ<a> ووسم الإغلاق لـ <a/> يُعرف بنص الرابط.
• يمكن للمستخدمين النقر على أي شيء بين علامتى <a></a>.
• يتم تحديد الصفحة التي تريد ربطها باستخدام سمة href.

 

مثال للتوضيح:

<a class=" text-left" href="https://www.albashmoparmeg.com/">Albashmoparmeg Website</a>

---

 

سمة الهدف – Target Attribute

 

تحدد سمة الـ target مكان فتح المستند او الصفحة المرتبط به. يمكن أن تحتوي سمة الـ target على إحدى القيم التالية:

القيمة	ما تقوم به
self_	(default) فتح المستند المرتبط في نفس النافذة أو علامة التبويب التي تم النقر عليها.
blank_	فتح المستند المرتبط في نافذة أو علامة تبويب جديدة.
parent_	يفتح المستند المرتبط في الإطار الأصلي.
top_	يفتح المستند المرتبط في كامل النافذة.

 

مثال للتوضيح:

<a href="https://www.albashmoparmeg.com/blog/" target="_self">Blog</a>
<a href="https://www.albashmoparmeg.com/blog/" target="_blank">Blog</a>
<a href="https://www.albashmoparmeg.com/blog/" target="_parent">Blog</a>
<a href="https://www.albashmoparmeg.com/blog/" target="_top">Blog</a>

---

 

عنوان الرابط – Link Title

 

لكى تقوم بإنشاء عنوان للرابط نستخدم سمة title حيث تقوم هذه السمة بتحديد معلومات إضافية حول العنصر. غالبًا ما يتم عرض المعلومات كنص تلميح أداة عندما يتحرك الماوس فوق العنصر.

 

مثال للتوضيح:

<a href="https://www.albashmoparmeg.com/blog/" title="Albashmoparmeg Blog page">Blog</a>

---

---

 

الربط بين الصفحات فى نفس الموقع – Local Links

 

عند ربط صفحات ببعض داخل نفس الموقع، لا تحتاج لتحديد اسم المجال في URL مثل [ https: //www ] وهكذا. بل اسم الملف فقط، كالتالى:

<a href="blog_page.html">Blog</a>

---

 

الربط بعنصر في نفس الصفحة

 

لتقوم بربط عنصر فى نفس الصفحة، قٌم بإعطاء id للعنصر، ثم مرر قيمة هذا الـ id مسبوق بعلامة # فى سمة href الخاصة بعنصر <a>، كالتالى:

<a href="#more_info_section">Go down for more</a>

<p id="more_info_section">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>

---

 

الربط بعنوان بريد إلكتروني

 

لإنشاء روابط تفتح في برنامج البريد الإلكتروني للمستخدم للسماح لهم بإرسال رسالة جديدة ، استخدم :mailto داخل سمة href:

<a href="mailto:info@albashmoparmeg.com">Send email now</a> 

---

 

الربط بأرقام الهواتف

 

لإجراء مكالمات، استخدم :tel داخل سمة href:

<a href="tel:+20.1552402071">+20 1552402071</a>

---

 

الربط بـ URL Absolute

 

URL Absolute (عنوان URL مطلق) هو عنوان ويب كاملًا في سمة href. كالتالى:

<a href="https://www.albashmoparmeg.com/blog/">Blog</a>
<a href="https://www.google.com/">Google</a>

---

 

الربط بـ URL Relative

 

URL Relative (عنوان URL نسبي) هو رابط إلى صفحة داخل نفس موقع الويب (بدون جزء “https://www“)، كالتالى:

<a href="blog.html">Blog</a>
<a href="/pages/courses.html">Courses</a>

---

---