Wednesday, September 30, 2009


In the previous tutorial we talked about lists, and they naturally lead on to TABLES, the subject of this post.

If you have kept up so far, then at this point tables become very easy to understand. Really, they are just like lists, only when you create them, they have much for structure. However, it is the most complex thing we have dealt with yet, so there is lots to learn here. But it's not hard, I think? So here is the basic HTML mark-up of a table.


Okay, lets break it down:

  1. The "table" tags, begin and end the table.
  2. The "tr" tags, begin and end each row (tr - Table Row) in the table.
  3. The "td" tags, begin and end each cell (td - I don't know what it stands for...look it up and let me know) in the table row.

So, all your "td"s fit in the "tr"s, which fit in the "table".

Keep in mind (for now, we'll talk about how to change that lower down) that you want to have the same number of cells (td) per row (tr) all the way down your table.

Well, we are getting into the more advanced stuff in this HTML tutorial now, and if you have followed along so far you should be ready for some more. So lets add one more mark-up tag associated with tables, "th". It's rather simple:


The "th" is for the header row, so you make all the cells of that row "th" and then use "td" the rest of the way down. What it does depends on the browser your visitors are using, and what styling you give it with CSS.

We can add a 'caption' tag if you want:

<caption>My Table</caption>

Easy so far? Okay, lets add one more thing that you may use from time to time, the "colspan" attribute. Now, I don't want to get ahead of myself, but really you need some style to understand the "colspan". The "colspan" is an attribute of the "td" or "th" tags. It means that you can extend, on that row, the cell over the distance that you put two or more cells in a "tr" below or above. Are you with me? If not, the example below should help.


<style type="text/css">
table, caption, tr, th, td{
border:1px solid grey;

<body style="margin:150px;">

<caption>My Table</caption>
<th colspan="2">Game</th>


Alright, you can see how I did the style tag, and play around with it if you like for now, but we'll cover all that at length when we get into the CSS tutorial. I am not going to explain what I did there for now.

Just an additional note on style. If you look at the HTML mark up of many websites you will see that tables are used as a styling method. You are welcome to do this if you want, but I would strongly discourage it. HTML is moving along and style and mark-up is increasingly being separated. You can start using nested tables and images for corners and things like that, but I would rather say stay away from that, especially while you are first learning HTML. It is the reason why I have taught this tutorial this way. It makes the HTML rather simple, and the CSS much more tricky to grasp, but it is worth it all in the long run.

There was a lot to learn in this tutorial and the best way to get a feel of it is to play around. Try it out. Put tables into lists and tables in tables. Try out a lot of things. Even just making small changes. If you have different browsers, see what different things look like in the different browsers. If you don't, you can download some browsers for free, just Google "free browsers" and you will get lots of options. If you are on a Linux machine, why not try Lynx, a browser you use in terminal?

The next section will talk about Forms, a little more advanced topic than what we have done so far.

Non Nerd HTML 7 - LISTS

The Previous Tutorial covered the basics of using images in an HTML document. In this tutorial we are going to talk about lists.

The previous few tutorial sessions have been dealing with rather tricky things. Now we are going to introduce something that is really simple. But don't underestimate the power of lists. As with many aspects of HTML we are going to discover a whole host of uses of lists when we move into styling and beyond into scripting.

Okay, easy lesson. Lists:

We have two kinds of lists in HTML:

  1. Ordered list - Mark-up - <ol></ol> - Renders - like this list we are in, with numbers
  2. Un-ordered list - Mark-up - <ul></ul> - Renders - with bullets.

Below you can see how to create an un-ordered list. The new tag <li></li> is used to contain the "list item" hence "li"

<li>This is one item</li>
<li>This is another</li>
<li>And another</li>

You would create an ordered list the same way, except with the <ol></ol> tags.

Right, that was plain and simple. As I said before, once we get to CSS you will find there is a lot you can do with the lists. For now, make sure you learn the two kinds and play around with them. You can make 'nested lists'...lists within lists. See if you can figure that out.

This section leads on to naturally to Tables, and so the next section will be an HTML introduction to Tables.

One other thing. I believe strongly in giving credit where it is due, and for this tutorial I need to keep parsing the HTML so that when I write tags here they don't just get taken as part of the document. To do that I need to parse it. One can do that by hand, but honestly, I don't remember more than about 5 different ones, so I use a tool on this page

Non Nerd HTML 6 - IMAGES

Okay, by the end of this tutorial you can already do quiet a lot with your websites. All it takes is a little creativity. Once we start dealing with style (CSS) later on, we get the whole thing looking much better. But we can already add content in a variety of formats.

This is another really simple technique. What you will need is a digital image on your computer. Take it to the file that your computer stuff is in (copy and paste). If you have a nice camera, then it is likely that your image will be very large. It is a good idea to reduce the size.

Open Gimp Image Editor and open the picture's file (open, search through your file hierarchy, and click "open"). Click "Image" go down to "Scale Image", click it, and change the image to something like 200px width. You can play around with this, depending on what you are planning and need the image for.

If you really don't have any pictures on your computer, perhaps you can get one by ding a Print Screen (Usually there is a button on your keyboard that says something like "Print Scrn"). Otherwise simply make a drawing freehand in Gimp.

Save your picture to the same place that your main html file is.

Now the majic:

<img src="myfathusband.jpg" />

Where "myfathusband.jpg" is the name of your file, as it stands in the folder. If you re-name your image, the html will no longer find it. It needs to be exactly the same.

Alright, that's all you need to know to get the image into your page. However, you should do one other thing, add an 'alt' attribute.

<img src="myfathusband.jpg" alt="My Love" />

If you want to get it from another site, you can, JUST DON'T, don't steal other people's pictures. You are welcome to use any of mine, provided you link back to the site you got it from. My Flickr page is the best to do that from. Click the image below to go to the Flickr page.
Drill Bit from my Flickr page

In order to put an image file like that into your page you do this:

<img src="" alt="Drill Bit" />

There is a whole host of things we can do with images. For now at least you know how to get them in there. We will get to styling them and doing different things with images when we get into CSS and scripting later on.

There are a whole bunch of file formats for images. Most of the time you are going to deal with jpg, png and gif on your web pages. Be careful of very heavy file become very heavy and make your page load slowly.

In the next section we are going to talk about lists and how to arrange them in HTML. Lists are often used for styling elements, so it's good to get the basics down before moving on to using them with CSS later on.

Non Nerd HTML 5 - LINKS

The Previous Tutorial covered the basics of what the head tags are for and what might go into them.

If you understand a little of how the Internet works, then I am sure you have been biting at the bit to get to this part. There are a lot of things involved in linking, but I am going to cover the basics in a very plain and simple manner.

Here is the mark-up:

<a href=""></a>

The "a" right at the beginning tells you that it's an anchor. Don't worry about it, just remember it.

The second part is the href, it is the "hypertext reference" This is telling it, if you press this anchor, take me (or rather, load in my browser) this page.

What page? Okay, we didn't put anything in there yet. There can be three main links from our point of view:

1. Links to other sites.
2. Links to other files within your site
3. Links within a page...basically just jumps down long pages.

The first two are basically exactly the same, it's only how much of the URL you need to write that changes. Okay, lets say you are creating a website that lists great, easy to follow HTML tutorials, and you think this one is just grand. Here is how you link to it:

<a href=""></a>

For the time being we have an anchor, but nothing for the website's user to click on. Basically anything you put between the opening and closing anchor tags becomes a "hyperlink" So, let's put something in there:

<a href="">A simple and comprehensive HTML tutorial</a>

Great, now the user knows where it is going to take him. Now,if you have used the Internet much, you would know that often if you click over a link (or hyperlink) you get a little text that pops up telling you a little about this link. You add this with the "title" attribut in the hyperlink tag. Here's how:

<a href="" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>

If you want the link to open in a new tab (or new window if your user is using a really old browser) then use the target attribute, like this:

<a href="" target="_blank" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>

PLEASE, for the sake of web surfers the world over, don't do to much of that. Use it only were really appropriate.

Now, if you are simply navigating your own site, it depends if you put the file in different folders. If it's all in the same place, you simply need the file name:

<a href="index.html" title="Home">Your Website's Home Page</a>

And, lastly, if you want to move within the same page, do it like so:

1. Name the area you would like to 'jump' to:
<a name="#comeHere">The info which we are going to</a>

2. Create a link to go there, further up the page (or down, such as a "back to the top of the page" type link):
<a href="#comeHere">Where we go from</a>

So note that in the first part, "name" replaced "href"

By the way, just to give credit where it is due, I use this last technique so seldom that I had to look it up in another tutorial:

<a href="" title="HTML Links"> html links page"</a>

Links are usually blue and underlined.  We'll get to styling links when we  get to CSS.

About Links

Alright, you may have noticed that I keep asking for links to this page. Links are really what the whole world wide WEB is all about, it's the fabric of the web. One page, loaded on a random server, can only be accessed by those whole know the exact URL if they were not able to go there through a link. Can you imagine a website getting hundreds, thousands or even millions of page views if there was no link. No way.

Links build authority. The more links a site has to it, so long as those links themselves are from good, legitimate website, the greater the perceived value of the website being linked to. If you get into web development you will hear about SEO (Search Engine Optimization). It involves all sorts of things, but basically links to your site builds authority with search engines, and that way your site floats to the top in their results.

There is another side to it. There is this mad "link Building" that goes on, with different blogs and websites looking for their place in the sun by collecting a lot of links pointing to their site. It all gets a bit crazy. Be careful with this right from the start. Write good stuff, ask for some links, but don't go to link farms and exchange your links with everyone.

If you stick around for a while, we will one day get to web development and touch on SEO over there. I just wanted to give you an initial 'head's up' about something that is a little crazy on the WWW.

In the next tutorial we are going to start to stick some images into our pages. Fun, fun, fun.

Non Nerd HTML 4 - Adding a Favicon

The Previous Tutorial covered the basics of what the head tags are for and what might go into them.

This tutorial is put in here just for a little fun. It's not that important at this point, but if you browse the internet with most modern browsers you will see a little icon on the browser's bar and tabs next to the title of the page you are on. These little things are called 'Favicons' and I am going to go through how you can make one and put it onto your website.

Here is a icon which can be used for a favicon:

So, lets do this backwards. First I am going to show you how to put it into your site, using my favicon, and the I will show you how to make it.

So, below is the page we have worked on before, with one new line added after the <title> line. This line has a favicon of mine in there, just so you can try it out.


<title>Your Page Title</title>

<link rel="icon" type="image/gif" href="" />


<p>Learning HTML is not that hard.&nbsp; Actually, it is rather fun.&nbsp; It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly.&nbsp; I guess that if I start building lots of websites, the paragraph tag will become important to me</p>


Lets break down that line a bit:
  • Link - This tells the browser that you want to use something from another page in this page.
  • rel - This describes the RELATIONSHIP that that page has with this one.
  • type - Well, what type is it, of course. No points for guessing that one!
  • href - We'll get to this more later, but this links to another page. It is a "Hypertext Reference". Hypertext is all hyper, it wants to reach out somewhere out of your page.
The last one, the href has a value:

This is called a URL (Uniform Resource Locater...if you just needed to know), and it tells you where that file is. This favicon is located on my own Googlepages, which I mainly use just for this kind of stuff. For now, go ahead and just use mine. If you want to use it on a website on the Internet, please feel free. You can download it and stick it on your server...we'll get to all that later. Just do me one favor if you use that, or any other image of mine...give me a link back to this site.

Anyway, if you save that page as is you will now see the little favicon displayed when you load that web page into your browser. So, how do we go about making one of these. There could be many ways, but I will show you with Gimp.

Alright, lets do this step by step:

1. Get Gimp at
2. I will assume that you installed everything fine. Then start up Gimp.
3. Go to "File" in the main section. Not in the little Toolbar floating section.
4. Under "File" choose "New"
5. When the "New" dialog box comes up, change the values for the size of the image to 160px by 160px. BEFORE you close, also go down and change the "Advanced Options" and click that to open it up. Go down to where it says "Fill With" and choose "Transparency"
6. The new image opens up. The squares indicate the "transparent" layer.
7. Do what you want. Keep in mind that you will need to keep it simple in order to still see it well when you create a Favicon.
8. Okay, once you have it as you want it, you need to decrease the size. Go to "Images" and look for "Scale Image". Where it says "Width" change the value from 160 to 16. You don't have to worry about the'll see the little change link on the right which shows you that the two are linked (which they are by default...if not, just click it to lock them). Click "Scale" on the bottom right.
9. Okay, now the important part. Save the thing. Go to "File" "Save As" and navigate to the file that you want to save it in. In the name bar, type the file name you want for it, and then end it with a file extension ".ico" so you may want something like "myFavicon.ico" or "I.ico" or whatever. It will ask you about a 32bit compression, just click "Save"

This tutorial was created for use on Gimp 2.6.6 on Ubuntu Linux. If you have another version, you should have no problem following along. It may just require a little more innovation to get the thing working. It is, after all, a rather simple process.

In the next tutorial we will look at perhaps the most important thing about html and the world wide web...LINKS.

Friday, September 25, 2009

Non Nerd HTML 3

This is the third post in a series of posts to help teach you HTML. It's really simple to learn the basics of HTML and this tutorial will take you through step by step.

In the first part of this tutorial I showed you how to just get started and be able to view something in a browser such as Firefox or Google Chrome.

In the second part of the tutorial I taught you the basics of formatting body text, using the paragraph, header and div tags.

In this part I am going to explain the basic header tags and explain what the header is for.

Lets start with what we had before and carry on from there:


<p>Learning HTML is not that hard.&nbsp; Actually, it is rather fun.&nbsp; It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly.&nbsp; I guess that if I start building lots of websites, the paragraph tag will become important to me</p>


If you use Firefox or most modern browsers, you will have the option of tabbed browsing. If you run the above page in your browser, you will see that the tabs don't give you a nice name for your page. How do you change that? With the title tags.

<title>Your Page Title</title>

The title tags are important for many reasons, including telling search engines what your page is all about. Various browsers will display the text of the title tag in different places, but often it shows up on the top left hand side of the browser on your screen.


<title>Your Page Title</title>


<p>Learning HTML is not that hard.&nbsp; Actually, it is rather fun.&nbsp; It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly.&nbsp; I guess that if I start building lots of websites, the paragraph tag will become important to me</p>


There are many things that can also go into your web page between the head tags. These include:

1. DOCTYPE Declaration - where you tell the browser which 'flavor' of html you are using. We will cover that later.
2. Meta tags - or the "about" tags. These tell search engines, browsers and servers information about your page, and can even have simply the name and contact for the webmaster (in this case - you.) We'll get to these.
3. Various scripting tags...We'll talk about these in future tutorials such as when we start with JavaScript.
4. Style tags - These help us keep the styling of our page separate, and let us put it into a separate file, or into the header. We'll cover this in great depth in the CSS tutorial.
5. There are various other things that can go in here. Our next tutorial will be a brief one of these, just for fun...adding a favicon

As you can see, an html head section, i.e. the bit between the head tags, is basically providing information about your page, how you want it styled, displayed, searched and what stuff you want to go on on the page with scripts.

Non Nerd HTML 2

This is the second post in a series of posts to help teach you HTML.  It's really simple to learn the basics of HTML and this tutorial will take you through step by step.

In the first part of this tutorial I showed you how to just get started and be able to view something in a browser such as Firefox or Google Chrome.

Now in this second part I am going to deal with the most important tags in your body element. This lets us design our body a little bit, rather than just having a plain bunch of text running down the page.

So in this page we will cover the most basic tags for the body section. This is the stuff that you will see displayed in the browser:

1. Paragraph tags <p>Paragraph Tag</p>
2. Header tags <h1>You get from h1</h1><h6>Through to h6</h6>
3. Division tags <div>Division Tag</div>

If you read the previous HTML tutorial on this blog, then this becomes rather easy to implement. However, there are a few new things to learn about how these tags are used.

Paragraph Tags

Lets start with the Paragraph Tag <p>

As mentioned above, this tag goes into the body part of your html document. This tag is rather simple, it is for distinguishing one paragraph from another. Let's create a simple example and then I want you to try it out in your text editor and see if you can get it to work:


<p>Learning HTML is not that hard.&nbsp; Actually, it is rather fun.&nbsp; It is amazing how easy it is to learn the initial stuff that helps me get web pages up in my web browser.</p>
<p>I will test this in my browser to see what it does shortly.&nbsp; I guess that if I start building lots of websites, the paragraph tag will become important to me</p>


Okay, lets learn a few things. First of all, you should notice that we don't have the <body> and </body> tags on the same line any more. This is important, so pay attention: In HTML spaces are ignored except for spaces between lines of text, which simply add an additional space.

Also important is that in a line, only one space is used. Therefore, if you look at the way that I have written he HTML code above, after the end of each sentence there is a little bit of 'code' in there, &nbsp;. This little bit of HTML code means "please add another space here." It is very useful, because you can put in multiple spaces wherever you need them in your text. It is the only way to get a double space.

You can do the same thing with a line return and then the &nbsp; peace of code. Experiment and see if you understand how it works.

The paragraph tag, and same with the header tags below, take you onto a new line and divide the text from other text in the page.

Therefore, if you did this:

<p>I am going</p><p>break up this little</p><p>peace of text</p>

It would do the same as if you had written the code on different lines. It is so important to 'get' the concept of spaces in html versus what you will get on the page, that you should play around with a few example of it...try it out and see what you get. The more you practice at this stage, the more firm your foundation will be once we start adding style and later scripting to your HTML page.

Header Tags

If you understood the paragraph tag, then the header tags are really easy to understand as well. They are for making headers in your page. Of course.

There are six levels of tags, and for a number of reasons it is usually best to start with the biggest..the <h1> tag (perhaps if you use it for the actual title of your page) and then work your way down the list. It is not a hard and fast rule, simply a good idea. You will find you seldom come to the <h6>. Most of the time you will probably be fine with <h1>, <h2>, <h3> and <h4>.

Just like the paragraph tag, these header tags all start on a new line, and the lines themselves correspond to the size of the lettering in that title tag. Again, play with them and see what happens.

The actual style of these tags are not set, and so different browsers display the tags slightly differently. That's an important thing to start to learn about HTML, that you need to try to always develop your pages as a compromise between different browser. That discussion belongs more in the styling section, when we will learn CSS.

Division Tags

The previous two tags seem functional right from the beginning. In fact, just learning the little bit of html you have up to here, you could produce a web page, that you could put up online, and show nicely separated text and titles as a peace of written work.

But the Division or rather 'div' tag actually does very little by itself. However, think of it as a marker for the different parts of your page. This is going to become more important as you learn styling and eventually scripting later on. It gives you sections of your text to work on...So you could have a header section, a main body section, a navigation section (we'll talk about navigation in a tutorial soon), a footer and so on. Each of these bits can be styled differently or told to do different things. For now only worry about remembering to put them in as you divide up the different parts of your HTML document.

Non Nerd HTML 1

Lets see where we are:

I am making the following assumptions:

1. You have a computer at your disposal
2. You do know how to turn it on, and get your operating system up and running.
3. You know what a web browser is - the program that you click on to get to the Internet.
4. More seriously, do you know how to find a file and navigate your file directory?
5. Do you know what a text editor is?

6. I use Ubuntu Linux Ubuntu Linux, and it is going to be easiest to follow along if you do to. If not, don't worry, we will still get you up to speed. If you use Internet Explorer and can't get certain things to work, please email me or leave a note in the comments. Alternatively, you could send me a tweet.

Good, if you are still with me, then lets jump right in.

We'll get to the "what is" stuff later. Lets get right into making our first web page.

Open a text editor, a really plain, basic one. If you are on Windows, use Notepad and if you are on Linux, use the default text editor. Whatever you use, don't use the

html is typed in mark-up. Don't get to worried about that for now. Type the following:


Now go "Save As" and choose a location in your file system to save it. You'll want a folder for all this stuff, because we are going to do a lot of this. Why not make a folder called "Webs" and save this file as "WebOne.htm"

So what have you got now. You have a fully functional web page that you can upload to the Internet, if you wanted to (please don't...there is enough rubbish as it is.)

Your web page does....nothing. Nothing yet. Lets look at what we have so we can understand a little of how the whole thing works.

We basically have three 'containers' each of which starts with an opening tag and a closing tag. are the three opening tags and, of course, and are the three closing tags. Get use to this...It's basically what HTML is all about.

Now, lets do something with it. We want some content. Think of the stuff in the body tags as being the bit that actually ends up on the screen. So, lets add some stuff here.

In your text editor add a little text between the 'body' tags:

<body>Shine on you crazy... </body>

Now go ahead and save it. You need to save it with either a .html or .htm file extension. Either will do fine.

The next step is to actually see it in your browser. Open your browser (Internet Explorer, or even better, Mozilla Firefox.)

Note: In this tutorial I will later on start to talk about various browsers, but while we are learning the basics, I am going to mostly assume that you are using Firefox.

Spread Firefox Affiliate Button

Go to the place where you enter the websites that you want to go to and clear whatever is there (probably your default home page.) Now type the file path to your new HTML file. In Linux it is going to be something like this:


 Saving the file in Ubuntu Linux.

Saving on Windows XP

And hit return/enter and you should see your page displayed. If it didn't work, please post in the comments or on send me a message on Twitter

Thats the first step. A really easy first step. To get it right you would now have learned:
1. The three basic mark up tags that form a web page (html, head and body)
2. Where the stuff that you see on the page goes (i.e. between the body tag)
3. How to save your htm file

Right, so now you can put readable content into an html page.  That's great.  Celebrate.  But it was easy, wasn't it.  In the next section we are going to cover the basics of formating the stuff in your body.

If you enjoy learning html with me, please subscribe to this blog

Wednesday, September 23, 2009

Mark Shuttleworth Announces Ubuntu 10.04: Lucid Lynx

I just had to stick this one in here. A couple days ago Mark Shuttleworth, one of the most significant free software personalities in the world, announced the the next long term release of Ubuntu Linux which is going to be called "Lucid Lynx." Lucid Lynx will come out next year in April. Before that there is one more release due, Karmic Koala.

If you don't know what Ubuntu is, check out their website. Ubuntu is a free operating system, created both for desktop computers and servers.

Tuesday, September 22, 2009

Beginner Comprehensive Web Authoring Tutorial 1 An Introduction

Welcome to the Non Nerd Free Comprehensive Web Authoring Tutorial.

If you are a total beginner to the whole idea of designing a website, but would love to try it, and maybe learn it properly, then this blog is for you. I am going to take you incrementally through, step by step, from knowing nothing to deploying very clever websites on the Internet.

I will not try to pretend that I provide the best tutorial. There are many many web authoring tutorials out there. As we go along I will give lots of links so you know where I may have learned my stuff from, and so that you can choose where you want to learn. You may find that I teach one aspect better than another, and so choose to learn other things from those who teach them best...great. But this blog will depend on readership. If after a while I see that there is no real traffic, and no comments, I will can the project and assume that you found better tutorials elsewhere.

Now, what do I want to teach you. Well, if we carry on with this long enough, EVERYTHING. Let me summarize my goals:

1. Teach you what a website is, what HTML is and teach you the basic syntax of HTML. This bit is fun and easy. I will be focusing on development on HTML 5 the soon to be released version of HTML.
2. CSS - The styling of your web pages.
3. Basic JavaScript - Breath a little life into your otherwise dull pages.
4. A little about servers and uploading websites...Get what you have done so far out there.
5. More advanced JavaScript and an intro to Ajax.
6. Blogging with online content management systems, and customizing them...we'll start with blogger.
7. Move on to more complex things...PHP, Databases and on and on. At this point you will need to download a server to your computer...don't worry, it's not that scary.
8. SEO and will be preaching and stern words.
9. Perhaps, later on, we may also start with Flash.
10. We'll move into more detail on only with Apache.
11. Freelance Web Design and making a living from doing websites.
12. If we are still together, then it will be Python next,
13. And Java (which is not JavaScript.)
13. Well, it all depends on what's happening with this blog, what's happening with the world wide web, and if I am still interested, finding the time and so on.

What am I not going to teach you? Things like Dreamweaver or Frontpage. I want you to cut the code by yourself...especially in the beginning. I think you will thank me later.

What are the characteristics of my tutorials...I teach in a very simple manner...almost like I teach my kids. I love teaching and it has been a big part of how I guide.

I have been, and I am still, teaching myself these things. I am not an expert, but I do LOVE to learn and I LOVE to teach. Come along for the's going to be fun. Please leave comments, ask questions, correct me when I am wrong, and lets get to know each other through this experience.

About Me

I live in Namibia and grew up in Kenya.  I did study some programming at school, actually for a number of years, but it was always in Basic.  At the time I loved it, but eventually got into sports and things like that, and dropped my interest in programming.  I carried on doing well with maths and had some interest in graphic design and things like that.

But for year, till today, another interest took the lime light...nature.  I studied Nature Conservation Management before moving to Namibia in 1998 to take up tour guiding.

I started working at a lodge, and in 2003 I bought a computer and started to learn stuff.  I found a book that my wife had bought in her study years, "HTML by Example" A. Navarro & T. Stauffer, 2000, Dean Miller, USA.  It got me off to a good start.  Each day I couldn't wait to get home to dig into my book.

I started a website for a company I wanted to, and headed strait into the recession.  I was aiming at niche market travel, something you want to start in peak times.  Anyway, the website is still up, but sort of lost.  I did that website on a Windows machine using Frontpage, which was determined by my host.

Soon after that I discovered blogging, and created my first blog, which, at the time of writing has over 120 posts and more than 30 people subscribed.

I also have more of a story telling blog, which has it's theme of stories from the wilds of Africa.

Those are fun blogs, and I actually started a whole bunch more, but reduced them to those.  There was one other blog that I held on to, this one.  I was planning to eventually delete it, but I started to see that it was catching on even when I hardly had any content.  So I decided it was worth working on.

I live in Windhoek, Namibia (which is in Africa) and live with my wife and two small boys.  I still guide, but I am trying to do more to stay home, and I hope that this blog, and designing websites in general will help to contribute to that.

I use Ubuntu Linux, though I still run windows on a partition of my main computer's hard drive.  I love open source, especially since I started to learn a lot of this stuff when I had very little money to waste on it.

I also enjoy learning to fly, and it's one of my reasons to use Microsoft...I think FlightGear still needs some work to catch up with Microsoft Flight Simulator

This site will live

I have just had a look at Google Analytics for this site, and in the last month this site has had 127 unique visitors. I have not links to this site anywhere, it isn't linked in my blogger profile, I haven't done anything to promote it. And yet they come.

So, I guess, I am going to start off producing some posts on this blog.

So please dear random visitor, tell me what do you want me to post about. I think at this point I could do posts on the following, all at really beginner level:

1. Full web authoring tutorial for the beginner ...from nothing to getting your page up on the internet
2. Just html (to easy, I think)
3. Html and css
4. Intro to Javascript
5. Intro to php
6. Blogging general
7. Blogging promotion
8. Blogger specific tips and tricks

Leave comments, take my survey or even send me an email (frantic.naturalist @

Monday, September 21, 2009

Contact Details

You are welcome to email me at vernon[you know what comes here]

Please also follow me on Twitter at

I enjoy taking pictures and you can see some of the fun ones at my Flickr Photostream. Please leave a comment on pictures you like, and ask questions if you want help with Photography.

Please feel very free to contact me about any web development stuff you have. If I don't know, I may be able to find out, and we can learn together.

Friday, September 18, 2009


Hey, gained a new follower. Well, if you look at the dates on this blog you can see I don't come here often. But I do plan soon to kick off my own blog called Sandcurves. It will have lots of things relating to blogging, web design, photography and photo editing and anything else that I have an interest in. I am in the process of changing my whole life to do more web/photographic stuff and less tour guiding. Stick around, I will post when the blog is up and running (perhaps another two or three weeks)

the url is