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.
1.2 Versions of HTML and Browsers
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
) 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.
1.3 General Design Guidelines
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
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
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.
1.5 Server And Uploading Files
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)
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
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