computer science 101 introduction to web pages. origins of the web vannevar bush (memex, 1945) ted...
TRANSCRIPT
Computer Science 101
Introduction to Web Pages
Origins of the Web
• Vannevar Bush (Memex, 1945)
• Ted Nelson (Xanadu, 1968)
• Doug Englebart and Alan Kay ( WIMP, 1972)
• ARPANET (the first internet, 1970s)
Origins of the Web
• Bill Atkinson (Hypercard, 1989)
• Tim Berners-Lee (the WWW, 1994)
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
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”
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
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
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
Form of a URL with HTTP
http://home.wlu.edu/~lambertk/
http://where/what
http – Hypertext transfer protocol
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
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
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
Markup Tags
• Codes that are not displayed but tell the browser what to do
• Tags have the form <tag name>
</tag name>
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
The Title Tag
Format of HTML Code
• Fairly free-format
• Tags are not case sensitive
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>
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
Formatting Text
• Bold, italic, etc.
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
Header Elements
• Provide headers of different font sizes<H1>, <H2>, … ,<H6>
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 -->
Comment Symbols
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
HR Attributes
• WIDTH - extent of horizontal size (default 100%)
• SIZE - thickness (default 2)
• ALIGN - left, middle, right (default left)
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">
Rules and Conventions
<tag attribute=value . . .>
• attribute is usually uppercase
• value can always be quoted, sometimes must be quoted, is usually lowercase
Different Horizontal Rulers
Paragraph Alignment
<P ALIGN=(left, middle, or right)>
• Not very useful
• justify works on some browsers
Paragraph Alignment