Written by Marnie Bergan on the 16/05/2008
By now people are starting to respond to all the blog hype. Along with the millions of blogs written by individuals all over the world, business blogs are starting to soar, allowing businesses everywhere to communicate with their audience about anything they wish.
The benefits of blogging are many: it can improve search engine rankings, you can get feedback from your audience about ideas for your business, build a community around your business, establish expertise and can even act as a low-cost PR tool. But how do you keep people reading?
The look of your blog is important. Not just the site layout, but your actual entries. If every entry you have is simple blocks of text, all looking exactly the same, it's not going to catch the reader's eye and give people a reason to come back, or even read your entries in the first place! A few simple HTML tricks can help solve this dilemma though.
What is HTML you're probably asking? HTML (HyperText Markup Language) is a language type used on the web to manipulate how pages look. HTML allows you to make text bold or italic, align text in a number of ways, allows you to display images and even link to pages found other sites – all things that will make your blog look less bland!
Programming in HTML really isn't all that hard. In fact, you'll probably only need one or two cups of coffee to get your head around it! Essentially HTML is made up of little bits of code called elements or tags. These tags are surrounded by two characters, < and >, and have little bits of text thrown between them. Some HTML tags will have two tags – an opening tag and a closing tag. Don't think too much about this right now though. We'll get into the nitty gritty shortly!
The easiest way to describe how an element or tag works is by pressing the bold icon in Microsoft Word, typing some text and then hitting it again to turn the bold off. HTML is very much the same. We need to turn the bold on, type some text and then turn it off. A good example of how this works is as follows:
<strong>This text is bold.</strong>
This text is bold.
What we've done here is turned on bold by using the <strong> tag, typed a bunch of text and then turned it off using the </strong> tag. You will notice that the only difference between the two tags is the use of a forward-slash. The first tag simply includes a "strong" between its brackets. This tells the web browser to turn bold ON. The second tag includes a “strong� again, however it also includes a forward slash which tells the computer to turn bold OFF.
Now that you have some understanding of how these simple on/off tags work, let's start getting creative and find out what you can really do with them!
The bold element shown above is great for so many things. Bold a paragraph heading, use it to highlight a name or even to emphasise a comment. Eg. I really like using HTML.
Similarly, use the italics element to help identify quotes, highlight captions or titles of movies or publications, or again, just to emphasise a word. Italicizing text is as easy as bolding it:
<em>Isn't this easy?</em>
Isn't this easy?
You can also use the underline tags by using the <u> and </u> tags, however most browsers these days tend to default to using underlining to indicate a link. As such, it's usually best to avoid underlining plain text so as to avoid confusion. Try using italics or bold instead.
By now you should have a bit of an understanding of how to make some text bold and have to emphasise specific points using italics, but how do you go about implementing this in a paragraph? It's really as easy as you think it might be! Take a look at the paragraph below:
<strong>Bergan Blue Blog</strong>! We <em>really</em> enjoy blogging!
This turns out to be:
Welcome to the Bergan Blue Blog! We really enjoy blogging!
Let's get to the exciting stuff – using images in your posts! You may find from time to time you might like to include a photo of a new product or even just a picture to pretty up your post. Doing this with HTML is simple once you have the hang of it. To use an image in your posts you need to use one that's already on the web. Usually you will have to upload this yourself. Once it's on the web, find out the image's location or address. For example, http://www.mysite.com.au/image1.jpg. To put this image in your post, use the following:
<img src="http://www.mysite.com.au/image1.jpg" />
Instead of that ugly line above, you'll see your picture! Let's explain that tag. The IMG tells the page you want to insert an image. But you also need to tell it where to find the picture in question. That's where the SRC comes in. SRC basically means the source or location. So you're saying SRC or location equals "this is where it is!". Now, because there is no closing tag for this element, you need to make sure you put a forward slash (/) before the closing angle bracket. Refer to the above example.
So you want to link to someone else's website, huh? Too easy! Much like the IMG element, you need to give the page a location to link to, so get this ready first. Let's say we want to link to http://www.mypetphotos.net/ and we want the link to say 'Click here to see my pets' we need to type the following:
<a href="http://www.mypetphotos.net/">Click here to see my pets!</a>
Click here to see my pets!
Now that you've learned how to use bold and italics and even how to insert images and links into your posts, there is no excuse for those boring, monochromatic entries that send your readers running for the hills (or for the next, more brightly-coloured blog!). Give HTML a go – you'll be pleasantly surprised at how easy it really is!
Please click here to go back.
