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