شرح اداة SOLMAP واستغلالINJ ECTION

 ما هو الرابط في لغة HTML وكيف يمكن وضعه

مفهوم الرابط

الرابط ( Link ) في العادة عبارة عن نص يشير لعنوان صفحة أخرى عند النقر عليه يقوم المتصفح بنقلك إليها.
أيضاً, قد يكون الرابط يشير لملف أو برنامج ما عند النقر عليه يقوم المتصفح بسؤالك ما إن كنت تريد تحميله أم لا.

أشكال الروابط

• يمكن وضع الرابط كنص ( Text Link ) عند النقر عليه يتم توجيهك لصفحة أخرى أو تحميل ملف ما.

• يمكن وضع الرابط كزر ( Button Link ) عند النقر عليه يتم توجيهك لصفحة أخرى أو تحميل ملف ما.

• يمكن وضع الرابط كصورة ( Image Link ) عند النقر عليها يتم توجيهك لصفحة أخرى أو تحميل ملف ما.

إضافة رابط في الصفحة

بشكل عام نستخدم الوسم <a> على هذا النحو <a href="url">text</a> لعرض رابط في الصفحة.

• مكان الكلمة text نضع النص الذي نريده أن يظهر في الصفحة و الذي يمكن النقر عليه.

• مكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه عند النقر على النص الذي يظهر في الصفحة.

في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

مثال

• <p><a href="هنا تضع الرابط">Go to </a></p>

إظهار تلميح عند تمرير الماوس فوق الرابط

في حال أردت إظهار تلميح عند تمرير الماوس فوق الرابط فيمكنك إضافة الخاصية title في الوسم <a> و تمرير التلميح الذي تريد عرضه كقيمة لها.

في المثال التالي قمنا بإضافة تلميح للرابط يتم إظهاره عند تمرير الماوس فوقه.

مثال

• <p><a href="هنا تضع الرابط" title="Go to">TAHNOON</a> teaches you every thing you need.</p>

إضافة رابط كصورة

في حال أردت وضع الرابط كصورة بدل وضعه كنص, يمكنك وضعه رابط عادي بواسطة الوسم <a> و بداخله تقوم بوضع الصورة التي تريد فتج الرابط عند النقر عليها.

ستتعلم كيفية التعامل مع الصور في درس خاص و لكن الآن عليك معرفة أنه لوضع صورة نستخدم الوسم <img> على هذا النحو <img src="image_url"/>.
مكان الكلمة image_url نضع رابط الصورة التي سيتم عرضها.

في المثال التالي قمنا بإضافة صورة عند النقر عليها يتم توجيه المستخدم للصفحة الأولى في دورة HTML.

مثال

• <a href="هنا تضع الرابط"><img src=" للصورةهنا تضع الرابط"/></a>

وضع رابط لبريد إلكتروني محدد

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

في المثال التالي قمنا بإضافة رابط عند النقر عليه يقوم بفتح تطبيق البريد الإلكتروني الموجود في جهاز المستخدم و تحديد الجهة التي سيتم إرسال البريد إليها.

مثال

• <p><a href="mailto:someone@example.com">Send Email</a></p>

روابط لعناصر محددة في الصفحة

في حال أردت وضع رابط يوجه المستخدم لعنصر محدد موجود في نفس الصفحة أو لعنصر محدد موجود في صفحة أخرى يمكنك إعطاء العنصر id و عندها الرابط الذي نريده أن يوجه المستخدم لذاك العنصر يجب أن نضع في نهايته الرمز # يليه id العنصر.

في المثال التالي قمنا بوضع رابط عند النقر عليه يقوم بنقل المستخدم لعنصر محدد في نفس الصفحة.

المثال الأول

• <a href="#P5">Jump to Paragraph 5</a>

إضافة رابط وهمي

أثناء تصميم الصفحة, المصمم لا يحتاج أن يحدد قيمة الخاصية href لكل رابط موضوع في الصفحة.
في العادة حتى يظهر نص الرابط كأنه رابط عادي يمكن النقر عليه يمكنك ببساطة وضع الرمز # كقيمة للخاصية href و عندها كأنك تقول للمتصفح قم بتوجيه المستخدم إلى لا شيء.

في المثال التالي قمنا بإضافة رابطين, الأول يظهر كرابط عادي و لكن عند النقر عليه لا يحدث أي شيء و الثاني لا يظهر من الأساس كرابط.

مثال

• <a href="#">Go to </a>
• <a>Go to </a>

تحديد أين سيتم فتح الرابط

إفتراضياً, عند النقر على رابط موجود في الصفحة نجد أنه يتم فتح الصفحة الجديدة مكان الصفحة الحالية كما لاحظنا في المثال السابق.

في حال أردت تحديد أين سيتم فتح الرابط يجب أن تضيف الخاصية target في الوسم <a> و إعطائها إحدى القيم التالية:

• _self في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).

• _blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و إظهار محتوى الرابط فيه.

• _top في حال أردت أن يتم فتح محتوى الرابط في نفس الصفحة مع إزالة أي صفحات متداخلة موضوعة في الصفحة الحالية.

• _parent في حال أردت أن يتم فتح محتوى الرابط مكان الصفحة الموجودة فيها الصفحة الحالية.

في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

مثال

• <p><a href="هنا تضع الرابط" target="_self">Open harmash.com in the current window (iframe)</a></p>
• </a></p>

إضافة رابط كزر

في حال أردت وضع الرابط كزر بدل وضعه كنص, يمكنك وضعه بواسطة الوسم <button> على هذا النحو <button onlclick="document.location='url'">text</button>.

• مكان الكلمة text نضع النص الذي نريده أن يظهر على الزر.

• مكان الكلمة url نضع الرابط الذي نريد توجيه المستخدم إليه عند النقر على الزر.

في المثال التالي قمنا بإضافة رابط كزر عند النقر عليه يتم توجيه المستخدم للصفحة الرئيسية في موقع هرمش.

مثال

• <button onclick="document.location='هنا تضع الرابط'">Go to harmash.com</button>