basics

index | next

HTML (HyperText Markup Language) is a free format, case insensitive, language that is written in plain text (source), and its features are invoked by inserting special sequences of characters, commonly referred to as tags. Case insensitive means that it doesn't matter if you type HTML source in capitals or not, free format means that you can use any amount of whitespace (spaces, tabs, newlines) in the source, without affecting the appearance of the web page in a browser.

Use whitespace to make the HTML source easier to read.

Before going into the creation of web pages, a few issues have to be discussed. These are the way of addressing on the World Wide Web (WWW), the way to tell a browser that something has special meaning, and the way to modify this special meaning.

URLs

A URL (Uniform Resource Locator) is the way any object can be uniquely located on the WWW. It is useful to clarify the basic anatomy of a URL, so that eventual problems with objects that can't be found (the infamous error 404), may be solved. A URL looks like

[protocol]://[host][domain]/[file]#[anchor]

I've separated the different components using square brackets. The first is the protocol, which basically describes how the object will be sent. The two relevant ones (in the light of this course) are

• http (HyperText Transfer Protocol) is most common. It is used to transfer web pages, etc.
• file indicates that the resource is located on the (physically) local machine. It is very useful to test pages before publishing them world wide.

The host and domain are a sequence of 'words' separated by dots, which tell the browser where on the web to look for the resource. For example, the web domain of this page is www.geo.uu.nl, in which you may recognize information like 'company' and country. The host is often left out.

The two components above are sufficient to bring you to a default location, but if you want a more specific location, you will have to provide a file name. This file name can be any file the browser knows how to handle, and can include subdirectories

Subdirectories in HTTP URLs are always separated by forward slashes (/), irrespective of the actual operating system.

If no file name is specified, a browser will assume that you want to open index.html (or index.htm, for file name challenged operating systems).

HTML may be case insensitive, but some operating systems are not. Make sure you match cases in file names.

If a subdirectory does not contain an index.html file, the browser will make do, and list all the files in that subdirectory. This may not be what you want...

For those without Unix experience, a tilde (~) together with a name indicates that the home directory of the person in question is intended. As an example: http://www.geo.uu.nl/~loohuis will open index.html in my personal html directory.

Finally, an anchor allows jumping straight to a specific location in some web page, which, of course, must define this anchor.

tags

Tags are used in HTML to indicate that part of the source has special meaning, and should be treated as such by the browser. Tags are written between angle brackets < and >. Essentially, tags can be divided into two main categories, container tags, and non-container tags. As you guessed, container tags contain something, more specifically, a part of the source that follows. Normally, container tags are closed by a second tag, for which the tag name is written between </ and >. As an example, you might see

  <TAG> This tag is not a container tag.
  
  <CTAG> This tag is a container tag, which is closed
  by the following tag: </CTAG>

The <CTAG> affects all source until the closing tag, while the <TAG>, only has an effect at its location in the source. Later we'll get to the actual tag names and their functions.

attributes

Some of the tags can take additional parameters to modify their behaviour. These are written inside the angle brackets, and take a value. As an example, in

  <TAG ATTR=value>

ATTR takes a value, which can be a number, a URL, or some word. If the value contains characters that may confuse the browser (such as slashes or spaces), you can double quote the value.

When in doubt, always quote. Just make sure to type a matching end quote, otherwize you might get strange results.

Note that closing tags can never take attributes.

index | next