<a> (Anchor) هو عنصر الرابط — من أهم عناصر HTML وسبب تسمية الشبكة بـ "HyperText".
أهم الصفات: • href: الرابط المقصود — إلزامي. يمكن أن يكون: - رابط خارجي: https://example.com - رابط داخلي (نسبي): /about أو ./page.html - رابط مرساة: #section-id - بريد: mailto:email@example.com - هاتف: tel:+201234567890
• target: أين يفتح الرابط: - _self: نفس التبويب (الافتراضي) - _blank: تبويب جديد (أضف rel="noopener" للأمان) - _parent, _top: للـ iframes
• download: تحميل الملف بدلاً من فتحه. يمكن تحديد اسم للملف.
• rel: العلاقة بين الصفحة والرابط (noopener, noreferrer, nofollow)
| 1 | <!-- رابط خارجي آمن --> |
| 2 | <a href="https://google.com" target="_blank" rel="noopener noreferrer"> |
| 3 | زيارة جوجل |
| 4 | </a> |
| 5 | |
| 6 | <!-- رابط داخلي --> |
| 7 | <a href="/courses">الكورسات</a> |
| 8 | <a href="../index.html">الرئيسية</a> |
| 9 | |
| 10 | <!-- رابط مرساة (Anchor) --> |
| 11 | <a href="#contact-section">انتقل للتواصل</a> |
| 12 | |
| 13 | <!-- بريد إلكتروني --> |
| 14 | <a href="mailto:info@nouvil.com">راسلنا</a> |
| 15 | |
| 16 | <!-- رقم هاتف --> |
| 17 | <a href="tel:+201234567890">اتصل بنا</a> |
| 18 | |
| 19 | <!-- تحميل ملف --> |
| 20 | <a href="/files/guide.pdf" download="دليل-المستخدم.pdf"> |
| 21 | تحميل الدليل |
| 22 | </a> |
مثال 1: أنواع الروابط الشائعة
| 1 | <nav> |
| 2 | <!-- روابط التنقل الداخلية --> |
| 3 | <a href="/">الرئيسية</a> |
| 4 | <a href="/courses">الكورسات</a> |
| 5 | <a href="/about">من نحن</a> |
| 6 | </nav> |
| 7 | |
| 8 | <!-- قسم التواصل --> |
| 9 | <section id="contact-section"> |
| 10 | <h2>تواصل معنا</h2> |
| 11 | <p>البريد: <a href="mailto:hello@nouvil.com">hello@nouvil.com</a></p> |
| 12 | <p>الهاتف: <a href="tel:+201000000000">01000000000+</a></p> |
| 13 | <p> |
| 14 | <a href="https://twitter.com" target="_blank" rel="noopener"> |
| 15 | تابعنا على تويتر |
| 16 | </a> |
| 17 | </p> |
| 18 | </section> |
| 19 | |
| 20 | <!-- تحميل ملفات --> |
| 21 | <a href="/resume.pdf" download>تحميل السيرة الذاتية (PDF)</a> |