الدرس الرابع: الروابط في HTML
ما هي الروابط في HTML؟
الروابط (Links) هي أحد العناصر الأساسية في صفحات الويب، حيث تساعد المستخدمين في التنقل بين صفحات مختلفة أو إلى مواقع خارجية. في HTML، يتم استخدام العنصر <a>
لإضافة الروابط.
كيفية إضافة رابط في HTML:
لإضافة رابط في HTML، نستخدم العنصر <a>
. هذا العنصر يحتوي على سمة href
التي تحدد عنوان URL (رابط الويب) الذي سيتم الانتقال إليه عند النقر على الرابط.
مثال على رابط بسيط:
<a href="https://www.example.com">اضغط هنا للانتقال إلى Example</a>
شرح الكود:
<a>
: هو العنصر الذي يستخدم لإضافة الرابط.href="https://www.example.com"
: هي السمة التي تحتوي على عنوان URL للموقع الذي سيتم الانتقال إليه.اضغط هنا للانتقال إلى Example
: هو النص الذي سيظهر للمستخدم ويمكنه النقر عليه.
فتح الرابط في نافذة جديدة:
لجعل الرابط يفتح في نافذة جديدة عند النقر عليه، نستخدم السمة target="_blank"
.
<a href="https://www.example.com" target="_blank">انتقل إلى Example في نافذة جديدة</a>
الروابط الداخلية:
يمكنك أيضًا إضافة روابط لصفحات أخرى داخل نفس الموقع. على سبيل المثال، إذا كانت لديك صفحة داخل الموقع تسمى about.html
، يمكنك إضافة رابط إليها.
<a href="about.html">انتقل إلى صفحة حولنا</a>
الروابط إلى أجزاء معينة من نفس الصفحة:
يمكنك إضافة روابط تقود المستخدم إلى أجزاء محددة داخل نفس الصفحة باستخدام id
لتحديد المكان المطلوب.
1. في الجزء الذي تريد الانتقال إليه:
<h2 id="section1">القسم الأول</h2>
2. في الرابط الذي يؤدي إليه:
<a href="#section1">انتقل إلى القسم الأول</a>
روابط البريد الإلكتروني:
يمكنك إضافة رابط لفتح برنامج البريد الإلكتروني للمستخدم وبدء إرسال رسالة جديدة باستخدام mailto:
في href
.
<a href="mailto:example@example.com">إرسال بريد إلكتروني</a>
روابط الهواتف:
يمكنك أيضًا إضافة رابط يؤدي إلى الاتصال برقم هاتف باستخدام tel:
في href
.
<a href="tel:+1234567890">اتصل بنا</a>
الخلاصة:
في هذا الدرس تعلمنا كيفية إضافة الروابط في HTML باستخدام العنصر <a>
، وعرفنا كيفية استخدام سمة href
لتحديد عنوان الرابط. تعلمنا أيضًا كيفية فتح الرابط في نافذة جديدة باستخدام target="_blank"
، وكيفية إضافة روابط داخلية وأجزاء معينة من نفس الصفحة، بالإضافة إلى روابط البريد الإلكتروني وأرقام الهواتف.
تعليقات
إرسال تعليق
أترك بصمتك بتعليق على مدونة التربية و التعليم