HTML Codes & Modern Blogging

I’m nearly a year into this Blogspot & WordPress business, and whilst these authoring tools allow non-code savvy people like me to produce on-line content, a little bit of coding knowledge goes a long way.

Most of the web authoring tools work on a simple WYSIWYG format, meaning what you see as your typing is what it is going to look like when it’s posted. These authoring programs allow you to format your posts, e.g. by making text bold, underlined, or changing the font size. This is facilitated by a GUI with some easy to click buttons, made more familiar with their similarities with popular Word Processing programs.

WordPress Text Editor GUI

WordPress Text Editor GUI

MS Office Word 2007 Text Editor

MS Office Word 2007 Text Editor

What’s happening behind the scenes ?

These authoring tools basically convert your text editor window content into html code so it can be displayed via a web browser. Sounds simple right ?

Even the most basic editing requires a bit of html code e.g to make text bold and underlined the html coding is <span style=”text-decoration: underline;”><strong>bold and underlined</strong> </span>.

It’s clear to see this can get complex pretty quickly, you can see what you page looks like in html via WordPress if you click on the ‘Text’ tab on the top right of your post text box. Most web browsers will also let you see the underlying html code for a page usually by right clicking in a page and going to ‘view source’ in IE, or ‘view page source’ in Firefox & Chrome.

So the program we use is designed to make things easier for us, that’s a good thing, right ? It allows us to put together professional standard content quickly and easily.

So why worry about learning any HTML codes ?

Where have all the buttons gone ?

Sometimes you don’t have access to the ‘make things easy’ buttons. This is often the case when posting comments on blogs as the comments box doesn’t come with all the familiar text editor bells & whistles.

Say you want to insert a link to an article in your comment, how can you do it ?

Y ou can just cut and paste the URL from your browser, but this often looks untidy e.g. http://www.brit-thoracic.org.uk/guidelines/pleural-disease-guidelines-2010.aspx

If you know the HTML code, you can type this in the comments box:

<a href=”http://www.brit-thoracic.org.uk/guidelines/pleural-disease-guidelines-2010.aspx”> Click here for article link</a>

And your link will look like this, Click here for article link, much nicer :-)

Troubleshooting

If you are trying to troubleshoot problems on your page e.g. something not displaying right. You really have to go back to the html to see why your blog isn’t behaving itself.

How the hell do I do … ?

There isn’t alway a ‘button’ for what you want to do, one example is the use of the abbreviation code, <abbr>.

The <abbr> code lets you display additional information when the coded text is highlighted with the cursor, it is useful when using acronyms in your posts, e.g. WHO if you put your mouse over the acronym it should pop-up the text ‘World Health Organisation’.

So how do I do this ? It is a simple bit of code that looks like this:

<abbr title=”Text that will pop up”>text that is displayed</abbr>

For the example above, the code looks like this:

<abbr title=”World Health Organisation”>WHO</abbr>

Where to learn more ?

Unsurprisingly there are a number of websites with overviews, tutorials and lists of HTML codes. These include:

 

 

 

 

Download PDF
This entry was posted in Web Based Education. Bookmark the permalink.