Home Pauline's Pages Howto Articles Uniquely NZ Small Firms Search
Height Padding
Web Site Tutorial

Introduction

This is my first effort at producing a simple guide to setting up a web site for the novice. The ground rules are that it should only use software available on a normal Windows 95/98/XP 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

Second Evening

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 Notepad (other than obtaining the screen dumps which used the shareware Paintshop Pro graphics package). 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 document is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
<TITLE>Page Title</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<BODY>
<H1>First Heading</H1>
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.

To identify the document as being HTML 4.01, it is recommended that documents start with the prologue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">and that you include in the HEAD section the META TAG
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
to specify that it is a European character set

The HTML, HEAD, TITLE and BODY tags are mandatory (some browsers will display something without them but it is not predictable)

The other tags in the example are the H (for Heading) Tags 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. Try changing font sizes in your Browser and they will change.

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:

<CENTER>This is centered text</CENTER>

The <HR> tag gives a horizontal line - useful to divide sections up

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

and

<OL>
<LI>Line 1 of an Ordered list
<LI>Line 2 of an Ordered list
</OL>

displays like this

  1. Line 1 of an Ordered list
  2. 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="http://www.corinna1.freeserve.co.uk/index.htm">Peter's Home Page</A>

looks like

Peter's Home Page

and will cause a jump to the page with URL http://www.corinna1.freeserve.co.uk/index.htm

This is a real URL for my own Freeserve home page. You should note that all Freeserve home pages start with www. followed by the username (the username is what follows the @ in a Freeserve Email address). 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:

<A NAME="marker1"></A>

and the hyperlink to jump to it is:

<A HREF="#marker1">Click this to jump to marker</A>

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

<IMG SRC="myimage.gif" ALT="Text that appears when you hover over the image">

Creating Simple Pages using Notepad

We will use Notepad, which is built into Windows to create our pages. Notepad is a very simple editor but it has the advantage that it has no formatting so what you see is what is in the file. It is also the program which is used by most Browsers to display the Source code if you ask to view it. 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.

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. An easy way to create the new folder is to open Explorer, select C:\, Right Click anywhere in the right hand pane which is displaying the contents of C:\, a menu will appear and click New -> Folder. You can rename a folder (or file) at any time by selecting it and right click -> Rename and editing the name which will be highlighted.

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 /. This is because the Server will deliver a default page in that case. There are usually a list of default pages it 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. You do not have to request a site with Freeserve - every user has a "site" from the time of registration. This site is initialised with a default page present called index.html - we will delete or rename this after we have uploaded our first page.

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 via the start Menu -> Programs -> Accessories -> Notepad. Right Click in the Window and Paste. Now do File -> Save As , Browse to the C:\My Web Site folder and save the file as index.htm. Notepad does not automatically wrap lines so do Edit -> Wordwrap to make life easy. You can now edit it, Paste more bits in etc and finally save it with File -> Save.

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, 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 Netscape 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 and Netscape Navigator 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 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.

<A HREF="page1.htm">Link to Page 1</A>

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.

Downloading WS_FTP95 LE

Downloading: We now need to download and installed a File Transport Program (FTP) program so we can upload the new site to the ISP's Server. I have used WS_FTP for a number of years to upload sites to conventional Servers like Pipex and Freeserve. (CompuServe needs a special program they provide). WS_FTP is still completely free for use by Students and Home users for Personal use - they hope to sell you a super professional version in due course. You will have to enter your name and email address and agree to the terms of use before you can download it. The main site for Ipswitch who provide WS_FTP is http://www.ipswitch.com/. They have made it slightly more difficult to find the free version - it is no longer listed in products and when you look in the Download Evaluations area it implies that they are all limited life - that is not true for the LE (Limited Edition) version which is called WS_FTP95 LE for Windows 95/98 and is now version 5.08. You have to fill in a short form - note it is only free for non business use so choose the correct user category. It is about 690 Kbytes and took me about 3 minutes to download with 28.8 Kbaud modem and using Freeserve. I was online for 10 minutes including looking round the site and finding where the download area was for WS_FTP LE the last time. Download it to the Desktop unless you have already created a Folder especially for downloads - I have one called C:\_Download so I can find it quickly. You can also find it and many other useful programs at ZDNET in the downloads area - the quickest way is to then use their Search boxes for WS_FTP in PC Downloads when you have linked to the Downloads area.

Installing: When you have got the file (ws_ftp.exe or wsftple.exe) safely on your machine and are disconnected from the telephone you will need to run it to install WS_FTP95 LE. It is best to exit all other programs when installing. You will be taken through several screens to check you are eligible for the free version and then checking where to install it. Use the defaults except for the default download folder where you may chose to change to your favorite folder for downloads. You can always change defaults in the future in any case.

Configuring for Freeserve When you start WS_FTP it will come up with a screen with a pull down list of connection Profiles for different FTP sites - see below. You will need to add a new one for your site on Freeserve. Click New and (assuming you are using Freeserve) enter the information as shown on the screen dump below on the General Tab (change the Name, UserID and Password to your own) but keep the Host name as uploads.webspace freeserve.net if you are a Freeserve user. You can also enter the Folder you are using in the Initial Local Directory box on the Startup Tab. The other tabs do not require any changes. Press OK and it should save the configuration for next time and bring up the Connection Screen for your default Dial Up connection. Note that you must use a Freeserve connection (via 0845 079 6699) to upload to Freeserve web space.

WS_FTP General Tab

WS_FTP Startup Tab

Uploading your files using WS_FTP95 LE

WS_FTP Transfer Screen

When you connect you should get a screen looking like that above. The left window shows the local Folder you will upload from and the right window the Remote Directories(s) on the Server hosting your site. You can change directories, make new directories, rename files etc exactly the same way in either the Local or the Remote Window although it may take time in the Remote Directory as files and changes have to be transferred through the modem and telephone line. Double Click the green up-arrow to move up a folder or double click a folder name to open it. To upload a file select it in the left window and click the -> button and the file will be transferred - the box at the bottom shows progress.

The first time you come to upload your site to Freeserve you will find, as discussed above, that there is already a file on the Remote System called index.html. Once your index.htm and page1.htm files are safely uploaded rename index.html to say oldindex.html to avoid it being used as the default homepage. Use the Rename Button by the right (Remote) screen.

Some more flexible ISPs already have a file structure set up and you may need to load into a specific folder (htdocs in the case of UKReg and FastHosts) so they can be seen by the outside world. This can be set up on the Startup Tab in the Initial Remote Host Directory box instead of the forward slash.

You now have your site up and live - check it using your Browser as usual remembering the address is www. followed by your full username on Freeserve. I usually have the Browser open at the same time as WS_FTP95 LE so I can check changes are there before disconnecting but remember to Refresh/Reload in the Browser otherwise you will see the old files and wonder what is going on! If you can not find your files or the links do not work make sure that the URLs and file names are all lower case.

Tip: You can set WS_FTP to change all file names to lower case using the Sessions tab on the Options menu. You can also choose how you sort directories to get the latest changes at the top to make life easier. Options | Sort.

FireFTP a modern alternative to WS_FTP95 LE

The last time I went to see if WS_FTP LE was available I could no longer find it, and it was originally a Windows 95 program so 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 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 at least 1024 wide.

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



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

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



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.


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. The image used is small but it is copied to fill the screen. An image is added within the BODY tag like this

<BODY BACKGROUND = "std-back.jpg" >

where the file std-back.jpg must be in the same directory

If you want also want to chose all the default colours for text, links etc then the BODY statement looks like this

<BODY TEXT="black" LINK="blue" VLINK="red" BGCOLOR="#000000" >

Note that not all colours exist but you can put in extra colours in the form of "#FF0088" 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. Also note you should only have a BGCOLOR or a BACKGROUND image.

You can change the colour, face and size of text using the FONT tag like I have done for the tip by

<FONT SIZE="-1" COLOR="#FF0080" FACE="COMIC SANS MS">

then the text you want in colour etc and end with

</FONT>

The SIZE can be relative or absolute. The FACE needs to be one which most machines support and COLOR can, as in BODY, also be given as "red" etc.

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 &nbsp; 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:

<TABLE BORDER="3" BGCOLOR="Aqua">
<TR>
<TD>A tip in a box</TD>
</TR>
</TABLE>

and displays like this:

A tip in a box

The above shows the basic layout with a TD tags for each item of data, TR tags wrapping the rows, only one in his case and TABLE tags enclosing the whole table. The TABLE tag can have attributes such as BORDER (in pixels) and BGCOLOR for background and also attributes to ALIGN to LEFT, RIGHT or CENTER. In the case of LEFT and RIGHT the text will flow round the table on the latest generation Browsers. The same attributes can also be used with Images to get text to flow round them. You can also force the WIDTH and HEIGHT of a table and an 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.

All the same attributes can be put within the TR and TD tags to position text within individual rows and cells. Here you can also change the vertical alignment with VALIGN to TOP, MIDDLE or BOTTOM.

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 gray background
This is an example cell which spans two rows. An aqua background A lime background to right
A yellow background centered A teal background to left

The HTML markup which produced the table above follows. The TABLE tag has deliberately used examples of many of the attributes. 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 or CELLSPACE are zero removing the tabular appearance but the text is kept away from the edges by CELLPADDING being 5 Pixels. Also note that attributes are then overruled and/or set for particular cells. The COLSPAN and ROWSPAN are also useful for layout.

<TABLE ALIGN="center" BORDER="0" BGCOLOR="Silver" WIDTH="75%" CELLPADDING="5" CELLSPACING="0">

<TR>
<TD COLSPAN="2" >This is an example cell which spans two columns.</TD>
<TD BGCOLOR="Gray">A gray background</TD>
</TR>

<TR>
<TD ROWSPAN="2" BGCOLOR="Fuchsia">This is an example cell which spans two rows.</TD>
<TD BGCOLOR="Aqua">An aqua background</TD>
<TD BGCOLOR="Lime" ALIGN="right" >A lime background to right</TD>
</TR>

<TR>
<TD BGCOLOR="Yellow" ALIGN="center">A yellow background centered</TD>
<TD BGCOLOR="Teal" 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 and changing the ALIGN="center" in TABLE to ALIGN="right" and see the text wrap round. Incidently the Tags and Attributes are not case sensitive but the convention is that Tags and Attributes are Upper case and Values are lower or mixed case and should be enclosed in quotes e.g. <TABLE ALIGN="right" BGCOLOR="Blue"> .

This is only an introduction to the more useful features of TABLE - there are other attributes available and a couple of other Tags such as CAPTION. I believe that they are redundant and there are other ways to get the same effects. The above is more than sufficient for to produce 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

THE place to get more information on HTML is the World Wide Web Consortium site where you will find the specification for HTML 4.0 which makes interesting reading as it indicates the dead ends and the way things will be extended. They also have validation service for HTML at http://validator.w3/org/check which will show up any errors in your code - the browsers are much too tolerant! When 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 the page in a new window.

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 and called Source. Try it now on this page and find out how ©, & a superscript for dates like 12th March and some Non Breaking     spaces are done and how I opened a new window for the validator.

The third way is to get a Web Editor and use its help files. I have made extensive use of Arachnophilia 5.0 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.

So What do I do now?

Stop and decide exactly what you want to use the site for before 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 bought Paintshop Pro 4.12 for preparing Graphics and WebEdit for HTML Editing although I would just use Arachnophilia as it is free and has all the major features. Read about it or download it from http://www.arachnoid.com/arachnophilia. More recently I have been using Hotdog version 6.6, again the older version 5.5 is often free on coverdisk CDs but I quickly upgraded to the latest version.

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, look at the source if you do not believe me! The only thing missing compaired to the rest of the site is links which change when you hover over them which come from use of Cascading Style Sheets which are useful but an unnecessary luxury at this stage. At the end of a couple of evenings you should know plenty enough to be able to get your information over.

Home page | Pauline's Pages | Howto Articles | Uniquely NZ | Small Firms | Search

Copyright © Peter Curtis
Content revised: 21st October 2003
FireFTP added as an alternative to WS_FTP 26th November 2010 		  Click to validate page in a new window