6 January 2014

How to Make HTML Buttons (Linked Images)


The first thing I have learnt to do, in terms of html, and I guess this is the only thing I can sort of do, are social media buttons. The ones you see down the sides of every website or blog ever, although they are not actually necessary for your blog.  I wanted to learn how to do them even though I'd only have like one button to put. This is my version of how you could create your own buttons or linked images.
<a/></a>
This is like the sandwich and everything else goes inside the sandwich and you can have mini sandwiches in the big one.
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU">
The highlighted red bit means where you want the button to take you and the URL is inside the speech marks ("...")
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank">
The highlighted bit is optional and is added if you want the link to open in a new tab or window. This also is our first sandwich.
<img src="ULR OF IMAGE" height="60" border="0" />
The next highlighted part is like the picture frame of the image and everything to do with the image goes inside the picture frame.
<img src="URL OF IMAGE" height="60" border="0" />
The highlighted bit here means where the image comes from or where its hosted from.  For this reason the image has to be uploaded on to the internet and have a URL or use a host site like Photobucket to get the URL.  The URL is put inside speech marks again.
<img src="URL OF IMAGE" height="60" border="0" />
This highlighted part tells us the height of the image in pixels; the number of pixels is indicated inside the speech marks.
<img src="URL OF IMAGE" height="60" border="0" />
This one is also completely optional.  It is the picture frame of the image, but I don't normally add a border, because the image would already have been designed with or without a border to start with. The number of pixels for the border is inside the speech marks.
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank"><img src="URL OF IMAGE" height="60" border="0" /></a>
It is very important to note where all the spaces are in the piece of html as well, which I have just highlighted.

If you want to put more than one button, then all you have to do is repeat the steps again and add the new sandwich of html code underneath the first sandwich.  Here is an example of that with two buttons in a row:
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank"><img src="URL OF IMAGE" height="60" width="60" border="0" /></a> 
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank"><img src="URL OF IMAGE" height="60" width="60" border="0" /></a>
To finish, it really helped to learn and store this in my memory by writing it out again to teach you guys and I think that I have got the hang of writing this html code now.  I hope to learn lots more html in the future, but for now this is enough to keep me going.

Has this helped you to create linked images/ buttons for your blog?