موقع كويز مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

الروابط في HTML

الروابط <a>

شرح مفصل وشامل لوسم الرابط في HTML

ما هي الروابط (Links)؟ - أساس شبكة الإنترنت

تخيل الإنترنت كمدينة ضخمة جدًا، وصفحات الويب هي المباني والمعالم في هذه المدينة. كيف يمكنك التنقل من مبنى لآخر؟ تحتاج إلى شوارع وجسور. في عالم الويب، هذه الشوارع والجسور هي **الروابط (Hyperlinks)**.

الروابط هي التي تجعل الويب "شبكة"، فهي تسمح لنا بالقفز من صفحة إلى أخرى، ومن موقع إلى موقع آخر، أو حتى إلى جزء معين في نفس الصفحة بمجرد نقرة واحدة. بدون الروابط، سيكون كل موقع عبارة عن جزيرة معزولة.

في HTML، نستخدم وسمًا خاصًا لإنشاء هذه الروابط، وهو وسم <a>. كلمة "a" هي اختصار لكلمة **"Anchor"** والتي تعني "مرساة"، لأنه يرسو أو يربط بين نقطتين على الويب.

كيف يُكتب وسم الرابط؟

وسم الرابط له تركيبة بسيطة لكنها قوية جدًا. يتكون من ثلاثة أجزاء أساسية:

  • وسم الفتح: <a> وبه خاصية مهمة جدًا اسمها href.
  • المحتوى القابل للنقر: وهو النص أو الصورة التي سيراها المستخدم ويضغط عليها.
  • وسم الإغلاق: </a>.

خاصية href هي اختصار لـ "Hypertext Reference" وهي أهم جزء في الرابط، لأنها تحدد وجهة الرابط أو المكان الذي سينتقل إليه المستخدم بعد النقر. 

<a href="https://www.google.com">اضغط هنا للذهاب إلى جوجل</a>

في هذا المثال، https://www.google.com هو العنوان الذي سيذهب إليه المستخدم، وعبارة "اضغط هنا للذهاب إلى جوجل" هي النص الذي سيظهر باللون الأزرق وتحته خط في العادة، وعندما يضغط عليه المستخدم، يتم توجيهه إلى موقع جوجل.

خصائص إضافية للروابط: التحكم في طريقة الفتح وإضافة معلومات

هناك خاصيتان إضافيتان مهمتان جدًا لتحسين تجربة المستخدم والتحكم في سلوك الروابط.

1. خاصية `target`:

هذه الخاصية تحدد **أين** سيتم فتح الرابط. القيمة الأكثر شيوعًا هي _blank، والتي تخبر المتصفح أن يفتح الرابط في **نافذة أو علامة تبويب جديدة**. هذا مفيد جدًا للروابط الخارجية، لأنه يبقي المستخدم في موقعك بينما يفتح الموقع الآخر في تبويب جديد. 

<!-- هذا الرابط سيفتح في تبويب جديد -->
<p>تابع آخر الأخبار على <a href="https://www.bbc.com/arabic" target="_blank">موقع بي بي سي</a>.</p>

<!-- هذا الرابط سيفتح في نفس التبويب (السلوك الافتراضي) -->
<p>اذهب إلى <a href="about.html">صفحة من أنا</a>.</p>

2. خاصية `title`:

تُستخدم هذه الخاصية لإضافة **معلومات إضافية** عن الرابط. هذه المعلومات تظهر كتلميح صغير (tooltip) عندما يمرر المستخدم مؤشر الفأرة فوق الرابط دون أن يضغط عليه. هذا يحسن من تجربة المستخدم وإمكانية الوصول (Accessibility). 

<p>تصفح <a href="https://developer.mozilla.org" target="_blank" title="أفضل مصدر لتعلم تطوير الويب">موسوعة موزيلا للمطورين</a> لمعلومات تقنية دقيقة.</p>

جرّب الكود أعلاه، ومرر الماوس فوق الرابط لترى الرسالة "أفضل مصدر لتعلم تطوير الويب" تظهر.

تمرين عملي: بناء صفحة متكاملة بالروابط

حان وقت التطبيق! أفضل طريقة لترسيخ المعلومات هي الممارسة. سنقوم الآن بإنشاء صفحة ويب بسيطة تطبق كل ما تعلمناه عن الروابط.

المطلوب:

أنشئ ملف HTML جديد، وانسخ الكود التالي فيه. هذا الكود يمثل صفحة شخصية بسيطة تحتوي على كل أنواع الروابط التي تعلمناها. 

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <title>صفحة التمرين على الروابط</title>
</head>
<body>

  <h1>صفحتي الشخصية</h1>
  <p>مرحبًا بكم في صفحتي. هنا ستجدون معلومات عني ومشاريعي.</p>

  <h2>فهرس سريع:</h2>
  <ul>
    <li><a href="#about-me">نبذة عني</a></li>
    <li><a href="#my-projects">مشاريعي</a></li>
    <li><a href="#contact-info">معلومات التواصل</a></li>
  </ul>
  
  <hr>

  <h2 id="about-me">نبذة عني</h2>
  <p>أنا مطور ويب مبتدئ، أتعلم حاليًا HTML. أحب القراءة والبرمجة.</p>
  <p>
    أحد مصادري المفضلة للتعلم هو 
    <a href="https://www.w3schools.com/" target="_blank" title="موقع رائع لتعلم البرمجة">موقع EgQuiz</a>.
  </p>
  
  <hr>

  <h2 id="my-projects">مشاريعي</h2>
  <p>حاليًا، أعمل على مشروعي الأول. يمكنك تحميل ملخص فكرة المشروع من هنا:</p>
  <p>
    <a href="project-summary.pdf" download>تحميل ملخص المشروع (ملف PDF وهمي)</a>
  </p>

  <hr>
  
  <h2 id="contact-info">معلومات التواصل</h2>
  <p>يمكنك التواصل معي عبر البريد الإلكتروني:</p>
  <p>
    <a href="mailto:my-email@example.com">أرسل لي بريدًا إلكترونيًا</a>
  </p>
  <p>أو تابعني على تويتر (حساب وهمي):</p>
  <a href="https://twitter.com" target="_blank">
    <img src="twitter-logo.png" alt="شعار تويتر" width="40">
  </a>

</body>
</html>

تحدي إضافي:

  • غيّر الروابط الخارجية لتوجه إلى مواقعك المفضلة.
  • أضف قسمًا جديدًا (مثل "هواياتي") وأنشئ رابطًا مرجعيًا له في الفهرس.
  • ابحث عن صورة لشعار فيسبوك وحاول أن تجعلها رابطًا يفتح موقع فيسبوك في تبويب جديد.

تهانينا! لقد أكملت درس الروابط بنجاح. أنت الآن تتقن واحدة من أهم وأقوى المهارات في HTML. في الدروس القادمة، سنتعلم كيفية إضافة الصور والفيديوهات والقوائم لجعل صفحاتك أكثر ثراءً.

تعلم Html