الوصلات التشعبية في HTML
الوصلات التشعبية ( Links ) هي روح الأنترنت و إذا كان الإنترنت هو شبكة العنكبوت فإن هذه الروابط هي الخيوط التي تشكل تلك الشبكة.
و الوصلات التشعبية هي عبارة عن روابط تنقلك إلى صفحة أخرى أو موقع آخر أو رابط مُدمَج بصورة أو ربما رابط لملف على الإنترنت يقوم المتصفح بسؤالك ما إن كنت تريد تحميله أم لا..
اليوم سوف نتعرف على كيفية إستخدام وصلات links في بناء الموقع الإلكتروني و بالتحديد في الهيكلة html ولها عدة أوسمة مستخدمة في html و يكون الوسم الخاص بها هو <a>.
الأشكال الشائعة للإرتباطات التشعبية html
- أن يكون الرابط نص ( Text Link ) و عند النقر على هذا النص يقوم بتحويلك لصفحة أخرى أو ملف حسب الغرض الذي تم وضع الإرتباط له.
- أن يكون الإرتباط زر ( Button Link ) و عند النقر عليه يقوم بتحويلك إلى صفحة أخرى أو ملف.
- أن يكون الإرتباط صورة ( Image Link ) و عندما يتم النقر على هذه الصورة يقوم بتحويلك إلى صفحة أو ملف لتحميله.
الشكل العام لإنشاء إرتباط تشعبي في html
<a href="url"/>نص</a>
- الوسم <a> و </a> هو وسم إدراج الوصلات التشعبية و هي إختصار للمصطلح Anchor.
- و href هي خاصية نحدد من خلالها رابط الموقع الذي نريد أن يذهب إلية الزائر.
- كلمة url نقوم بوضع مكانها الرابط الذي نريد توجيه المستخدم إليه عند النقر على النص.
- و نص نضع بمكانها الكلمة التي تظهر للزائر عندما نطالبه بالضغط عليه لتوجيهه.
إضافة الرابط التشعبي كنص
سوف نقوم ببناء وصلة و يكون بها نص ( Text Link ) تقوم بالذهاب إلى الموقع الخاص بنا و سيكون شكل الكود بالشكل التالي
<a href="https://www.nusurtech.ca"/>إضغط هنا</a>
وعند الضغط عليه سوف ينقلك مباشرتاً إلى الموقع الذي في الكلمة.
إضافة الرابط التشعبي كصورة
نريد أن يكون هناك رابط داخل الصورة ( Image Link ) عند الضغط عليها يوجهنا لهذا الرابط سيكون كما بالمثال
<a href="https://www.nusurtech.ca"/><img src="datafiles.jpg"/></a>
أنشأنا وصلة تشعبية تحمل صورة و إسم الصورة datafiles.jpg و عند الضغط على الصورة سوف ينقلنا على الفور إلى الموقع الخاص بنا.
إضافة الرابط التشعبي كزر
نستطيع وضع الرابط في داخل زر ( Button Link ) عندما يقوم المستخدم بالضغط عليه ينقله لصفحة أخرى, و يكون بالشكل
<button onclick="document.location='https://www.nusurtech.ca/'">إضغط هنا</button>
قمنا بإنشاء زر عن طريق الوسم <button> ووضعنا به خاصية النقر onclick تعرفنا عليها في دورة الجافاسكربت.
ثم وضعنا رابط الموقع الخاص بنا ليتم الذهاب عليه عند النقر على كلمة إضغط هنا.
وضع تلميح عند تمرير الماوس Mouse فوق الرابط
إذا أردنا أن نُظهِر تلميح أو كلام عند تمرير مؤشر الماوس فوق الكلمة أو الزر الذي يحتوي على الرابط.
يمكنك إضافة خاصية title بداخل الوسم <a> و تمرير النص الذي نريد التلميح به كقيمة لها.
<p><a href="https://www.nusurtech.ca"/ title="link website">إضغط هنا</a></p>
أنشأنا فقرة و بداخل هذه الفقرة أنشأنا إرتباط تشعبي و وضعنا الذهاب إلى موقعنا عند النقر على الكلمة.
و قمنا بوضع title من أجل تلميح عند تمرير الماوس فوق الإرتباط.
وضع رابط تشعبي لبريد إلكتروني
بواسطة الكلمة mailto: نستطيع وضع رابط في داخل الصفحة عند النقر على الرابط سوف يقوم بفتح تطبيق البريد الإلكتروني الموجود في جهاز الزائر.
و نقوم في تحديد الجهة التي سوف يتم إرسال البريد إليها.
فقط نقوم بوضع كلمة mailto: و بعدها نكتب البريد الإلكتروني الذي نريده أن يتلقى الرسالة البريدية و تحديده كقيمة للخاصية href.
<p><a href="mailto:javascript23685@gmail.com">Send Email</a></p>
قمنا بإنشاء فقرة و بداخل الفقرة وضعنا رابط تشعبي على نص و كتبنا mailto: من أجل الذهاب للإرسال بواسطة البريد الإلكتروني.
و حددنا البريد الذي سوف يستقبل الرسائل من المستخدم.
إضافة رابط تشعبي وهمي في صفحة الويب
في أثناء تصميم صفحة الويب مصمم الصفحة لن يحتاج في أن يحدد قيم للخاصية href لكل رابط قد وضعه في الصفحة.
عادتاً حتى يتم إظهار نص للرابط كأنه رابط عادي و ليس نص يمكن النقر عليه.
يمكن وضع الرمز مربع # كقيمة للخاصية href و كأنك تقول للمتصفح قم بتوجيه هذا المستخدم إلى لا شيء.
<a href="#">زيارة الموقع</a>