Here are my top tips and key things to remember:

1. Put all your files (images, CSS and webpages) inside the same ‘root’ folder and keep it organised;
2. Save your homepage as index.html otherwise the webserver will not be able to find it;
3. Save images the size that you will need them;
4. Use indenting if coding by hand;

CSS stands for Cascading Style Sheets and is used for formatting web pages.  Although you can already do that with HTML it wasn’t designed to be used that way. HTML was designed as a content management language not as a stylizing publishing language. CSS offers us much more power, options and can be applied to many pages with a single entry.

In Web Design, Hyperlinks, or links as they are often referred to, are how we get from one page/place to another.    You can create a link using the a tag. 

A typical link will look something like:

<a href="http://www.google.co.uk" target="_blank">Google</a>

This link is called an absolute link because it starts with http – absolute means it will work from anywhere. It will also open in a new window or tab because we have included target="_blank". If we removed this is would open in the same window as the link.

If you have two pages in the same folder you can link from page one to page two like this:

<a href="page2.html">Page 2</a>

Links can be put around pretty much anything including images.   If you want to turn an image into a link you could use:

<a href="http://www.google.co.uk"><img src="google.jpg" /></a>

One useful tool is a bookmark which allows you to navigate within one page:

<a href="#bottom">Go to the bottom</a>
 
<a name="bottom"></a>

There are other attributes you may wish to play and they can be seen on w3schools.

In order to put an image into a webpage you will use the img tag. This tag like some others does not have an end tag so it will look something like

<img src="location of image" />

where location of image can either be a url starting with http:// or a relative path on your webroot/images/mylogo.jpg

If you want to control other aspects of the image then you can add other attributes as explained onw3schools or just use CSS.

Because the image has to be transmitted across the internet best practice tells us that we should size it correctly before uploading. This means that we only download exactly what we need – making for fast webpages and happy visitors.

Padding and Margins allow you to put space around your objects.  Margins appear outside of the borders and backgrounds whilst Padding appears within.   When specifying them they are done clockwise from the top.  For more information see the W3Schools resource for Padding and Margins.

Contact forms are one of the simplest ways of adding interactivity to your website. Here we look at how to produce a simple one using Dreamweaver with its built in Javascript Validation.

The first step in creating a webpage is to define its layout and this can be achieved a number of ways:

1. HTML Tables – simple but outdated in preference to CSS
2. HTML Frames – an ugly popular solution
3. CSS - The way forward.

If you are considering using the CSS method I strongly advise you use a grid system such as 960.gs

In the past tables were the defacto way of creating page layouts however this has been superseded by CSS.  However tables remain incredibly useful for structuring data within a webpage.   They are as simple as a table in MS Word or any other word processor.

There are a number of tags available within the table structure including:

• To create a table you should start with the table tag e.g. <table>  and </table>.   
• The row tag <tr> is used to create rows.
• The cell tag <td> is used to create cells.
• The head tag <th> will allow you to create special title cells.
• The <thead> tag will give you a header area to your table
• The <tfoot> tag will give you a footer area to your table
• The <tbody> tag will give you a body area for the main data in your table.

You can check out:

Using tables in HTML

Styling tables in CSS

What are HTML Frames and how do we use them?

HTML Frames are a way of laying out content in a web page. The advantages of using frames are:

• Each frame can be controlled independently of the rest of the page. Therefore if you have three frames (Banner, Navigation and Content) by clicking in on a link in navigation the page can be set to reload the Content section but not the Navigation and Banner hence saving download time.

• Setting the page up in this manner also allows a Banner section or Navigation section to be re-used on many pages.

There are some disadvantages with using frames and because of this they are unpopular with web developers:

• One of the main disadvantage of frames is search engines will not deal with them properly. i.e, search engines (including most popular ones) will not index pages containing frames as its hard for them to search for a specific content and move backwards to check to which frameset each page belongs to and retrieve all the pages in the frameset.

• Its hard to navigate through pages in frames when we have more than two or three frames.

• Its difficult to print the content of all frames when compared to a normal web page.

• Some browsers doesn’t support frames, so we need to place the content separately for the people who doesn’t have frames using <noframes> … </noframes>

• We cannot bookmark individual pages using browser’s Favourites Menu.

The best explanation of how to use frames is here on the web standards website. Following the instructions here will ensure your sites are coded properly and accessible by as many web browsers as possible.