يا هلا بالجميع! اليوم بتكلم عن شيء أساسي ومهم جداً في أي صفحة ويب: الروابط (Links). هذي اللي تخليك تتنقل بين الصفحات، أو حتى داخل نفس الصفحة. بدونها، الإنترنت بيكون مجرد مجموعة صفحات مفصولة.
كيف تسوي رابط؟
الرابط نسويه باستخدام وسم (اختصار لـ "anchor"). أهم خاصية فيه هي href، وهذي اللي تحدد وين بيوديك الرابط لما تضغط عليه.
<a href="https://www.google.com">روح لقوقل</a>لما تشوف هالكود، النص "روح لقوقل" هو اللي بيطلع للمستخدم، ولما يضغط عليه، بيوديه على https://www.google.com.
أنواع الروابط (مسارات URL)
فيه نوعين رئيسيين للمسارات اللي تحطها في href:
1. المسار المطلق (Absolute URL)
هذا المسار الكامل اللي يبدأ بـ
http://أوhttps://، يعني يحدد مكان الملف بالضبط على الإنترنت، بغض النظر عن مكان صفحتك الحالية. زي اللي فوق حق قوقل.
<a href="https://www.example.com/pages/about.html">عنّا</a>2. المسار النسبي (Relative URL)
هذا المسار اللي يعتمد على مكان صفحتك الحالية. مفيد جداً لما تكون الروابط داخل نفس موقعك. أسهل وأكثر مرونة.
- إذا الملف بنفس المجلد:
<a href="contact.html">اتصل بنا</a> - إذا الملف بمجلد فرعي:
<a href="assets/images/logo.png">شعارنا</a> - إذا الملف بمجلد أب (فوق المجلد الحالي):
<a href="../index.html">الرئيسية</a>
فتح الرابط في صفحة جديدة (تاب جديد)
تبغى المستخدم يضغط على الرابط وما يطلع من صفحتك؟ استخدم خاصية target وحط قيمتها _blank.
<a href="https://www.saudi.gov.sa" target="_blank">بوابة الحكومة السعودية (يفتح بتاب جديد)</a>ملاحظة أمنية: لما تستخدم
target="_blank"، يفضل تضيفrel="noopener noreferrer"عشان تزيد الأمان وتمنع مشاكل محتملة في الأداء والأمان للصفحة اللي فتحتها.
<a href="https://www.saudi.gov.sa" target="_blank" rel="noopener noreferrer">بوابة الحكومة السعودية (آمن)</a>روابط التنقل داخل الصفحة (Anchor Links)
لو عندك صفحة طويلة وفيها أقسام، تقدر تسوي روابط تخلي المستخدم ينزل لقسم معين مباشرة. تحتاج شيئين:
idللقسم اللي تبغى توصل له.hrefبالرابط اللي يبدأ بـ#وبعدها نفس قيمة الـid.
<!-- القسم اللي بنوصل له -->
<h2 id="section-1">القسم الأول</h2>
<p>هنا محتوى القسم الأول...</p>
<!-- الرابط اللي يوديك للقسم -->
<a href="#section-1">اذهب للقسم الأول</a>روابط التحميل (Download Links)
تبغى المستخدم يحمل ملف بدل ما يفتحه في المتصفح؟ استخدم خاصية download.
<a href="/files/my-document.pdf" download="تقرير-مهم.pdf">تحميل التقرير</a>تقدر تحط اسم للملف اللي بيتحمل داخل download، أو تخليه فاضي ويستخدم اسم الملف الأصلي.
روابط البريد الإلكتروني والهاتف
تقدر تسوي روابط تفتح برنامج البريد الإلكتروني أو تتصل برقم جوال مباشرة:
- بريد إلكتروني:
<a href="mailto:info@example.com">راسلنا بالبريد</a>تقدر تضيف موضوع ورسالة افتراضية:
<a href="mailto:info@example.com?subject=استفسار%20من%20الموقع&body=مرحباً%20،%20أود%20الاستفسار%20عن...">راسلنا بموضوع محدد</a> - رقم هاتف:
<a href="tel:+966501234567">اتصل بنا</a>
لمسة أخيرة: خاصية title
خاصية title مهمة للوصولية (Accessibility) وتجربة المستخدم. لما يمرر المستخدم الماوس فوق الرابط، بيطلع له تلميح صغير يوضح له وش يسوي الرابط.
<a href="https://www.google.com" title="اضغط للبحث في قوقل">قوقل</a>وبكذا نكون غطينا أغلب استخدامات الروابط في HTML. الروابط هي عصب الإنترنت، وإتقانها بيخليك تبني صفحات ويب تفاعلية وسهلة الاستخدام. بالتوفيق!