شرح مفصل عن الروابط بين الصفحات في لغة HTML التخطي إلى المحتوى
الروابط-في-html الروابط بين الصفحات في لغة HTML
الروابط في html

سوف نتطرق في هذا الموضوع لكيفية الربط بين الصفحات (الوصلات التشعبية).

  ماذا نقصد بالروابط (الإرتبط التشعیبي)؟

الارتباط التشعیبي ھو عبارة عن وصلة (اما نص او صورة) عند النقر علیھا نذھب الى صفحة انترنت اخرى او مكان معین من نفس الصفحة كما یمكن تشغیل و فتح اي ملف یمكن ان یشغلھ الویندوز (صورة ، فیدیو،ملف مضغوط،…..الخ) او حتى تشغیل محرر الامیلات الافتراضي لكتابة رسالة الكترونیة مثل برنامج MS outlook.

و یمكن تقسیم ھذا الدرس الى قسمین :

  1. عمل إرتباط تشعیبي لصفحة انترنت أخرى أو صورة أو فیدیو أو….الخ.
  2. عمل إرتباط تشعیبي لمكان معین من نفس الصفحة.

عمل إرتباط تشعیبي لصفحة انترنت أخرى

بإمكانك ربط كلمة، أو عنوان أو حتى صورة بصفحة ويب أخرى، أي حين يتم النقر على هذه الكلمة أو الصورة فستظهر لك صفحة ويب أخرى.

ولإنشاء ذلك فما عليك إلا استعمال الوسم <a> .. </a> وذلك على النحو التالي:

<a href= “page1.html”>دخول</a>

حيث تعتبر الخاصية (href) من خصائص الوسم <a> ويضع في هذه الخاصية عنوان الصفحة المراد زيارتها.

والأن بالنقر على كلمة دخول سوف تظهر لك الصفحة page1.html.

حتمًا لقد لاحظت عند تصفحك للأنترنت وجود هذه الوصلات (Link) التي تكون عادة باللون الأزرق.

وعند وضع مؤشر الفأرة فوقها تأخذ اللون الأحمر.

عمل إرتباط تشعیبي لمكان معین من نفس الصفحة

لكي نقوم بعمل رابط إلى مكان معين من نفس الصفحة نستخدم الوسم نستخدم الوسم <a></a> و الخاصية href مع استخدام الاشارة (#) كما یلي:

<a href =”#……“> الدخول</a>

وناتي عند المكان الذي نرید الذھاب إليه عند نقر الارتباط التشعیبي ونستخدم الوسم <a></a> و الخاصية name كما یلي :

<a name=”……”> الدخول</a>

و الاسم الذي یكتب بعد الصفة name یكتب بعد إشارة #.

المثال التالي لتوضیح الأمر:

لو اردنا تصمیم صفحة انترنت تحتوي على اسماء الدول العربیة وعند الضغط على اسم الدولة ننتقل إلى جزء معین من نفس الصفحة التي تحتوي على معلومات لتلك الدولة یعني مثلاً:

  1. الأردن
  2. فلسطین
  3. العراق
  4. سوریا

فعند الضغط على كلمة الأردن ننتقل إلى جزء معین من نفس الشاشة یحتوي على معلومات عن الأردن لعمل ذلك نقوم بما یلي:

  • <a href=#j >الأردن</a>
  • <a href=#p >فلسطین</a>
  • <a href=#i >العراق</a>
  • <a href=#s >سوريا</a> 
<a name=j >معلومات عن الأردن</a>

وھكذا فانه عند النقر على كلمة الأردن نذھب مباشرة إلى الجملة معلومات عن الأردن ونعمل نفس الشئ في باقي الوصلات.

التعليقات

اترك تعليقاً

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