Simple web coding can help you improve your website

If I were to tell you that I titled this week’s column, ‘Learning some website coding basics,’ you might be rather alarmed.

Monday, 2nd March 2015, 1:02 pm
JPCT 150713 Alan Stainer. Photo by Derek Martin

In the words of Lance Corporal Jones, “DON’T PANIC! DON’T PANIC!”

We have been spoiled by content management systems, in that they make it easy to lay out a web page without having to learn any coding at all. That is great, but understanding some of the basic concepts behind it all can help you write more visually appealing content on your own website. It can also help when writing emails too, as many of them use the same code as regular web pages.

So to start us off with an example, if you add an image to a page using WordPress, you will have various alignment options for the image. None, Left, Center and Right. What many people do not realise is that aligning an image affects the surrounding elements (like text).

None is just that and simply dumps the image onto the page at the point of insertion, just like any other element on the page. Any text coming after the image appears below it.

Center as you can imagine, centres the image. Again any text or other elements you add afterwards appears beneath the image. If you are wondering about the spelling, I used ‘center ‘as that is the correct spelling when coding a web page. If you use ‘centre’ accidentally it doesn’t work!

Left and Right alignment options behave differently. Any text you enter after the image appears beside it and not below, so that the image appears to ‘float’ to one side. If the text is longer than the image, then it will flow round and fill the space beneath.

That is images covered, now what about those pesky hyperlinks? Links have two basic components, the URL (Uniform Resource Locator or web address for short) and the anchor text. Anchor is the name of the piece of code that is used to add a clickable link to a page and the anchor text is the bit you see on the screen. That is how you get links that look like regular words or phrases, instead of just looking like long web addresses.

If you ever need to fiddle with the code for a link, it looks something like this.

The bit that reads href=”” is where the web address goes. The bit between the > and the < is the anchor text.

The default behaviour is to replace the current page with the one the link takes you to. Most content management systems will let you specify that a link will open a new page instead. To add that in manually in the example above, just add target=”_blank” after the web address and before the first >.

Woah. Did I just teach you some coding? Sorry about that. I can’t help myself sometimes.

One more bit of code for you to learn. Headings. They are written like this

My Title and go from h1 (the largest) all the way down to h6 (the smallest). The reason I bring them up is to alert you to a little problem I often see when browsing the web. You see headings need to respect a hierarchy in order for those all important search engines to understand your page properly and getting it wrong can affect your search engine rankings. It can also look odd. Rule number one for any web page is that you should only have one h1 heading. That’s it. No more than one. Below that you can have as many h2 headings as you like. Below the h2s you can have as many h3s, etc. What you don’t want to do is skip the hierarchy or get it mixed up. So no h3s above the h2s and no jumping from h2 to h6. Think of it like changing down through the gears in a car.

If any of this has sparked an interest in web design, you can find out more by going to