Basics of Web Design!

Let's start with the domain name.
This is the actual web address of the site and is used as part of the indexing process by the search engines so it's worth spending a fair bit of time deciding what domain name may suit you best. For example if you have a fish basket business and your company name is Acme then you could go for www.acmefishbaskets.co.uk or www.acme-fish-baskets.co.uk which would be fine. However a quick search might reveal that the more general www.fish-baskets.co.uk is still available and therefore it would be well worthwhile securing that domain as well because it may well do best with the search engines.

There are many domain registrar companies around that will provide the domain so you can shop around but beware of really cheap ones as they sometimes have other charges later on when you try to do anything with the domain. We tend to mostly use www.123-reg.co.uk as they are relatively cheap and have no charges associated to the basic stuff you'll require later.

Remember that you don't actually own the domain name, you just have the right to use it for whatever period you've paid for and will need to renew it after that.

Ok so we have the domain name organised, now we need somewhere to host the site. The domain name is just like a label or a pointer, so you actually need to purchase some space somewhere on a powerful server computer to actually host your web site and then you get the domain to point to where that is located.

Again there are hundreds of hosting companies to choose from and it's important to have a think about what you may all need before choosing one. Will you need emails, php capability, databases etc? If you're not sure yet just leave that for now.

Right, let's get the actual web site constructed!
We're going to do it in HTML 5, which is the latest recognised protocol and it is hoped it will allow web sites to be compatible across all browsers. It's worth following this protocol for several reasons and the nice thing is that the W3C web site includes a validator which allows you to check if you've done it right and will give you pointers to correct if you haven't.

Basic page instructions

To design the code behind the site you can use any of the many web design software applications or just use NotePad, which you will likely already have on your computer. In the HTML 5 protocol you need to have a standard bit of code at the top and bottom of your page and it looks like the image to the left:

Firstly you can see that it is in sections which are instructions to browsers (eg internet explorer) about how to handle displaying the page and is also used by search engines. You'll notice that most instructions use the < > opening and closing brackets, which inform the browser that this is a bit of code and not just a text word. Miss one of these out and your site may not display!
The opening line which includes the 'doctype' simply tells the browser what protocol you are using and in this case the code used stands for HTML 5. The next bit is HTML which informs the browser that everything after this is the actual html code and it ends at the /HTML point at the bottom of the page. The forward slash / bit is usually required to end whatever code instruction you've began somewhere else.
The opening and closing HEAD section contain important information such as the TITLE which is used by the search engines and should contain not just your business name but preferably the main search term you think potential customers may type in when using google for example. The TITLE is used by the search engines as the heading when it displays search results. Many businesses make poor use of this very important part of the page.
The HEAD section also contains META tags which are more info on the site including the CHARSET which is the set of characters required for the page - eg if you had a chinese site you'd put in a different charset. META tags can also provide much more info, do some research on that youself if you want to investigate further.
In HTML 5 you are forced to use an extra info page which is seperate from the actual web page and is known as a CSS page (cascading style sheet). So you can see in the HEAD section again that there's info on where the browser can link to that page - href="fishstyle.css".
The HEAD section then closes and the BODY section opens - everything contained in this BODY section is the actual web page displayed and the code in the picture above would show up on a browser as a white page with 'actual web page stuff goes here' in the top left.

Create a folder in your My Documents directory on your computer, or anywhere you can find again easily and name it FishBasket. Open it up and save this page you've just created as index.html
(when browsers go to a domain they check to see if there's a page called 'index' and will display that first, so you need to name your main page the 'index' and as you've used html to make it you then call it index.html)

OK so that's the basics but how to get the actual page looking more professional - let's learn a bit about CSS now >>