Authoring Webpages/Introduction

Introduction

The Internet

The World Wide Web is only one of many Internet services. The Internet is a network of computers. ("Net" is short for "network".)

The Internet provides the means to pass packets of 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, torrents, Instant Messaging, etc. 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 World Wide Web

The web was created to make finding and exchanging documents across the Internet easier. Before the web, 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 ppr_john.ps, you could create a 'link' called "John's paper on astroturf" that would take you directly to the desired file.

Hypertext

HTML stands for "HyperText Markup Language". But what is "hypertext"?

Webpages are documents. They are files on computers. When displayed in a browser, they are displayed as "hypertext". The definition of files and computers is outside the scope of this textbook, but hypertext needs to be explained before we can continue.

On a computer, a text file behaves like print: like a book or a magazine. You can scroll through the file instead of having to turn pages, but the text behaves the same way it would if it were printed. It simply sits on the page and you read it. Hypertext, on the other hand, has additional functionality; mainly, the use of "hyperlinks". ("Hyperlinks" are commonly referred to simply as "links".) A link is a part of the page that, when clicked on by a mouse (or tapped with a finger on a touchscreen), takes the reader to a different part of the document, or to an entirely different document. Typically, links are clickable parts of text, but they can also be images. For instance, clicking a chapter heading in the table of contents could take you to that chapter; a linked phrase could take you to a footnote or a reference document for further information.

Probably the first description of "hypertext" appeared 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. The Memex also gave the reader the ability to automatically follow references 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 was designed by Tim Berners-Lee with similar goals in mind: to provide a way for scientists to create a huge library of interlinked works and to provide a way for the users of this library to alter certain documents: for instance, to add annotations or links.

The latter part of Berners-Lee's dream never really materialized until the invention of the first wiki, Wiki-Wiki Web. Wiki pages are special types of web pages that allow the reader to edit them. For example, this textbook is part of a wiki. Anybody can change the contents of this textbook on its website.

Since hypertext is so different from normal text, there are certain things that need to be considered when writing it.

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 home page. The home page is a web page that forms the "front", or table of contents, of a website. The home page usually contains information about the website and has menus of links that allow the user to navigate to various parts of the website.

For instance, a home page might say: "This is the personal home page of Clarence Wiley". This suggests to the visitor that the web pages found there are probably of a personal nature, most likely created by Clarence, and of some value to Clarence.

Similarly, web pages that are part of a website often use a uniform style. Since arriving at a uniform writing style is not always easy or convenient (think of a web page with dozens of authors), other hints may be employed that tell visitors where they are. One of these hints is explained in the following chapter.

Dangerous metaphors

Calling web documents "pages" is a metaphor. They aren't really "pages", as in a book. However, it is 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 web pages with programming. Since a lot of web content was written from the start by people using graphical web browsers, designing a web page is often primarily considered a graphical design task. (Contrary to popular belief, the first web browser displayed images and used an early form of stylesheets. [1])

False metaphor #1: Programming

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 Markup 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 web pages yourself.) HTML is a way to tell a web browser what the different parts of a document are. For example, one part of a web page could be a paragraph and another part could be a list.

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.

The important thing to remember is that HTML tells a web browser what the different parts of a page are, not how they should look.

False metaphor #2: web authoring as graphical design

To view the web as a graphical medium is a much more insidious problem, because it is largely a correct view. Most web pages are browsed through a graphical browser. On such occasions, the graphical design of a web page 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 a "graphical medium" is. Since web pages are often displayed on a computer screen, web page authors often design a layout 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 website's author.

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

The practice of creating web pages that can be accessed by a wide variety of types of browsers is called "accessibility". As the web grows, accessibility becomes more and more important.

Other, less damaging metaphors

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 to 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 to imagine all the possibilities you have when you want to announce a neighborhood party to strangers, or when you want to share your daily troubles with relative strangers: letter pages, bulletin boards, pen pal magazines, etc. spring to mind.

Conclusion

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. 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

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

2. Find a web page. Make a list of all of the page's possible users, and write down 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 web page and see how many different audiences the students can come up with.

If you follow this course by yourself, you could go to http://www.google.com 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', etc).

3. Try to view a web page 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 web page give instructions and see how hard or easy it is to use the website.

4. Try to think of a subject you would like to create a web page or a website about. Go to a search engine and try to find web pages about this or similar subjects. For instance, if you would like to create a website for your football club, try to 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?

Answers

For answers, see Answers to Questions and Exercises.

---

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