Tuesday

How to Make a Link with HTML

I thought that I would make a post about how to make links because I've noticed that a lot of people do not know how to make them. It's actually very easy once you know how to do it. All you need is a few pieces of HTML code. I'll show you how to make  a clickable text link and also a clickable picture/image link using HTML code.

How to Make a Link with HTML
Making a clickable link is very easy. You need to use the <a href= to start the link, then begin with a " and insert the url or web address that you want the link to direct to when it is clicked. Place another " at the end of the address and end it with a > Next you need to insert the words that you want someone to click on as the link. You can use the name of the site, the page, or the actual url or simply type 'click here'. It's your decision what text you want to use for your link. After you type you link text you simply end the link with> That's it - now you have a clickable text link.

Here is an example of what the link will look like:

<a href="url you want link to direct to"> text that you want to click on</a>

How to Make Your Link Open in a New Window
The link above will open in the same page which means when you click the link it will open in the current window so you will have to push the back button to get to the original page you were looking at. You can add a simple piece of code to a link to make it open in a new window. Having the link open a new window means that the original page you were looking at when you clicked the link will still be opened in a window behind the new window. I like to have links open in new windows so that anyone that clicks one of my links doesn't lose the original page that they were on. To make a link open in new window you will need to add to the html code of your link right at the end of the url address in the begining of your code.

Here's an example of what the code should look like:

<a href="URL you want link to direct to" target="_blank">Text you want to display as link</a>

How to Make an Image into a Link with HTML
To use an image as your clickable link, such as your blog button, a photo or an image you will need to add another piece of code after the URL at the begining of the code where you want the link to direct to. You will need to have the image saved online in order to have a URL for the image source. The easiest way to do this is to save your images on PhotoBucket.com

Here's an example of what your code will look like. If you don not want the link to open in a new window you can take out that part of the code, simply remove this target="_blank"

<a href="URL you want like to direct to" target="_blank"> <img src="URL where the image is located"> </a>

How to Center Images with HTML
If you want to center the image on the page all you have to do to insert another little piece of code. Just insert <center> in front of img src= and then insert </center> at the end of the image source.

Don't forget the first " and the last " when you insert any URL's into the code.

9 comments:

Fitness Family said...

Stumbled.

Cherrie D. Bautista

Tracie Nall said...

Ran across your blog on 20s. I getting back into blogging after a couple of years off, and have found that I seem to have forgotten everything that I knew about html...thanks for the refresher!!

Molly said...

hey thanks!

btw, I have an Amazing Grass giveaway plus discount code on my blog if you're interested!

thepranamama said...

this is so awesome, 'manda, thank you! i have been looking for directions like this. i'm also still interested in learning how to make a scrollable view of various buttons or a list of posts. if you can help, i'd appreciate it! (i saw your post on this but it said you were on blogger, and i'm on wordpress...)

Unknown said...

Thanks, AManda.

I've been trying to figure that out. Thanks for the info and the additional tips about opening in a new window. The step-by-step description was great and really simplified html, which usually makes my head spin.

Best,

Lauren
http://thinkspin.blogspot.com

Donna said...

Thanks for the step by step instructions. They are hard to come by and no-one seems to realise how confusing code can be when you are first learning to blog.

Anonymous said...

Your post greatly expanded my horizon. Thank you very much

Barbara's Beat said...

Thank you very much

Anonymous said...

Dear Author www.mandablogsabout.com !
Absolutely with you it agree. In it something is also to me it seems it is very good idea. Completely with you I will agree.

Kontera