Our customers say...

" Virtual keeps me on top, on the ball and online from wherever in the world I happen to be. "

C.H.


Introduction to Web page programming (HTML) Print

One of the questions we get asked often is "So how do I make a web page?" What a can of worms this one opens up! This article is designed to introduce you to building your own web pages using HTML. By writing in HTML, you avoid the need to purchase software to make web pages. It's not for the feint of heart though. While HTML is fairly simple for advanced computer users, it's no fun for beginners! If it looks hard to you, consider purchasing a suitable tool for you web page needs.

 

One of the difficulties in answering this question is that the "language" of web pages is changing constantly. As well as the language, lots of companies are producing add-ons (often called "plug-ins") to enhance the capabilities of web pages. The truth is that we could write VOLUMES of information and never cover all of these topics. Most of what we write would be out of date in no time, and not everybody has the ability to view pages which include these advanced features.

 

So what are we going to do here? Well, we're going to introduce the basic building blocks of web pages.  Although you can use a special "web page editor", you don't need to. All you need is a text editor (or word processor - but you must save your files as raw text!), some time, and a little knowledge.

 

Introducing HTML

 

Web pages are really just text files that have had extra information added to them to enhance their presentation and appearance. These additions are in the form of "tags" which act as instructions to Web Browsers like Netscape or Internet Explorer. The use of "tags" (in one form or another) goes back many years in the computer industry, and the process of adding them to text is called "marking up". Because the World Wide Web is a Hypertext based environment (i.e. you can click on parts of the text to take you to related information), the language it uses is called HTML - the HyperText Markup Language.

 

To use a HTML "command" generally requires that you use both a start tag, and an end tag to define the effected areas of the document. There are only a small number of exceptions to this rule. Let's look at some examples now.

 

Every HTML document (web page) has to identify itself to a web browser, so that the browser knows that it's not just a text file. This is done with our first tag - the "HTML" tag. Simply, every HTML file should start with:

 

< HTML >

 

and end with:

 

< /HTML >

 

Simple, huh? The extra "/" character inside the second tag makes it an "end tag" - sort of like an off switch.

 

Now, every HTML file must also have two parts - a header and a body. The header is used to provide information to web browsers about the document. Other programs like search engines can also extract special information from the header. The body is where the information in your page goes - it is the part that gets shown to the person looking at your page. So now we have:

 

< HTML >

< HEAD >
< /HEAD >
< BODY >
< /BODY >

< /HTML >

 

The Heading (HEAD) Section

 

The heading section of a web page starts at the < HEAD > tag, and ends at the < /HEAD > tag. It can contain a variety of information, but for the moment we will add just one other tag in this section.

 

Have you ever wondered why the title bar of your web browser window constantly updates with a description of the page you are looking at? Well, that information is contained in the < TITLE > tag. Let's look at a part of the page we have started to build above:

 

< HEAD >
< TITLE >My first web page< /TITLE >
< /HEAD >

 

 

This sets the title of your page to "My first web page". That title will appear on the title bar of the web browser that views this page. Although there are other tags that we could add to the header, we'll leave it for now and take a look at the < BODY > of our page. First though,

 

A note on layout

 

You may notice that we're starting to "indent" parts of our web page. While you don't have to do this, it is highly recommended. It does add clarity to the page while you're writing it, helping you to find any mistakes you may make along the way. If you have ever written programs, you'll probably be familiar with this style of layout. The extra spaces don't have any effect on the layout of the page in the web browser.

 

Also note that for technical reasons, you might notice that we've added a blank space between the < and > symbols and the word(s) inside them in this document. When you're making your web pages, there must be NO space just inside the < and > symbols.

 

And on to the < BODY >

 

Finally, we'll put some text on this web page! Although images, sounds and the like will add impact to your page, the basis of your information will almost always be text, so that's where we'll start. We'll look at some of those other components of web pages in a later article.

 

Just getting text on the page is as easy as typing it in. Take a look at this:

 

< BODY >
Look Mum! No Hands!
< /BODY >

 

Simply putting this line of text into our web page will get it onto the web browser screen. It will look plain though - it will probably show up as fairly small black text on a grey background. Boring!

 

There are a number of ways to spice up simple text, but the most common ones are colour, size and emphasis.

 

Emphasis tags

 

We'll look at emphasis tags first, because they're the easiest tags to use. There are two basic tags in this group: < EM > and < STRONG >. Although different web browsers may interpret them differently, they normally appear as italics and bold respectively. They must be matched with their appropriate end tags (< /EM > and < /STRONG >). For example:

 

This is < EM >italics< /EM > and this is < STRONG >bold< /STRONG >.

 

Heading (< H >) tags

 

There are also a series of tags which can be used to highlight headings. Unfortunately, different web browsers may use varying combinations of attributes to represent these tags, so you may care to use different techniques for a consistent end-result.

 

The heading tags are: < H1 >, < H2 >, < H3 >, < H4 >, < H5 > and < H6 >. They need to be used with matching end tags. The basic rule with these tags is that the smaller the number in the tag, the larger the text will appear. You can think of this like < H1 > representing a "level 1 (or top level) heading", and so on.

 

Specifying the font size

 

As an alternative, you may prefer to specify the size of your text explicitly so that different web browsers show your page in much the same way. The font size on a web page is represented by a number from 1 to 7 (where 1 is the smallest font, and 7 is the largest). You can specify a particular font size by number (an "absolute" size), or you can specify a "relative" size (the amount to change the current font by). By default, text appears at font size 3. Examples, (please!):

 

< FONT size=1 >This is really small!< /FONT >
< FONT size=6 >This is HUGE!< /FONT >
< FONT size=+1 >This is a bit bigger than normal - we used a "relative" size< /FONT >
< FONT size=-2 >This is a fair bit smaller than normal< /FONT >

 

The neat thing about the < FONT > tag is that it allows you to add colour too...

 

Adding colour

 

Before we discuss the different ways of adding colour to your web page, we need to understand how colours are defined. With high resolution video cards now commonplace, there are so many colours to choose from! As in many graphics packages, colours on the web are specified on three parts. Each is a number between 0 and 255, and specifies the amount of red, green & blue respectively that make up your colour.

 

To save space, the numbers are represented in hexadecimal (base 16) format instead of our usual decimal (base 10) format. It is beyond the scope of this article to explain what this means or how to do conversions between them. What's easier is choosing your colours using a selector. Check out http://www.imagitek.com/bcs.html for an easy way to choose colours, and be given the 6-digit codes that represent them.

 

We have already looked at a couple of tags that can be used with different colour attributes. Let's look at another example:

 

< BODY

BGCOLOR=#"______"
TEXT=#"______"
LINK=#"______"
VLINK=#"______ ">

 

This is the same < BODY >tag that we used earlier, with 4 additional parameters (or attributes). Of course, you will replace the blanks with the 6-digit codes for the colours of your choice. Colours specified in the < BODY >tag effect the whole document, unless they're overridden in later tags. You don't have to include all of the attributes that we have here, but if you do, they are:

 

BGCOLOR The background (or page) colour
TEXT The colour of normal text
LINK The colour of hypertext links that have not been accessed
VLINK The colour of hypertext links that have been accessed (or Visited)

Here's another command that we've looked at before, with a new twist:

 

< FONT color=#000000 size=5 >Big & colourful!< /FONT >

 

This < FONT >tag not only changes the size of the text (SIZE=5 makes it bigger than normal), but also the colour. The effect only applies to the text BETWEEN the two tags. Afterwards, things return to normal.

 

One more text thing...

 

Have you noticed that you can't create a blank line? Try the < P > tag. It doesn't have a matching end tag, it just marks the end of a paragraph!

 

Images

 

Lets look at inserting images into your pages. The images can be saved in either GIF or JPG formats. Both of these formats are similar, and it's worth spending a moment looking at their attributes.

 

GIF images are bit mapped images, stored in a compressed format. The JPG format is a compressed version of GIF. The extra compression available in a JPG file can vary greatly compared to an equivalent JPG file - anywhere from 5% to 50% is typical. The extra compression (GIF is already compressed, remember?) is achieved through "lossy" compression. That means that a JPG image may not be quite as clear as a GIF because some of the detail is left out. While the compression used often effects the image in ways we can't see, sometimes it does. It's always worth comparing a GIF and a JPG for quality and size before choosing one or the other.

 

So why am I telling you this? Have you ever got tired of waiting for a web page to load? I'll bet you have. To ensure that people don't have this problem when they're looking at your page, you need to make sure it loads as quickly as possible. To do this, it is best to ensure that your graphics are as small as possible without effecting their quality. As a general rule, use a JPG when the quality is acceptable.

 

But, we digress. To insert an image into a web page, we use the < IMG > tag. The simplest version of this tag looks something like this:

 

< IMG src="/filename" >

 

This simply inserts the image called "filename" into your page. The < IMG > tag does not use a corresponding end tag.

 

Referring to other files

 

Seeing this is the first time we've referred to another file from our web page, we'd better take some time to discuss the different ways of doing it. It's something you're likely to do a lot of. There are two basic ways to specify a filename. Let's assume that your page is located at http://www.virtual.net.au/~mypage, and your picture is at http://www.virtual.net.au/~mypage/images/pic.gif.

 

Absolute Reference: Where you specify the full URL of the graphic. E.g.: src="http://www.virtual.net.au/~mypage/images/pic.gif"

 

This technique is fine - it always works because it is specific. On the downside though, it means you're putting a long filename in your page every time you load a picture, and that gets tedious and slows down the loading. If you ever move your pages to another site, it also means that you need to edit every filename.

 

Relative Reference: Where you only specify part of the URL, and that part is ADDED to the directory where the page itself is stored. E.g.: src="/images/pic.gif"

 

This saves a bunch of typing, and your web browser translates it to the full URL automatically. This technique allows use to easily test the pages on your computer. When you upload them to the web server, you just need to maintain the directory structure, and the pages will work in the same way.

 

A note on CaSe SenSiTiviTY

 

Most of the web servers on the Internet are based on an Operating System which is sensitive to the difference between upper and lower case letters in filenames. As a general rule, it's best to just stick to lowercase for your filenames until you're confident that you know what you're doing.

 

Image layout & other options

 

When inserting images into a web page, there are a myriad of options available. The full IMG tag looks something like this:

 

< IMG src="/filename" ALT="Text"
ALIGN= (One of: TOP, MIDDLE, CENTER, BOTTOM, LEFT or RIGHT)
HEIGHT= ##% or ###
WIDTH=##% or ###
HSPACE=###
VSPACE=###
BORDER=###
>

 

Let's look at all of these options.

 

ALT Specifies the text seen instead of your image when (a) images are turned off, or (b) the user's browser does not support images.
ALIGN TOP: Align the top of the image with the top of the paragraph it is part of.

MIDDLE: Center the image vertically in the current paragraph

CENTER: Center the image both vertically and horizontally in the current paragraph.

BOTTOM: Align the bottom of the image with the bottom of the paragraph it is part of.

LEFT: Align the left edge of the image with the left hand side of the screen.

RIGHT: Alight the right edge of the image with the right hand side of the screen.

HEIGHT Re-sizes the image on-the-fly. Either a percentage of the total browser window height, or an image height in pixels.
WIDTH Re-sizes the image on-the-fly. Either a percentage of the total browser window width, or an image width in pixels.
HSPACE Specifies the width of the gap between the sides of the image and any surrounding text.
VSPACE Specifies the width of the gape between the top and bottom of the image and any surrounding text.
BORDER Specifies the width of a line around the image. If this image is part of a link (see below), the border will appear in the "Link colour". If the image is not part of a link, the border will be transparent.

 

Of course, there is no need to specify all of these options - only the ones you need. The use of the ALT option, at least for some images is highly recommended to ensure that your message gets through when "graphics is off".

 

Hypertext Links

 

One of the most powerful things that a web page can do is to link you to another one. Can you imagine how useless the web would be without links?

 

Links are created using the (anchor) tag. Let's look at an example. Let's say you want to create a link from your web page to a second page. It might look like this:

 

< A href="/page2.htm" >
Click here for page 2!
< /A >

 

The HREF option tells the browser to load and display the page "page2.htm". Because we haven't specified the full filename, the file is assumed to be found in the same directory as the current page.

 

You can use the tag to point to another HTML file, or it can point to a file of a different type. For example, if you want to offer a file to download, you could do something like this:

 

< A href="/demo.exe" >
Click here to download a demo!
< /A >

 

When this link is used, the file "demo.exe" is sent to the user. As this file isn't a HTML file, exactly what will happen depends very much on which browser your visitor is using, and how they have it configured. You can normally assume that if the file type is not recognised by the user's browser, they will be given the option to save the file to their disk for use later.

 

As well as linking to other files and web pages, you can also use the tag to transfer someone to a specific location in (maybe half-way through) another HTML file. Let's say you have a tag like this in the middle of your "page2.htm" file:

 

< A name=Middle >

 

This tag marks a place in the file. You can then link to that specific point in the file with some HTML code like this:

 

< A href="/page2.htm#Middle ">
Click here for the middle of page 2!
< /A>

 

The link to "page2.htm#Middle" tells the viewer's browser to load the file "page2.htm" and display it, starting at the place where the is.

 

You can also use these "markers" in the same page in which they appear. For example, near the top of "page2.htm", you might place some code like this:

 

< A href="#Middle" >
Click here to skip the first (boring) part of the page, and go straight to the juicy bits!
< /A>

 

This link doesn't load a new page at all, but simply scrolls the current page to the < A NAME="Middle" > tag.

 

Enough already!

 

OK...That's enough of the hard stuff for now! Let's have a look at a simple (but quite useful) tag. Have you ever seen those horizontal dividing lines on web pages? They're created by the < HR > (Horizontal Ruler) tag. In all it's glory, it looks like this:

 

 

< HR ALIGN= (Left, Right or Center)
WIDTH=##% or ###
SIZE=###
NOSHADE
>

 

You can, of course, just use a < HR > by itself. Whichever options you use, there is no matching end tag. Let's look at the effects of the different options:

 

 

ALIGN LEFT : The left hand end of the line is aligned with the left margin of the page
CENTER: The line is centered within the web browser window
RIGHT : The right hand end of the line is aligned with the right margin of the page
WIDTH Specifies the length of the line. It can be specified as a percentage of the window width, or as a specific number of pixels.
SIZE Specifies the thickness of the line, in pixels.
NOSHADE Normally, the ruler line has a "shadow". This option turns the shadow off.

 

TABLES

 

Many of the web pages that are on the Internet right now contain a HTML element called tables. This is because tables are a great aid when it comes to organising information on web pages. The advantage of tables is that they allow a web page author to use a clear layout and design, without the content having to suffer. Due to this, a number of pages that take advantage of tables are visually stunning.

 

Tables today are an integral part of web page design. Rather than try to explain every aspect of table design, what we are attempting to do here is to simply give you a brief insight into the basics - such as the creation of tables, and some of the more common layouts used on web pages.

 

Before we start with Tables, we want to introduce a tag which is used in this document which we have not yet shown you. It is the 'Remark' tag. This allows you to put comments in your code, but not have them show up on the page.

 

A Eg: < !-- This is a comment -- >

 

The < !-- is the start of the comment, and anything (except other tags) can go in between it and the -- >. But now, on with the Tables!

 

First of all, let's have a look at some basic table tags, and what their meanings are...

 

< TABLE >< /TABLE > Start of the table
< TH >< /TH > Start/End of Table Heading
< TR >< /TR > Start/End of Table Row
< TD >< /TD > Start/End of Table Data

 

These tags can be used to create a basic table, like this.

 

< TABLE >
< TH ALIGN=LEFT >This is the heading for the left column< /TH >
< TH ALIGN=RIGHT >This is the heading for the right column< /TH >
< TR >< !-- This is the start of the first row in the table -- >
< TD >
This is where all the information in the top-left cell goes < /TD >
< TD ALIGN=RIGHT >
This is where all the information in the second-from-the-left cell on the top row goes
< /TD >
< /TR >
< TR >< !-- This is the start of the second row in the table-- >
< TD ALIGN=CENTER >
This is where all the information in the left-most cell of the second row goes
< /TD >
< TD ALIGN=CENTER >
This is where all the information in the second-from-the-left cell on the second row goes< /TD >
< /TR >
< /TABLE >

 

 

The end result should be a table like this...

 

This is the heading of the left column This is the heading of the right column
This is where all the information in the top-left cell goes This is where all the information in the second-from-the-left cell on the top row goes
This is where all the information in the left-most cell of the second row goes This is where all the information in the second-from-the-left cell on the second row goes

 

Yet this is just a very basic example of what the < TABLE > tag can do!

 

To manipulate the information within a table, we use optional parts of the tags called attributes or elements. An element is simply a command used on an opening tag to define such things as colour, size, the position of information within a cell, whether there is a border around the table, and so on.

 

There are many different elements which can be applied to the < TABLE >, < TH >and < TR >tags. Here are a few of the more common elements and examples of how they can be used.

 

BORDER: The BORDER element is used to place a border around the table.

 

Eg: < TABLE border=1 >

 

The larger the number, the thicker the border is.

 

ALIGN: The ALIGN element is used to define the physical position of the content of each cell. It can be used to align the contents to the left, right, centre or to simply justify (space the lines out to fill the cell). If ALIGN is not used, the contents of each cell are automatically aligned horizontally to the left edge of each cell.

 

Eg: < TH align="right" >

 

VALIGN: In turn, VALIGN is used to define the vertical position of each cell's contents. Valid options are MIDDLE, TOP or BOTTOM. If VALIGN is not used, the contents of each cell will assume the default position of middle.

 

Eg: < TH vAlign="bottom" >

 

WIDTH: This element defines the width of the table. Unless specified, each column is made as wide as is needed to fit all of the information into as little vertical space as possible, and the table will not exceed the boundaries of the viewer's web browser window.

 

Width can be set in two ways - by percentage or by a pixel amount.

 

Percentage: < TABLE width="65%" >

 

This will create a table that is 65% of the browser window's width.

 

Pixel amount: < TABLE width=180 >

 

This creates a table that has a width of 180 pixels.

 

Because different people have different screen resolutions and window sizes, using precentages generally produces the best results.

 

The width element can also be applied to individual cells to determine individual column widths, rather than having the web browser lay them out arbitrarily.

 

Percentage: < TD width="15%" >

 

This will create a cell that is 15% of the total table width.

 

Pixel amount: < TD width="100" >

 

This creates a cell that is 100 pixels wide.

 

If we were to use all of the above elements and tags together...

 

< TABLE border=1 >
< TH ALIGN=LEFT VALIGN=MIDDLE >This is the heading for the left column< /TH >
< TH ALIGN=RIGHT VALIGN=TOP >This is the heading for the right column< /TH >>
< TR >< !-- This is the start of the first row in the table-- >
< TD ALIGN=RIGHT VALIGN=MIDDLE >
This is where all the information in the top-left cell goes
< /TD >
< TD >
This is where all the information in the second-from-the-left cell on the top row goes
< /TD >
< /TR >
< TR >< !-- This is the start of the second row in the table -- >
< TD ALIGN=CENTER VALIGN=TOP >
This is where all the information in the left-most cell of the second row goes
< /TD >
< TD ALIGN=CENTER VALIGN=BOTTOM >
This is where all the information in the second-from-the-left cell on the second row goes
< /TD >
< /TR >
< /TABLE >

... we would be left with a table like this:

 

This is the heading of the left column This is the heading of the right column
This is where all the information in the top-left cell goes This is where all the information in the second-from-the-left cell on the top row goes
This is where all the information in the left-most cell of the second row goes This is where all the information in the second-from-the-left cell on the second row goes

 

POINTS TO REMEMBER

 

Your tables can have as many rows as you want. They can also have as many columns as you want, just so long as you have the same amount columns in all the rows. For example:

 

< TABLE border=1 >
< TR >
< TD >1< /TD >< TD >2< /TD >< TD >3< /TD >< TD >4< /TD >
< /TR>
< TR >
< TD >
1< /TD >< TD >2< /TD >< TD >3< /TD >< TD >4< /TD >
< /TR>
< TR >
< TD >
1< /TD >< TD >2< /TD >< TD >3< /TD >< TD >4< /TD >
< /TR>
< /TABLE>

 

Would create:

 

1 2 3 4
1 2 3 4
1 2 3 4

 

Used properly, tables can turn a cluttered and ugly page into a visual masterpiece.

 
RECENT ADDITIONS
POPULAR PAGES
CURRENT NEWS