I looove wordpress, I think it’s a great blogging platform and the fact that its free (minus the cost of hosting and a domain) makes it even greater.  That said, on occasion wordpress doesn’t always want to play nice, sometimes the toolbar doesn’t always have what I need, or it doesn’t do something in the way I want it done … picky I know.  That is why I’ve written this post.  As a travel blogger people expect you to be great at writing, even photography, but more and more nowadays I see the ability to code even at a basic level as being a requirement.  It might not be something that bloggers want to learn, I’m assuming they blog because they love to write and express their feelings about different parts of the world.  But, some simple coding knowledge isn’t a bad string to add to you bow.  Here’s just a few bits to get you started.

First of all your should know that HTML stands for hyper text markup language.  Its is a relatively simple code to learn so long as you realize that everything you code must have an opening and closing bracket.  For example every html document will start with <html> and end with </html>.  As you can see the only difference is the backslash, the backslash indicated the closing bracket.

The simplest blank HTML doc would look like the below, I’ve colour coded to try show beginning and end tags for the head and body sections within the html doc.  You wont need to worry about the any of the <html> <head> or <body> tags, but it was worth you knowing.

<html>

<head>

</head>

<body>

</body>

</html>

Within wordpress you’ll probably have noticed the HTML tab when starting a new post.   It might be an idea to open up a new draft and trying a few of the below out.   You may even find you enjoy coding  … no? … just me then.

wordpress html
————————————————————————————————————————————

 Hyperlinks

In its simplest form, a link to another page or website is set up like this

<a href=””>  </a>

Between the brackets will go your target site, including http:// (this is important).   Between the opening tag <a href=””> and the closing tag </a> will go your anchor text.  The anchor text is what appears on your published post and is what the user clicks on.

 

Code1:

<a href=”http://www.backpacksandbunkbeds.co.uk”>backpacking blog</a>

Result1:  backpacking blog

 

Code2:

<a href=” http://www.backpacksandbunkbeds.co.uk”> www.backpacksandBunkbeds.co.uk</a>

Result2: www.backpacksandbunkbeds.co.uk

 

Code3:

<a href=” http://www.backpacksandbunkbeds.co.uk”> Neil likes cheese on toast</a>

Result3: Neil likes cheese on toast

 

————————————————————————————————————————————

Images

In its simplest form, a image is coded like this

<img src=”” alt=””>

All that you need to add is the source of your image inbeteen the first set of brackets, and then some words describing the image between the second set of brackets.  Note -> the alt=”” text helps with SEO so its worth taking the time to type something!

Code:

<img src=”http://www.backpacksandbunkbeds.co.uk/wp-content/uploads/2012/03/indexlogo8.jpg” alt=”backpacks and bunkbeds backbacking blog”/>

Result:

backpacks and bunkbeds backbacking blog

————————————————————————————————————————————

An image thats a hyperlink

Much the same as a normal hyperlink, just insert you image code between the section sections of the hyperlink.

 <ahref=””><img src=”” alt=””></a>

So the image code goes between the two sections of the hyperlink code.  Simple really.

Code1:

<a href=”http://www.backpacksandbunkbeds.co.uk”><img src=”http://www.backpacksandbunkbeds.co.uk/wp-content/uploads/2012/02/SAM_1529.jpg” alt=”backpacks and bunkbeds backbacking blog”/></a>

Results1:

backpacks and bunkbeds backbacking blog

 

Want it without the border?  Add the below in blue

Code2:

<a href=”http://www.backpacksandbunkbeds.co.uk”><img src=”http://www.backpacksandbunkbeds.co.uk/wp-content/uploads/2012/02/SAM_1529.jpg” alt=”backpacks and bunkbeds backbacking blog” border=”0px” /></a>

Results2:

backpacks and bunkbeds backbacking blog

 

————————————————————————————————————————————

So thats round 1 done.  In round two i’ll try cover things like make text bold and/or italic.  WordPress can obviously do most this for you with no trouble.  These posts are just an aid, it doesnt hurt to know a bit of code.

If there’s any other specific elements of HTML you’d like covered just let me know.