1. Overview

Back to the Beginning

This tutorial takes you through using the HTML language used in creating Web pages. It will give you the tools to be able to write pages using graphics, text formatting, tables, frames and links. All you will need is a text editor and a WWW browser that supports tables and frames (most likely Internet Explorer 3.0 (or above) or Netscape 3.0 (or above) in a PC Windows environment. There are many HTML editors around that automate much of what this tutorial will cover, however, by going through the motions within this document you will at least have an understanding of what is going on to produce the Web page. After all, it is not really that complicated, the real skill lies in the page design and layout itself.

HTML stands for Hyper Text Markup Language. Hyper Text refers to the mix of text and graphics that contains hot spots for you to click on and lead you to other parts of the document, or to other documents either local to you or elsewhere in the wide world. Markup Language is the set of codes used to format the text. HTML has its origins in SGML which has spawned many markup languages including Clipped HTML (cHTML), Dynamic HTML, Extensible ML (XML), VRML etc.

One of the best ways to learn how to use HTML is to examine other people's documents. You can download the HTML file of a particular Web page by right clicking on the screen and selecting View Source to open Notepad and save the HTML file that is used to produce the page. When you do this, you are not saving any graphic, music or program files that are linked in by the document, just the formatting document. This HTML file can then be opened and edited using any text editor in DOS, Windows or UNIX. An HTML document is just a plain ASCII document which has the extension .HTM or .HTML. In this tutorial, I have captured images of the code, written in notepad, or included the code within the text. In addition, I have included screen grabs of how the browser deals with the code. Feel free to copy the code and try it out for yourself. It is the best way to learn! You do not need a special web creation tool, a text editor is fine.

Main Browsers include Netscape's Navigator 4.0, 5.0, 6.0 and Microsoft's Internet Explorer 5.0, 5.5 and 6.0 for both Windows and the Macintosh. Other browsers that you will come across are Mosaic, Opera and AOL's modified Internet Explorer.

HTML has developed through a number of versions; 2.0, 3.2, 4.0 and now 4.01. This document concentrates on HTML 4.01. When developing a website it is important to recognise that there are many different versions of browser that may be used by a client to view the web pages. Furthermore each browser version supports one or more versions of HTML. You can view statistics gathered by tools such as Webalizer ( https://www.linuxlinks.com/webalizer/) that analyse HTTP datagrams that hit a web site. Click on HTTP for more information on HTTP. If you drill down one of the months you will see many types of statistics based on the visits. One interesting set of statistics is that based on the browser versions being used by the visiting clients. This information is included within one of the HTTP headers called user-agent. Examining this information can help you formulate a choice when it comes to which HTML version to use when developing a site. A good strategy is to use the version that is most commonly supported, and also to inform the user of the supported browser versions.

Controlled environments such as Intranets where you control the client browsers as well as the web servers, allow you to use the latest versions without concern. This strategy however, is not recommended for Internet site development.

According to current statistics, most PCs and laptops are set to display a screen size of 800 x 600 pixels, so your web pages ought to be designed to this. This means that in an ideal world, you should display everything that you need to on a particular page within a 800 x 600 window without a client having to scroll up, down or sideways. In particular, forcing a user to scroll sideways is a particular 'No-No'! You can get away with scrolling up and down where content is being displayed e.g. text descriptions, essays etc. Pages that are jumping off points, or 'Portals', leading you to to other web pages elsewhere, should not be scrollable at all! You need these pages to be quick to load and quick to link from.

It is not enough to just consider the screen resolution. The user's client determines how much of that screen is used for the display due to the title bar, menu bar, tool bars, scroll bars etc. and these will depend on user settings to further complicate matters. For 800 x 600 you could be looking at designing to 780 x 395 which covers both Navigator and Internet Explorer with ALL their toolbars enabled and takes into account PCs, Macs and Unix-based machines.

Nowadays, practically all clients support 24-bit colour, so you can choose any colour palette that you wish. There was once developed a special palette called a Web Palette which consists of 216 colours that are common to both the PC and Mac's 8-bit (256 colour) palettes. This means that you could avoid dithering of colours when they were not in the PC or Mac's 8-bit palette. Designing a page purely using these 216 colours would guarantee colour consistency whether the page was viewed on a PC or a Mac. These days, the complexity of images used makes it no longer feasible, nor necessary, to stick to the web palette.

By default, a web page is very flexible. As you resize a window, text and graphics move around and reposition themselves accordingly. The difficulty with this is that you have no control on how the page appears, and this may be important for ease of navigation, or corporate standard, or to make it easier to read. Some control can be imposed on the layout by the use of frames and tables. If you use relative values (percentage) for cells and tables then the table resizes with the window. If you want to totally fix a web page, then use pixel values for frames and tables etc. no re-adjustment then occurs.

Providing pages that are accessible to people without graphically enabled browsers, or users who are visually-impaired, is very important. For instance, ensure that full-stops are used in the text, including ALT tags for your images, or maybe provide a text-only version of the site from your home page.

At the planning stage of the web site you need to decide whether you are going to use Cascading Style Sheets (CSS), as this affects how you design your code. We will look at CSS later on.

An important consideration is the access that users have to the Internet. Generally, the bandwidth is pretty small e.g. a 56kbps modem. Consequently we need to minimise the size of files that we use for our web pages. Text files are not much of an issue unless they are in Word or Excel format. Compressed file formats are essential for graphics (.GIF, .JPG and .PNG) and sound (.MP3, .WMA etc.). Any documents such as PDF, DOC, XLS and video files ought to be compressed using a popular compression utility such as Winzip. Always include a link to where you can download such utilities.

When you have written your code you will need to test to see how it works and to check its compliance with whatever HTML version that you have settled on using. You can check functionality by having access to a number of browsers locally, plus software that can check your code before you transfer the pages on to the Internet. Alternatively, you can use certain sites on the Internet that are able to give you snapshots of your site in various browsers for a small fee. You can use the World Wide Web Consortium's validation tool at https://validator.w3.org/ for free to check your code if it is already installed on the Internet. W3 Validator will tell you what is wrong with your code.

So far we have discussed the client-side, however the servers are where the web pages are stored along with their graphics, sound and document files. Servers can be managed by yourself (if you have direct, permanent access to the Internet), or by a separate organisation such as a web hosting company that has its own permanent Internet access. The quality of the Internet access can be an important factor when choosing a web-hosting service, so can the quality of the service and the software utilities that are available to you.

Most web servers are Unix-based so a little understanding of Unix would not go amiss (see Unix Basics for an overview of Unix commands). Web server software includes packages such as NCSA (National Center for Supercomputing Applications), CERN (maintained by the World-Wide Web Consortium), Microsoft's Internet Information Server (IIS) and the most popular Unix-based Apache (which itself is based on NCSA).

The web clients and servers communicate using the HTTP protocol. HTTP informs the devices of MIME types (media file types), URLS, content etc. Servers can have other applications that perform operations based on HTTP Requests received from the client. Interaction between HTML and applications happens via scripts built using tools such as Common Gateway Interface (CGI). A CGI script can be written in Perl, ASP, C++ etc. and the compiled binaries are often kept in a directory called cgi-bin, for ease of management. A user may request some operation to be performed such as a search, or wishes to send form content rather than just request another web page. A CGI script being called means that some 'server-side' processing needs to take place. The server responds with output from this server-side operation.

Servers are configured to support Multi-purpose Internet Mail Extension (MIME) types. The server uses HTTP headers to inform the browser of the MIME type of the document being sent back to the client. The client can then decide what to do with that document i.e. whether to display it or open another program.

Uploading your files to a server is normally carried out using FTP (see the document FTP for more details). You can do this by directly using the FTP commands within the operating system environment, or by using FTP client software such as CuteFTP or WSFTPPro.

Home