HTML / الروابط
مفهوم الرابط
الرابط (Link) عبارة عن نص يشير إلى عنوان صفحة أخرى. عند النقر على الرابط، يقوم المتصفح بنقلك إلى تلك الصفحة. يمكن أن يكون الرابط أيضًا يشير إلى ملف أو برنامج، وفي هذه الحالة، يسألك المتصفح ما إذا كنت تريد تحميله أم لا.
تعتبر الروابط عنصرًا أساسيًا في تصميم صفحات الويب، حيث تتيح للمستخدمين التنقل بين المحتوى بسهولة ويسر.
ملاحظة: الروابط تعزز من تجربة المستخدم، حيث تسهل التنقل بين الصفحات والمحتوى المختلف. بدون الروابط، ستكون تجربة التصفح محدودة جدًا.
أشكال الروابط
يمكن وضع الروابط في الصفحة بأشكال مختلفة، مثل:
- رابط كنص (Text Link): يمكن أن يكون نصًا بسيطًا يمكن النقر عليه.
- رابط كزر (Button Link): يمكن تصميم رابط ليظهر كزر ليدل على فعالية معينة.
- رابط كصورة (Image Link): يمكن استخدام صورة كعنصر رابط يمكن النقر عليه.
في هذا الدرس ستتعرف على الوسم المخصص لإضافة روابط بالإضافة إلى كافة الخصائص التي يمكن وضعها فيها.
إضافة رابط في الصفحة
بشكل عام نستخدم الوسم <a> على هذا النحو <a href="url">text</a> لعروض رابط في الصفحة. هنا، مكان الكلمة text نضع النص الذي نريده أن يظهر في الصفحة والذي يمكن النقر عليه، ومكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه.
ملاحظة: تأكد من أن الروابط تعمل بشكل صحيح وأنها تشير إلى محتوى ذي صلة لضمان تجربة مستخدم جيدة. الروابط غير الصحيحة يمكن أن تؤدي إلى إحباط المستخدم.
في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش:
<p><a href="https://codafox.blogspot.com">Go to codafox.blogspot.com</a></p>
إظهار تلميح عند تمرير الماوس فوق الرابط
إذا أردت إظهار تلميح عند تمرير الماوس فوق الرابط، يمكنك إضافة الخاصية title في الوسم <a> وتمرير التلميح الذي تريد عرضه كقيمة لها. هذه الميزة تساهم في تحسين تجربة المستخدم، حيث توفر معلومات إضافية حول الرابط.
في المثال التالي قمنا بإضافة تلميح للرابط يتم إظهاره عند تمرير الماوس فوقه:
<p><a href="https://codafox.blogspot.com" title="Go to codafox.blogspot.com">codafox.blogspot</a> teaches you every thing you need.</p>
وضع رابط لبريد إلكتروني محدد
لإضافة رابط في الصفحة يقوم بفتح تطبيق البريد الإلكتروني الافتراضي عند النقر عليه، استخدم mailto: يليه البريد الإلكتروني الذي تريده أن يتلقى الرسالة. هذه الطريقة تسهل على المستخدمين إرسال بريد إلكتروني إلى جهة معينة دون الحاجة إلى نسخ ولصق البريد الإلكتروني.
في المثال التالي قمنا بإضافة رابط يفتح تطبيق البريد الإلكتروني عند النقر عليه:
<p><a href="mailto:someone@example.com">Send Email</a></p>
روابط لعناصر محددة في الصفحة
إذا أردت وضع رابط يوجه المستخدم لعنصر محدد موجود في نفس الصفحة، يمكنك إعطاء العنصر id واستخدام الرمز # يليه id العنصر. هذا مفيد جدًا في صفحات الويب الطويلة، حيث يمكن للمستخدم الانتقال مباشرة إلى القسم الذي يريده.
في المثال التالي قمنا بوضع رابط يقوم بنقل المستخدم لعنصر محدد في نفس الصفحة:
<a href="#P5">Jump to Paragraph 5</a>
ويمكنك أيضاً وضع رابط لنقل المستخدم لعنصر محدد في صفحة أخرى كما في المثال التالي:
<a href="sample.html#P5">Go to sample.html then jump to Paragraph 5</a>
إضافة رابط وهمي
يمكنك استخدام الرمز # كقيمة للخاصية href لجعل الرابط يبدو كأنه رابط عادي دون توجيه المستخدم لصفحة أخرى. هذا مفيد أثناء تصميم الصفحة حيث يمكن أن تحتاج لرؤية شكل الروابط دون الحاجة لتحديد وجهتها.
في المثال التالي قمنا بإضافة رابط وهمي:
<a href="#">Go to codafox.blogspot.com</a> <a>Go to codafox.blogspot.com</a>
تحديد أين سيتم فتح الرابط
يمكنك تحديد أين سيتم فتح الرابط باستخدام الخاصية target. القيم المتاحة تشمل:
_self: لفتح المحتوى في نفس الصفحة (الإعداد الافتراضي)._blank: لفتح المحتوى في تبويب جديد._top: لفتح المحتوى في نفس الصفحة مع إزالة أي صفحات متداخلة._parent: لفتح المحتوى في الصفحة الأم.
من المهم أن تعرف كيف تؤثر هذه القيم على تجربة المستخدم. على سبيل المثال، فتح الرابط في نافذة جديدة يمكن أن يساعد في الحفاظ على الصفحة الأصلية مفتوحة، مما يسهل العودة إليها.
في المثال التالي قمنا بإضافة روابط مع خاصية target:
<p><a href="https://codafox.blogspot.com" target="_self">Open codafox.blogspot.com in the current window (iframe)</a></p><p><a href="https://codafox.blogspot.com" target="_blank">Open codafox.blogspot.com in a new tab</a></p><p><a href="https://codafox.blogspot.com" target="_top">Open codafox.blogspot.com in the full window</a></p><p><a href="https://codafox.blogspot.com" target="_parent">Open codafox.blogspot.com in the parent window (parent iframe)</a></p>
إضافة رابط كزر
يمكنك وضع الرابط كزر باستخدام الوسم <button>. في المثال التالي قمنا بإضافة رابط كزر:
<button onclick="document.location='https://codafox.blogspot.com'">Go to codafox.blogspot.com</button>
إضافة رابط كصورة
يمكنك وضع الرابط كصورة باستخدام الوسم <a> مع <img>. في المثال التالي قمنا بإضافة صورة عند النقر عليها يتم توجيه المستخدم للصفحة الأولى في دورة HTML:
<a href="https://codafox.blogspot.com/2024/09/html.html"><img src="https://raw.githubusercontent.com/alnajm1/CodaFox/main/HTML%20CODAFOX.png"></a>
تعامل المتصفح مع محتوى الروابط
عندما تحاول الدخول لأي رابط بواسطة المتصفح، فإنه سيتصرف بشكل مناسب حسب نوع المستند الذي يشير له الرابط. إليك بعض النقاط الهامة:
- روابط صفحات ويب: إذا كان الرابط يشير إلى ملف بامتداد
.html، فسيعرض المتصفح محتوى الصفحة كصفحة ويب. - روابط صور: إذا كان الرابط يشير إلى صورة، فسيعرضها المتصفح كما هي.
- روابط ملفات نصية: إذا كان الرابط يشير إلى ملف نصي بامتداد
.txtأو.cssأو.js، فسيعرض المتصفح النص الموجود فيه. - روابط ملفات غير نصية: إذا كان الرابط يشير إلى برنامج أو ملف غير معروف، فسيطلب المتصفح تحميله.
من المهم أن تعرف كيف يتعامل المتصفح مع الروابط، حيث أن فهم ذلك يمكن أن يساعدك في تصميم تجربة مستخدم أكثر سلاسة.