الكورس

Advertisements

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>

إذا كانت صفحة الويب الخاصة بك مُقفلة في إطار ، فيمكنك استخدام [ “target = “_ top ] للخروج من الإطار.


 

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

 

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

 

مثال للتوضيح:
<a href="https://www.albashmoparmeg.com/blog/" title="Albashmoparmeg Blog page">Blog</a>

Advertisements

 

الربط بين الصفحات فى نفس الموقع – 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>

يمكنك استخدام (“href =”#top) أو (“#”=href) للارتباط بأعلى الصفحة الحالية.


 

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

 

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

<a href="mailto:[email protected]">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>

للمزيد حول الروابط Absolute او Relative ومسارات الملفات، شاهد فصل: HTML File Paths.



قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Links” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements