Well there are two main ways to build buttons to your webpage with coding.
The first method is using the: <input> tag.
The second method is using the: <button> tag.
So we are going to discuss how to build a webpage with <input> tag first then we discuss <button> tag.
<input> tag:
<input > tags are used to
create a basic button. When using <input> tag, we use type =" button " to set the control to a button.
With input tag you can add JavaScript to display a message to the user once
they click the button, just like I have done in this sample.
Sample of an <input tag> code.
<input type= "button" value = "Click
me!" onclick ="JavaScript:alert
('DistrictND is Nice')" />
The above code will display in a web browser like this
You can edit the text that says "DistrictND is nice". Well with this above you can build a button with <input> tag. So let's discuss <button> tag.
<button> tag:
We can use the <button> tag to create buttons. This is a tag specifically for creating buttons. The type attribute accepts 3 possible
values; button , submit , and reset.
How to create buttons on a webpage with <button> tag.
1 Go to your html editor
2 Now integrate this lines of codes to build a button with <button> tag.
<button type ="button"
onclick ="JavaScript:alert('You
liked that, didn\'t you!')" >DistrictND is cool! </button>
The above code will display in a web browser like this
You can edit the texts that says "DistrictND is cool" and put your own text.
Difference between the <input> tag and the <button> tag.
Yes I know that the input and button tags are almost the same but let me tell you there are differences between these two tags,
The main difference is that the < button >
tag allows you to place html code in
between the opening and closing tags.
(While)
The <input > tag is an empty tag (i.e. it
doesn't have a closing tag), so you can't
add content to the tag.
Another difference between the two tags is with the value attribute. The <input > tag uses this attribute to display
a label on the button (e.g. "Click me!").
(While)
The <button > tag, on the other hand, the value attribute is submitted
along with any form contents and can be used for processing.
OK now that you know how to code buttons let me teach you how to code buttons and add images to the buttons.
Well we are going to use the button tag because it allows us to include html code between the <button> and </button> tag.
So follow this steps on how to create a button with image and text.
1 Go to your html editor
2 Integrate this code
<button type ="button"
onclick ="JavaScript:alert('Once
upon a time, there lived a web developer who loved sharing knowledge to those who find it useful he goes by the nickname ND.')" >
<img src ="/pix/web_graphics/
free_website_graphics/icons/books/
book13.gif" alt="Read book" />
<br />Read Book! </button>
The above code will display in a web browser like this
You can edit that text In JavaScript that says "Once upon a time, there lived a web developer who loved sharing knowledge to those who find it useful he goes by the nickname ND" and put your own text.
That's all you have built a button with image and text in your webpage now view your progress and save your webpage as index.html
Then upload it to a web hosting company.
Note:
Any text code that concerns displaying images will not display unless you save your webpage and name it index.html then upload it to your browser, follow these steps on how to upload your webpage file to your browser.
(i) With windows or Mac: Save the webpage as a html file then drag the file to your browser it will upload and display your work or find a web hosting company and host your webpages.
(ii) With Android: Find a web hosting company and host your webpages.
Now it Will display your work.
Warning
Carefully integrate this codes as failure to do so can lead to error.
Conclusion
Well it's up to you now to build as much buttons as you like because its your page you can also go to the web development tag in my website to see more awesome stuffs you can do In your webpage.
If you found this tutorial helpful and you want to thank the publisher just go to the support and motivate us page and support us there thanks.
The first method is using the: <input> tag.
The second method is using the: <button> tag.
So we are going to discuss how to build a webpage with <input> tag first then we discuss <button> tag.
<input> tag:
<input > tags are used to
create a basic button. When using <input> tag, we use type =" button " to set the control to a button.
With input tag you can add JavaScript to display a message to the user once
they click the button, just like I have done in this sample.
Sample of an <input tag> code.
<input type= "button" value = "Click
me!" onclick ="JavaScript:alert
('DistrictND is Nice')" />
The above code will display in a web browser like this
You can edit the text that says "DistrictND is nice". Well with this above you can build a button with <input> tag. So let's discuss <button> tag.
<button> tag:
We can use the <button> tag to create buttons. This is a tag specifically for creating buttons. The type attribute accepts 3 possible
values; button , submit , and reset.
How to create buttons on a webpage with <button> tag.
1 Go to your html editor
2 Now integrate this lines of codes to build a button with <button> tag.
<button type ="button"
onclick ="JavaScript:alert('You
liked that, didn\'t you!')" >DistrictND is cool! </button>
The above code will display in a web browser like this
You can edit the texts that says "DistrictND is cool" and put your own text.
Difference between the <input> tag and the <button> tag.
Yes I know that the input and button tags are almost the same but let me tell you there are differences between these two tags,
The main difference is that the < button >
tag allows you to place html code in
between the opening and closing tags.
(While)
The <input > tag is an empty tag (i.e. it
doesn't have a closing tag), so you can't
add content to the tag.
Another difference between the two tags is with the value attribute. The <input > tag uses this attribute to display
a label on the button (e.g. "Click me!").
(While)
The <button > tag, on the other hand, the value attribute is submitted
along with any form contents and can be used for processing.
OK now that you know how to code buttons let me teach you how to code buttons and add images to the buttons.
Well we are going to use the button tag because it allows us to include html code between the <button> and </button> tag.
So follow this steps on how to create a button with image and text.
1 Go to your html editor
2 Integrate this code
<button type ="button"
onclick ="JavaScript:alert('Once
upon a time, there lived a web developer who loved sharing knowledge to those who find it useful he goes by the nickname ND.')" >
<img src ="/pix/web_graphics/
free_website_graphics/icons/books/
book13.gif" alt="Read book" />
<br />Read Book! </button>
The above code will display in a web browser like this
You can edit that text In JavaScript that says "Once upon a time, there lived a web developer who loved sharing knowledge to those who find it useful he goes by the nickname ND" and put your own text.
That's all you have built a button with image and text in your webpage now view your progress and save your webpage as index.html
Then upload it to a web hosting company.
Note:
Any text code that concerns displaying images will not display unless you save your webpage and name it index.html then upload it to your browser, follow these steps on how to upload your webpage file to your browser.
(i) With windows or Mac: Save the webpage as a html file then drag the file to your browser it will upload and display your work or find a web hosting company and host your webpages.
(ii) With Android: Find a web hosting company and host your webpages.
Now it Will display your work.
Warning
Carefully integrate this codes as failure to do so can lead to error.
Conclusion
Well it's up to you now to build as much buttons as you like because its your page you can also go to the web development tag in my website to see more awesome stuffs you can do In your webpage.
If you found this tutorial helpful and you want to thank the publisher just go to the support and motivate us page and support us there thanks.
0 Comments