HTML: روابط HTML

Q: لماذا يجب إضافة rel="noopener" عند استخدام target="_blank" ؟

هذه مقياس أمان. عندما يفتح رابط في علامة تبويب جديدة بـ target="_blank" ، يمكن للصفحة الجديدة الوصول إلى كائن window للصفحة الأصلية عبر window.opener ، مما يسمح للصفحات الخبيثة بالتلاعب بمحتواك أوتنفيذ هجمات التصيد. إضافة rel="noopener" تقطع هذا الوصول، مما يحمي صفحتك. أضف rel="noopener" أو rel="noreferrer" إلى جميع روابط target="_blank" .

Q: ما الفرق بين المسارات المطلقة والنسبية؟ متى أستخدم كل منهما؟

المسارات المطلقة تحتوي على عناوين URL كاملة (مثل https://example.com/page.html ) وتشير إلى موارد خارجية أو عندما تحتاج إلى تحديد نطاق صريح. المسارات النسبية تستخدم مواضع نسبية إلى الملف الحالي (مثل ./about.html أو ../index.html ) للتنقلภายใน نفس الموقع. المسارات الجذر (مثل /html/index.html ) تبدأ من دليل الجذر، مثالية للمواقع الكبيرة. القاعدة الأساسية: مسارات نسبية للروابط الداخلية، مسارات مطلقة للروابط الخارجية.

Q: رابط المرساة الخاص بي لا يعمل. ماذا يجب أن أتحقق؟

الأسباب الشائعة: 1) العنصر المستهدف ليس له سمة id ; 2) قيمة id بهاخطأ إملائي (يفرق بينالأحرف الكبيرة والصغيرة); 3) id ليس فريدًا في الصفحة (ينتقل المتصفح إلى أول تطابق); 4) العنصر المستهدف مخفي بـ display:none . طريقة التصحيح: في وحدة تحكم المتصفح، اكتب document.getElementById("yourId") — إذا أرجع null ، فالمعرف غير موجود.

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

1. بناء الجملة الأساسي للروابط

يُعرف الرابط بواسطة الوسم <a> (مرساة)، حيث تحدد سمة href (مرجع النص التشعبي) عنوان الوجهة:

▶ مثال

HTML

<a href="https://www.example.com">زيارة موقع مثال</a>

▶ جرّب الكود

الكود أعلاه يعرض كنص قابل للنقر "زيارة موقع مثال" في المتصفح، بتنسيق افتراضي كنص أزرق مع خط تحته. عند النقر، ينتقل المتصفح إلى عنوان URL المحدد في href.

💡 نصيحة: يجب أن يخبر نص الرابط المستخدمين بوضوح بما يمكن توقعه بعد النقر. على سبيل المثال، "انقر هنا" أقل فائدة من "عرض دليل المستخدم الكامل" — إنه أسهل للمستخدمين لاتخاذ القرار وأكثر ملاءمة لمحركات البحث.

2. سلوك الفتح: سمة target

افتراضيًا، تفتح الروابط في الصفحة الحالية (تستبدلها). استخدم سمة target للفتح في علامة تبويب أو نافذة جديدة:

HTML

<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>.

3. المسارات المطلقة مقابل النسبية

يمكن أن تكون وجهات الروابط مسارات مطلقة أو مسارات نسبية. الفرق بسيط — المسارات المطلقة تشمل عنوان URL الكامل، بينما تحدد المسارات النسبية موقعًا نسبيًا للصفحة الحالية:

HTML

<!-- مسار مطلق: عنوان URL كامل -->
<a href="https://www.google.com">زيارة جوجل</a>

<!-- مسار نسبي: نسبي للملف الحالي -->
<a href="basics.html">أساسيات HTML</a>

### ▶ مثال
<!-- مسار نسبي: المجلد الأب -->
<a href="../index.html">العودة إلى الرئيسية</a>

المسار المطلق: يبدأ ببروتوكول (https://)، يشير إلى عنوان URL خارجي أو داخلي كامل
المسار النسبي: يبدأ باسم ملف أو ./ أو ../، يشير إلى موقع نسبي للملف الحالي
المسار الجذر: يبدأ بـ /، يحدد الموقع من دليل جذر الموقع، مثل /html/index.html

4. روابط المرساة: القفز داخل الصفحة

تتيح لك روابط المرساة القفز مباشرة إلى قسم معين في نفس الصفحة — مثالية للصفحات الطويلة مع "العودة إلى الأعلى" أو التنقل عبر جدول المحتويات. يتطلب الأمر خطوتين: تعيين id للعنصر الهدف، ثم الارتباط به باستخدام #id.

HTML

<!-- جدول المحتويات -->
<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>. سيفتح المتصفح تلك الصفحة وينتقل تلقائيًا إلى الموضع المحدد.

5. روابط الصور والمزيد من الاستخدامات

الروابط ليست مقصورة على النص — ضع وسم <img> داخل الوسم <a> وستصبح الصورة قابلة للنقر. يمكن أيضًا استخدام الوسم <a> لتنزيل الملفات وإرسال رسائل البريد الإلكتروني:

HTML

<!-- رابط صورة -->
<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".

س ما الفرق بين المسارات المطلقة والنسبية؟ متى أستخدم كل منهما؟

ج المسارات المطلقة تحتوي على عناوين URL كاملة (مثل https://example.com/page.html) وتشير إلى موارد خارجية أو عندما تحتاج إلى تحديد نطاق صريح. المسارات النسبية تستخدم مواضع نسبية إلى الملف الحالي (مثل ./about.html أو ../index.html) للتنقلภายใน نفس الموقع. المسارات الجذر (مثل /html/index.html) تبدأ من دليل الجذر، مثالية للمواقع الكبيرة. القاعدة الأساسية: مسارات نسبية للروابط الداخلية، مسارات مطلقة للروابط الخارجية.

س رابط المرساة الخاص بي لا يعمل. ماذا يجب أن أتحقق؟

ج الأسباب الشائعة: 1) العنصر المستهدف ليس له سمة 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 الخاصة بها — هل يمكنك تحديد أين سيفتح كل رابط؟

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن