The Web: Concepts and Technology
32
January 24: HTML + Forms = Dynamic Sites 1 The Web: Concepts and Technology 1/24/2013 CS 190: The Web: 2013
Transcript of The Web: Concepts and Technology
January 24: HTML + Forms = Dynamic Sites
1
The Web: Concepts and Technology
1/24/2013 CS 190: The Web: 2013
HTTP + HTML = WEB
1/24/2013 CS 190: The Web: 2013 2
The Vision: Memex
– Vanevar Bush: “As we may think”:
“Memex”, 1945 proto-hypertext system /desktop search
1/24/2013 3CS 190: The Web: 2013
The First Implementation: Hypertext
4
• Ted Nelson: Hypertext
A text on a computer that will lead the user to other, related information on demand.
Precursor of The Web
1/24/2013 CS 190: The Web: 2013
1989: World Wide Web
• Tim Berners-Lee connects 2 computers together using the
• HTTP protocol
• First Web server is born.
1/24/2013 CS 190: The Web: 2013 5
Web Server
1/24/2013 CS 190: The Web: 2013 6
Looking up a Web Page
1/24/2013 CS 190: The Web: 2013 7
TCIP/IP Protocol
• Robust protocol that connects computers over the internet
• All Web traffic goes over TCIP/IP
• IP: Unique Address of your computer
1/24/2013 CS 190: The Web: 2013 8
IP Address
• Uniquely identifies your computer
• Can be mapped (roughly) to geographical location
• Associates with contact person
1/24/2013 CS 190: The Web: 2013 9
http://www.geobytes.com/IpLocator.htm
http://ws.arin.net/whois/?queryinput=170.140.150.186
Internet “Routing”
• How to find your way on the internet? That is, how is the connection to the webserver found?
• Answer: Internet “Routers” and “Switches”
1/24/2013 CS 190: The Web: 2013 10
TCIP/IP (continued)
• TCP/IP is robust to failure (things go wrong on the internet/physical layer)!
• Protocol detects errors so application can try to find a new route to the webpage and back
1/24/2013 CS 190: The Web: 2013 11
Internet Routing (2)
• Each router tries to “direct traffic” based on IP addresses in the packets, in the most efficient (but not shortest) path. Interesting and important research and engineering challenges to
this day! More in advanced CS classes…
• Examples:
/usr/sbin/traceroute dutch.mathcs.emory.edu (2 hops)
/usr/sbin/traceroute www.google.com (12 hops)
/usr/sbin/traceroute www.emory.edu (? hops)
1/24/2013 CS 190: The Web: 2013 12
First Web Browser
13
• Berners-Lee developed and defined the HTML language, which was created and defined using SGML, during the development cycle for the first Web browser/editor from October to December 1990.
• First PARSER for HTML, the WorldWideWeb app:
1/24/2013 CS 190: The Web: 2013
First Real Browser: Mosaic
14
• Developed by Mark Andresen (NCSA), funded by Al Gore’s High Performance Computing and Communication Act, 1991
1/24/2013 CS 190: The Web: 2013
1994-1997: Netscape
151/24/2013 CS 190: The Web: 2013
1995-present: MSFT Explorer
161/24/2013 CS 190: The Web: 2013
2003-present: Netscape begat Firefox, and others followed: Opera, Chrome, Safari,…
171/24/2013 CS 190: The Web: 2013
HTML Frames (recap)
1/24/2013 CS 190: The Web: 2013 18
Frames Example
19
<html><frameset rows="*" cols="80,*">
<frame src=“top.html" name="top">
<frameset rows="80,*"><frame src="frame2.html"
name="left"><frame src="frame3.html"
name="right"></frameset>
</frameset> </html>
Example: http://www.mathcs.emory.edu/~cs190000/lab3/
1/24/2013 CS 190: The Web: 2013
Make A Simple FrameSet
• cd share/public_html/
• mkdir lab3
• chmod a+rx lab3
• cd lab3
• cp /home/cs190000/share/public_html/lab3/* .
• Change to Horizontal Split
• Modify to use www.google.com as default content
1/24/2013 CS 190: The Web: 2013 20
Working hard…
1/24/2013 CS 190: The Web: 2013 21
HTML FORMS
1/24/2013 CS 190: The Web: 2013 22
HTML Forms: Enter The Programming
• <form>… input elements
</form>
• <form>Search term: <input type="text" name=“as_q" /><br>Language:<input type="text" name=“lr" />
</form>
1/24/2013 CS 190: The Web: 2013 23
Form Action
• <form name="input" action="http://www.google.com/search?” method="get">
…<input type="submit" value="Submit" /></form>
• Field values are passed along with the request
• Example:http://www.mathcs.emory.edu/~cs190000/lab3/search.html
1/24/2013 CS 190: The Web: 2013 24
What happens on Submit
1/24/2013 CS 190: The Web: 2013 25
The response Replaces the current page!
• Solution:
• <form name="input" target="TargetFrameName" action="http://www.google.com/search?” method="get">
…
</form>
• Example:http://www.mathcs.emory.edu/~cs190000/lab2/search3.html
1/24/2013 CS 190: The Web: 2013 26
Other Variable Types: Selection
• <select name=><option>lang_ru</option><option>lang_fr</option><option>lang_el</option><option>lang_de</option><option>lang_zh-CN</option></select>
1/24/2013 CS 190: The Web: 2013 27
Other Variables: Hidden
• Suppose I want to send some value to the server, but not allow the user to change it (or see it)
<input type=”hidden” name=”hvar” value=”666”>
1/24/2013 CS 190: The Web: 2013 28
Putting it All Together: Form-Based App
• Use frameset
– Frame 1, a.k.a. interface: form
– Frame 2, a.k.a. content pane: form result
• Example:http://cs190.mathcs.emory.edu/~cs190000/lab2/search.html
1/24/2013 CS 190: The Web: 2013 29
Try it yourself
1/24/2013 CS 190: The Web: 2013 30
Assignment 2: Your Own Interface to YouTube Search
• Develop a Framed site to search YouTube from your “advanced” search interface
– e.g., title and user name (“advanced” search)
• Extra credit for fun ideas/extensions:
– ?
1/24/2013 CS 190: The Web: 2013 31
Additional Resources
32
• Very nice Forms tutorial: http://www.tufat.com/html_tutorials/HTMLForms.php
• Very nice Frames tutorial:http://www.tufat.com/html_tutorials/HTMLFrames.php
• To edit an HTML file (more easily): – Open file using seamonkey
Type “seamonkey & “ at terminal promptThen select “Open file” from File menu. After page is opened, select “Edit page” from File menu
– Note that by default page is opened in graphical editor mode; select “<HTML> Source” tab on bottom to edit the actual HTML source, as you will need to do for most projects.
1/24/2013 CS 190: The Web: 2013
