صمم موقعك الإلكتروني سريعاً إدراج الروابط - الدرس الخامس

إدراج الروابط

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

وسم إدراج الروابط  <a>:

وهو وسم لة بداية ونهاية وكذلك له مجموعة من الخصائص أهمهمها href وهذا الخاصية تحمل قيمة الموقع أو الصفحة التي نريد أن يأخذنها إليها الرابط كما ويمكنه من أخذنا الى موقع معين في الصفحة مثل أعلى الصفحى أسفل الصفحة .. الفقرة الأولى او الثانية  الى اخرة ومثال ذلك:

لاحظ هنا أن خاصية href قد اخذت قيمة معروفه وهو URL الخاص بموقع الياهو www.yahoo.com  كما أن الكلام الذي بين وسم البداية و وسم النهاية هو الشيء الظاهر للمستخدم الذي يمكنه من الولوج الى الرابط وهي هنا انتقل الى الياهو

كما ويمكننا أن نجعل الرابط هنا لصفحة صممناها مسبقا موجود على مجلد الذي خزنا عليه الملف الحالي من خلال استدعاء اسم الصفحة وامتداداها html. كما في المثال

هنا قمنا بإدخال قيمة href ملف موجود على نفس المجلد وهو ملف تصميم شعار غوغل رابجع الدرس السابق وعندما قام المستخدم بالضغط على كلمة شعار غوغل انتقل مباشرة الى الصفحة التي قمنا بتصميمها Googlelog.html ولكن هل يمكننا أن ندريج ملف موجود في مجلد اخر ؟ الجواب نعم لكن بشرط ان نضع العنوان الكامل له كما في أمثلة الصورة وخاصية background في وسم الجسم الدرس الثاني.

تحويل الصورة الى رابط:

بكل بساطه لتحويل صورة الى رابط ما علينا فعله هو فقط استبدال النص الذي بين بداية الوسم <a> ونهاية الوسم <a/> الى وسم الصورة <""=img src > لاحظ الشيفرة

الأن عند الضغط على الصورة سوف تنقلنا الى موقع الياهو.

الروباط الداخلية link#:

يمكننا ان نجعل الرابط ينتقل الى نفس الصفحة الحالية لكن الى موقع محدد بالصفحة وذلك بإستخدام الخاصية name  و href وهذا يستخدم عند وجود صفحات ممتده يحتاج المستخدم فيها الى الذهاب الى بداية الصفحة أو فقرة معينه منها يمكنك الرجوع إلى مواقع الانترنت لتفهم اّلية عمل الروابط الداخلية جرب الرابط التالي: https://en.wikipedia.org/wiki/Formal_language 

ثم اذهب الى منطقة المحتويات في الصفحة واضغط على أي من هذه الروابط التشعبية 

لاحظ إنتقالك داخل الصفحة من منطفة الى أخرى أو من فقرةإلى أخرى 

لكن كيف يتم ذلك ؟ من خلال جعل كل بداية منطقة او فقرة هي عباره عن رابط اي وسم <a> وله خاصية name لأعطائة إسم خاص يميزة وخاصية href نضع اشارة # واسم منطقة أخرى أو وسم <a> أخر ومثال ذلك:

في هذا الماثل هنالك رابطين الأول خاصية name لها قيمة: Definition وتقوم باستدعاء الرابط الثاني الذي قيمة الخاصية name لها هي: References بالتالي عند الرابط الرابط الأول قمنا بوضع قيمة الخاصيه href هي References # أي انتقل الى موقع هذا الرابط الذي اسمة References لاحظ التوضيح في الصورة:

وكذلك الحال اذا أردنا العودة  العكسية من موقع الرابط الثاني الى الأول لاحظ الصورة:

اللوان الروابط:

أخيرا هناك خصائص تابعه لوجسم الجسم وهي link, alink, vlink وهي لتغير ألوان الروابط حسب الاستخدام وقد اوضحناها في الجدول المنسدل في  الدرس الثاني

لاحظ التغيرات في اللون للرابط بعد تفعيل هذه الخصائص في body tag.

لاحظ تغير لون الروابط الى الأخضر حسب خاصية link داخل body tag والتي اخذت اللون الأخضر
اما اثناء الضغط عليها فسيتحول اللون الى الأحمر حسب خاصية alink :

واخيراً بعد الضغط والرجوع الى الروابط سنجدها قد تحولت الى اللون الأصفر.

الى لقاء قريب