Warning: You have Javascript disabled. No pictures will be displayed and the site will not adapt to small screens.

Web Site Design Tutorial
How to set up a simple site in two evenings

Introduction

This is based on my first effort at producing a simple guide to setting up a web site for the novice which I discovered was started in December 1998. I have kept the original here. The ground rules are still that it should only use software available on a normal Windows or Linux PC or software for free download and unconstrained in period of use (ie Freeware rather than Shareware for short period evaluation). The intention is that a novice should, in one evening, be able to create a homepage, test it locally using a Browser, download, install and configure a File Transfer Program (FTP), FTP upload the homepage and view it online. At the end of the second evenings tutorial you should know enough to be able to set up or maintain a simple personal or club web site. You will also have sufficient understanding to start designing a site for a small firm. The stages are:

First evening

Learn about the way the HyperText Markup Language (HTML) works.
Create one or more simple pages using basic editor such as Notepad.
Display these locally using your existing browser as they are created.
Download a FTP programme and configure it for your ISP.
Upload your files and check them online using your Browser

Second Evening

Backgrounds and Colours - A few tips on adding colour to your site.
Laying things out - an introduction to Tables
Reference information - Sources of the HTML specifications and other useful links.
More about CSS - CSS can no longer be initially ignored if one is to use HTML5
Where do I go now?

The basic approach used here should lead to a good understanding of the strengths and weaknesses of HTML and will aid in the future design of clean and efficient sites. Once the basics are understood there are many ways forwards - some of you will feel the urge to invest in a HTML (Web Page) editor and graphics package to help the implementation and maintenance of a web site. I would experiment a little first - I have tried to make sure that there is nothing used on this page which is not covered in the tutorial and can not be written using a basic text editor (other than obtaining the screen dumps ) and my standard headers and footers to make it compatible with the rest of the site. Above all one must not lose sight of the purpose of setting it up - a web site is a means to an end, although I have to admit it can be quite fun.

What is HTML

HyperText Markup Language (HTML) is the mechanism the author of a web page uses to control the way text is displayed in a browser. The way HTML is used is very different to the way a word processor is used. In the case of a normal word processor you carefully format your document and it is entirely your choice how it is printed. In the case of HTML the way it is displayed is dependent on very much on how the viewer wants to view it, the size and type of display and the capabilities of the Browser - the viewer can choose to have larger character size, override your choice of colours and fonts and whether to display pictures. On top of this the document contains links to allow the reader to move from document to document. This means one has to adopt a completely different approach to designing a web page from formatting a document for printing. It is perhaps easiest to first give some simple examples showing the way HTML specifies how the text is displayed:

If one wants to put some text in bold, italics or underline it then one encloses the text in "tags" like this

<b>This text will be bold </b>
<i>This is in Italics</i>
<u>and this is underlined</u>

Note that tags are always enclosed in < > and that an end tag starts </ . Most but not all tags are paired and whatever you start continues till the matching end tag is encountered. Exceptions are a <p> is sufficient for a paragraph, <br> to force a line break and <li> starts a item in a list.

When you create a web page there are a certain number of tags you should must include, especially if you are going to use a validator site for good code - an example of a good minimal HTML 5 document is:

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<h1>First Heading</h1>
<p>Add body text here.
..............
..............
<p>
And text for another paragraph.
<hr>
Last Updated: Friday, June 16, 1998
</body>
</html>

You will cut and paste the above to give you a starting point later in these tutorials.

The<!DOCTYPE html > specifies it to be HTML 5

The html, head, title and body tags are mandatory (some browsers will display something without them but it is not predictable) . The convention with HTML5 is to have all tags lower case

The html tags tell the Browser where to start and stop parsing.
The head contains the title and can also contain other special Tags.
The title text is displayed at the top of most browser Windows and in short cuts etc.
The body contains your text. You will later learn how to define the default background and text colours within the BODY tag itself

The other tags in the example are the h (for heading) Tags ( <h1>, <h2>, etc ) which are very useful to define headings - how they display depends on the Browser and the users preferences. There are 6 levels which are shown below.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

The <p> tag starts a new paragraph - spaces and newlines are equivalent in your text input and multiple spaces and newlines are ignored

Headings and other text can be centered like this:

<h5 style="text-align:center;">Centered text</h5>

displays like this:

Centered text

The <hr> tag gives a horizontal line - useful to divide sections up like this:

The above cover some of the basic tags you will need to write simple text in paragraphs. Before we look at the most important feature of HTML namely hyperlinks I will show how some lists are generated - they are enclosed in tags, ul for Unordered Lists (bullets) or ol for Ordered Lists (numbered) and the individual items start with li for List Item tags:

<ul>
<li>Line 1 of an Un-ordered list
<li>Line 2 of an Un-ordered list
</ul>

displays like this

Line 1 of an Un-ordered list
Line 2 of an Un-ordered list

and

<ol>
<li>Line 1 of an Ordered list
<li>Line 2 of an Ordered list
</ol>

displays like this

Line 1 of an Ordered list
Line 2 of an Ordered list

We are nearly there - all that remains in this initial tour are the very important Hyperlinks and how to include Images. First Hyperlinks, where the HTML tag is more complex as it has to both display the text and contain the destination of the link:

<a href="https://www.pcurtis.com/index.htm">Peter's Home Page</a>

looks like

Peter's Home Page

and will cause a jump to the page with URL https://www.pcurtis.com/index.htm

This is a real URL for my own home page. Note that all filenames etc must be lower case on most servers.

If the page is one of your own in the same Directory on the Server (older programs including the FTP program we will use call folders Directories) you can just put the filename with its extension like this

<a href ="index.htm">Peter's Home Page</a>

This short form has the advantage that you can test your site by putting all the source pages and images etc in a single folder and checking all the hyperlinks work using your Browser before you upload it.

You may also want to jump to somewhere on the same page as in the contents list at the top of this page. The marker is a tab like:

and the hyperlink to jump to it is:

<a href="#anchor1">Click this to jump to marker</a>

If you want a .gif, png or .jpg Image which is in the same folder the code looks like:

In HTML5 the alt=" " atribute is manditory. Specifying a width and height reserve sspace so the page can be rendered correctly whilst the image is downloading.

Creating Simple Pages using Notepad or Gedit

We will use Notepad, which is built into Windows or gedit (Probably accessed as 'Text Editor' from the menu) in Linux to create our pages. Both are very simple editors but have the advantage that they have no formatting so what you see is what is in the file. Notepad is very basic and does not have proper drag and drop but does support the clipboard so you can Copy text off the Browser display and Paste it into Notepad and that is how we will start. Gedit is much more powerful and can highlight markup and look for matching parenthases and even check spelling. Windows has a free editor called notepad++ which is equally flexible.

First however we need to plan a ahead and set up a Folder for the Web Pages. It needs to be easy to get at as it will be used a lot if you set up a site - I have used C:\My Web Site echoing the My Documents folder used by Windows as a default for Documents. Under Linux I have a separate drive partition called DATA and the site is in /media/DATA/My Web Site

Secondly we need to name our "homepage". You will have noticed that when you go to a web site the entry page ("homepage") is rarely specified - there is just a / or sometimes just the folder - this is because the Server will deliver a default page in those cases. There are usually a list of default pages they searches for - almost all search for index.htm, index.html, default.htm and default.html. We will use index.htm which is recognised by every Server I know.

Thirdly we need the basic HTML and text for the page. The easiest way is to copy and edit the example above. Before starting print out this document or make sure you have this and any other Windows sized and positioned so you can move between then quickly. Then Select (highlight) the text for the example, Right Click and then click Copy to put the text on the clipboard. Open Notepad or Gedit, Right Click in the Window and Paste. Now do File -> Save As, and save as index.htm in your chosen folder for the site.

Note: The web standards body W3C now recommends a .html rather than .htm for web pages - I have kept to .htm here for consistency with the rest of my site and documentation.

Displaying and Checking Pages Locally

I find it is essential to be able to see what I am doing as I create a web page even when using a more complex editor. than Wordpad. The way to do this is to have your favorite Browser open in parallel in another window. Start your Browser and enter the page address (C:\My Web Site\index.htm) where you would normally enter a URL and you will see your new page displayed.

Whenever you want to see your changes first Save the file in Notepad/Gedit, Click on the Browser icon on the toolbar to bring it to the front and do a Refresh to make sure it displays the changes you have just saved. In Firefox Refresh is called Reload. This technique ensures you know exactly what your page will display like in a Browser and you can check what happens at different screen resolutions and when the user changes defaults like text size. You can even have Internet Explorer, Firefox and Chrome open simultaneously to check you page - just remember to Save your changes and then Refresh/Reload in each Browser. Most important of all one can check that all your local links work before uploading. It is also prudent to check any links to other sites.

Now we will try adding a link to another page onto the homepage. First do a save in Notepad/gedit to preserve what you have. Then create a copy by File -> Save As and call it page1.htm. Edit the title and the text so you will be able to see it is different and Save it again. Now reopen index.htm in Notepad and copy the following link into the body. If you are used to working with several Windows open you can open index.htm in another copy of Notepad.

Save it and when you display index.htm in the Browser where you should find the Hyperlink is displayed and if you click it you should go to your new page1.htm. Add a return link to index.htm in page1.htm and you have a simple site to upload.

Using FireFTP to upload your web site.

I used to suggest using WS_FTP LE but it is no longer available and as I want this page to be operating system independent I suggest using FireFTP which is an extension to the Firefox browser and is normally run in one of its tabs although you can use its Options to choose to always launch in a separate Window. It is very similar to WS_FTP with a local and remote display but has the folder structure as well as the folder contents on both sides. This is possible now screens are normally 1024 pixels or more wide.

You need to have Firefox installed before Installing FireFTP as an extension. Assuming you already have Firefox then:

Go to http://fireftp.mozdev.org and click on the 'Download FireFTP' link on the main page.
Let the page finish loading in order to click the Install link (do not click on the Stop button).
Firefox might display a thin yellow bar at the top saying that it has blocked installation – you will need to click on the button on the far right to add FireFTP to your "white list" of sites that you approve of.
You will now be asked to restart FirefoxOpen FireFTP by Tools -> FireFTP and the first time it will open in a tab
You can set it up to open in a window by using the internal (top left) Tools -> Options -> Interface tab and ticking the box. See below for a screendump of it running in a window

Screenshot
The setting up is easy - the following screens are accessed via the drop down at top left which shows the current connection but at the top of the list is selection for a new connection. You only need to set up the Main tab and you must have three pieces of information from your web space provider

Host: - usually starts with ftp.
Login: Your username for FTP which may be the same as for your email but not always.
Password: Your password for FTP which may be the same as for your email but not always.

Account Name: can be anything but best if it matches your ISP or web site URL
Category: can be blank

Screenshot

The connection screen contains the initial values of local directory and that on the web site. Your ISP should tell you where the web site should be uploaded to. If it is the root directory just enter a / otherwise / and the directory name - it is often a directory called /http or /httpdocs. You may be able to go to / and it should be obvious.

Screenshot

Passive Mode: Unless advised otherwise by your ISP you should leave Passive Transfers ticked as it works best for 90% of ISPs.

Keep directories in sync while navigating: This is one of the big pluses of FireFTP. If you specify both an Initial Local and Initial Remote directory this feature becomes available. Once it's enabled and you've connected to your server - every directory change you make, whether on the local or remote side, will be mirrored by the opposite side. This feature assumes that both sides are similar, if not exactly the same, in content. This is particularly useful for web designers who have local and remote copies of their files and who do not wish to have to change directories on both sides when uploading and downloading files.

Once you have set up the account you use the Connect Button to Connect

Tip - under Linux you can start it directly by typing in a terminal:

firefox -chrome chrome://fireftp/content/

Adding a bit of Colour

Now that you have seen how to upload a few basic pages I will show a few of the many more advanced features of HTML. The site you have created will be very dull as the background will use the browser default which is often gray. You can add a coloured background or use a .gif or .jpg image as a background very easily by adding a style attribute. I will first show an example then talk a little more about styles and Cascading Style Sheets CSS that is used for presentation. So lets add a background to the whole site. The image we will use is small but it is automatically copied to fill the screen. So an image is added within the body tag like this

where the file std-back.jpg is in the /gallery folder

Styles initially seem a complicated way to add presentation information but they are very powerful and are the only mechanism when using HTML5 for all but the simplest things like bold and underline. Now to a few basics for inline styles (there are other more versatile ways to use styles through style sheets and placing them in the head) before we come to some examples:

The style attribute has a series of sets of parameters separated by a colon and ended by a semicolon. eg style="color:red;"
You can only have one style attribute but it can contain many sets of parameter:value; eg style="color:red; font-weight:bold;"
You can add spaces to improve legability but it is not usual. eg <span style="color: red; font-weight:bold;">
If you do not have a convenient tag to add the style to then you can use the <span> </span> for inline text ie to highlight a word in red or the <div> </div> to add a style to a big block of text. eg <span style="color:red;font-weight:bold;"> Just this phrase in a paragraph will be bold and red </span>

There are some effects which have to be applied using styles defined in the head statement such as the colours of a link before and after visiting. These are placed in a <style> </style> tag like this:

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<style>
/* unvisited link */
a:link {
color: blue;
}
/* visited link */
a:visited {
color: lightblue;
}
/* mouse over link */
a:hover {
color: #ff0000;
}
/* selected link */
a:active {
color: green;
}
/* Make all Header 3 dark red and centered */
h3 {
color:darkred;
text-align:center;
}
</style>
</head>
<body style="background: url('gallery/std-back.jpg');" >
............

Having been forced to reveal that styles can be placed in the head I will note that is the more common way as they can be applied to say every <h3> </h3> header tag to say have all the Header 3 darkred and centered and to save space you will find I have already done that in the above. Convention is to put each attribute on a separate line for legability.

Note that not all colours exist but you can put in extra colours in the form of #ff0000 where the red green blue components are specified in hexadecimal - the only way is to experiment or copy them from someone else! Black is "#000000" and white "#ffffff" . The set most browsers recognise is white, black, gray, red, yellow, green, blue, purple, aqua, teal, maroon, fuchsia, lime, navy, olive and silver. Light and dark versions of some colours are also recognised by the latest browsers, an example is lightyellow (="ffffdf") which is a useful cream for a background - I believe it is safer to use the Hex form which will work in more browsers.

Tip: Most Browsers allow you to "aquire" other peoples background images - right click on the background and one of the menu items in Internet Explorer will be "Save Background As" and Firefox "View Background Image"

Laying things out

You should normally avoid forcing an exact layout and <p> for paragraphs, <br> for breaking lines should be the starting point. There is also a useful sequence   which provides a Non-breaking Space which is very useful when you want to ensure that neighboring words always stay together and don't get split across lines or to pad out text a little.

There will however be times when one needs some control or want to change the appearance of a bit of text. For example you may wish to have a Tip in a box with a coloured background or to force some text to be at the left hand side. Tables are a good way to gain some control over layout - even tables with a single data entry are useful for the functions above or for making professional looking links.

A very basic table with a border an Aqua background and a single data entry looks like this:

and displays like this:

A tip in a box

The above shows the basic layout with a TD tags for each item of data (one in this case, TR tags wrapping the rows, only one in his case and TABLE tags enclosing the whole table. You can use styles to center the table or align it left and right with the text flowing round it. You can also force the width and height of a table (or Image) although in the case of an Image it should be set to the same size as the Image and used to "reserve" space whilst the Image is downloaded. The WIDTH can be set to be a percentage of the window size with Tables which is very useful.

Before reading further you should look at the example below in a browser window which is not maximised so you can resize it and watch the contents adapt. Good HTML design is all about ensuring the viewer (visitor) to your site retains the ability to adapt what you provide to his requirements.

This is an example cell which spans two columns.		A custom gray background
This is an example cell which spans two rows.	An aqua background	A lime background to right
This is an example cell which spans two rows.	A yellow background centered	A teal background to left

The HTML markup which produced the table above follows. This has deliberately used many examples of styles. You will not need most of them to start with as there are always defaults but they will act as a reference for when you need to do something fancy. Note the width is given as a percentage, the border-collapse:collapse is to remove all borders between the cells removing the tabular appearance but the text is kept away from the edges by the padding:5px; in each<td>. The colspan and rowspan are also useful for layout. The centering mechanism margin-left:auto;margin-right:auto; is different to before as we are centering a block not a single line of text.

<table style="width:90%;border-collapse:collapse;margin-left:auto;margin-right:auto;background-color:white;">
  <tr >
    <td colspan="2" style="padding:5px;" >This is an example cell which spans two columns.</td>
    <td style="padding:5px;background-color:#606060;color:white;">A custom gray background</td>
  </tr>
  <tr>
    <td rowspan="2" style="padding:5px;background-color:fuchsia">This is an example cell which spans two rows.</td>
    <td style="padding:5px;background-color:Aqua;">An aqua background</td>
    <td style="padding:5px;background-color:lime;text-align:right">A lime background to right</td>
</tr>
  <tr>
    <td style="padding:5px;background-color:yellow;text-align:center">A yellow background centered</td>
    <td style="padding:5px;background-color:teal;color:white;text-align:left">A teal background to left</td>
  </tr>
</table>
Copy it onto the clipboard and paste into your test file and experiment. Try putting an image into a cell and play with aligning it and changing the window size. Then try replacing the table tag with:

and see how the table is narrower and aligned to the right with the text wrapping round it because of the float:right;

This is only an introduction to the more useful features of tables - there are other attributes available as well as all the options the css offers. The above is more than sufficient for one to understand how to produce an attractive layout without too much trouble. In particular using small or single tables can save lots of graphics "buttons" and provide a very fast loading site with a professional appearance without spending money on graphics programs. Lots of big graphics on the front page which take minutes to download should be avoided, especially the flashing and animated versions which distract the eye away from what you are putting over. A front page size of 50 Kbytes total is the absolute max and under 20 Kbytes is better. Considerable care is needed or the casual visitor will depart before discovering the value of your site.

Where do I find out more about HTML?

THE place to get more information on HTML is the World Wide Web Consortium site where you will find the specification for HTML .0 which is massive but makes interesting reading. They also have validation service for HTML at https://validator.w3.org/nu/ which will show up any errors in your HTML code - the browsers are much too tolerant! n the code is correct you are allowed to display an icon at the bottom of the page as below - if you click it you will see the validation process for this page in a new window. For slightly lighter reading on HTML see the Wikipedia Article on HTML 5

Another way to learn is to look at and copy techniques and ideas from other sites. Most if not all browsers allow you look at and save the source of the page you are looking at. It is usually on the View pull-down menu or under Web Developer and called Source. Try it now on this page and find out how ©, & a superscript for dates like 12^th March and some Non Breaking spaces are done

The third way is to get a HTML Editor and use its help files. I initially made extensive use of Arachnophilia 5.5 which does not cost money as it is Careware. It has very useful help and it seems a very good general HTML editor which will import and convert from RTF files (which most Wordprocessors will save in) as well as implementing most of the HTML tags with useful wizards for Tables, Lists etc. It also has a site analysis tools which is very useful to find missing links etc once a site becomes more complex - it located a number of potential upper/lower case problems for me. It does not however offer the support of the latest software and I have not used it with HTML 5 however so take care -in particular avoid the layoutand beutification tools as they are designed for XHTML. Regardless of his Arachnophilia program Paul Luten's Site and thoughts on careware are a must to visit

More about CSS

Cascading Style Sheets are a very powerful tool for laying out a whole web site in a consistent manner. CSS is designed to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. So far I have only talked about use of the style attribute within a tag and a brief mention of putting style information in the <head>. The power of CSS is that you can have your standardised style information in an external file you link into every page on the site so you can, for example, change every Header 3 <h3> on the site to be in Arial font face and red with 4 short lines of code. The term Cascading is also very important as you have overruled the defaults for parts of the standard Header 3 but you can again overrule them for one page by redefining those values by embedding style information in the <head> section of that page then again use a defferent value for a single header by an inline style in the <h3> tag.

I am not going to provide a tutorial here - there are plenty to choose from and www3schools.com is the site which comes top in almost every css or html search and is where I most often go. It has a logical layout and online examples where you try things out and see the results.

So What do I do now?

Stop and decide exactly what you want to use the site for before spending a lot of time or rushing out and spending money on lots of fancy tools. We first wrote a Mission Statement before wasting too much time (or any money). We kept an online diary of how we went about developing our Web Site which may be worth you reading - some of it is a bit out of date and it is in several parts but have a look at Diary of a Home Page. Ultimately we irfanView for preparing Graphics under Windows and run it under Wine (Wine Is Not an Emulator) in Linux as Gimp is too powerful and not user friendly. We have a very early version of Dreamweaver for wisiwig HTML Editing which also runs under Wine on Linux although most of the time it is back to basic text editing as my Dreamweaver MX 2004 does not support HTML 5 or the latest CSS3.

The bottom line is that visitors come for information not abstract art and although the site should be designed to have an attractive appearance it must also aid them in navigating and viewing what they need quickly - the HTML is only a tool not an end in itself. I have covered almost everything I use regularly on my site and everything used on this page (other thanthe 'resposive headers and footers), look at the source if you do not believe me! At the end of a couple of evenings you should know plenty enough to be able to get your information over.

This page was the first of a set of pages covering various aspects of web site design which I have used on our site - see below: