Website Design Tutorials

Tutorial Part 1: Creating a basic home page

Requirements for this tutorial: Windows 95/98/Me/NT4/2000/XP

Now we are ready to start writing our site. For the purposes of this tutorial I am going to teach the way I know, and the way I feel will be the most beneficial in the long run. To write our website we are going to use Alleycode, which you will need to download here. Once you have downloaded this program, run it and follow the installation wizard.

Once the installation has finished, before we open alleycode we need to setup our website directory structure - this makes things much easier when we eventually upload our site. Make a new folder and call it "mysite" or something similar. In here we need several more folders:

includes - this will eventually hold our css files and any other external includes.
images - this will hold any images that we want to display on our site

Now open Alleycode. Create a new html document - from the file menu select new>html project. You will see something similar to this:

You can also download this "new project" in text format.

Before we continue lets just have a quick look at the code on this page so we understand what it all means:

Example file with annotations

The next thing we need to do is save the file - on the file menu click save as, name the file index.html (This is the most common name for homepages and sticking to this name will make things easier when you come to uploading your webpage), and save it in the "mysite" folder that we created earlier.

Once you have saved your page navigate to "mysite" and open the file index.html in Internet Explorer (or whatever you use as your default browser). At this point you will only see a blank page - that is because the code we have analysed above is all invisible to the user.

Now lets return to our web page in Alleycode and we shall add some content. First of all lets give our page a title, find this line of code:

<title> Your Title Here </title>

And replace "Your Title Here" with "my first webpage".

Now find the <body> tag, below this tag we will place most of the veiwable content in our site. Under this tag add the following code:

<h1>My First Webpage</h1>
<p>Isnt it great?</p>

The h1 tag is for our main heading and the p tag is for a paragraph. You can add your own text in between these tags, but if you copy the code above and save the file, when you open it once again in internet explorer, it should look like this:

Basic Page

The next thing we want to create is a navigation system - this will make it easy for our users to browse through our site if we have more than one page. The easiest way to create navigation is in the form of a list, we will place the following code before our <h1> tag:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.htm">About the site</a></li>
</ul>

Now save the page again and open it up in internet explorer, you should see something like this:

Basic Page with navigation

Obviously for the navigation to work you need to create another page and save it as "about.htm" - the easiest way to do this is to re-save your index.html page as about.htm - this way you will have another page with exactly the same layout - this is very important in website design as it will help create a unified feel to your site.

Tutorial Part 1.1: styling your homepage using CSS

For this tutorial we are going to use the external style sheet method - this is the most useful method because having all the styling in a seperate file makes it easier to implement these styles on a sitewide basis and anything you change in the stylesheet will automatically change on every page of your site - pretty important if you have a very large site!

The first thing we need to do is create our stylesheet. Lets go back to Alleycode and using the file menu we'll choose new>stylesheet. Now save the style sheet with the name style.css and put it in the includes folder located in "mysite".

The next stage is to link this stylesheet to our home page, to do this we need to place the following line of code:

<link rel="stylesheet" type="text/css" href="includes/style.css" >

On our home page directly below the <head> tag.

Now we are readly to style our site. Lets start by seperating our navigation from our content using the <div>> tag. So we'll enclose our navigation code in a div:

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.htm">About the site</a></li>
</ul>
</div><!--close navigation-->

Note the additional lines of code in bold; we have given our div and "id" this will make it easy for us to single out our navigation in the stylesheet. We have also annotated the closing of this div - annotations should be made throughout your code so that if you ever need to edit it, it is easy to know whats what.

Next we'll enclose the rest of the page in its own div creating two sections to our site; navigation and main content:

<div id="content">
<h1>My First Webpage</h1>
<p>Isnt it great?</p>
</div><!--close content-->

If you save this file and then open it in Internet Explorer, it will still look exactly the same, so now for the interesting part - adding our styles to the stylesheet.

Go back to style.css in Alleycode. We are now going to add some formatting to our page. First of all we want to sit our navigation menu on the left hand side of the page, to do so we add the following code to our stylesheet (note that /*In stylesheets, comments are done with a forward slash and asterisk to open and an asterisk and forward slash to close*/):

#navigation
{float: left; width: 18%; border: 1px solid;} /*this will sit our menu at the left of the page fix its width and give it a border*/

Now lets make the content slightly thinner so that it sits next to the navigation:

#content
{width: 75%; float: left; padding: 20px; border: 1px solid;} /*this will make the content float left (the way that css works means that if there are two elements floating left, they will automatically
sit next to each other - unless their combined width is greater than the width of the containing block or 100%) it will also give the content a border and some padding*/

Now, remember earlier we made our navigation by means of a list (ul). Well now we are going to tame the list and make our links look more button-like:

#navigation ul
{list-style: none; margin: 0px; width: 150px; margin: 0px; padding-left: 0px;}
/*this will remove the bullet points, margins and padding and set a fixed width*/
#navigation li
{margin-bottom: 2px; margin-left: 0px; text-indent: 0px; padding-left: 0px;}
/*this will create some spacing between the list items*/
#navigation li a, a:visited
{text-decoration: none; border: 1px solid; display: block; height: 2em; line-height: 2em; margin: 0px; text-indent: 0px; padding-right: 2px;}
/*this will remove the normal link formatting, give our links a border and ensure the whole area is clickable*/
#navigation li a:hover
{background-color: #000096; color: #FFFFFF;}
/*this will give our links a background when you hover over them (a basic button effect)*/

You now have the beginnings of your webpage and you can move on to the upload section of our guide and get your site online.

As you can imagine there is a lot more you can do as far as styling is concerned, but dont loose track of your main goal - to present information to your viewers. If you keep this in mind you wont go far wrong.

Tutorial Part 2: Uploading your site

Firstly you need to sign up for an account with 1and1 here. When you follow this link you will be taken to the 1and1 home page, you will see a textbox with get your domain name today written above it. Simply type your domain name in here and 1and1 will check if it is available, or if it isnt, make some suggestions on alternate names.

Once you have found the domain name you want to buy, click continue, now you will be given the option of purchasing just the domain name or also hosting (The beginners package is just £1.99 per month plus VAT) and will include everything you need to get your site online.

Once you have your domain name and your hosting account, you will be given login details and ftp details, keep a hold of these as you will need them in the next step.

Now we need our FTP client, for this I would recommend Filezilla, available for free here.

Download Filezilla and follow the wizard to install it. Once it is installed run Filezilla and from the file menu select "site manager".

Once in site manager you will be given the option to add a new site, now you need the details you saved earlier. All you need to enter is:

the "host" - Which will be the ftp server 1and1 provided you (normally just your domain name without the "http://www.".
Change logon type to "normal"
Your username - provided by 1and1
And your password - also provided by 1and1

Once you have entered these details, click on connect. You will now have two panes in Filezilla - on the right will be the root directory on your hosts server, and on the left will be your local computer.

All you need to do now is upload all the files and folders from the directory "mysite" that we created in the previous tutorials. Once this is done, type in your URL (the domain name you purchased earlier) in Internet Explorer, hit enter and if everything has gone to plan, the site you have created should appear in front of you! Now all you need to do is get some visitors!...