فتح الروابط في علامات تبويب جديدة وسمة Download
استخدم سمتي target وdownload للتحكم في سلوك الروابط
فتح الروابط في علامات تبويب جديدة وسمة Download درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
فتح الرابط في علامة تبويب جديدة
تتحكّم السمة target في المكان الذي تُفتح فيه الوثيقة المرتبطة:
<a href="https://example.com" target="_blank">Open in new tab</a>
<!-- target values:
_blank → new tab (or window)
_self → same tab (default)
_parent → parent frame
_top → full window (exits frames)
-->مخاطر _blank الأمنية
يؤدي استخدام target="_blank" من دون احتياطات إلى إنشاء ثغرة أمنية:
- يمكن للصفحة الجديدة الوصول إلى الصفحة الفاتحة من خلال
window.opener - قد تعيد صفحة خبيثة توجيه علامة التبويب الأصلية
- يُسمّى هذا الهجوم reverse tabnapping
السمة rel=noopener noreferrer
أضف دائمًا rel="noopener noreferrer" عند استخدام target="_blank":
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->متى تفتح علامات تبويب جديدة
إرشادات تجربة المستخدم لاستخدام target="_blank":
- استخدمه للمواقع الخارجية التي لا يتوقّع المستخدمون مغادرة تطبيقك عند فتحها
- استخدمه للمراجع والمستندات، مثل ملفات PDF والأدلة
- لا تستخدمه للتنقّل بين الصفحات الداخلية
- نبّه المستخدمين دائمًا — أضف رمزًا أو عنوانًا يوضّح «يُفتح في علامة تبويب جديدة»
إعلام المستخدمين بفتح علامة تبويب جديدة
أعلم المستخدمين بأن الرابط سيفتح في علامة تبويب جديدة:
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit Example (opens in new tab)">
Visit Example
<span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
The arrow icon gives visual users a hint -->السمة download
تطلب السمة download من المتصفح تنزيل الملف المرتبط بدلًا من الانتقال إليه:
<a href="/reports/q4-report.pdf" download>
Download Q4 Report
</a>
<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
Export CSV
</a>قيود السمة download
تفرض السمة download بعض القيود:
- تعمل فقط مع عناوين URL من المصدر نفسه
- تتطلّب التنزيلات من مصادر مختلفة أن يرسل الخادم
Content-Disposition: attachment - اسم الملف في
downloadاقتراح فقط — ويمكن لرؤوس الخادم استبداله
تنزيلات Data URI
يمكنك تنزيل المحتوى المُنشأ باستخدام معرّفات URI للبيانات:
<a href="data:text/plain;charset=utf-8,Hello%20World!"
download="hello.txt">
Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->JavaScript وأهداف الروابط
عندما يتولّى JavaScript التنقّل، تجنّب إساءة استخدام target="_blank":
// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.openالسمة Ping
ترسل السمة ping طلب POST عند النقر على الرابط (لأغراض التحليلات):
<a href="/destination" ping="/analytics/track">
Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->السمة type في الروابط
تقدّم السمة type تلميحًا حول نوع MIME للمورد المرتبط:
<a href="/report.pdf" type="application/pdf">
Download PDF Report
</a>
<a href="/data.json" type="application/json">
JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->تحقّق سريعًا
ما السمة الأمنية التي ينبغي أن تصاحب target="_blank" دائمًا؟
مراجعة: target وdownload
سمات سلوك الروابط:
target="_blank"— يفتح الرابط في علامة تبويب جديدة- أضف دائمًا
rel="noopener noreferrer"مع_blank - نبّه المستخدمين بصريًا عند فتح الرابط في علامة تبويب جديدة
download— يبدأ تنزيل الملف بدلًا من التنقّلdownload="filename"— يقترح اسمًا للملف الذي سيتم تنزيله
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «فتح الروابط في علامات تبويب جديدة وسمة Download» مجاني؟
نعم — نص درس «فتح الروابط في علامات تبويب جديدة وسمة Download» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «فتح الروابط في علامات تبويب جديدة وسمة Download»؟
استخدم سمتي target وdownload للتحكم في سلوك الروابط تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «فتح الروابط في علامات تبويب جديدة وسمة Download»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- عنصر anchor وسمته href
- عناوين URL المطلقة مقابل النسبية
- فتح الروابط في علامات تبويب جديدة وسمة Download
- الربط بأقسام الصفحة ومعرّفات الأجزاء