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 WWW

Date Websites 200000000 12/01/1990 1 180000000 12/01/1991 10 12/01/1992 50 160000000 06/01/1993 130 09/01/1993 204 140000000 10/01/1993 228 120000000 12/01/1993 623 06/01/1994 2738 100000000 12/01/1994 10022 80000000 06/01/1995 23500 01/01/1996 100000 60000000 03/01/1996 135396 40000000 04/01/1996 150295 05/01/1996 193150 20000000 06/01/1996 252000 0 07/01/1996 299403 08/01/1996 342081 09/01/1996 397281 10/01/1996 462047 11/01/1996 525906 12/01/1996 603367 01/01/1997 646162 02/01/1997 739688 03/01/1997 883149 04/01/1997 1002612 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.

CMPT 281

Markup Languages

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

means “start of a first-level heading” •

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: The main stuff of the page goes here. Types of HTML tags

• Tags are instructions about structure

Category Tags Page title