Lesson 5

Build a Web Site from scratch.

It's easier than you think!

Normist Services,
MacLeod's Cottage,
IV27 4JD, United Kingdom
Tel 44-1571855296

Copyright 2000 Normist services.

Contents

1. . Introduction
      So you want a web site;
      Where do you start;
      What this page is about;
2. . Screen Resolution
      How does screen resolution make a difference;
      How to keep a page within bounds;
      The colour schemes used in your tables
3. . Style
      What is style;
      Your style;
      Layout and colour;
4. . Resources
      Tutorials;
      Notepad;
      Verifying your HTML;
      Uploading your site
5. . Graphics
      Size matters;
      Formats;
6. . Production
      The simple mechanics of production;
7. . Traps for the unwary.
      A list of no-no's for the web page developer;
8. . Appendix.
      A place to put all those topics that do not fit in elsewhere;

Please note that this version was developed from pages written in HTML converted to a PDF file and converted back again with extensive revision.

Introduction

So, you want a Web Site

Why should you build a web site from scratch? Consider, first, some of the other possibilities: You could pay someone to design and write your site for you, but what is the sense in that! If its not what you want or need, you are no better off, besides being out of pocket.

The same, except for the expense, applies if a friend writes your web site. So it seems that you've got to take on the job for yourself.

How about using one of these fancy all-singing all-dancing WYSIWYG editors. Fine, but They are only as good as the day they were written. As the standards for HTML change, they go out of date and leave you with an expensive bill to get the newest version. In addition, somewhere along the line you are going to have to look at the raw stuff of web pages--HTML, otherwise known as 'hyper text mark up language'. One magazine reference said that about thirty per cent of the effort in producing a web site was in tackling HTML. Doesn't it make sense to learn and use this for all of your web site production?

Where do you start

First of all, you need to think about how you want your web site to appear to a visitor. If you have been using the Internet for any length of time, you must have already drawn some conclusions about what makes for the appearance of a good web site.

Secondly, you need to think about the resources that you need to get a web site up and running. These will include a text editor. You can use Windows Notebook, as I did until I had nearly finished the first edition. Some form of checker program for your HTML is essential. Even with great care, some errors will creep in. It's very hard to concentrate on the HTML syntax as well as the content of your web pages.

What this booklet/web page is all about

In this document, I am endeavouring to fill in the gaps that are not emphasised in some of the other similar resources. For example, there is an excellent HMTL tutorial based at 'http://www.pagetutor.com,, but more of that later. The actual mechanics of making changes in your web pages is very easy and this also is dealt with later. Finally, there are other resources that I found useful and will describe later.

Return to contents

Screen Resolution

How does screen resolution make a difference

This section is not a hard and fast set of rules, but is an easy solution to one of the problems that face producers of web sites. Try for yourself how the Normist web site stands up to different resolutions. It was written using a screen resolution of 1024 * 768. However, the main body of the text will fit on a screen with a resolution of 800 * 600, and is just about readable at a resolution of 1600 * 1200.

NOTE: When the site was first produced, Normist was restricted in width to 640 pixels by using tables with a compatible color outside this frame. In this version, the width of the content is restricted to 744 pixels so that it fits on a screen 800 pixels wide.

Some people use screen resolutions outside these limits, but you have to draw the line somewhere! The only other solution for extreme resolutions is to detect what the visitor is using and redirect to a specially prepared page. E.G. a page prepared for internet-ready telephones, but this is best handled with Cascading Style Sheets.

How to keep a page within bounds

Use tables! By using a large single-celled table with other tables configured inside, you can control the effective size of your web pages. Experiment with this idea on a file called 'template.htm' and you can then ensure that your 'house style' will be consistent throughout your web site by basing all your pages on this template. See the Table Tutor section on the Web page tutor. Again this ploy applied to earlier editions of Normist which went on to uses frames and CSS and now just uses CSS.

The colour schemes used in your tables.

In this web site, I have deliberately attempted a style which I hope is cosy and informal. The color schemes used on your web site should be consistent and generally not too outrageous. In addition, the colours used in the links should be mentioned. In general, it is best to leave these colours at their default values as visitors to your site are used to these and are less liable to be confused than if you changed the colours. In this web site, I have changed the colours of some of the links as the links are fairly obvious without this aid.

Return to contents

Style

What is style

Style is the look of the page, whether it be a printed page or a page on the web. It is sometimes referred to as 'house style' or the style of a publishing house. It makes publications from that source more easily understood because the reader is used to the style and can find their way around the page more readily.

Look at your local paper. Very often, the same sort of story is in the same place on the page with the illustrations in the same place.

Your style

Your style is important for the same reason. It helps the visitors to your web site find their way around the site. Do you, for example, want the visitor to your web site to be somewhat guided around your site, or are you happy to let them loose to find their own way. If the former, then you restrict their number of choices and if the latter then provide them with links to all your pages.

Layout and Colour

These factors will to some extent dictate your layout. The desired 'feel' of your site will lead you to a choice of colour scheme. All business perhaps calls for stark colours and layout. Informative sites can indulge in more colour, but whatever you do, don't go overboard on colour and other style factors.

Return to contents

Resources

What are resources

Resources are the things that enable you to create a web site. Under this heading come the programmes that you use, the books, magazines and other tutorials that you use to learn how to write a web site and courses that you may attend. The subjects to be covered by these teaching resources must include HTML and graphical design together with Javascript, Cascading Style Sheets and an understanding of some of the other languages involved. See also the Appendix.

Programmes

Browsers
Do not limit yourself to one browser. Out there, people are going to be using many different browsers in several different versions. Internet Explorer, Netscape, Firefox and Opera are the most popular. Browsers do not always react the same way to a given piece of HTML or Javascript code. (See Traps for the unwary).

As an internet surfer, you will have a default browser. Do not restrict yourself to just that one. Have some others on your computer and try them on your web site, both from your hard drive and from your ISP.

Text editor
Windows notepad is a text editor and can be used to write a web site: word processors are not suitable as they include their own incompatible mark-up languages. Indeed, I wrote most of the first edition of my web site using Notepad. It has three drawbacks as far as I am concerned. There is no spell checker (a vital feature if your web site is to be seen as being credible) and it can only handle one file at a time. It also uses a typeface in one color; the default font being courier (a typewriter-like font).Towards the end of writing your web site, you will find some feature that needs to be added to each of your pages. To use an editor that allows you to move from one page to another with 'cut', 'copy' and 'paste' buttons is a great advantage. You will not get your template page right first time!

HTML Checker
There are a number of these programmes around. Some tell you what is wrong with your page, while others correct your page. One of the snags with the former is that one omission can create a large number of reportable 'faults'. A snag with the latter is that it puts corrections in automatically and you don't necessarily learn from your mistakes. A question of paying your money and making your choice. At least with the shareware system, you can try before you buy.

FTP programmes
FTP or file transfer protocol programmes enable you to upload your site as easily as if you were dragging a file from one folder to another.

There is, however, a new program out that enables you to update your web site with one click of your mouse.

Again, there are a number of these programmes available and it is up to you to try them and choose one that suits you.

Search engine submission programmes
Finally, you will want to promote your site. These programmes enable you to do so with far less effort.

Learning resources

If you live in one of the bigger towns, you should be able to find an evening class on web design. If not, then try the internet. Start with 'pagetutor.com'. Apart from the on-line tutorial pages there is a downloadable version. It is written in a clear style and gives an excellent introduction to the mysteries of HTML. The two updates that must be mentioned in conjunction with this tutorial: All tags and most attributes must use lower-case, and tags which do not have a closing tag must be made self-closing, e.g.<br />.

It also covers an introduction to Javascript, a mark-up language which enables you to add a number of 'bells and whistles' to your site. Finally, books and magazines: these, of course, will vary from country to country, but do look for those which advise you both on the overall designs as well as the means to achieve them.

Return to contents

Graphics

Size matters

The size of a picture or other graphical addition to your web page is a product of the number of pixels in both width and height and of the number of bits used to describe the colour of each pixel. For example, a picture 1200 pixels by 900 pixels with 24 bits per pixel (16.7 million colours) takes up 3240000 bytes. This is unacceptable as it would take at least 9 minutes to download at dial-up speeds.

Formats

Compression can greatly reduce this number. The two compressed graphic formats used on a web page are GIF and JPG (or JPEG). Usually JPG is used on photographs and the like, while GIF is used on line drawings. However, try both and see which you like and which has the most compression.NOTE:-use'.gif' and '.jpg' in your HTML!

Size reduction and processing

Cutting the size of the picture down to 200 pixels by 150 pixels cuts the number of bytes (and therefore, the download time) by 36. Some definition is lost, but the look of the picture can be enhanced by using a sharpening process in your graphics program.

Return to contents

Production

The simple mechanics of production

The first step is to write your template page. Put this in a new folder called web site You will need some dummy text to show you how the layout works out. Now you can open the template page. Re-save it immediately as the page that you want to work on. That way you will not save it as your template when you have made additions to it. After this you all you need do is click on the save icon.

Getting your template page right saves having to put the same detail in all your other pages one after the other.

Another advantage of using a template page is that it gives you a chance to practice your HTML!

Most of the tags use both an on-tag and an off-tag. The on-tag holds the attributes (all the extra details about size, colour etc.) and all the off-tag holds is an initial '/'. It pays to add the appropriate off-tag immediately after an on-tag. Put in a return and you can add the bits that go between them. This way you stand a chance of nesting your tags correctly.

Now you are ready to start on a real page. Usually this is your home page and is usually named 'index.htm' (or '.html'). As this exists already as the template page, when you click on it in its folder under my computer, the page is displayed in your browser. If your browser is Internet Explorer, click on the view menu and select source. This will bring up your page as raw HTML in your selected text editor, whether it be Notepad or another.

Make your addition or alteration and save your page as 'index.htm'. Minimise your editor and click on the refresh button on your browser's toolbar. The change you've made appears immediately. Click on the task bar to bring up the editor and either correct the change you've made or get on with the next change.

Return to contents

Traps for the unwary

Don't use frames. Leave them to the bigger commercial sites. Having said that I have used frames on the Normist web site. It can make navigation easier, but frames are on their way out.

Don't use the blink tag. If you do, it will either have no effect or if does your visitors will depart abruptly!

Be very careful with your backgrounds. White backgrounds often do not suit the style of your pages, while patterned backgrounds often reduce the visibility of your text. For example, the background used on the Normist site was a stock Microsoft background, but it proved somewhat distracting. Reducing the saturation in a picture editor made the background much more acceptable.

Alternatively, you can produce your own. The trick is to split your image into four. Reassemble these, swopping the corners diagonally. This ensures that the image matches when it is tiled. All you have to do now is to make sure that there are no nasty hiccups where the quarter pictures are now joined.

Cut down the size of your images. Then cut them again! If a large image is essential to your site, make two versions. Use the small version to attract the visitors interest and use it as a link to the fuller picture on another page. You can use the 'target="_blank"' attribute to bring them back to first page so that they continue in the way you want them to.

Cut down on the use of Java. It can slow your pages to a crawl. If you must use them be sure to check the download times and judge for your self whether or not to leave them in.

Be careful with your navigation. Don't have any pages that you can't leave. Be generous with ways back to the start.

Be sparing of personal details. How many people will care about you as such? Similarly be careful about links to other sites. Do make sure that they all work. Try them all on a regular basis.

Do try out your site in as many browsers as you can before putting your work on the web. At the very least, try it out in Explorer, in Firefox and in Netscape.

Update your site regularly. Even if its a small change in layout or a change in the links information. Try and stay on the ball.

Keep your pages short. This page, for example, is too long. Keep your pages, if possible to no more than two screenfuls.

Do not use the excuse that your site is 'under construction. They all are under development the whole time or they should be.

Finally make sure that you check that there are no speeling mistakes. It looks so unprofessional if there are!:-)

Do try viewing your pages at different screen resolutions. 640*480, 800*600 and 1024*768 pixels are the most usual. You do not want your viewers to have to scroll horizontally as well as vertically.

Never use underlined text for emphasis. Use bold or italic text. Make sure that the only underlined text is on links.

Be sparing in your use of fonts. Times, Arial and Verdana are examples of the three main types of fonts. If possible offer your viewers' browsers a choice of similar fonts.

Do not use sound or animation unless it is vital to your theme. These can slow down the loading of your pages. The same goes for having too many advertisements.

Do not leave your site to its own devices. Look after it and update it regularly. Some pages will need to be updated more often than others. Do so and the whole web site will seem more up-to-date.

Return to contents

Appendix

This where the list of possible useful programs and web addresses is put. Some of them have already been mentioned. You will find others on the cover disks of Internet and Utility Magazines

Tutorials

At www.pagetutor.com you will find a tutorial on HTML that you can download and another on Java Script. In addition there are other tutorials at 'http://www.w3schools.com'

Text Editors

There are a number of freeware and shareware programs which are a step up from the Windows Notepad. You need a editor that has a spell checker and that can deal with a number of pages at the same time. I use Note Tab Pro from Fookes software. http://www.notetab.com

Button generators

Button Studio is the program that I used in the earlier editions of the Normist web site.

HTML Checkers

There are two types of HTML checkers that I have come across. The first type changes all your code to conform with its own specification. The other tells you about an error that it has found and leaves you to correct it. The only problem is that it reports the fault everywhere it crops up. One error can be reported in each line past the one that matters. The second will teach you to write more accurate HTML. I use CSE HTML Validator. It comes in three flavours; Pro, Standard and Lite. The latter is free.

My latest acquisition in this field is AENEAS HTML Validator. It can be used to submit a whole website to the W3C Validator page

FTP Programmes

These are used for uploading your pages onto the Web:-
CuteFTP--shareware
AbsoluteFTP
FTPExplorer
CFSimpleFTP--Freeware
QueueFTP--shareware
TerrapinFTP--shareware--http://www.tpin.com
Site Publisher--shareware--http://www.helexis.com is a new sort of FTP program.It updates a web site with one click of a mouse.

Java Script ideas

For the basics of Java Script try the tutorial mentioned above. A number of internet magazines cover Java Script. In the magazine '.Net' their Web Builder advice column addresses readers problems and gives solutions. Try http://www.netmag.co.uk/webbuilder/

Previous Lesson

Next Lesson