Table of Contents
How To Create Website Link Button in HTML Page.
In this tutorial, we’ll produce a clickable button with an associate degree on click event which will link to an internet site address.
Firstly we’ll add worth to the button. worth|the worth} attribute specifies the initial value of the button and it’ll be utilized by some browsers.
<button type=”button” value = “My Programing”></button>
Next, we’ll be exploitation window. location with our onclick event once the button is clicked. an internet site uniform resource locator is going to be assigned to the window. location.
In this tutorial I’m exploiting my home page address, you assign your own uniform resource locator in situ of mine.
<button type=”button” value = “My Programing” onClick = “window.location =’your URL goes here'”></button>
Finally, add the text that you simply need displayed on the button in between the gap and shutting button tags.
| <button type=”button” value = “My Programing” onClick = “window.location =’https://www.myprograming.com/‘”>My Programing</button> |
Save your hypertext mark-up language document and check on the browser of alternative. If you want to continue following the tutorials kind affirmative into the table knowledge column once produce an internet site link button within the completed tutorial’s table.
Clickable Button with onclick Event
In this tutorial, we’ll produce a clickable button with an associate degree onclick event. A button is going to be displayed on a browser with appointed button text associate degreed once clicked an alert window are going to be displayed.
An onclick event is superimposed to the gap tag as shown below. I’m going with associate degree alert which is able to point out associate degree alert dialog which will show the text within the brackets associate degreed an OK button.
| <button type=”button” onclick=”alert(‘Button clicked’)”>Click here</button> |
The alert methodology takes focus removed from this window and is employed to induce a message to a user. The user can click the OK button to continue back to the original window.
Save your hypertext markup language document and take a look at on browser of selection. If you want to continue following the tutorials kind affirmative into the table knowledge column once Clickable Button with associate degree onclick event within the completed tutorial’s table.
Example:-
<html>
<head>
<title>Button</title>
</head>
<body>
<h1 align="center">My Programing</h1>
<a name="Top">Table of contents</a>
<ol>
<li><a href="#Links">Links</a>
<ul>
<li>
<a href="#TextLink">Text Link</a>
</li>
<li>
<a href="#TextLinkAttribute">Text Link with target attribute</a>
</li>
</ul>
<li><a href="#Buttons">Buttons</a>
<ul>
<li>
<a href="#ClickableButton">Clickable button</a>
</li>
<li>
<a href="#OnclickEventButton">Onclick event button</a>
</li>
<li>
<a href="#UrlLinkButton">URL link button</a>
</li>
</ul>
</ol>
<hr>
<h2><a name="Links">Links:</a></h2>
The following HTML tags are used to create a hyperlink: <br>
Opening tag <a> <br>
Closing tag </a>
<h4><a name="TextLink">Text link:</a></h4>
This is a preview of what is produced from the Text link tutorial
<table width="620" border="1">
<tr>
<td width="110">HTML code</td>
<td><a href="https://www.myprograming.com/">My Programing </a></td>
</tr>
<tr>
<td>Link Produced</td>
<td><a href="https://www.myprograming.com/">My Programing </a></td>
</tr>
</table>
<a href="#Top">Back to top</a>
<br>
<h4><a name="TextLinkAttribute">Text link with target attribute:</a></h4>
This is a preview of what is produced from the Text link with target attribute tutorial
<table width="800" border="2" bordercolor="#f3f3f3" bgcolor="#ff44g4">
<tr>
<th>HTML code</th>
<th>Link Produced</th>
</tr>
<tr>
<td><a href="https://www.myprograming.com/" target="_blank">My Programing </a></td>
<td><a href="https://www.myprograming.com//" target="_blank">My Programing</a></td>
</tr>
<tr>
<td><a href="https://www.myprograming.com/" target="_top">My Programing</a></td>
<td><a href="https://www.myprograming.com/" target="_top">My Programing </a></td>
</tr>
<tr>
<td><a href="https://www.myprograming.com/" target="_self">My Programing </a></td>
<td><a href="https://www.myprograming.com/" target="_self">My Programing </a></td>
</tr>
<tr>
<td><a href="https://www.myprograming.com/" target="_parent">My Programing </a></td>
<td><a href="https://www.myprograming.com/" target="_parent">My Programing</a></td>
</tr>
</table>
<a href="#Top">Back to top</a>
<hr>
<h2><a name="Buttons">Buttons:</a></h2>
The following HTML tags are used to create a button: <br>
Opening tag <button> <br>
Closing tag </button>
<h4><a name="ClickableButton">Clickable Button:</a></h4>
This is a preview of what is produced from the clickable button tutorial
<table width="400" border="1">
<tr>
<td width="110">HTML code</td>
<td><button type="button">Click here</button></td>
</tr>
<tr>
<td>Button Produced</td>
<td><button type="button">Click here</button></td>
</tr>
</table>
<a href="#Top">Back to top</a>
<br>
<h4><a name="OnclickEventButton">Onclick Event Button:</a></h4>
This is a preview of what is produced from the Onclick Event Button tutorial
<table width="600" border="1">
<tr>
<td width="110">HTML code</td>
<td><button type="button" onclick="alert('Button clicked')">Click here</button></td>
</tr>
<tr>
<td>Button Produced</td>
<td><button type="button" onclick="alert('Button clicked')">Click here</button></td>
</tr>
</table>
<a href="#Top">Back to top</a>
<br>
<h4><a name="UrlLinkButton">URL Link Button:</a></h4>
This is a preview of what is produced from the URL Link Button tutorial
<table width="800" border="1">
<tr>
<td width="110">HTML code</td>
<td></td>
</tr>
<tr>
<td>Button Produced</td>
<td></td>
</tr>
</table>
<a href="#Top">Back to top</a>
<hr>
</body>
</html>Output:-
My Programing
Table of contentsLinks:
The following HTML tags are used to create a hyperlink:Opening tag <a>
Closing tag </a>
Text link:
This is a preview of what is produced from the Text link tutorial| HTML code | <a href=”https://www.myprograming.com/”>My Programing </a> |
| Link Produced | My Programing |
Text link with target attribute:
This is a preview of what is produced from the Text link with target attribute tutorial| HTML code | Link Produced |
|---|---|
| <a href=”https://www.myprograming.com/” target=”_blank”>My Programing </a> | My Programing |
| <a href=”https://www.myprograming.com/” target=”_top”>My Programing</a> | My Programing |
| <a href=”https://www.myprograming.com/” target=”_self”>My Programing </a> | My Programing |
| <a href=”https://www.myprograming.com/” target=”_parent”>My Programing </a> | My Programing |
Buttons:
The following HTML tags are used to create a button:Opening tag <button>
Closing tag </button>
Clickable Button:
This is a preview of what is produced from the clickable button tutorial| HTML code | <button type=”button”>Click here</button> |
| Button Produced |
Onclick Event Button:
This is a preview of what is produced from the Onclick Event Button tutorial| HTML code | <button type=”button” onclick=”alert(‘Button clicked’)”>Click here</button> |
| Button Produced |
URL Link Button:
This is a preview of what is produced from the URL Link Button tutorial| HTML code | |
| Button Produced |
