Upload
damon-farmer
View
221
Download
1
Tags:
Embed Size (px)
Citation preview
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/1
990
7/12/1
991
4/12/1
992
1/12/1
993
10/12/1
993
7/12/1
994
4/12/1
995
1/12/1
996
10/12/1
996
7/12/1
997
4/12/1
998
1/12/1
999
10/12/1
999
7/12/2
000
4/12/2
001
1/12/2
002
10/12/2
002
7/12/2
003
4/12/2
004
1/12/2
005
10/12/2
005
7/12/2
006
4/12/2
007
1/12/2
008
10/12/2
0080
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