 |
| HTML Hyper Links |
السلام عليكم ورحمة الله وبركاته تحية طيبة مباركة أما بعد:
عناصر الروابط Hyper Links
توفر لغة HTML آلية للإنتقال بين صفحات الويب المختلفة عبر عناصر الروابط Hyper Links ، والروابط عبارة عن نصوص أو صور أو أزرار تنقلك عند الضغط/النقر عليها من صفحة الويب الحالية إلى صفحة ويب أخرى تقوم متصفحات الويب بتمييز الروابط بعرض "يد صغيرة" كمؤشر للفأرة عند الإشارة إلى أحد الروابط.
ويتم إنشاء الروابط عبر الوسم <a> وال a هيا إختصار ل Anchor ، ويتم تزويد عنصر الرابط بنص أو صورة أو زر يعرض كمحتوى له أما عن الموقع الهدف ( الذي سيتم الإنتقال إليه عند النقر على الرابط ) فيتم تزويده للواصفة href والتي هيا إختصار ل Hyper Reference ، لنشاهد شفرة المثال الأتي.
الروابط النسبية والمطلقة
قمنا بتزويد صفحتنا بعدة روابط لبعض المواقع المشهورة ونلاحظ في الرابط النسبي Relative أما عن المواقع الشهيرة فهذا يوضح أن الروابط يمكن أن تكون مطلقة Absolute ، ويقصد بالرابط النسبي أنه يكون عبارة عن مسار Path ملف الصفحة الحدث بالنسبة للصفحة الحالية كما ستجد مثال لتحميل ملف ما ، وفي حالتنا فقد كانت الصفحة الهدف mypage2.html ، وهي في نفس مجلد الصفحة الحالية.
تحديد هدف النقر على الرابط
أما عند النقر على أحد روابط المواقع سيتم الإنتقال إلى الرابط URL المذكور في الواصفة href المرافقة لعنصر الرابط الذي تم النقر عليه ، والجدير بالذكر أننا قمنا بتزويد بعض الروابط بالواصفة target والتي تحدد مكان عرض الصفحة الهدف في المتصفح بمعنى أن القيمة self_ تعني فتح الرابط في نفس نافذة المتصفح ، والقيمة blank_ تعني فتح الرابط في نافذة جديدة من المتصفح
إشارة الرابط للمورد Resource
كما يمكن للرابط أن يشير لأي مورد Resource متوفر على الويب وليس فقط الصفحات كما يمكن للرابط أن يشير إلى البريد الإلكتروني E-mail وذلك عبر إضافة القيمة :mailto قبل البريد الإلكتروني.
الصور والأزرار كرابط بدلاً من النص
وقدمنا أيضا في الشفرة/الكود السابق مثال عن كيفية إضافة صورة كرابط بدلاً من النص وذلك عبر إحتواء عنصر الرابط <a> لعنصر الصورة <img> كما أيضاً أدرجنا مثالا عن إضافة زر كرابط بدلاً من النص وبنفس طريقة عرض الصورة للرابط ستجد أن عنصر الرابط يحوي داخلة عنصر الزر <button>.
والسلام عليكم ورحمة الله وبركاته
تعليقات
إرسال تعليق