The two most useful pieces of HTML

It’s important to have a grasp of HTML when working online, but really you’ll probably find two key bits of HTML code the most useful.

They are:

  • code to create a link
  • code to display an image

And there’s a cunning way to combine them to create

  • an image with a built-in link

Code to create a link

<a href=” [put your web address in here] “>;  [put your link text in here ] ; </a>

<a is the opening part of the link code. It is saying to the browser, in effect, this is where a link is going.

href= is the bit that points to where the web address is. It’s a web reference, hence the “ref” part.

The “” are used to tell the browser which bit of the code is the actual web address, as opposed to HTML. Anything between the quotation marks will be treated as a URL.

</a> tells the browser you have finished the coding and are now back to ordinary web page text.

Then once you have put in your link text – “Click here” for example – you need to finish off the code by putting in    </a> . This closes off the   <a that you started with.

Put it all together and you get a working link that will click through to a web page.

One example would be:

<a href=”http://www.freelanceunbound.com”>Freelance Unbound</a>

This links the words Freelance Unbound to this web site.

Code to display an image

<img src=”  [image address]  “>

All images on the web have their own web address. You can find and copy it by right-clicking the image on a Windows PC or control-clicking the image on MacOS.

When you have the image URL, paste it in between the quotation marks in the code string above. When this code is read by the browser it will display the image you have chosen.

Control the image size

If you want to specify the size the image displays at, add some styling code to the HTML.

Before the final angle bracket, add in:

style=”height:000px;width:000px;border:000px;”

replace the zeroes with the measurement you need. So if you want the image to display at 100 pixels high by 200 pixels wide, with a 5 pixel border, write it like this:

style=”height:100px;width:200px;border:5px;”

The whole code now reads like this:

<img src=”  [image address]  ” style=”height:150px;width:100px;border:5px;”>

Pick an image such as the eye I use on my “About” page and copy the address and the code reads:

<img src=” http://www.freelanceunbound.com/wp-content/uploads/2008/03/eye.jpg  ” style=”height:100px;width:200px;border:5px;”>

This should display the eye image if you paste it into a Text Widget, or into a WordPress post (but you must set the post editor window to HTML, not Visual).

Creating an image with a built-in link

You can now bolt the two bits of code together to create an image that clicks through to a web page.

Take the original link code:

<a href=”http://www.freelanceunbound.com”>Freelance Unbound</a>

and replace the “Freelance Unbound” text with the image code.

You end up with this:

<a href=”http://www.freelanceunbound.com”> <img src=”  http://www.freelanceunbound.com/wp-content/uploads/2008/03/eye.jpg  ” style=”height:100px;width:200px;border:5px;”> </a>

What that will show on the page, or in your sidebar, is a picture of the Freelance Unbound eye that links through to the home page of the site.