كيفية إنشاء زر 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>
<body>
<form>
    <a href="https://www.jabism.com/">
        <input type="button" value="أنقر هنـا">
    </a>
</form>
</body>
</html>

<html>

<body>

<form>

</a>

</form>

</body>

</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 الذي يعمل كرابط.

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

<html>
<body>
    <form action="https://www.youtube.com/">
        <button type="submit">تابع القناةعلى اليوتيوب</button>
    </form>
</body>
</html>

<html>

<body>

<button type="submit">تابع القناةعلى اليوتيوب</button>

</form>

</body>

</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>
<body>
    <form action="https://facebok.com">
        <input type="submit" value="<span style="font-size: 16px;"><span style="color: #008080;">الدخول إلى الفايس بوك</span></span>" />
    </form>
</body>
</html>

<html>

<body>