1 / 42

The WWW and HTML

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.

mariah
Download Presentation

The WWW and HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

  22. How the Web works

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

  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?

  28. What’s in a web page?

  29. What’s in a web page?

  30. What’s in a web page?

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

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

  33. Aside: separation of concerns

  34. Aside: separation of concerns

  35. What’s in a web page? • Content and structure are defined using HTML • HTML is the HyperTextMarkup 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. <h1>CMPT 281</h1>

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

  38. Markup Languages

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

  40. Types of HTML tags • Tags are instructions about structure

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

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

More Related