الروابط Links

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

الرابط أو الرابط التشعبي Hyperlink هو اتصال من مورد ويب إلى آخر. تتيح الروابط للمستخدمين الانتقال بسلاسة من صفحة إلى أخرى ، على أي خادم في أي مكان في العالم.
الرابط له نهايتان ، تسمى المراسيAnchors. يبدأ الرابط عند النقطة المصدر Source ويشير إلى النقطة الوجهة Destination ، والتي قد تكون أي مورد ويب ، على سبيل المثال ، صورة أو مقطع صوتي أو مقطع فيديو أو ملف PDF أو صفحة HTML أو عنصر داخل الصفحة نفسها ، وهكذا.

افتراضيًا ، ستظهر الروابط على النحو التالي في معظم المتصفحات:

  • الروابط التي لم يسبق لنا زيارتها Unvisited Link تظهربالون الازرق ومن تحتها خط
  • الروابط التي سبق لنا زيارتها Visited Link تظهر باللون الأرجواني ومن تحتها خط
  • الرابط النشط Active Link يظهر باللون الأحمر ومن تحته خط .

بناء جملة الرابط (Link) في لغة HTML

يتم تحديد الروابط في HTML باستخدام الوسم <a>. يمكن للرابط التشعبي ان يكون كلمة أو مجموعة كلمات أو صورة.

بناء الجملة
  1. <a href="url">Link text</a>

أي شيء بين وسم البداية <a> ووسم الإغلاق </a> هو الجزء من الرابط الذي يراه المستخدم وينقر عليه في المتصفح.

إليك بعض الأمثلة على الروابط:

مثال
تشغيل
  1. <a href="https://www.msn.com/ar-ae/">MSN</a>
  2. <a href="http://educationfactorys.com/">Education Factory</a>
  3. <a href="images/kites.jpg">
  4. <img src="images/kites-thumb.jpg" alt="kites">
  5. </a>

تحدد السمة href هدف الرابط يمكن أن تكون قيمته عنوان URL مطلقًا (absolute) أو متصلا (relative).
عنوان URL المطلق (absolute) هو عنوان URL الذي يتضمن كل جزء من تنسيق عنوان URL ، مثل البروتوكول (protocol) واسم المضيف (host name) ومسار المستند (path of the document) ، على سبيل المثال https://www.google.com/ ، https://www.example.com/form.php ، وما إلى ذلك.
في حين أن عناوين URL المتصلة (relative) هي مسارات متصلة بالصفحة ، مثل contact.html و images/smiley.png وما إلى ذلك.

ملاحظة:

لا يمكن ان يبتدأ عنوان URL المتصل (relative) بـ http:// أو https://.

السمة target

تخبر السمة target متصفح الويب اين سيتم فتح المستند المرتبط (المستند الهدف). هناك أربعة قيم ممكنة للسمة target ، تبدأ كل منها بحرف تسطير أسفل السطر underscore character (_):

  • _blank لفتح المستند المرتبط في نافذة أو علامة تبويب جديدة.
  • _parent لفتح المستند المرتبط في النافذة الأب للنافذة المحتوية على عنصر الارتباط التشعبي. (وسيتم توضيح هذه الخاصية في درس العنصر iFrame)
  • _self لفتح المستند المرتبط في نفس النافذة أو علامة التبويب الخاصة بالمستند المصدر. هذا هو الإعداد الافتراضي ، وبالتالي ليس من الضروري تحديد هذه القيمة بشكل صريح.
  • _top لفتح المستند المرتبط في نافذة المتصفح الكاملة.(وسيتم توضيح هذه الخاصية ايضا في درس العنصر iFrame)

جرب المثال التالي لفهم كيفية عمل هدف الرابط بشكل أساسي:


مثال
تشغيل
  1. <a href="about-us.html" target="_top">About Us</a>
  2. <a href="https://www.google.com/" target="_blank">Google</a>
  3. <a href="images/sky.jpg" target="_parent">
  4. <img src="images/sky-thumb.jpg" alt="Cloudy Sky">
  5. </a>
نصيحة:

إذا تم وضع صفحة الويب الخاصة بك داخل iframe ، فيمكنك استخدام target = "_top" على الروابط للخروج من iframe وإظهار الصفحة المستهدفة في نافذة متصفح كاملة.

الروابط للإشارات المرجعية (Bookmark links)

يمكنك أيضًا إنشاء روابط مرجعية للسماح للمستخدمين بالذهاب إلى قسم معين من صفحة الويب. تكون الاستفادة اكبر من الإشارة المرجعية في حال كانت صفحة الويب طويلة جدًا.
إنشاء الإشارات المرجعية عملية تتكون من خطوتين: أضف أولاً سمة id attribute على العنصر الذي تريد الانتقال إليه ، ثم استخدم قيمة سمة id attribute مسبوقة بعلامة (#) كقيمة سمة href للوسم<a> ، كما هو موضح في المثال التالي:

مثال
تشغيل
  1. <a href="#sectionA">Jump to Section A</a>
  2. <h2 id="sectionA">Section A</h2>
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
نصيحة:

يمكنك أيضًا الانتقال إلى قسم من صفحة ويب أخرى عن طريق تحديد عنوان URL لتلك الصفحة مع الرابط #elementId في سمة href ، على سبيل المثال:

<a href="mypage.html#topicA">Go to TopicA</a>

روابط التنزيل (Download Links)

يمكن إنشاء رابط لتنزيل الملفات بنفس طريقة وضع روابط للصفحات تماما. ما عليك سوى توجيه عنوان URL المقصود إلى الملف الذي تريد أن يكون متاحًا للتنزيل.
في المثال التالي ، أنشأنا روابط لتنزيل الملفات ZIP و PDF و JPG.

مثال
تشغيل
  1. <a href="examples/download/test.zip">Download Zip file</a>
  2. <a href="examples/download/Links.pdf">Download PDF file</a>
  3. <a href="examples/download/balloons.jpg">Download Image file</a>
ملاحظة:

عند النقر فوق رابط يشير إلى ملف PDF أو ملف صورة او ملف نصي، لا يتم تنزيل الملف على محرك الأقراص الثابتة مباشرة. سيفتح الملف فقط في متصفح الويب الخاص بك. من ناحية اخرى ، يمكنك حفظه أو تنزيله على محرك الأقراص الثابتة على أساس دائم.

« التالي السابق »