كيفية إدراج رابط في زر HTML
بعدما شرحت درس كيفية إنشاء زر بلغة HTML ودرس كيفية إنشاء زر بواسطة صورة بلغة HTML ، سأقوم اليوم بتحرير مقال جديد أوضح فيه طرق لكيفية إنشاء زر HTML برابط تشعبي قابل للنقر و يقوم بتوجيهك إلى الصفحات أو المواقع التي تريدها.
° استخدم علامتي <a> و <button> لإنشاء زر يعمل كارتباط في HTML
˜ استخدم سمة onclick في علامة button لإنشاء زر يعمل كارتباط في HTML
° استخدم علامات <a> و <input> لإنشاء زر يعمل كارتباط في HTML
˜ استخدم نموذج HTML لإنشاء زر يعمل كارتباط في HTML
استخدم علامتي <a> و <button> لإنشاء زر برابط في HTML
يمكننا إنشاء زر HTML كما رأينا في درس سابق باستخدام علامة <button>. وعلامة <button> تقوم بتحديد الزر القابل للنقر. و نستخدم أيضاً علامة الارتساء <a> لإنشاء رابط تشعبي ” lien hypertexte “. يربط صفحة واحدة بصفحة أخرى.
كيفية إدراج رابط في زر HTML
يمكنك إنشاء زر يعمل كـرابط تشعبي من خلال تضمين علامة <button> داخل علامة الارتساء. ويمكنك تحديد عنوان URL باستخدام سمة href.
بالمثال يتضح المقال:
قم بإنشاء عنصر ارتساء داخل نص HTML. و داخل عنصر الارتساء ، أكتب سمة
href وحدد عنوان URL مثلا: https://www.jabism.com. بعد ذلك ، قم بإنشاء الزر باستخدام علامة
<button>. و داخل علامة
<button> ، أكتب النص على « موقع Jabism ». ثم قم بإغلاق كلاً من علامة الزر وعلامة الربط كما سنرى في المثال 
.
توضح الشفيرة أدناه، عملية إنشاء زر HTML يعمل كرابط، وعند النّقر عليه، سيقوم بإعادة توجيهك إلى موقع Jabism .
يمكنك الحصول على الرمز من هنا :
|
1 2 3 |
<a href="https://www.jabism.com"> <button>موقع Jabism</button> </a> |
شاهد النتيجة :
كما رأيتم ، هذه الطريقة سهلة جداً، فقط تقوم بتحديد رابط الزر باستعمال علامة الارتساء <a> والسمة href . وداخل علامة < Button> تكتب نص الصفحة التي تريد الوصول إليها وكفى ..
كيفية إدراج رابط في زر 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 يعمل كرابط تشعبي.
يمكنك الحصول على الرمز من هنا :
|
1 |
<button onclick="window.location.href='https://ar.wikipedia.org/wiki/'">ويكيبيديا</button> |
شاهد النتيجة :
استخدم علامات <a> و <input> لإنشاء زر يعمل كرابط في HTML
يمكننا استخدام علامة <input> لإنشاء زر HTML. و علامة <input> هي أيضاً عنصر علامة <form>. فهي تحدد الحقل الذي يُمَكِّنُ المستخدم إدخال البيانات. مثلما يُمْكِنك إنشاء زر باستخدام سمة type وتحديده باستخدام القيمة button. يمكنك استخدام سمة value لكتابة محتوى الزر.
بالمثال يتضح المقال:
أكتب علامة ارتساء تحدد عنوان URL المقصود بالداخل عبر سمة href. أكتب عنوان URL بالشكل https://www.youtube.com/. بعد ذلك ، أكتب علامة <input> وحدد سمة type الخاصة بها مثل button. بعد ذلك ، حدد نص Youtube في سمة value. eثم قم بإغلاق علامة الارتساء.
المثال تحت ينشئ زراً باسم
Youtube. وحين تنقر فوقه يعيد توجيهك إلى موقع اليوتيوب . و على هذا الأساس ، ستتمكن من إنشاء زر يعمل كرابط.
يمكنك الحصول على الرمز من هنا :
|
1 2 3 |
<a href="https://www.youtube.com/"> <input type="button" value="Youtube"> </a> |
شاهد النتيجة :
استخدم نموذج HTML لإنشاء زر يعمل كرابط تشعبي
في هذه الفقرة ، سأشرح كيفية استخدام علامة <form> لإنشاء زر يعمل كرابط تشعبي. سنقوم باستخدام سمة action لتحديد عنوان URL المقصود. تشير سمة method إلى كيفية إرسال بيانات النموذج. يتم تسليم النموذج إلى الصفحة المحددة في سمة action. يمكننا تعيين type الزر ل submit لأنه يرسل بيانات النموذج.
بالمثال يتضح المقال:
داخل نص HTML ، أنشئ علامة <form> واستخدم get لسمة method. حدد الآن عنوان URL المطلوب في سمة action. بعد ذلك ، قم بإنشاء الزر باستخدام عنصر <button> وقم بتعيين سمة type ل submit. بعد ذلك ، حدد النص الذي تريده على الزر . ثم أغلق علامتي <button> و <form>. ثم أغلق جميع العلامات المفتوحة المتبقية أعلاه.
يمكنك الحصول على الرمز من هنا :
|
1 2 3 |
<form method="get" action="https://www.jabism.com/"> <button type="submit">الصفحة الموالية</button> </form> |
شاهد النتيجة :
استخدم نموذج HTML لإنشاء زر الصورة يعمل كرابط في HTML
كما ذكرنا في مقالة: كيفية إنشاء زر بواسطة صورة بتنسيق HTML يمكننا من إنشاء زر بصورة وجعلها كرابط تشعبي.. وحين تضغط عليه سيوجهك إلى صفحة ويب معينة.
يمكنك الحصول على الرمز من هنا :
|
1 |
<body> <button type="button"> <a href="https://ar.wikipedia.org/wiki"><img src="https://www.jabism.com/img/annonce-1.png" height ="150" width="280" /></button> </a> </body> |
شاهد النتيجة :
مقالات ذات صلة:
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.