روابط HTML
الروابط (الارتباطات التشعبية) هي الخيوط التي تربط صفحات الويب — بدونها، لن تكون الإنترنت "شبكة". باستخدام الوسم <a>، يمكنك التنقل بين الصفحات، القفز إلى أقسام محددة داخل الصفحة، تنزيل الملفات، أو إرسال رسائل البريد الإلكتروني.
بناء الجملة الأساسي للروابط
يُعرف الرابط بواسطة الوسم <a> (مرساة)، حيث تحدد سمة href (مرجع النص التشعبي) عنوان الوجهة:
مثال
<a href="https://www.example.com">زيارة موقع مثال</a>
الكود أعلاه يعرض كنص قابل للنقر "زيارة موقع مثال" في المتصفح، بتنسيق افتراضي كنص أزرق مع خط تحته. عند النقر، ينتقل المتصفح إلى عنوان URL المحدد في href.
سلوك الفتح: سمة target
افتراضيًا، تفتح الروابط في الصفحة الحالية (تستبدلها). استخدم سمة target للفتح في علامة تبويب أو نافذة جديدة:
<a href="https://www.example.com" target="_blank">فتح في علامة تبويب جديدة</a>
### مثال
<a href="/html/index.html" target="_self">فتح في الصفحة الحالية (الافتراضي)</a>
قيم target الشائعة:
_self: الوضع الافتراضي — يفتح في الصفحة الحالية_blank: يفتح في علامة تبويب أو نافذة جديدة_parent: يفتح في الإطار الأب (يُستخدم في سيناريوهات iframe)_top: يفتح في النافذة الكاملة (يخرج من جميع الإطارات)
target="_blank"، يُوصى بإضافة rel="noopener" أو rel="noreferrer" إلى الرابط. هذا يمنع الصفحة الجديدة من الوصول إلى كائن الصفحة الأصلية عبر window.opener، مما يتجنب المخاطر الأمنية المحتملة: <a href="..." target="_blank" rel="noopener">رابط</a>.
المسارات المطلقة مقابل النسبية
يمكن أن تكون وجهات الروابط مسارات مطلقة أو مسارات نسبية. الفرق بسيط — المسارات المطلقة تشمل عنوان URL الكامل، بينما تحدد المسارات النسبية موقعًا نسبيًا للصفحة الحالية:
<!-- مسار مطلق: عنوان URL كامل -->
<a href="https://www.google.com">زيارة جوجل</a>
<!-- مسار نسبي: نسبي للملف الحالي -->
<a href="basics.html">أساسيات HTML</a>
### مثال
<!-- مسار نسبي: المجلد الأب -->
<a href="../index.html">العودة إلى الرئيسية</a>
- المسار المطلق: يبدأ ببروتوكول (
https://)، يشير إلى عنوان URL خارجي أو داخلي كامل - المسار النسبي: يبدأ باسم ملف أو
./أو../، يشير إلى موقع نسبي للملف الحالي - المسار الجذر: يبدأ بـ
/، يحدد الموقع من دليل جذر الموقع، مثل/html/index.html
روابط المرساة: القفز داخل الصفحة
تتيح لك روابط المرساة القفز مباشرة إلى قسم معين في نفس الصفحة — مثالية للصفحات الطويلة مع "العودة إلى الأعلى" أو التنقل عبر جدول المحتويات. يتطلب الأمر خطوتين: تعيين id للعنصر الهدف، ثم الارتباط به باستخدام #id.
<!-- جدول المحتويات -->
<a href="#section-intro">اقفز إلى المقدمة</a>
<a href="#section-details">اقفز إلى التفاصيل</a>
### مثال
<!-- الأقسام الهدف (مع ارتفاع لتصور القفزة) -->
<h2 id="section-intro">مقدمة</h2>
<p style="min-height:600px;background:#f0f0f0;">محتوى المقدمة هنا...</p>
<h2 id="section-details">تفاصيل</h2>
<p style="min-height:600px;background:#f0f0f0;">معلومات تفصيلية هنا...</p>
تدعم المراسي أيضًا القفز عبر الصفحات — فقط حدد كلًا من الصفحة والمرساة في الرابط، مثل <a href="basics.html#section-head">عرض هيكل الرأس</a>. سيفتح المتصفح تلك الصفحة وينتقل تلقائيًا إلى الموضع المحدد.
روابط الصور والمزيد من الاستخدامات
الروابط ليست مقصورة على النص — ضع وسم <img> داخل الوسم <a> وستصبح الصورة قابلة للنقر. يمكن أيضًا استخدام الوسم <a> لتنزيل الملفات وإرسال رسائل البريد الإلكتروني:
<!-- رابط صورة -->
<a href="https://www.example.com">
<img src="/assets/images/tutorials/html-banner-example.webp" alt="انقر للتفاصيل">
</a>
### مثال
<!-- رابط تنزيل -->
<a href="document.pdf" download>تنزيل مستند PDF</a>
<!-- رابط بريد إلكتروني -->
<a href="mailto:support@example.com">أرسل لنا بريدًا إلكترونيًا</a>
- روابط الصور: انقر على صورة للتنقل؛ النص
altمهم جدًا لإمكانية الوصول - روابط التنزيل: إضافة سمة
downloadتجعل المتصفح يقوم بتنزيل الملف بدلاً من فتحه - روابط البريد الإلكتروني: استخدام بروتوكول
mailto:يفتح عميل البريد الإلكتروني الافتراضي للنظام
<a> أيضًا سمة title شائعة الاستخدام تعرض نص تلميح عند تمرير الماوس: <a href="..." title="انقر لعرض البرنامج التعليمي الكامل">درس HTML</a>. هذا التلميح مناسب أيضًا للتقنيات المساعدة مثل قارئات الشاشة.
❓ أسئلة شائعة
rel="noopener" عند استخدام target="_blank"؟target="_blank"، يمكن للصفحة الجديدة الوصول إلى كائن window للصفحة الأصلية عبر window.opener، مما يسمح للصفحات الخبيثة بالتلاعب بمحتواك أوتنفيذ هجمات التصيد. إضافة rel="noopener" تقطع هذا الوصول، مما يحمي صفحتك. أضف rel="noopener" أو rel="noreferrer" إلى جميع روابط target="_blank".https://example.com/page.html) وتشير إلى موارد خارجية أو عندما تحتاج إلى تحديد نطاق صريح. المسارات النسبية تستخدم مواضع نسبية إلى الملف الحالي (مثل ./about.html أو ../index.html) للتنقلภายใน نفس الموقع. المسارات الجذر (مثل /html/index.html) تبدأ من دليل الجذر، مثالية للمواقع الكبيرة. القاعدة الأساسية: مسارات نسبية للروابط الداخلية، مسارات مطلقة للروابط الخارجية.id; 2) قيمة id بهاخطأ إملائي (يفرق بينالأحرف الكبيرة والصغيرة); 3) id ليس فريدًا في الصفحة (ينتقل المتصفح إلى أول تطابق); 4) العنصر المستهدف مخفي بـ display:none. طريقة التصحيح: في وحدة تحكم المتصفح، اكتب document.getElementById("yourId") — إذا أرجع null، فالمعرف غير موجود.📖 ملخص
- تستخدم الروابط الوسم
<a>؛ سمةhrefتحدد الوجهة target="_blank"يفتح في علامة تبويب جديدة — يُوصى بإقرانه معrel="noopener"- المسارات المطلقة هي عناوين URL كاملة؛ المسارات النسبية تعتمد على موقع الملف الحالي
- روابط المرساة تستخدم
#idللقفز داخل الصفحة وتعمل أيضًا عبر الصفحات - تداخل
<img>داخل<a>ينشئ روابط صور؛downloadيُشغّل التنزيل؛mailto:يُرسل البريد الإلكتروني
📝 تمارين
- أنشئ رابطًا: اكتب رابطًا إلى
https://www.google.comيفتح في علامة تبويب جديدة، مع نص الرابط "ابحث في جوجل". - تنقل بالمرساة: أنشئ رابط "العودة إلى الأعلى" في أسفل صفحة يشير إلى الأعلى (تلميح: أضف
idإلى<body>أو استخدم#مع عنصر في أعلى الصفحة). - مراجعة ذاتية: انظر إلى كود مصدر صفحة كتبتها، ابحث عن جميع وسوم
<a>، وافحص كيف تم تعيين سماتhrefوtargetالخاصة بها — هل يمكنك تحديد أين سيفتح كل رابط؟