COM271, Week 1
HTML for Structure
Syllabus | Table of Pages | Assignments | References and Useful Links
HTML and the Invention of the World Wide Web
Al Gore did not invent the internet. Other nerds did.
The World Wide Web began life in the place where you would least expect it: at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland. CERN is a meeting place for physicists from all over the world, where highly abstract and conceptual thinkers engage in the contemplation of complex atomic phenomena that occur on a minuscule scale in time and space. This is a surprising place indeed for the beginnings of a technology which would, eventually, deliver everything from tourist information, online shopping and advertisements, financial data, weather forecasts and much more to your personal computer.
Tim Berners-Lee is the inventor of the Web. In 1989, Tim was working in a computing services section of CERN when he came up with the concept; at the time he had no idea that it would be implemented on such an enormous scale. Particle physics research often involves collaboration among institutes from all over the world. Tim had the idea of enabling researchers from remote sites in the world to organize and pool together information. But far from simply making available a large number of research documents as files that could be downloaded to individual computers, he suggested that you could actually link the text in the files themselves.
In other words, there could be cross-references from one research paper to another. This would mean that while reading one research paper, you could quickly display part of another paper that holds directly relevant text or diagrams. Documentation of a scientific and mathematical nature would thus be represented as a `web' of information held in electronic form on computers across the world. This, Tim thought, could be done by using some form of hypertext, some way of linking documents together by using buttons on the screen, which you simply clicked on to jump from one paper to another.
—A history of HTML, chapter 2 from the book Raggett on HTML 4, 1998, Addison Wesley, ISBN 0-201-17805-2.
Keep in mind that the web began at a time when technology was limited, personal computers were few, and the first set of perceived needs were largely academic, namely, to share scientific articles in a manner that would be fast and vast. In a time when computer screens were mostly monochrome (hard to imagine, but that means they weren't in color), the first things to be transmitted over the slowly growing connections between mostly academic computer sites were text documents. Images would have taken too much time!
The first of what we might recognize as a brower today was called Mosaic; it was released in April 1993. This was the first browser that allowed pages with images, giving birth to graphics-based web pages. You can read Raggett's history if you would like to know more.
If you keep these origins in mind, it might help you to understand the philosophy that guides web technology today. Tim Berners-Lee's focus was on text documents. He had at his disposal a crude internet hardware and a technology for transmission of packets of information via that internet (Transmission Control Protocal / Internet Protocol, or TCP/IP). His invention was a simple means to organize those packets of information so that they could be sent as relatively simple text files using a standard set of text-based structures to organize the actual documents so that they could be presented sensibly. Hypertext Markup Language, html, is that set of structures.
A web developer today doesn't have to be overly concerned with the hardware of the internet, nor with its transmission protocols. Lucky for us, all we have to understand is how to set up the structure of documents using html. Mindful of its simple roots, the structure itself is relatively simple. We'll look at it in some detail shortly, but for now, here is a general description to get you started.
Structure of an HTML Web Page
All pages are are made up of html structures, written with regular keyboard characters. Html structures are written inside pairs of brackets, < and >. For example, <html>, <p>, and <table> indicate the beginning of a document, a paragraph, and a table structure, respectively. For each, there is a corresponding closing that looks similar, with the exception of a slash: e.g., </html>, </p>, and </table>. These structural pairs are referred to as elements (or to the synonyms containers or tags).
Here is a basic html page structure. The html tag contains a head section and a body section, each set off with opening and closing tags. The head contains a title, and in this (not very exciting) example the body contains a paragraph:
<html>
<head>
<title>My web page</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
There are a handful of html elements that you will need to learn to provide the structure of a page, and we'll do that next. There are also ways to modify the way in which the elements are presented by the browser (how the contents of each element will appear visually). We will look at these attributes and the possible values that can be assigned to each as we look at the elements we are going to use, in the following pages. But first, let me introduce the concept of style sheets.