![Page 1: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/1.jpg)
Computer Science 101
Introduction to Web Pages
![Page 2: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/2.jpg)
Origins of the Web
• Vannevar Bush (Memex, 1945)
• Ted Nelson (Xanadu, 1968)
• Doug Englebart and Alan Kay ( WIMP, 1972)
• ARPANET (the first internet, 1970s)
![Page 3: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/3.jpg)
Origins of the Web
• Bill Atkinson (Hypercard, 1989)
• Tim Berners-Lee (the WWW, 1994)
![Page 4: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/4.jpg)
Useful References
Tim-Berners-Lee, Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web by Its Inventor
David Weinberger, Small Pieces Loosely Joined: A Unified Theory of the Web
Alan Levine, Online HTML Programming Lessons
![Page 5: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/5.jpg)
What We Need
• A way of finding a computer or “server” on the Internet
• A way of locating a Web page on that computer
• A way of displaying that Web page on my computer or “client”
![Page 6: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/6.jpg)
Locating Computers on the Internet
• TCP/IP (Transmission Control Protocol/Internet Protocol) – a set of protocols for making transactions
• IP address – standard for identifying a computer
• TCP – describes how packets are sent and received
![Page 7: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/7.jpg)
IP Format
• Example: 204.202.129.230
• 4 sets of 3 digits
• Range from 0 to 255
• Total of 2564 or over 4 billion computers
![Page 8: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/8.jpg)
The Internet and the Web
• The Web sits on top of the Internet and uses its protocols (HTTP, FTP, MAILTO, etc.)
• URL (Uniform Resource Locator) – allows different computers to use the same protocols for Web-based transactions
![Page 9: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/9.jpg)
Form of a URL with HTTP
http://home.wlu.edu/~lambertk/
http://where/what
http – Hypertext transfer protocol
![Page 10: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/10.jpg)
Named Address (Domain Name)
It’s hard to remember 16 digits
Provide a name and get the computer
to translate it to the IP address
http://204.202.129.230/nfl http://espn.go.com/nfl
![Page 11: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/11.jpg)
Two Standards for Web Pages
• Standard protocols (URLs)
• Standard language for describing Web pages (HTML – Hypertext Markup Language)
• HTML is a standard set of commands for formatting Web pages
![Page 12: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/12.jpg)
How HTML Works
Server’s disk Networkconnection Client’s browser
• The client sends a request for a page to the server• HTML code is sent as text to the client• HTML code is stored in the client’s cache (temporary memory)• The client’s browser interprets the HTML code and formats the page
![Page 13: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/13.jpg)
Markup Tags
• Codes that are not displayed but tell the browser what to do
• Tags have the form <tag name>
</tag name>
![Page 14: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/14.jpg)
An HTML File and Its Two parts
• The head – usually contains the page’s title
• The body – contains the rest of the text and commands
![Page 15: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/15.jpg)
The Title Tag
![Page 16: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/16.jpg)
Format of HTML Code
• Fairly free-format
• Tags are not case sensitive
![Page 17: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/17.jpg)
Container Elements
• The sequence <start tag> stuff </end tag> is a container element
• Container elements can and should be nested, such as <head> <title> stuff </title> </head>
![Page 18: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/18.jpg)
Plain Old Elements
• Not containers, just simple commands
• The break element, <BR>, is an example
• Inserts one line break in the text
• No ending tag
![Page 19: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/19.jpg)
Formatting Text
• Bold, italic, etc.
![Page 20: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/20.jpg)
Vertical Space
• Paragraph element <P> - begins a new paragraph on a new line, wrapping until the next horizontal space command
• Horizontal rule element <HR> - inserts a horizontal line as a line break
![Page 21: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/21.jpg)
![Page 22: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/22.jpg)
Header Elements
• Provide headers of different font sizes<H1>, <H2>, … ,<H6>
![Page 23: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/23.jpg)
Comment Symbols
• We want to document our code with information that the browser will ignore and not display
• For the benefit of the readers of our HTML code, not our Web pages
<!-- text of comment -->
![Page 24: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/24.jpg)
Comment Symbols
![Page 25: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/25.jpg)
Tags and Attributes
• Tags tell the browser what to do
• Attributes tell the browser how to do it
• When the programmer does not specify attributes, defaults are used
• Example: background color is white or gray
![Page 26: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/26.jpg)
HR Attributes
• WIDTH - extent of horizontal size (default 100%)
• SIZE - thickness (default 2)
• ALIGN - left, middle, right (default left)
![Page 27: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/27.jpg)
Examples
<HR> (uses defaults)
<HR WIDTH="50%" SIZE=4 ALIGN=center>
<HR WIDTH=40 SIZE=1> (40 pixels, or picture elements)
<HR WIDTH="20%" ALIGN="right">
![Page 28: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/28.jpg)
Rules and Conventions
<tag attribute=value . . .>
• attribute is usually uppercase
• value can always be quoted, sometimes must be quoted, is usually lowercase
![Page 29: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/29.jpg)
Different Horizontal Rulers
![Page 30: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/30.jpg)
Paragraph Alignment
<P ALIGN=(left, middle, or right)>
• Not very useful
• justify works on some browsers
![Page 31: Computer Science 101 Introduction to Web Pages. Origins of the Web Vannevar Bush (Memex, 1945) Ted Nelson (Xanadu, 1968) Doug Englebart and Alan Kay (](https://reader033.vdocuments.us/reader033/viewer/2022051619/56649e2d5503460f94b1cb98/html5/thumbnails/31.jpg)
Paragraph Alignment