1. The WWW and HTML CMPT 281

2. Outline Hypertext The Internet The World-Wide-Web How the WWW works Web pages Markup HTML

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

4. History of Hypertext Vannevar Bush and the Memex Ted Nelson and Xanadu Douglas Englebart and NLS

5. Vannevar Bush

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

7. The Memex

8. Ted Nelson

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

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

12. Douglas Engelbart

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

14. Hypertext in NLS – clips 7 & 8

15. The Internet

16. Just before the WWW…

17. The World-Wide Web The inventor: Tim Berners-Lee The first browser: lynx The first graphical browser: Mosaic Growth of the web

18. Tim Berners-Lee

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

20. Mosaic (1993)

21. Growth of the WWW DateWebsites 12/01/19901 12/01/199110 12/01/199250 06/01/1993130 09/01/1993204 10/01/1993228 12/01/1993623 06/01/19942738 12/01/199410022 06/01/199523500 01/01/1996100000 03/01/1996135396 04/01/1996150295 05/01/1996193150 06/01/1996252000 07/01/1996299403 08/01/1996342081 09/01/1996397281 10/01/1996462047 11/01/1996525906 12/01/1996603367 01/01/1997646162 02/01/1997739688 03/01/1997883149 04/01/19971002612

22. How the Web works

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

24. HTTP in a TCP/IP packet

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

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

27. What’s in a web page?

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

32. What’s in a web page? Content and structure are defined using HTML HTML is the HyperText Markup Language

33. Aside: separation of concerns

35. What’s in a web page? Content and structure are defined using HTML HTML is the HyperText Markup Language

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

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

38. Markup Languages

39. HTML basics A web page is an HTML document A very basic template for a page: This is the Title of the Page The main stuff of the page goes here.

40. Types of HTML tags Tags are instructions about structure CategoryTags Page title Headers,, etc. Paragraphs, Strong and emphasis *, Lists,, Center Horizontal rule (line) Address

41. Links in HTML URL = Uniform Resource Locator – URLs are the mechanism for hyperlinks To another web location (absolute linking): CS Home To a local document (relative linking): – 281 Examples To another part of the same document: Some text here link to important stuff

42. Get started Go through the HTML tutorials at: – http://www.w3schools.com/html/ Reading: – Textbook Chapters 1 & 2 Assignment 1