Copyright © WebsiteHowto 2003
Site created by ClickTick Web Development
If this site looks bland, you may be using a very old browser. If you want to upgrade you can choose a new browser here for free.
This section deals with the actual content of websites.
You may let your web design company produce all text, graphics and enter into a maintenance agreement with them. You may want to provide all or some content and let the designers make it into a web page. Your hosting package may have templates that make building a website breeze, if a little constraining on the content you can include.
Again this is not a how-to-do-it guide, instead it describes the constituent parts of a web page and introduces some of the issues that should be addressed when setting up a website.
The pages that make up a web site typically consist of text and graphics. The graphics may be photographs or created from scratch using a graphics package. They may be animations, they may be video. Pages may also contain a form for visitors to enter details. Usually the contain links to other web pages, these links are properly called hypertext links.
Whatever the content, the appearance of the page is partly determined by HTML that encloses the text and graphics. HTML stands for "Hyper Text Mark-up Language" and it is used to define those parts of the page that are paragraphs, those that are headings, lists, links, images and anything else that can be included in a web page. For more information and introduction to writing HTML, try the NCSA (at UIUC) Beginner's Guide to HTML.
In well-constructed web pages, a technology called Cascading Style Sheets (CSS) is used to define the way a heading (or a paragraph, or any other element) actually looks.
This page uses CSS throughout, for more examples of CSS at work visit Eric A. Meyers site at CSS-Edge. Internet Explorer 5.5 and above only implements the mandatory parts of the CSS specification, so some of Eric's work will only look its best in browsers which are more fully compliant with the standard, e.g. Mozilla, Netscape 6 and above, Safari, or Konqueror.
The splitting-up of the content (words and pictures) from the presentation (colours and spacing) has allowed HTML to be transformed into XHTML, that comforms to a far more powerful technology called XML (eXtensible Mark-up Language).
Make your text as simple as it can be, but no simpler. People's reluctance to read is increased when viewing a computer screen but don't reduce what you have to say too much. Consider linking to a more specialised site if you need to go into more detail than you intend for your site. A few appropriate graphics can help sighted people to understand your message more easily but use them in addition to your text; for the benefit of your viewers with limited sight do not use graphics not instead of text.
Of course, pages that are predominantly adverts have different requirements from purely informative text, but providing a link you're your snappy ad to fuller descriptions always helps.
In your browser, right-click on any graphic and you will probably find that the filename extension of the image is JPG (or JPEG) or GIF. Both these formats are termed bitmaps and are produced much like a newspaper photograph as a series of coloured dots (pixels). The downside of using bitmaps is that increasing the viewing size of the image just makes the dots bigger, and if taken to extremes the result is an image like those used when trying to disguise people's identity on television.
Using many large graphics files will make your page load slowly. Reducing the number of graphics or reducing the size of the files can improve the loading times greatly. Sensible use of compression when using PNG and JPEG files can often reduce file sizes substantially without a discernable loss of quality. Similarly, GIFs can be optimised. JPEGS are recompressed every time they are saved; if you are having artwork done, it is a good idea to request a copy in TIFF format.
There is no best format; they each have their own strengths and weaknesses. Each format commonly used on the web is chosen as a combination of its features and the size of the resulting file.
GIF files are good for block graphics such as logos and most non-photographic work. They can produce quite small files when properly optimised. They are not suitable for photographs or highly detailed work as they have a maximum of 256 colours available. They do have the ability to make areas of the image transparent so that the background of a web page can shine through. Animated GIFs allow simple animations to be produced with a relatively small file size.
JPEG files can reproduce photographs and high detail work extremely well but they use compression to reduce file sizes. The amount of compression can be specified when the file is saved from a graphics package - a high degree of compression will result in a comparatively small file but much detail will be lost, a small amount of compression will retain the detail but the file size may not be that much smaller. A disadvantage of JPEG is that every time a JPEG file is read into a graphics package, altered and saved it will be compressed again and further detail will be lost- it is termed a lossy compression system.
Both of these formats have been the subject of litigation with regard to their patents and came close to being taken out of use by ordinary people through potentially high licensing costs. In response, The World Wide Web Consortium (W3C) produced the PNG format that can work well with both block graphics like the GIF and GIF detail graphics like the JPEG. The format can produce features that are unavailable to GIFs and JPEGs - the trouble is that old browsers cannot handle them at all and even the latest browsers cannot yet make use of many of the advanced features. From time to time you may come across .bmp files on web pages. These are the format for Microsoft Windows; they are a poor choice for web graphics, as they tend to produce large files with poor visual quality. Nottingham University provides a comparison of GIF, JPEG and PNG
One way of producing graphics has not been mentioned, vector graphics. Drawing programs such as Adobe Illustrator and Corel Draw, rather than bitmap editing programs like Photoshop and Paint Shop Pro, generally produces these. Instead of creating the image with coloured dots, these images save the instructions on how to draw the image, for example a vector file if translated into English might read something like this: Draw a vertical line from half way up the screen to three quarters up the screen. Colour it blue. Make it one millimetre thick….
The World Wide Web Consortium has defined the Simple Vector Graphics format (SVG) that uses English-like sentences to define the image. The latest versions of the professional vector graphics products have the ability to save their files in SVG format. Few browsers have the ability to display these images directly, but Adobe, and others, provide a SVG plug-in that is compatible with most browsers. They also have a SVG demo page
Macromedia Flash has had a bit of a poor reputation recently due to web designers producing self-indulgent animations that take ages to load but add nothing of value to the site. Thankfully, the company has asked these designers to think what they are doing and to make intelligent use of Flash. Flash is a useful tool and graphics format that can be used to provide interest to a site without adding greatly to the download time of the web page; it can also be used to create some very worthwhile user interfaces. Macromedia also produce the Shockwave player, the differences between Flash and Shockwave are given here.
A less sophisticated, though useful format is the animated GIF, which uses a sequence of GIFs held in a single GIF file. Anything more than a few frames of animation using one of these will create an overly large file.
There are dozens of graphics formats but most are formats used while the designer is creating the image using a graphics packages such as Adobe Photoshop or Corel Draw. When the designer has finished the image, he or she will save it as a GIF or JPEG file for web use, in the native format of the graphics package used and perhaps an additional one in TIFF format for transferring to other packages.
The World Wide Web Consortium (W3C) stepped in to bring some standardisation to the web when it was in danger of becoming unusable. One browser would make use of HTML elements that were ignored by other browsers - even those from the same manufacturer. The W3C examined the usefulness of elements found in the browsers of the time, simplified their usage and defined HTML 3.2 as a compromise between what current browsers could do and what W3C wanted HTML to be. Beginning with version 4.0, browsers began to conform to the web standards and now, with browsers at versions 6 and 7, there is good (but not absolute) conformity. Browsers using the Gecko engine (e.g. Netscape 6 onwards and Mozilla) adhere closely to the standards. Microsoft's Internet Explorer 6 and above tends to ignore parts of the standard which are not mandatory.
The W3C provide a service whereby anyone can check any page on the web. Their web validation service page asks for the web address of the page to be checked and gives you a report of any errors in the HTML. Authors who have had their page validated successfully may use a “Valid HTML” button [like the one at the bottom of this page] to show that they have taken the care to produce valid HTML. Clicking on the button should show the results of testing the page with the W3C validator.
The Disabilities Act requires that published material is available in formats suitable for people with disabilities; this may mean making sites available in other forms, but many sites can be made accessible to most by following the guidelines of disability aware groups.
Legal requirements regarding the access of information (and pure courtesy) to people with sight deficiencies, limited controlled movement and other disabilities has brought about changes in the way enlightened web developers construct their pages.
Badly constructed pages are often unintelligible to people using speaking browsers, Braille machines and text-only browsers; ill-considered colour schemes can result in illegible text; pages that cannot be navigated efficiently without a mouse can be impossible to use by those with difficulty in making controlled hand movements. A little extra care can make a big difference.
Be careful about your use of graphics, a site that relies on graphics over text to give its message will not be usable by people using a speaking browser. Be careful to add an explanation of the graphic in the description attribute when you link to a graphic file.
Accessible pages need not be dull, simply providing a text-based menu on a page in addition to graphical menus can make a page usable. Anything that allows users to navigate using a keyboard instead of the mouse will usually be acceptable to specialist equipment.
The Web Access Initiative (WAI) has more information on accessibility.
Don't forget about copyright; you cannot copy significant portions of text or images from the web and paste them into your site nor can you take significant parts of paper documents or photographs and use the on your site unless you own the copyright, have a licence to the copyright, or the copyright has expired. For text, art and photographs this is 70 years after the author's death or, if the author is unknown, 70 years after first publication. This includes material on the Internet.
Putting a link to someone else's web page is not a copyright issue and you do not need permission to do so. Including someone else's work via a link on your page such that it appears to be part of your site could very well be a breach of copyright unless the owner's consent is given.
Until a couple of years ago web designers would go out of their way to try to accommodate old machines and browsers, often producing many versions of the same site so that it would look the same in many (but not all) browser versions and on many (but not all) older machines. There were two major considerations - the graphics capabilities of older machines and the use of obsolete browsers.
It used to be common practice for web designers to use a special set of colours that were viewable without compromise on screens that could only display 256 colours. These were known as the web-safe colours. There are very few machines still in use that have this limitation for many years new machines have been set up to 16 million colours. It is safe to ignore the web safe colours unless your audience is likely to have very old computers. Similarly, it is becoming rarer to find a screen using a screen resolution of 640 x 400 or less. Screen resolution of 1024 x 768 or more have been the norm on desktop machines for the last three or four years but do not forget visitors using laptop computers where 800 x 600 is still used in significant numbers.
