The WWW and HTML

CMPT 281

Outline

• Hypertext• The Internet• The World-Wide-Web• How the WWW works• Web pages• Markup• HTML

Hypertext

• Hypertext is text displayed on a computer that contains links (‘hyperlinks’) to other locations in that document or other documents

History of Hypertext

• Vannevar Bush and the Memex• Ted Nelson and Xanadu• Douglas Englebart and NLS

Vannevar Bush

The Memex

• 1945!• An information-storage machine with many

mechanisms for retrieving information• Trails of links connecting sequences of

information• Storage based on microfilm• Never built

The Memex

Ted Nelson

Ted Nelson

Xanadu

• 1967• Invented the term ‘hypertext’• Documents made of other pieces• Two-way links• Document version control

Ted Nelson’s vision of hypertext• Ted Nelson, a professional visionary, wrote in 1965 of "Literary Machines,"

computers that would enable people to write and publish in a new, nonlinear format, which he called hypertext. Hypertext was "nonsequential" text, in which a reader was not constrained to read in any particular order, but could follow links and delve into the original document from a short quotation. Ted described a futuristic project, Xanadu, in which all the world's information could be published in hypertext. For example, if you were reading this book in hypertext, you would be able to follow a link from my reference to Xanadu to further details of that project. In Ted's vision, every quotation would have been a link back to its source, allowing original authors to be compensated by a very small amount each time the quotation was read. He had the dream of a utopian society in which all information could be shared among people who communicated as equals. He struggled for years to find funding for his project, but success eluded him. – Tim Berners-Lee with Mark Fischetti, Weaving the Web, 1999, p.5.

Douglas Engelbart

NLS

• Hypertext links in documents• Community editing (like wikis)• Videoconferencing• Multi-user software (groupware)• The mouse

Hypertext in NLS – clips 7 & 8

The Internet

Just before the WWW…

The World-Wide Web

• The inventor: Tim Berners-Lee• The first browser: lynx• The first graphical browser: Mosaic• Growth of the web

Tim Berners-Lee

The invention of the WWW

• 1989• Originally developed as a way for physicists at

CERN to share information• Built on top of the Internet and TCP/IP• HTTP: HyperText Transfer Protocol• First browser: lynx (text only)

Mosaic (1993)

Growth of the WWWDate Websites

12/01/1990 112/01/1991 1012/01/1992 5006/01/1993 13009/01/1993 20410/01/1993 22812/01/1993 62306/01/1994 273812/01/1994 1002206/01/1995 2350001/01/1996 10000003/01/1996 13539604/01/1996 15029505/01/1996 19315006/01/1996 25200007/01/1996 29940308/01/1996 34208109/01/1996 39728110/01/1996 46204711/01/1996 52590612/01/1996 60336701/01/1997 64616202/01/1997 73968803/01/1997 88314904/01/1997 1002612

1/12/1

990

10/12/1990

7/12/1

991

4/12/1

992

1/12/1993

10/12/1993

7/12/1

994

4/12/1

995

1/12/1

996

10/12/1996

7/12/1997

4/12/1

998

1/12/1

999

10/12/1999

7/12/2000

4/12/2

001

1/12/2002

10/12/2002

7/12/2

003

4/12/2

004

1/12/2

005

10/12/2005

7/12/2

006

4/12/2

007

1/12/2

008

10/12/2008

0

20000000

40000000

60000000

80000000

100000000

120000000

140000000

160000000

180000000

200000000

How the Web works

How the Web works

• A ‘client-server’ system– Client: the computer running the browser– Server: the computer (i.e., the web server) that

stores the page• Clients and servers must communicate to

deliver pages to the browser– They use TCP/IP over the Internet– They add a layer called HTTP

HTTP in a TCP/IP packet

How the Web works

• How does the client get the page?– Pages have ‘Uniform Resource Locators’ (URLs)• e.g., “www.cs.usask.ca”

– These translate to a particular server address– The browser program makes a request using HTTP• e.g., “GET /faculty/gutwin/281/index.html”

– The server program returns the content– The browser interprets and displays the page

How the Web works

• How does the client get the page?– Pages have ‘Uniform Resource Locators’ (URLs)• e.g., “www.cs.usask.ca”

– These translate to a particular server address– The browser program makes a request using HTTP• e.g., “GET /faculty/gutwin/281/index.html”

– The server program returns the content– The browser interprets and displays the page

What’s in a web page?

What’s in a web page?

What’s in a web page?

What’s in a web page?

What’s in a web page?

• Content– Text, images, videos, etc.

• Structure– Headings, lists, addresses, etc.

• Appearance– Instructions about how content should appear– e.g., what colour text

• Meta-data that is not displayed– e.g., keywords, comments

What’s in a web page?

• Content and structure are defined using HTML• HTML is the HyperText Markup Language

Aside: separation of concerns

Aside: separation of concerns

What’s in a web page?

• Content and structure are defined using HTML• HTML is the HyperText Markup Language

Markup Languages

• Markup provides instructions about the content in a web page– e.g., information about structure

• These instructions must be distinguishable from the content itself

• HTML uses the idea of tags to encode instructions– Commands inside angle brackets– e.g. <h1>CMPT 281</h1>

Markup Languages

• The tags are interpreted, not displayed– They tell the browser about the structure

• <h1> means “start of a first-level heading”• </h1> means “end of a first-level heading”

Markup Languages

HTML basics

• A web page is an HTML document• A very basic template for a page:<html>

<head><title> This is the Title of the Page </title></head><body>The main stuff of the page goes here.</body>

</html>

Types of HTML tags

• Tags are instructions about structure

Category Tags

Page title <title>

Headers <h1>, <h2>, etc.

Paragraphs <p>, <br>

Strong and emphasis * <strong>, <em>

Lists <ul>, <ol>, <li>

Center <center>

Horizontal rule (line) <hr />

Address <address>

Links in HTML

• URL = Uniform Resource Locator– URLs are the mechanism for hyperlinks

• To another web location (absolute linking):<a href="http://www.cs.usask.ca/">CS Home</a>

• To a local document (relative linking):– <a href=“examples.html">281 Examples</a>

• To another part of the same document:<a name="important">Some text here</a><a href="#important">link to important stuff</a>

Get started

• Go through the HTML tutorials at:– http://www.w3schools.com/html/

• Reading:– Textbook Chapters 1 & 2

• Assignment 1