In this tutorial I’m going to show you what we can do with buttons. I am assuming you know CSS. Also, for this tutorial, use Notepad or, my personal favourite, Note Tab, which, with a little manipulation, is the most powerful text-editor around. Check out it’s custom scripting language later on. But for now, let’s make a basic button. By the way, you will notice my HTML is a little different from most others. That’s because it’s XHTML. You can look that up later.
<input type="button" value="Home" />
Nothing special here, just an ordinary button that does…nothing. It’s color will depend on your desktop theme. We’ll change that later. I do my tags in lowercase, you can do yours in uppercase if you want.
Let’s make out button go to the Free2Code’s homepage. First, add the onClick attribute. onClick is an event handler. It means, when we click whatever element it’s attatched to, something will happen. In this case, when somebody clicks the button, something should happen. Not yet though…
<input type="button" value="Home" onClick="" />
...because it needs to point somewhere.
<input type="button" value="Home" onClick="window.location='http://www.free2code.net'" />
Have you clicked the button yet? Go ahead.
What’s happening here is really simple. When the user clicked the button, the onClick attribute was activated. Then, the browser went to this window, then changed it’s location to http://axion-network.net. I’m not going to go to indepth on that, this isn’t a JavaScript tutorial. If you want your button to go to some other place, just replace the URL to axion-networks with the URL you want.
This button can be used for anything. It’s up to you. I won’t show you anymore, if you want it to do other things, go learn JavaScript.
Before we move on to manipulation with CSS, make a few of these point to a few places. Once you are comfortable with these, you are ready to move on.
