الروابط التشعبية (Hyperlinks) والوسم <a>

في جميع الدروس السابقة، كنا نتعامل مع "مستندات" معزولة. قمنا ببناء الهيكل (<html>)، وتنظيم المحتوى (<h1>, <p>)، وتجميع البيانات (<ul>, <ol>)، وتنسيق النصوص (<strong>, <em>). لكن شبكة الويب (Web) لم تُبنَ على المستندات المعزولة، بل على "الترابط" (Hypertext) بينها.

هذا الدرس مخصص لشرح الوسم الأهم في هذا السياق: الوسم <a> (اختصار "Anchor" أو "المرساة"). هذا الوسم هو الذي يُحول المستند الثابت إلى صفحة ويب تفاعلية، مما يسمح للمستخدم بالانتقال (Navigate) من صفحة إلى أخرى، أو حتى إلى أجزاء مختلفة ضمن نفس الصفحة. سنتناول بالتفصيل جميع أنواع الروابط وكيفية إنشائها بشكل صحيح.

التعريف الأساسي: الوسم `<a>` (Anchor)

الوسم <a> (اختصار "Anchor" أو المرساة) هو الوسم المستخدم لإنشاء الروابط التشعبية.

إنه "وسم حاوٍ" (Container Tag) مزدوج، يتطلب وسم فتح <a> ووسم إغلاق </a>.

المحتوى الموجود "بين" وسمي الفتح والإغلاق هو ما يراه المستخدم على الصفحة كنص قابل للنقر (Clickable Text). افتراضيًا، يظهر هذا النص في المتصفحات باللون الأزرق مع خط تحته (Underline).

الأهم من ذلك، أن الوسم <a> هو "عنصر سطري" (Inline Element)، تماماً مثل <strong> أو <span>. هذا يعني أنه لا يبدأ سطراً جديداً، ويمكن وضعه بسهولة "داخل" عناصر كُتَلية مثل الفقرات <p> أو عناصر القائمة <li>.

الخاصية الإلزامية: `href` (Hypertext Reference)

الوسم <a> بمفرده لا يفعل شيئاً. إنه مجرد حاوية. لكي يعمل الرابط، يجب أن نخبر المتصفح "إلى أين" يجب أن ينتقل عند النقر عليه.

يتم ذلك عن طريق "الخصائص" (Attributes). الخاصية هي معلومة إضافية نضعها "داخل" وسم الفتح ل تعديل سلوك الوسم أو تقديم بيانات له.

الخاصية الأهم والإلزامية للوسم <a> هي href (اختصار "Hypertext Reference" أو "مرجع النص التشعبي").

تُكتب الخاصية كالتالي: <a href="قيمة_الرابط_هنا">...</a>.

القيمة (Value) التي توضع داخل علامتي الاقتباس ("...") هي "عنوان الوجهة" (URL) الذي سينتقل إليه المستخدم.

مثال (1): الرابط التشعبي البسيط

يوضح هذا المثال البنية الأساسية الكاملة لإنشاء رابط تشعبي. يتكون من ثلاثة أجزاء: وسم الفتح مع الخاصية، النص المرئي، ووسم الإغلاق.

مثال (1): تشريح الرابط البسيط


<body>

    <h2>مثال على الرابط</h2>
    
    <p>
        يمكنك زيارة محرك البحث جوجل بالضغط على هذا الرابط: 
        <a href="https://www.google.com">
            انقر هنا للذهاب إلى جوجل
        </a>.
    </p>

</body>

النتيجة المتوقعة في المتصفح:

يمكنك زيارة محرك البحث جوجل بالضغط على هذا الرابط: انقر هنا للذهاب إلى جوجل.

لاحظ كيف أن الرابط (العنصر السطري) اندمج بسلاسة داخل الفقرة (العنصر الكُتَلي).

النوع الأول: الروابط المطلقة (Absolute URLs)

قيمة الخاصية href يمكن أن تكون واحدة من عدة أنواع. النوع الأول هو "الرابط المطلق" أو "الرابط الخارجي" (External Link).

الرابط المطلق هو "العنوان الكامل" لصفحة على الإنترنت. يجب أن يتضمن "البروتوكول" (http:// أو https://) واسم النطاق (Domain Name) بالكامل.

متى نستخدمه؟
نستخدمه "دائماً" عند الربط بصفحة تقع على "موقع ويب آخر" (موقع خارجي لا نملكه أو لا يقع على نفس الخادم).

إذا نسيت البروتوكول (https://) وكتبت href="www.google.com"، سيعتقد المتصفح أنك تبحث عن ملف اسمه "www.google.com" "داخل" مجلد موقعك، وهو ما سيؤدي إلى خطأ (Error 404).

مثال (2): استخدام الروابط المطلقة (الخارجية)

يوضح هذا المثال كيفية الربط بمصادر خارجية متنوعة (موقع ويب، شبكة اجتماعية).

مثال (2): روابط مطلقة (خارجية)


<body>

    <h3>مصادر تعليمية</h3>
    <ul>
        <li>
            <a href="https://www.w3schools.com/">موقع W3Schools</a>
        </li>
        <li>
            <a href="https://developer.mozilla.org/en-US/">شبكة مطوري موزيلا (MDN)</a>
        </li>
    </ul>
    
    <h3>تواصل معنا (خارجي)</h3>
    <p>
        تابعنا على <a href="https://www.twitter.com/example">تويتر</a>.
    </p>

</body>

النوع الثاني: الروابط النسبية (Relative URLs)

هذا هو النوع الأكثر أهمية لبناء "موقع الويب" الخاص بك. الرابط النسبي هو رابط "داخلي" (Internal Link) لا يتضمن اسم النطاق أو البروتوكول.

بدلاً من ذلك، هو يصف المسار إلى الملف "نسبة إلى" موقع الملف الحالي.

لماذا هو مهم؟
لأنه يجعل موقعك "قابلاً للنقل" (Portable). يمكنك بناء موقعك بالكامل على حاسوبك المحلي باستخدام الروابط النسبية، وعندما ترفعه لاحقاً إلى خادم الويب (Web Server)، ستستمر جميع الروابط في العمل دون الحاجة لتغييرها.

كيف يعمل؟
نفترض أن لديك هيكل الملفات التالي:

/مشروعي/
    index.html     (صفحتك الحالية)
    about.html
    contact.html

إذا كنت داخل ملف index.html وتريد الربط بملف about.html، فإن الرابط النسبي هو ببساطة: <a href="about.html">...</a>

مثال (3): بناء قائمة تنقل (روابط نسبية)

الاستخدام الأكثر شيوعاً للروابط النسبية (مع القوائم غير المرتبة <ul>) هو بناء قائمة التنقل (Navigation Menu) الرئيسية للموقع.

مثال (3): قائمة تنقل بروابط نسبية


<body>

    <!-- (هذا الكود موجود في ملف "index.html") -->
    
    <ul style="list-style-type: none;">
        <li>
            <a href="index.html">الصفحة الرئيسية</a>
        </li>
        <li>
            <a href="about.html">من نحن</a>
        </li>
        <li>
            <a href="services.html">خدماتنا</a>
        </li>
        <li>
            <a href="contact.html">اتصل بنا</a>
        </li>
    </ul>

</body>

النوع الثالث: الروابط الداخلية (Fragment Identifiers)

يُستخدم هذا النوع للانتقال (Jump) إلى "جزء معين" أو "قسم" داخل نفس الصفحة.

هذا مفيد جداً للصفحات الطويلة، ويتم استخدامه في جداول المحتويات (مثل الذي تراه في أعلى هذا الدرس).

**كيف يعمل؟ (خطوتين):**

الخطوة 1: تحديد "الهدف" (Target): يجب أن نعطي القسم الذي نريد الانتقال إليه "مُعرفاً فريداً" (ID). نستخدم لهذا "خاصية" (Attribute) عامة تسمى id. (مثال: <h2 id="section1">...</h2>).
الخطوة 2: إنشاء "الرابط" (Link): نقوم بإنشاء وسم <a>، ولكن قيمة href تبدأ برمز "الشباك" (#) متبوعاً بقيمة الـ id التي حددناها. (مثال: <a href="#section1">...</a>).

عند النقر على الرابط، سيقوم المتصفح بالقفز (Scroll) تلقائياً إلى العنصر الذي يحمل هذا الـ id.

مثال (4): إنشاء "جدول محتويات" بروابط داخلية

مثال (4): الروابط الداخلية (Fragments)


<body>

    <h2>جدول المحتويات</h2>
    <ul>
        <li><a href="#ch1">اذهب إلى الفصل الأول</a></li>
        <li><a href="#ch2">اذهب إلى الفصل الثاني</a></li>
        <li><a href="#ch3">اذهب إلى الفصل الثالث</a></li>
    </ul>
    
    <!-- (محتوى طويل جداً هنا لملء الصفحة) -->
    
    <!-- الخطوة 1: تحديد الأهداف -->
    <h2 id="ch1">الفصل الأول: المقدمة</h2>
    <p>نص طويل جداً...</p>
    
    <h2 id="ch2">الفصل الثاني: التحليل</h2>
    <p>نص طويل جداً...</p>

    <h2 id="ch3">الفصل الثالث: الخاتمة</h2>
    <p>نص طويل جداً...</p>

</body>

الخاصية `target`: التحكم في وجهة الرابط

افتراضيًا، عندما ينقر المستخدم على رابط، يتم تحميل الصفحة الجديدة في "نفس" علامة التبويب (Tab) أو النافذة الحالية.

في كثير من الأحيان، وخاصة عند الربط بـ "مواقع خارجية" (روابط مطلقة)، نرغب في أن يُفتح الرابط في "علامة تبويب جديدة"، حتى لا يغادر المستخدم موقعنا.

نستخدم لهذا الغرض الخاصية target.

target="_self": (القيمة الافتراضية) يفتح في نفس النافذة.
target="_blank": يفتح في علامة تبويب أو نافذة "جديدة".

ملاحظة أمنية هامة: عند استخدام target="_blank"، من "الممارسات الفضلى" (Best Practice) دائمًا إضافة خاصيتين أُخريين: rel="noopener noreferrer".

(rel="noopener" تمنع الصفحة الجديدة من الوصول إلى كائن window الخاص بالصفحة الأصلية، وهو إجراء أمني).

مثال (5): فتح الروابط في علامة تبويب جديدة (`_blank`)

مثال (5): استخدام target="_blank"


<body>

    <h3>الروابط الخارجية</h3>
    <p>
        هذا الرابط لموقع جوجل سيفتح في <strong>علامة تبويب جديدة</strong>.
        <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
            افتح جوجل
        </a>
    </p>
    
    <h3>الروابط الداخلية</h3>
    <p>
        هذا الرابط لصفحة "من نحن" سيفتح في <strong>نفس علامة التبويب</strong> (افتراضي).
        <a href="about.html">
            اذهب إلى "من نحن"
        </a>
    </p>

</body>

أنواع روابط خاصة: `mailto:` و `tel:`

بالإضافة إلى بروتوكول http://، يمكن للخاصية href استخدام بروتوكولات أخرى لتنفيذ إجراءات بدلاً من الانتقال إلى صفحة.

البريد الإلكتروني (`mailto:`)

عند استخدام mailto: متبوعاً بعنوان بريد إلكتروني، سيقوم النقر على الرابط بفتح "برنامج البريد الإلكتروني الافتراضي" لدى المستخدم (مثل Outlook أو Apple Mail) مع تعبئة حقل "إلى" (To) تلقائياً.

الهاتف (`tel:`)

عند استخدام tel: متبوعاً برقم هاتف، سيقوم النقر على الرابط (خاصة على الهواتف المحمولة) بفتح "تطبيق الاتصال" لدى المستخدم مع الرقم جاهزاً للاتصال.

مثال (6): إنشاء روابط للبريد والهاتف

مثال (6): روابط mailto و tel


<body>

    <h3>اتصل بنا</h3>
    
    <p>
        للاستفسارات، يرجى مراسلتنا عبر البريد الإلكتروني:
        <a href="mailto:support@example.com">
            support@example.com
        </a>
    </p>
    
    <p>
        أو الاتصال بنا هاتفياً على الرقم (سيُفعل على الهواتف):
        <a href="tel:+201001234567">
            +20-100-123-4567
        </a>
    </p>

</body>

ملاحظة حول تنسيق الروابط (CSS)

افتراضيًا، كما ذكرنا، تظهر الروابط باللون الأزرق مع خط سفلي.

قد يلاحظ المستخدم أن ألوان الروابط تتغير:

a:link (الرابط): الحالة الافتراضية (أزرق).
a:visited (تمت زيارته): الرابط بعد النقر عليه (يتحول إلى بنفسجي افتراضياً).
a:hover (عند التمرير): عند مرور مؤشر الماوس فوق الرابط.
a:active (نشط): لحظة النقر الفعلية على الرابط (يتحول إلى أحمر افتراضياً).

هذه "الحالات" (States) الأربعة هي جوهر تنسيق الروابط. التحكم الكامل بها (مثل إزالة الخط السفلي، أو تغيير الألوان) يتم حصرياً عبر لغة CSS، وهو ما سنتناوله في مسار تعليمي متقدم. الهدف الآن هو معرفة أن HTML تُنشئ الرابط، و CSS تُجمله.

(ملخص الدرس):
1. الوسم <a> (Anchor) هو عنصر "سطري" (Inline) يُستخدم لإنشاء الروابط.
2. الخاصية الإلزامية هي href، وهي التي تحدد "وجهة" الرابط.
3. **الروابط المطلقة (Absolute):** تُستخدم للمواقع الخارجية (يجب أن تبدأ بـ https://).
4. **الروابط النسبية (Relative):** تُستخدم للتنقل داخل موقعك (مثال: about.html).
5. **الروابط الداخلية (Fragment):** تُستخدم للقفز داخل نفس الصفحة (تبدأ بـ # وتتطلب id).
6. استخدم target="_blank" (مع rel="noopener") لفتح الروابط في علامة تبويب جديدة.
7. يمكن استخدام بروتوكولات خاصة مثل mailto: للبريد و tel: للهاتف.

شرح الروابط وأنواعها HTML