HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ

ਆਖਰੀ ਅੱਪਡੇਟ: 12/01/2024

ਜੇਕਰ ਤੁਸੀਂ HTML ਵਿੱਚ ਬਟਨ ਬਣਾਉਣਾ ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਸਹੀ ਜਗ੍ਹਾ 'ਤੇ ਆਏ ਹੋ। ਨਾਲ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇਇਸ ਟਿਊਟੋਰਿਅਲ ਵਿੱਚ, ਅਸੀਂ ਤੁਹਾਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਸਿਖਾਵਾਂਗੇ ਕਿ HTML ਮਾਰਕਅੱਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ ਵੈੱਬਸਾਈਟ 'ਤੇ ਬਟਨ ਕਿਵੇਂ ਜੋੜਨਾ ਹੈ। ਇਹ ਲੱਗਦਾ ਹੈ ਉਸ ਤੋਂ ਆਸਾਨ ਹੈ, ਅਤੇ ਥੋੜ੍ਹੇ ਜਿਹੇ ਅਭਿਆਸ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੀ ਵੈੱਬਸਾਈਟ 'ਤੇ ਬਟਨ ਜਲਦੀ ਹੀ ਜੋੜ ਸਕੋਗੇ। ਮੁੱਢਲੀਆਂ ਗੱਲਾਂ ਸਿੱਖਣ ਲਈ ਅਤੇ HTML ਵਿੱਚ ਆਪਣੇ ਖੁਦ ਦੇ ਬਟਨਾਂ ਨੂੰ ਕਿਵੇਂ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਹੈ, ਇਹ ਪੜ੍ਹਨਾ ਜਾਰੀ ਰੱਖੋ।

– ਕਦਮ ਦਰ ਕਦਮ ➡️ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ

  • ਕਦਮ 1: ਆਪਣਾ ਮਨਪਸੰਦ ਟੈਕਸਟ ਐਡੀਟਰ ਖੋਲ੍ਹੋ ਅਤੇ ਇੱਕ ਨਵਾਂ HTML ਦਸਤਾਵੇਜ਼ ਬਣਾਓ।
  • ਕਦਮ 2: ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ, ਹੇਠ ਦਿੱਤਾ ਕੋਡ ਲਿਖੋ:
  • ਕਦਮ 3: Utiliza la etiqueta
  • ਕਦਮ 4: ਬਟਨ ਦੇ ਓਪਨਿੰਗ ਅਤੇ ਕਲੋਜ਼ਿੰਗ ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਬਟਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰੋ।
  • ਕਦਮ 5: ਐਕਸਟੈਂਸ਼ਨ ਨਾਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਸੇਵ ਕਰੋ। .html.
  • ਕਦਮ 6: ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਬਟਨ ਨੂੰ ਦੇਖਣ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ HTML ਫਾਈਲ ਖੋਲ੍ਹੋ।

ਸਵਾਲ ਅਤੇ ਜਵਾਬ

HTML ਵਿੱਚ ਬਟਨ ਬਣਾਉਣ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

1. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਕਿਵੇਂ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰਾਂ?

  1. Escriba
  2. ਬਟਨ 'ਤੇ ਉਹ ਟੈਕਸਟ ਜਾਂ ਸਮੱਗਰੀ ਚੁਣੋ ਜਿਸਨੂੰ ਤੁਸੀਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ ਟੈਗਾਂ ਦੇ ਵਿਚਕਾਰ ਲਿਖੋ।

2. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਦਾ ਪਿਛੋਕੜ ਰੰਗ ਕਿਵੇਂ ਬਦਲ ਸਕਦਾ ਹਾਂ?

  1. ਆਪਣੇ ਟੈਗ ਵਿੱਚ ਸਟਾਈਲ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ
  2. Escriba ਸ਼ੈਲੀ = »ਪਿਛੋਕੜ-ਰੰਗ: ਰੰਗ ਦਾ ਨਾਮ;» ਹਵਾਲਾ ਚਿੰਨ੍ਹਾਂ ਦੇ ਅੰਦਰ

3. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਗੋਲ ਬਟਨ ਕਿਵੇਂ ਬਣਾਵਾਂ?

  1. ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਤੁਹਾਡੇ ਬਟਨ ਦੀ ਸ਼ੈਲੀ ਵਿੱਚ
  2. Escriba ਬਾਰਡਰ-ਰੇਡੀਅਸ: valueInPixels; ਲੋੜੀਂਦੀ ਵਕਰਤਾ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ

4. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਵਿੱਚ ਲਿੰਕ ਕਿਵੇਂ ਜੋੜਾਂ?

  1. ਆਪਣਾ ਲੇਬਲ ਲਪੇਟੋ
  2. ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ href a la etiqueta ਲਿੰਕ URL ਦੇ ਨਾਲ

5. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਦਾ ਆਕਾਰ ਕਿਵੇਂ ਬਦਲਾਂ?

  1. ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ style ਤੁਹਾਡੇ ਲੇਬਲ 'ਤੇ
  2. Escriba ਸ਼ੈਲੀ = »ਚੌੜਾਈ: ਪਿਕਸਲ ਵਿੱਚ ਮੁੱਲ; ਉਚਾਈ: ਪਿਕਸਲ ਵਿੱਚ ਮੁੱਲ;» ਆਕਾਰ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ

6. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਨੂੰ ਕਿਵੇਂ ਕੇਂਦਰਿਤ ਕਰਾਂ?

  1. ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ style ਤੁਹਾਡੇ ਲੇਬਲ 'ਤੇ
  2. Escriba ਸ਼ੈਲੀ = »ਡਿਸਪਲੇ: ਬਲਾਕ; ਹਾਸ਼ੀਆ: 0 ਆਟੋ;» ਬਟਨ ਨੂੰ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰ ਵਿੱਚ ਕਰਨ ਲਈ

7. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਵਿੱਚ ਇੱਕ ਆਈਕਨ ਕਿਵੇਂ ਜੋੜਾਂ?

  1. ਇੱਕ ਲੇਬਲ ਸ਼ਾਮਲ ਕਰੋ dentro de la etiqueta
  2. ਫੋਂਟ ਅਵੇਸਮ ਵਰਗਾ ਆਈਕਨ ਫੌਂਟ ਚੁਣੋ ਅਤੇ ਲੋੜੀਂਦਾ ਆਈਕਨ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ।

8. ਮੈਂ HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਨੂੰ ਇੱਕ ਫੰਕਸ਼ਨ ਕਰਨ ਲਈ ਕਿਵੇਂ ਮਜਬੂਰ ਕਰਾਂ?

  1. ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ onclick ਤੁਹਾਡੇ ਲੇਬਲ 'ਤੇ
  2. Escriba ਔਨਕਲਿਕ="ਫੰਕਸ਼ਨਨੇਮ()" ਬਟਨ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਲਈ

9. ਮੈਂ HTML ਵਿੱਚ ਸ਼ੈਡੋ ਪ੍ਰਭਾਵ ਵਾਲਾ ਬਟਨ ਕਿਵੇਂ ਬਣਾਵਾਂ?

  1. ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ ਬਾਕਸ ਸ਼ੈਡੋ ਤੁਹਾਡੇ ਬਟਨ ਦੀ ਸ਼ੈਲੀ ਵਿੱਚ
  2. Escriba ਬਾਕਸ-ਸ਼ੈਡੋ: ਖਿਤਿਜੀ ਮੁੱਲਵਰਟੀਕਲ ਮੁੱਲ ਧੁੰਦਲਾ ਰੰਗ ਫੈਲਾਓ; ਲੋੜੀਂਦਾ ਸ਼ੈਡੋ ਪ੍ਰਭਾਵ ਲਾਗੂ ਕਰਨ ਲਈ

10. HTML ਵਿੱਚ ਇੱਕ ਬਟਨ ਉੱਤੇ ਹੋਵਰ ਕਰਨ ਵੇਲੇ ਮੈਂ ਹੋਵਰ ਸਟਾਈਲ ਨੂੰ ਕਿਵੇਂ ਬਦਲਾਂ?

  1. ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ style ਤੁਹਾਡੇ ਲੇਬਲ 'ਤੇ
  2. Escriba ਸ਼ੈਲੀ = »ਕਰਸਰ:ਕਰਸਰਵੈਲਯੂ;» ਲੋੜੀਦੀ ਕਰਸਰ ਸ਼ੈਲੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ, ਜਿਵੇਂ ਕਿ pointer
ਵਿਸ਼ੇਸ਼ ਸਮੱਗਰੀ - ਇੱਥੇ ਕਲਿੱਕ ਕਰੋ  ¿Cómo se desactiva Adobe Dreamweaver?