June 22, 2000
Introduction to Web Page Design

 

Introduction | Essential concepts | Basic Skeleton | Headings | Controlling Formatting | Creating Links | Further Development

Essential Concepts

HTML (hypertext markup language) is a combination of the text and graphics of your web page, together with a set of instructions to your browser on how to display them.

By Raouf Allim

A web page is an .htm or .html file. When a browser such as Microsoft Internet Explorer or Netscape Communicator opens the file it reads the content (text/graphics) together with the set of instructions on how to display the content on the screen.

Tags

The display instructions are called tags, and the browser is able to distinguish them from your text by the fact that they are contained within the symbols <> e.g. <p> means start a new paragraph.

The basic HTML tag has four parts:

  1. <  tells the browser that it is encountering a tag.
  2. The tag name.
  3. One or more attributes that set certain values for the tag.
  4. > marks the end of the tag.

A typical HTML tag might look something like this:

<p align="center">

where p is the tag name (meaning new paragraph) and align is an attribute (in this case setting a value for the justification of the paragraph).

Generally speaking, most tags are written in pairs, one to start the specific instruction and one to finish it. The finishing tag is distinguished by the fact that it starts with </ rather than just<. For example: -

<p>This is a paragraph of text</p> would display on the page as

This is a paragraph of text

<p><i>This is a paragraph of text</i></p> would display on the page as

This is a paragraph of text

You have probably worked out that the <i> tag is an instruction to the browser to make the text italic.

Here are a few guidelines for using HTML tags:

  • HTML tags are not case sensitive. <p> means the same as <P>.
  • When creating a tag, remember to separate each portion (the tag name and each of the attributes) with a single space.
  • To use an attribute, type the attribute name, followed by an equal sign and the attribute value. Don't put a space between the name, equal sign, and value, and enclose the value in apostrophes e.g. <img src="logo.gif">

If you don't specify an attribute and its value, the browser uses the default value for that tag. For example, the default value for paragraph alignment is left. If you use the paragraph tag without the align attribute, the paragraph will align left.

Nesting

The second example show another important concept of HTML, which is to try and close off your tags in the appropriate nesting order - i.e. the last tag opened should be the first tag closed (this is not compulsory, but it makes the code neater, and less error-prone).

Hyperlinks

Another function of tags is to control the action of the browser when you click on parts of the page. You will already be familiar with the concept of a hyperlink - a clickable area of the page which takes you to another web page. This is coded by the tag <a href = "URL"></a> which will be demonstrated later.

File extensions

The files you create must be saved with the extension .htm or .html to indicate the file type (and not as .txt which would indicate a plain text file).

Special Characters

Note that because the characters <, >, and & have special meanings in HTML, you must use their 'escape sequences' (&lt;, &gt;, and &amp;, respectively) if you want to actually use them as characters.

For example: -

&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;

displays as

>>>>>>>>>>>>

 

back

next