Reprints Online

In depth guide to creating your first website

1000's of people want a website, but haven't got the time to trawl through 1000's of tutorials. Or they may be put off by the high cost of true web designers. I thought to myself, why not create a simplified, easy to read and follow, article? So I did, and here it is.

In this tutorial I will use http://www.blackseaproperties.com as an example as the site is very well layed out and w3c compliant. What did I just you say you ask? Well the w3c is like the government of the internet, who govern the standards of internet coding. Internet coding includes CSS, HTML, PHP, .asp and more, I'll explain this later. For most sites, HTML is the standard code used as it is a very easy and simple code to use, the blackseaproperties does use a little PHP, but I will cover this in a later tutorial. You will need special software for this tutorial. Luckily there is a free and paid option. You can buy MS FrontPage, by Microsoft, or you may already have it as it's included in MS office 2003. Or you can use the free, but very good, HTML-kit by chami.com or the NVU web design programme.

Step 1

Choose the subject of your site; this could be your hobby, profession, or a small site regarding yourself. I am assuming you have a good idea of what you wish your site to be about. Now its time to start coding. Well, I say coding, but the 3 programmes I mentioned actually use a WYSIWYG layout. This means what you see is what you get, in other words, it is use the same tools as word, and is as easy as word. All you do is creating the look and design, and the programme does all the coding automatically. So, let's say you are using NVU. Download it (for free) from the NVU website. After install, go to start> Programmes and select NVU. NVU should then load up. You'll be greeted by a blank white screen with the NVU site manager on the left.. First off we are going to create a table to hold everything in place. So click Table> Insert> Table. You will now see a menu box, with a grid. Hover your mouse over this grid to choose how many cells and columns you want. I selected 3x3. Then click and the programme will create the table. Click and drag the table to the size of the layout box. Then click and drag across the top 3 cells to highlight them. Now right click the cells, and go to join cells. This creates one cell, across the top. Repeat the process with the bottom 3 cells. You should now have something that looks like this.

If you haven't, go back and repeat the process or e-mail me, teamyorkshireRC@googlemail.com for support. Now its time to make this look more visually attractive. We'll do this by changing colours. Firstly though, right click the left column, and right click it. Then go to table insert> row above. You should then have something, like this

I have now divided the table into 5 simple areas, as shown in this diagram Of course, your layout is totally down to you, but if you do lack the design skills, just use mine.

1st off, I always create the banner or header image, you can customize this in programmes such as Photoshop or MS paint. Use the px menu on the edge of the layout area to ensure the header is the same measurements as the cell it is to be contained in (Header cell) Go to insert>Image and insert image. Choose the file you want, and always write an alternate text for people who have a slow loading browser or have poor eye-sight, who can use the alternate text to determine what the image is showing. Now you should have something like this

Now you have the foundations of a website, and are around 2/8ths of the way to a stunning website, how you want it to look. Now, you see those table lines, they look a little ugly, so lets change them. You can change the size, colour and weight of them, or like I am about to do, delete them. Right click on your table, anywhere, and go to table cell properties. Now click the table tab, and copy these settings if you want to get rid of the border Click ok. Now you will still see a line, but this will not show in the final site. Now let's change the 2nd row's colour. Right Click the 1st column. Then go to background colour as shown in this menu. Tick the box if you have to. And choose a colour to suit your theme, but that still is subtle. Click ok, and you'll have 1 box coloured, in this case Gray. Repeat the process only this time in the colour selector menu, click 'last selected colour' for a perfect match. And then again for the last coloumn.

Taking shape right? You bet. Now let's add a little text. In the first column you coloured, click the cell, and write, 'Menu' or 'Navigation'. Then centre it up, and click the bold button to make it stand out. Now we should have something that looks like this. Time to grab hot refreshment; I am opting for a Nescafe Coffee. And drink.

Time to create our main menu. You can use CSS for this, so lets. CSS allows the menu to change colour as it's clicked, hovered over and active. Decide what pages you want, and make a simple sketch of your navigation, like this. All pages need to link back to your home page, and depending on your site, could link to each other too. If you see http://www.blackseaproperties.com for an example of a CSS menu. Lets start the CSS menu. Firstly, enter into the code view of the NVU programme, by clicking the 'Source' tab. Pay attention to only this section

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> </head>

Between the <head></head> tags lay all the code that will not show or affect the visual; layout of the site. Insert this code, now copy this in place of it

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <link rel=stylesheet href=style.css type=text/css> <title></title> </head>

Notice the bold part, this is what we have just changed. Paste this back into your source area, replacing your previous code. Now click the Normal tab and let's create another cell, in the navigation area. Left Click that column, and then right click, and click table insert> cell before. This creates a menu area. Now click this new cell created

Thjs area is now selected. Go back to the source tab, and paste this code, without touching anything other than 'ctrl'+'v'. This pastes the code below into the selected cell.

<div id="navcontainer"> <ul id="navlist"> <li id="active">Item one