Authoring Webpages/Introduction

From Wikibooks, open books for an open world
Jump to: navigation, search


The Internet[edit]

The World Wide Web is one of many Internet services. The Internet is a network of (computer) networks: hence the name.

The Internet itself does not do much; it just provides the means to pass packets of digital data around the globe. In order to make sense of these packets, you need services: protocols (sets of rules) that tell you what a certain piece of data means, and computer programs (software) that allow access to data based on such protocols.

The web is one such service, as are e-mail, FTP, Kazaa, Instant Messaging, et cetera. All these services require particular programs that understand their protocols, although some programs can work with multiple services. For instance, a web browser may also be capable of downloading files from an FTP site or managing e-mail.

The web[edit]

The web was created to make finding and exchanging documents across the Internet more transparent. Until the web came along, if you had a document to offer through the Internet (for instance, a scientific paper, or a list of jokes, or a recipe, or your curriculum vitae), you had to put it up on an FTP site, and then pass the address of that FTP site to someone else.

With the web, you embedded the address into the page, instead of passing it around. More than that, you could hide the real address from view by wrapping it in descriptive text. Instead of typing in a bunch of numbers in your FTP client, and then moving from folder to folder until you stumbled on a file called, you could create a 'link' called "John's paper on astroturf" that would take you directly to the desired file.

Webpages are written in a very basic form of hypertext: if you activate a word, or a bunch of words, the Web Browser opens a new document for you to browse. By creating webpages that link to other webpages, you are helping to create a giant spider's web of interlinking webpages: the World Wide Web. Using a webbrowser, you can hop from webpage to webpage ('surfing').

In a sense, the web is pretty similar to the Internet that lies beneath it. However, where the Internet connects millions of computers in a web like manner, so does the web connect webpages.

Webpages, then, in general fulfil two roles: that of a document being linked to by other documents, and that of a document linking to other documents.


There are no measures of success for webpages. Any document may be of interest to a reader, and any document may link to interesting documents. You decide what you want to write about.

However, you may have expectations of a target audience. If you write a web diary for far-away family, you would probably like the far-away family to 1) be able to read your webpages, and 2) want to read your webpages. Although in this particular example it is fairly easy to find out whether you succeeded (call up aunt Jeanne and ask her if she has read your diary), often it is not easy to define your target audience and to measure whether they successfully surfed your pages. Also, your diary may draw visitors that weren't part of the target audience.

Although writing for an audience is very important for several reasons, it is necessary to note at this point that a webpage is created because you want to say something. It is important to note this, because often people judge webpages on their form, rather than their message. Claims that a webpage is not pretty, or looks amateurish are beside the point if the message gets across.

Form is important, but message is more important. A wrong form can block the message from coming across, and a right form can help clarify the message, but the message comes first.

Luckily, this distinction is sort of baked into to the web. It is easy to first create your story, then attach a useful typography to it afterwards.


Let us recap: webpages are documents. They are files on computers. When displayed in a browser, they form a simple form of hypertext. The definition of files and computers is outside the scope of this textbook, but hypertext needs to be explained before we can continue.

Hypertext is a form of text in which words or phrases can be 'activated'; depending on the word or phrase you chose, part or whole of the text changes.

Probably the first description of the idea came in 1945, when Vannevar Bush wrote an article in The Atlantic Monthly called "As We May Think," about a futuristic device he called a "Memex". He described the device as electronically linked to a library and able to display books and films from the library, and further able to automatically follow references from these to the work referenced.

The Memex did more than offer linked information to a user though. It was a tool for establishing links as well as following them.

HTML, the hypertext language for the web (literally: HyperText Mark-up Language), was designed by Tim Berners-Lee with much the similar goals in mind: to provide a way for scientists to create a huge library of their interlinked works, and to provide a way for the users of this library to change certain documents, for instance to annotate them or to add links.

The latter part of Berners-Lee's dream never really materialized until the advent of the wiki-wiki web (of which this textbook is part). Anybody can change the contents of this textbook on its website.

Let us finish this sub-section with a metaphor: hypertext is to text what reality is to television. It adds an extra dimension to it; as a consequence, it is much more dynamic, it contains much more surprises.

There seem to be people out there who prefer television over reality; the former is much more focused, much more well-defined. It is hard to get lost within the confines of television.

Similarly, a simple text is much easier to understand than hypertext.

Where hypertext links to another document, the author needs to make clear what it links to. (The dreaded 'click here' is without a doubt the worst way to create a hyperlink, as it tells the user absolutely nothing about the linked document.)

Where a hypertext document is part of a larger whole (say, a website), it is often helpful to the users if they can find out which part of a larger whole it is. The document should link to a homepage. The homepage is a webpage that forms the safe spot of a website, where the user can find his bearings again if lost, and where the user finds information about the focus of the website.

For instance, a homepage might say: "This is the personal homepage of Clarence Wiley". This suggests to the visitor that a medley of pages will be found here, often of a personal nature, most likely created by Clarence, and at least of some value to Clarence.

Similarly, a webpage that is part of a website may try and make that clear to the visitor by using a uniform style. Since arriving at a uniform writing style is not always easy or convenient (think of a webpage with dozens of authors), other hints may be employed that tell visitors where they are. One of such hints is explained in the following chapter.

Dangerous metaphors[edit]

In the previous part, we said that "hypertext is to text what reality is to television". We used a comparison, because we know that it can often be useful to explain characteristics of the new and unknown by comparing them with similar characteristics of the old and known.

As such, metaphors can be a useful and powerful device. However, the new and unknown has traditionally suffered harshly from a heavy stamping of the metaphor on the subject.

It is said by some that when television was invented, it took fifty years for the new medium to escape from being a stage in a box. Far into the twentieth century, television was made by aiming a camera at a stage (a 'set' in television and cinema terms) and just passing on to the viewer what went on.

Oddly enough, the things that are possible on television, but not on stage, were already possible when the first consumer grade television sets were being produced: broadcasting with a time-delay (record now, broadcast later), editing a program, using unusual viewpoints, animation, overlaying images et cetera. Of course there were a few 'revolutionaries' who used these techniques, but in general the metaphor (television is like a stage) held the new medium captive.

Even today, news anchors can sit behind their desk clad in nothing but underwear below the waist, safe in the knowledge that the camera will never do anything the audience of a stage play wouldn't do.

Today, the web has been struck similarly hard by failing metaphors. Since the web is clearly tied to computers, a lot of people confuse authoring webpages with programming. And since a lot of web content was written from the start by people using graphical web browsers (contrary to popular belief, the first web browser displayed images and used an early form of style sheets [1]), designing a web page is often primarily considered a graphical design task.

False metaphor #1: programming[edit]

Programming is the art of creating a computer program. A computer program is something that tells the computer what to do. Usually, a computer program is a list of instructions. For instance, a computer programmer can write a program that tells the computer to open a window on a screen, and display a large, bold text in the top-left corner.

A hypertext document can be implemented as a computer program. A modern day example of programming hypertext would be PDF, the Adobe originated format for distributing print documents across computer networks and to printers. However, HTML, the hypertext language for the web, is not a programming language. Instead, it is a mark-up language: it allows one to mark-up the structure of a document. (You may want to revisit this section later, once you have 'marked up' a few webpages yourself.) In other words, it is a way to tell a computer what a document is, not what it should do with it.

Viewing HTML as a programming language means that you view its constructs, its labels, its mark-up, as instructions to the browser. For instance, you may want to indicate that a particular piece of text should be printed in large and bold letters. You could use the HTML code for headings for this, because most graphical browsers will display a heading as large, bold text. However, you may get visitors with browsers who don't display a heading as large bold text. That's the moment when the trap of the false metaphor closes around you.

False metaphor #2: web authoring as graphical design[edit]

To view the web as a graphical medium is a much more insidious problem, because it is largely a correct view. Most webpages are browsed through a graphical browser. On such occasions, the graphical design of a webpage can have a decisive influence on how well the content of that page is perceived and received by the visitor.

The problem lies not so much in seeing the web as a graphical medium, but in our assumptions on what graphical medium means. Since webpages are often displayed on computer screen, web page authors often design a lay-out grid with certain dimensions. Not everybody may be using the same dimensions though, and visitors are hardly ever willing to change the dimensions of their windowing system to accommodate the wishes of a web site's author.

The web can be displayed on a vast array of devices, some of which are not graphical in nature at all: think of speaking browsers, or touch browser (Braille rules for the blind). You need to adjust your assumptions on what a graphical medium means to write successful and accessible webpages.

Other, less damaging metaphors[edit]

It is clear that when we wish to see the web in the light of another, better-understood invention, we need to do this with care, and clearly delineating the limits of our comparisons.

I would like to propose a few metaphors that are just as useful as the ones before, but that have less potential for damage.

The media that are perhaps the most natural candidates for comparing the web too are unsurprisingly other Internet services. They all share with each other that they provide a way for people to talk directly to other people without intervention of middlemen such as editors and publishers. This possibility for direct contact stems from the underlying low-level protocols of the Internet. On the Internet, every computer can talk to any other computer.

Other systems for sharing information in the free-form manner the web allows, are abundant in real life. Just try and imagine all the possibilities you have when you want to announce a neighbourhood party to strangers, or when you want to share your daily troubles with relative strangers; letter pages, bulletin boards, pen pal magazines etcetera spring to mind.


The important idea to take away from this chapter is that the web is a way of sharing information. There is nothing wrong with running programs on the web, or with presenting graphical design on it. As a matter fact, these are well understood and accepted uses of the web. What you should make a distinction between, though, is the web as a way to present information, and the form and shape that information takes.

Your need to share --> Your way of sharing it --> An audience.

Questions and Exercises[edit]

1. Collect examples of typical webpages. How do they fit into the web? Which role do they play?

2. Find a webpage, any webpage; try and make a list of all possible audiences, and how they would experience the page. Would they find the information they were looking for? Which information would they not be able to find? Would they have an easy way of finding more information through hyperlinks?

If you follow this course as part of a class, let the teacher pick a webpage and see how many different audiences the students can come up with.

If you follow this course by yourself, you could go to and enter a random word in its search box, then activate the "I'm Feeling Lucky" link. I find that the names of kitchen things often make great 'random' words ('ladle', 'cinnamon', 'fridge', 'stove' etcetera).

3. Try and view a webpage using a non-graphical browser, or a browser such as Opera with all graphics capabilities switched off. If this exercise is done as part of a class, form duos: let one student face away, let the other read out what's going on in the web page. Let the student who cannot read the webpage give surfing instructions and see how hard or easy it is the surf the website.

4. Try and think of a subject you would like to create a webpage or a website about. Go to a search engine (go online) and try and find webpages about this or similar subjects. For instance, if you would like to create a website for your football club, try and find the websites of other local and internationally famous clubs. According to your personal taste and opinions, what have the authors of these sites done right? What have they done wrong?


For answers, see Answers to Questions and Exercises.

Previous: Requirements - Up: Table of Contents - Next: Creating a simple page