كيفية إدراج رابط في زر HTML

كيفية إدراج رابط في زر HTML

بعدما شرحت درس كيفية إنشاء زر  بلغة HTML  ودرس كيفية إنشاء زر بواسطة صورة بلغة HTML ، سأقوم اليوم بتحرير مقال جديد أوضح فيه طرق لكيفية إنشاء زر HTML برابط تشعبي قابل للنقر  و يقوم بتوجيهك إلى الصفحات أو المواقع التي تريدها.

خلال هذا الدرس سنستعمل العلامات التالية:
° استخدم علامتي <a> و <button> لإنشاء زر يعمل كارتباط في HTML
˜ استخدم سمة onclick في علامة button لإنشاء زر يعمل كارتباط في HTML
° استخدم علامات <a> و <input> لإنشاء زر يعمل كارتباط في HTML
˜ استخدم نموذج HTML لإنشاء زر يعمل كارتباط في HTML

 

استخدم علامتي <a> و <button> لإنشاء زر برابط في HTML


 

يمكننا إنشاء زر HTML كما رأينا في درس سابق  باستخدام علامة <button>. وعلامة <button> تقوم بتحديد الزر القابل للنقر. و نستخدم أيضاً علامة الارتساء <a>  لإنشاء رابط تشعبي ” lien hypertexte “. يربط صفحة واحدة بصفحة أخرى.

lien hypertexte

كيفية إدراج رابط في زر HTML

يمكنك إنشاء زر يعمل كـرابط تشعبي من خلال تضمين علامة <button> داخل علامة الارتساء. ويمكنك تحديد عنوان URL باستخدام سمة href.

بالمثال يتضح المقال:

قم بإنشاء عنصر ارتساء داخل نص HTML. و داخل عنصر الارتساء ، أكتب سمة href وحدد عنوان URL مثلا: https://www.jabism.com. بعد ذلك ، قم بإنشاء الزر باستخدام علامة <button>. و داخل علامة <button> ، أكتب النص على  « موقع Jabism ». ثم قم بإغلاق كلاً من علامة الزر وعلامة الربط كما سنرى في المثال .

توضح الشفيرة أدناه، عملية إنشاء زر HTML يعمل كرابط، وعند النّقر عليه، سيقوم بإعادة توجيهك إلى موقع Jabism .

يمكنك الحصول على الرمز من هنا :

شاهد النتيجة :

كما رأيتم ، هذه الطريقة سهلة جداً، فقط تقوم بتحديد رابط الزر باستعمال علامة الارتساء <a> والسمة href . وداخل علامة  < Button> تكتب نص الصفحة التي تريد الوصول إليها  وكفى ..

دروس HTML

كيفية إدراج رابط في زر HTML

استخدم سمة onclick في علامة button لإنشاء زر يعمل كرابط في HTML


توجد طريقة أخرى تمكننا من استخدام سمة onclick داخل علامة button لإنشاء زر يعمل كرابط تشعبي في HTML. يتم تنشيط هذه السمة عندما ينقر الماوس فوق العنصر. حيث يتم تنفيذ هذا التنقل بعد النقر بالماوس على الزر. و الشيئ المختلف في هذه العملية هو أننا نقوم أولاً بإنشاء الزر ثم إضافة عنوان URL المطلوب . و سنستخدم خلالها بعضٌ من JavaScript .  سنستخدم العنصر window.location للحصول على عنوان الصفحة الحالية وإعادة توجيهها إلى صفحة جديدة.

بالمثال يتضح المقال:

داخل نص HTML ، أنشئ أولاً علامة <button>.  داخل علامة الزر ، استخدم سمة onclick واضبطها على window.location.href. بعد ذلك ، حدد عنوان URL المقصود مثلاً https://ar.wikipedia.org/wiki/ مع window.location.href. بعد ذلك ، أكتب نص ويكيبيديا بين علامتي <button> و </button>

إذن بهذه الطريقة سنكون قد استخدمنا سمة onclick التي تمكننا من إنشاء زر HTML يعمل كرابط تشعبي.

يمكنك الحصول على الرمز من هنا :

شاهد النتيجة :

استخدم علامات <a> و <input> لإنشاء زر يعمل كرابط في HTML


 

يمكننا استخدام علامة <input> لإنشاء زر HTML. و علامة <input> هي أيضاً عنصر علامة <form>. فهي تحدد الحقل الذي يُمَكِّنُ المستخدم إدخال البيانات. مثلما يُمْكِنك إنشاء زر باستخدام سمة type وتحديده باستخدام القيمة button. يمكنك استخدام سمة value لكتابة محتوى الزر. 

بالمثال يتضح المقال:

أكتب علامة ارتساء تحدد عنوان URL المقصود بالداخل عبر سمة href. أكتب عنوان URL بالشكل https://www.youtube.com/. بعد ذلك ، أكتب علامة <input> وحدد سمة type الخاصة بها مثل button. بعد ذلك ، حدد نص Youtube في سمة value. eثم قم بإغلاق علامة الارتساء.

المثال تحت ينشئ زراً باسم Youtube. وحين تنقر فوقه يعيد توجيهك إلى موقع اليوتيوب . و على هذا الأساس ، ستتمكن من إنشاء زر يعمل كرابط.

يمكنك الحصول على الرمز من هنا :

شاهد النتيجة :

استخدم نموذج HTML لإنشاء زر يعمل كرابط تشعبي


 

في هذه الفقرة ، سأشرح كيفية استخدام علامة <form> لإنشاء زر يعمل كرابط تشعبي. سنقوم باستخدام سمة action لتحديد عنوان URL المقصود. تشير سمة method إلى كيفية إرسال بيانات النموذج. يتم تسليم النموذج إلى الصفحة المحددة في سمة action. يمكننا تعيين type الزر ل submit لأنه يرسل بيانات النموذج.

بالمثال يتضح المقال:

داخل نص HTML ، أنشئ علامة <form> واستخدم get لسمة method. حدد الآن عنوان URL المطلوب في سمة action. بعد ذلك ، قم بإنشاء الزر باستخدام عنصر <button> وقم بتعيين سمة type ل submit. بعد ذلك ، حدد النص الذي تريده على الزر . ثم أغلق علامتي <button> و  <form>. ثم أغلق جميع العلامات المفتوحة المتبقية أعلاه.

يمكنك الحصول على الرمز من هنا :

شاهد النتيجة :

 

استخدم نموذج HTML لإنشاء زر  الصورة يعمل كرابط في HTML


 

كما ذكرنا في مقالة: كيفية إنشاء زر بواسطة صورة بتنسيق HTML يمكننا من إنشاء زر بصورة وجعلها كرابط تشعبي.. وحين تضغط عليه سيوجهك إلى صفحة ويب معينة.

يمكنك الحصول على الرمز من هنا :

 

شاهد النتيجة :

مقالات ذات صلة:


 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

47 عدد المشاهدات لهذا المحتوى
Scroll to Top