الروابط في HTML
شرح ترميز URL كيف تنتقل الأحرف الخاصة داخل عنوان. هذه الجلسة تبني أداة HTML اليومية التي تستخدم تلك العناوين: عنصر المرساة a مع href. الروابط هي طريقة انتقال الزائرين بين صفحاتك وخارجها إلى الويب الأوسع. الوجهات الواضحة والنص القابل للنقر الواضح مهمان بقدر صحة الوسم.
ما هو الرابط
الرابط التشعبي عنصر تحكم ينتقل إلى مكان ما عند تفعيله. في HTML تلف المحتوى القابل للنقر — عادة نص، وأحياناً صورة — داخل <a>...</a> وتعيّن href إلى الوجهة. بلا href لا تملك رابط تنقل عادياً. المتصفح ينسّق الروابط افتراضياً (غالباً بخط تحت ولون)، لكن المهم هو الوجهة والصياغة.
إجابة مباشرة
اكتب <a href="URL">clickable text</a>. يمكن أن يكون href عنوان ويب كاملاً مثل https://www.example.com (مطلق) أو مساراً لملف آخر على موقعك مثل about.html (نسبي). ينقر الزائرون المحتوى بين الوسوم. فضّل صياغة تصف الوجهة — «About this site» — على عبارات فارغة مثل «click here».
الروابط المطلقة
عناوين URL المطلقة تتضمن مخططاً (https:// أو http://) وعادة مضيفاً. استخدمها للمواقع الخارجية، أو كلما احتجت حقاً عنواناً كاملاً لا يعتمد على المجلد الحالي.
رابط مطلق
html<p>
<a href="https://www.example.com">Visit Example</a>
</p>قراءة عيّنة الرابط المطلق
hrefيحمل الوجهة الكاملة التي تبدأ بـhttps://- كلمتا
Visit Exampleهما ما يراه المستخدم ويفعّله - الأخطاء الإملائية في المضيف أو المخطط تقطع الرحلة حتى لو كانت وسوم HTML صحيحة
- الروابط المطلقة ما زالت تستفيد من نص صادق ووصفي
الروابط النسبية على موقعك
عناوين URL النسبية تشير إلى ملفات نسبةً إلى موقع الصفحة الحالية. هذه الطريقة اليومية لربط index.html بـ about.html دون تكرار اسم نطاقك. مهارات مسارات الملفات تنطبق: المجلدات الخاطئة تنتج أعطال 404 هادئة.
رابط نسبي لصفحة أخرى
html<p>
<a href="about.html">About this site</a>
</p>عادات نسبية تساعد
- أبقِ الصفحات ذات الصلة في بنية مجلدات واضحة
- فضّل أسماء ملفات بواصلات بدون مسافات
- اختبر الاتجاهين: الرئيسية → about و about → الرئيسية
- تذكّر أن نقل ملف HTML دون تحديث الروابط النسبية يكسر التنقل
نص الرابط محتوى وليس زخرفة
مستخدمو قارئ الشاشة غالباً يقفزون عبر قائمة روابط دون سماع الفقرة المحيطة. «Click here» و«read more» المكررتان عشر مرات تصبحان بلا معنى. سمِّ الوجهة. يمكنك أن تبدو ودوداً — فقط كن محدداً.
نص رابط وصفي
html<!-- Prefer -->
<p><a href="pricing.html">View pricing plans</a></p>
<!-- Avoid as the only cue -->
<p><a href="pricing.html">Click here</a></p>مطلق مقابل نسبي — اختر للمهمة
- موقع خارجي لا تتحكم به → مطلق
https://… - صفحة أخرى في مشروعك → مسار نسبي متى أمكن
- روابط نفس الموقع مكتوبة مطلقة ما زالت تعمل، لكن الروابط النسبية تبقى قابلة للنقل عند إعادة تسمية النطاق أو فتح الملفات محلياً
جلسات لاحقة تغطي عناوين الروابط والإشارات المرجعية (#) وروابط البريد؛ أتقن أولاًa+href.
الروابط المعطوبة وأخطاء 404
إذا أشار href إلى ملف مفقود أو مضيف مكتوب خطأ، ينتقل المتصفح إلى صفحة خطأ (غالباً HTTP 404). قد يبدو HTML حول الرابط مثالياً. تحقق دائماً من المسارات كما تحققت من مسارات الـ favicon وملفات الأنماط: الإملاء، والمجلدات، وما إذا حُفظ الملف الهدف.
تمرّن في محررك
- أنشئ
index.htmlوabout.htmlفي نفس المجلد. - في الصفحة الرئيسية أضف رابطاً نسبياً إلى
about.htmlبنص وصفي. - في صفحة about أضف رابطاً نسبياً عائداً إلى
index.html. - أضف رابطاً مطلقاً واحداً لموقع خارجي تثق به.
- اتبع كل رابط في المتصفح؛ ثم اكسر مساراً نسبياً عمداً، راقب الفشل، وأصلحه.
- أعد كتابة أي نص «click here» إلى اسم وجهة.
أخطاء سهلة
- نسيان
hrefفلا يصبح النص رابطاً تشعبياً حقيقياً - استخدام «click here» أو «link» لكل وجهة
- مسارات نسبية معطوبة بعد نقل الملفات بين المجلدات
- أخطاء إملائية في
https://أو النطاق لعناوين URL الخارجية - وضع مسافات في أسماء الملفات ثم التساؤل لماذا تفشل الروابط النسبية
- تداخل محتوى تفاعلي بلا حذر (أبقِ روابط المبتدئ بسيطة: نص داخل
a)
ملخص
- الروابط تستخدم عنصر
aمع وجهةhref - عناوين URL المطلقة تتضمن مخططاً مثل
https:// - عناوين URL النسبية تشير إلى ملفات أخرى على موقعك
- اكتب نص رابط واضحاً ووصفياً للجميع — بما في ذلك التقنيات المساعدة
- المسارات المعطوبة تفشل وقت التنقل حتى عندما تبدو الوسوم صحيحة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى