الروابط: ربط الويب
تعلّم كيفية إنشاء روابط قابلة للنقر
الروابط: ربط الويب درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
الروابط: ربط الويب
مرحبًا بكم في الدرس التالي! سنتعلّم اليوم كيفية إنشاء الروابط في HTML. تربط الروابط بين صفحات الويب المختلفة وتتيح للمستخدمين التنقّل بسهولة عبر الإنترنت.
ما الروابط؟
الروابط عناصر قابلة للنقر في صفحة الويب، وتنقلكم إلى صفحة أخرى أو قسم محدد أو حتى ملف.
تُنشأ الروابط باستخدام الوسم <a>، وهو اختصار لكلمة “anchor” أي «مرساة».
لننشئ رابطًا بسيطًا!
إنشاء رابط أساسي
لإنشاء رابط، استخدموا الوسم <a> مع السمة href. وتحدد href وجهة الرابط.
مثال:
<a href="https://www.google.com">
Visit Google</a>
فتح الروابط في علامة تبويب جديدة
يمكنكم جعل الرابط يُفتح في علامة تبويب جديدة بإضافة السمة target="_blank" إلى الوسم <a>.
مثال:
<a href="https://www.wikipedia.org"
target="_blank">Open Wikipedia in a New Tab</a>
الربط بصفحات أخرى
يمكن للروابط أيضًا الانتقال إلى صفحات أخرى في موقعكم الإلكتروني. استخدموا عنوان URL نسبيًا (اسم الملف) بدلًا من عنوان ويب كامل.
مثال:
<a href="about.html">About Us</a>
الربط بأقسام محددة
يمكنكم إنشاء رابط إلى قسم محدد في الصفحة نفسها باستخدام معرّف ID. أضيفوا المعرّف إلى العنصر الذي تريدون الربط إليه، ثم استخدموا #id في السمة href.
مثال:
<!-- Link -->
<a href="#contact">Go to Contact Section</a>
<!-- Section -->
<h2 id="contact">Contact Us</h2>
<p>Email us at contact@example.com</p>
الربط بعناوين البريد الإلكتروني
يمكنكم إنشاء رابط يفتح تطبيق البريد الإلكتروني لدى المستخدم باستخدام mailto: في السمة href.
مثال:
<a href="mailto:hello@example.com">
Send an Email</a>
إضافة تلميحات إلى الروابط
يمكنكم إضافة تلميح يظهر عندما يمرّر المستخدم المؤشر فوق الرابط باستخدام السمة title.
مثال:
<a href="https://www.python.org"
title="Visit the Python website">Learn Python</a>
أحسنتم!
تهانينا! لقد تعلّمتم كيفية إنشاء الروابط وفتحها في علامات تبويب جديدة، والربط بأقسام محددة، وحتى الربط بعناوين البريد الإلكتروني. الروابط هي العمود الفقري للويب، إذ تصل بين جميع أجزائه. في الدرس التالي، سنتعلّم كيفية إضافة الصور إلى صفحات الويب. استعدوا لجعل صفحاتكم أكثر حيوية بالألوان!
الأسئلة الشائعة
هل درس «الروابط: ربط الويب» مجاني؟
نعم — نص درس «الروابط: ربط الويب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «الروابط: ربط الويب»؟
تعلّم كيفية إنشاء روابط قابلة للنقر تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «الروابط: ربط الويب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.