كيفية إنشاء زر HTML يعمل كرابط

 كيفية إنشاء زر HTML يعمل كرابط

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

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

 

استخدام العلامات : <form> و <a> </a>  لإنشاء زر  بلغة HTML 


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

 

نذهب الآن للتطبيق بالمثال:

أكتب علامة <form> داخل نص HTML. ثم أكتب علامة الارتساء <a> وأدرج  عنوان URL لموقع  jabism  على سبيل المثال ” https://www.jabism.com ” في سمة href لعلامة الارتساء. ثم قم بإنشاء علامة <input> وحدِّد سمة type  للزر. أكتب القيمة أنقر هنا في سمة value . ثم أغلق علامة الارتساء ، ثم علامة النموذج </form>.

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

استخدم هذا الرمز ، ولك ان تغيره بالرابط المناسب لك:

النتيجة كما ترى:

 


مهم جداً 

∴أدعوك لزيارة هذه المقالة الجامعة لكيفية  إنشاء الروابط ب HTML ، و تحتوي على:

  • رابط الانتقال إلى موقع آخر
  • إنشاء الروابط ب HTML بين الصفحات من نفس الموقع
  • رابط لعناوين داخل نفس الصفحة (روابط الارتساء )
  • روابط نحو نقط الإرتساء في صفحات أخرى
  • رابط يفتح نافذة جديدة

 

استخدام علامتي:  <form> و <button> لإنشاء زر بلغة HTML 


 

الطريقة الثانية تمكننا أيضاً من استخدام النموذج مع سمة action داخل الرمز  لإنشاء زر HTML يعمل كرابط. يجب أن تكون قيمة السمة action  هي الوجهة المستهدفة عند إرسال النموذج.  العلامة button هي التي تُنشئُ  الزّر  الذي إذا ضغطنا عليه ، يوصلنا إلى عنوان URL الذي كتبناه في سمة action .

نذهب الآن للتطبيق بالمثال:

أكتب علامة <form> داخل نص HTML. ثم اكتب سمة action وقم بإدراج القيمة مثل ” URL https://www.youtube.com/  “. بعد ذلك قم بإنشاء علامة button واكتب submit كقيمة سمة type. ثم أكتب في نص الزر  التالـي وذلك قبل إغلاق علامة button. ثم أغلق علامة form.

لاحظ أن الرمز المُدوَّن أدناه ينشئ زر HTML. و عندما تضغط عليه ، سيوصلك إلى موقع YouTube الذي أدرجنا رابطه كقيمة في الزر. في هذه المرة، استخدمنا علامة button مباشرة ، على عكس الطريقة الأولى. وبالتالي فإن هذه الطريقة تمكننا من إنشاء زر HTML الذي يعمل كرابط.

لاحظ الطريقة باستعمال هذه الرموز :

النتيجة كما ترى:

استخدام علامتي <form> و <input> لإنشاء زر بلغة HTML


 

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

نذهب الآن للتطبيق بالمثال:

اكتب علامة <form> داخل نص HTML. بعد ذلك ، أكتب سمة action  ثم حدد عنوانURL لموقع التواصل فايس بوك مثلاً:   https://facebook.com.  بعد ذلك اكتب علامة input واكتب قيمة submit في سمة type.  في سمة القيمة ، اكتب “الدخول إلى الفايس بوك” ، ثم أغلق علامة <form/>.

من خلال الرمز المُبيَّن أدناه يتم أيضاً إنشاء زر HTML. عندما تضغط عليه ، سيوصلك إلى الصفحة الرئيسية للفايس بوك.

لاحظ أننا لم نكتب علامتي الفتح والإغلاق لـ <input> لأنها علامة ذاتية الإغلاق. وبالتالي فإن هذه الطريقة أيضاً تمكننا من إنشاء زر HTML ، والذي يعمل كرابط تشعبي.

طريقة إنشاء الزر باستعمال هذه الرموز :

النتيجة كما ترى:


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

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

 

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

اترك تعليقاً

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

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

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