الفصل السابع: الروابط (Links) والتنقل في HTML

1. مقدمة إلى الروابط

الروابط (Links) هي عنصر أساسي في HTML، حيث تُستخدم للتنقل بين صفحات الويب المختلفة أو إلى مواقع خارجية، أو حتى للوصول إلى أماكن محددة داخل نفس الصفحة.

2. إنشاء الروابط باستخدام العنصر <a>

الصيغة الأساسية:

<a href="URL">النص الظاهر للرابط</a>

• href: يُحدد الوجهة التي سيأخذك إليها الرابط.

مثال:

<a href="https://www.google.com">اذهب إلى Google</a>

3. أنواع الروابط

أ) روابط داخلية:

تُستخدم للتنقل بين صفحات داخل نفس الموقع.

مثال:

<a href="about.html">من نحن</a>

ب) روابط خارجية:

تُستخدم للتنقل إلى مواقع خارجية.

مثال:

<a href="https://www.example.com">زيارة Example</a>

ج) روابط داخل الصفحة:

تُستخدم للتنقل إلى أماكن محددة داخل نفس الصفحة باستخدام المعرّفات (IDs).

مثال:

<!-- الرابط -->
<a href="#section1">اذهب إلى القسم الأول</a>

<!-- القسم داخل الصفحة -->
<h2 id="section1">القسم الأول</h2>

د) روابط لتنزيل الملفات:

يمكن استخدام الروابط لتنزيل الملفات مثل PDF أو الصور.

مثال:

<a href="file.pdf" download>تنزيل الملف</a>

4. فتح الروابط في نافذة جديدة

باستخدام السمة target:

• target="_blank": يفتح الرابط في نافذة أو تبويب جديد.

مثال:

<a href="https://www.example.com" target="_blank">زيارة Example</a>

5. إضافة روابط البريد الإلكتروني

باستخدام mailto::

مثال:

<a href="mailto:example@example.com">أرسل لنا بريدًا إلكترونيًا</a>

6. إضافة روابط الهاتف

باستخدام tel::

مثال:

<a href="tel:+201234567890">اتصل بنا</a>

7. تنسيق الروابط باستخدام CSS

تغيير ألوان الروابط:

<style>
    a {
        color: blue;
        text-decoration: none; /* إزالة التسطير */
    }
    a:hover {
        color: red;
        text-decoration: underline;
    }
</style>

8. تمارين تطبيقية

1. أنشئ رابطًا خارجيًا يفتح في نافذة جديدة.
2. قم بإنشاء صفحة تحتوي على روابط داخلية تنقلك إلى أقسام محددة داخل الصفحة.
3. أضف رابطًا لتنزيل ملف PDF.
4. قم بإنشاء رابط للتواصل عبر البريد الإلكتروني.

بهذا الفصل، تعلمنا كيفية إنشاء الروابط بمختلف أنواعها واستخداماتها. في الفصل القادم، سنتعلم كيفية تنظيم المحتوى باستخدام الجداول (Tables) في HTML.