5 الفصل الثاني: الروابط في HTML

Byahmed nabel Ahmed Nabel - Html

الفصل الثاني: الروابط في HTML

1. إنشاء الروابط (Links)

الروابط هي واحدة من أهم العناصر في صفحات الويب. في HTML، نستخدم وسم <a> لإنشاء الروابط. وسم <a> هو اختصار لكلمة “anchor”، ويُستخدم لربط صفحة ويب بأخرى أو لربط جزء من المحتوى داخل نفس الصفحة.

1. وسم <a> وخصائصه مثل href

وسم <a> يُستخدم لإنشاء الرابط في HTML. خصائصه الأساسية تشمل href، التي تُحدد المكان الذي سيؤدي إليه الرابط.

  • href: هي خاصية تحدد عنوان الوجهة (URL) التي سيذهب إليها المستخدم عند النقر على الرابط.

مثال:

html
<a href="https://www.example.com">زيارة موقع Example</a>
  • href="https://www.example.com": هذه هي الخاصية التي تحدد عنوان الرابط. في المثال السابق، الرابط يؤدي إلى موقع “example.com”.
  • النص بين وسم <a> و </a> هو النص الذي يظهر للمستخدم على الصفحة ويكون قابلًا للنقر.

2. إنشاء روابط داخلية وخارجية

  • الروابط الخارجية: هي روابط تؤدي إلى صفحات ويب خارج الموقع الحالي.

مثال:

html
<a href="https://www.google.com">زيارة موقع جوجل</a>
  • في هذا المثال، عند النقر على الرابط، سيتم فتح موقع جوجل في المتصفح.
  • الروابط الداخلية: هي روابط تؤدي إلى صفحات داخل نفس الموقع أو داخل نفس المجلد.

مثال:

html
<a href="about.html">حول الموقع</a>
  • في هذا المثال، الرابط سيؤدي إلى صفحة داخل نفس الموقع اسمها about.html.

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

3. فتح الروابط في نافذة جديدة باستخدام خاصية target

في HTML، يمكنك فتح الرابط في نافذة أو تبويب جديد باستخدام خاصية target="_blank".

مثال:

html
<a href="https://www.example.com" target="_blank">زيارة موقع Example في نافذة جديدة</a>
  • target="_blank": تجعل الرابط يفتح في نافذة جديدة أو تبويب جديد.

4. إنشاء روابط لأجزاء محددة من نفس الصفحة (التنقل داخل الصفحة)

يمكنك أيضًا إنشاء روابط تؤدي إلى جزء محدد من نفس الصفحة باستخدام خاصية id.

  • أولًا، حدد المكان الذي تريد الانتقال إليه باستخدام id.

مثال:

html
<h2 id="about">حول الموقع</h2>
<p>هذه فقرة عن الموقع...</p>
  • ثانيًا، أنشئ الرابط الذي يؤدي إلى هذا العنصر باستخدام # متبوعًا بالـ id:

مثال:

html
<a href="#about">الذهاب إلى حول الموقع</a>
  • عند النقر على الرابط، سيأخذك مباشرة إلى العنوان <h2 id="about">.

مثال كامل لإنشاء روابط داخلية وخارجية:

html
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>إنشاء الروابط في HTML</title>
</head>
<body>
<h1>أمثلة على الروابط في HTML</h1>

<h2 id="about">حول الموقع</h2>
<p>هذه فقرة تشرح عن الموقع. <a href="#services">انتقل إلى خدماتنا</a>.</p>

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

<p><a href="about.html">حول الموقع (رابط داخلي)</a></p>

<p id="services">خدماتنا: هنا نقدم العديد من الخدمات. <a href="#about">الرجوع إلى حول الموقع</a></p>

</body>
</html>

  • في هذا المثال:
    • الرابط الداخلي: يؤدي إلى القسم حول الموقع في نفس الصفحة.
    • الرابط الخارجي: يؤدي إلى موقع “example.com” في نافذة جديدة.
    • الرابط الداخلي بين الصفحات: يؤدي إلى صفحة about.html داخل نفس الموقع.

ملخص الفصل الثاني – الجزء الأول: إنشاء الروابط (Links)

  • وسم <a>: يُستخدم لإنشاء الرابط في HTML.
  • خاصية href: تحدد الوجهة التي سيؤدي إليها الرابط.
  • الروابط الخارجية: تؤدي إلى صفحات خارج الموقع.
  • الروابط الداخلية: تؤدي إلى صفحات داخل نفس الموقع.
  • خاصية target="_blank": تفتح الرابط في نافذة أو تبويب جديد.
  • الروابط الداخلية داخل الصفحة: تستخدم خاصية id لإنشاء روابط إلى أجزاء محددة من نفس الصفحة.

 

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *