Overview

Imagine yourself designing a system for sharing documents. The sharing of documents could be amongst people or computer programs, and therefore it is useful to think of the content of the document separate from its presentation on a monitor or printer or other devices.

Potentially you want a system where you don't replicate any of the data, so that the same document can be re-styled to be sent to a printer, a hand held device, a browser, a program to extract the data or to be simply read by a human being. This requires thinking through exactly what is a document and one approach to a solution is to use markup within the document.

Documents and markup

A document can be defined in terms of its structure; with elements such as headings, paragraphs, lists, tables, diagrams and so on. markup is simply to define these elements and provide a specific tag to markup each element.

For example, if we were to write:

<p>... some content ...</p>

it could be interpreted as a paragraph because it has been marked up with a <p> tag and ends with </p> tag; whereas the same sentence written slightly differently as

<h1>... some content ...</h1>

would be interpreted as a heading, simply because it has been marked up as a heading with an <h1> tag and it ends with an </h1> tag.

The markup , p or h1 does not specify the display style but simply that one is a paragraph and the other a heading. In the absence of any style definition, the browser uses its default style definitions. Concentrate on the HTML, We shall apply styles using a language, called CSS in later tutorials.

Add one or two more concepts and make this markup language available across a computer network around the world (i.e. the internet) and you have a World Wide Web system for sharing documents, all using the same markup language understandable by humans and computer programs alike.

Hypertext

Hypertext is text which contains links to other texts. Hypermedia is a similar concept and includes graphics, sound and video. Surfing the web is made possible by hyperlinks which allows access to other documents on the web.

Here is a typical example of a hyperlink markup .

<a href="http://www.w3.org/standards">Click here to visit the standards page at the W3C</a>

And here is how the markup would be typically displayed with a browser default style: Click here to visit the standards page at the W3C. The so called hotspot text is displayed and once clicked it retrieves the document specified by the href attribute in the code above.

We shall return to syntax in future tutorials; for the time being note the general syntax is the same: <a> ... content ... </a>, the additional syntax is the attribute in the openning tag, <a href="http://www.w3.org/standards">.

Hyperlink is the underlying concept defining the structure of the web.

What about the presentation of the document content?

By presentation we mean the font-size, colour, position on the page, margins and so on.

Clearly, we don't want to duplicate the document for let say displaying on the screen as oppose to sending it to a printer. Ideally, we want to re-style the content of this page so that it's suitable to send to a printer, perhaps with a different font size, margins and colour.

This is achieved by applying a different style sheet to the same content. We use a different language, Cascading Style Sheets ( CSS) to style the HTML marked-up content. This is covered in the CSS tutorials.

You will see from the practical exercises that this separation of content from presentation is very useful not least because of the flexibility in reusing the content and the maintenance of even a relatively small web site.

Separation of content from presentation is key to successful web development.