Chamberlain Design logo

Chamberlain Design

Useful Basic HTML You Should Know

There are some basic things in HTML that you may find useful, like adding a link or an image.  The main place you may need to use HTML in WordPress is in a Sidebar Widget.  If you are a member of a forum, you may have had to use some pseudo-HTML to format text; if so, some of this may look vaguely familiar.

How to Add a Link

To add a link to a web page, the syntax goes like this:

The opening and closing a tags tell the browser that this is a link, the href says where to link to and the link text is what is shown to the user.

You should replace address with the relevant URL or address for the page you want to link to, either relative to the current page or the full URL.

The link text doesn’t have to be text, it can be many different HTML tags instead, like an image.

Here’s a real example:

…which will look like this:

Chamberlain Design

How to Add an Image

To add an image to a web page, the syntax goes like this:

The  img  tags tell the browser that this is a link (note that an img element is empty and therefore has no closing tag), the src attribute says where the image can be found and the alt text tells blind screen-reader users what they’re missing.

You should replace address with the relevant URL or address for the image you want to add, either relative to the current page or the full URL.

The best way to show you is with an example, like this one:

…which will look like this:

Cute kitten

How to Combine Both to Use an Image as a Link

Using what you’ve learnt so far, I want you to write down what you think is the correct code to use an image as a link – I’ll wait…

 

Right, time’s up!  You should have this:

……which will look like this:

Cute kitten

If you got that right, you have won a cookie*, well done – please claim your prize in the comments below.

Hopefully this will be useful to you some day, even if only to impress your friends**.

See you next time!

* While stocks last.  Subject to terms and conditions.

** We accept no responsibilty if your friends are not impressed and, instead, mock you.

1st June 2013

No comments yet - why don’t you get the ball rolling?

Join the Discussion

Your Name:

Your Email:

Comment:

Comments using offensive language will be hurled into the abyss.