1 Static Web Pages Websites on Servers (The Big Picture) –Apache Tomcat can support static web pages –Primarily intended to support servlets and JSP –Some web server software does not support them Static Web Pages (HTML Files) HTML Forms

2 The Big Picture UNIX System Apache Tomcat Server Browser Software PC/MAC The Internet TCP/IP Software TCP/IP Software File System HTML, servlet, and/or JSP Files HTTP Protocol

3 Browser Browser interacts with user to get URL Browser converts URL to an IP address (DNS) Opens a connection to IP address and port 80 Sends an HTTP “request” containing URL Receives HTTP “response” containing HTML Interprets and displays the HTML

4 Web Server Tomcat server on system (or local PC here) Listens on port 80 Accepts TCP connections from browser clients Maps URL to path/file name Accesses files on the file system for the client Processes HTTP requests / Returns responses OR Passes input to dynamic server programs

5 Static HTML Document (Text File) Display Title Contents of body defines what the browser displays

6 Hello World HMTL File Your Name’s Hello World Website Hello world!

7 Proper Nesting of and … … Start/End on one line is OK Start/End on one line is OK

8 Basic HTML Tags Various font/format control pairs Headings Level 1 Paragraph Bold Italics Center Text Some format control tags are not a tag pair: Break (new line) Horizontal Rule

9 Basic HTML Tags Unordered Lists (Bullets at start of each line) List Item Ordered Lists (Numbers at start of each line) List Item 1 List Item 2

10 Links to Other Files Display a hyper-link to another html file: Display Text Display a link to download a non-html file: Display Text Display an image from a non-html file: (Note: not a tag pair)

11 HTML Forms Forms defined using tags Form tag contains parameters: –NameForm Name –MethodGet or Post –ActionURL of server program Example:... (the form’s widgets go here)

HTML Forms Many useful form “widgets”: –Select (Multiple Choice) –Check Boxes (on or off) –Text (Free Format Text Entry) These identify the name of a parameter to be submitted and allow selection or entry of the value for the parameter

Form Widgets Select (Multiple Choice) Multiple choice question to the user? <select name = “Title” (Choose One) First Choice Text Second Choice Text...

Form Widgets Check Boxes (On or Off) Question to the user? (Check all that apply) Text 1 Text 2 Text Entry Your Name:

Form Widgets “Control Widgets” –Submit Button –Reset Button

HTML Links with Get Requests A Get request can be implemented using an anchor with a URL, a ‘?’, and request data Spaces are represented using ‘+’ characters Example: <a href=“ name3=this+is+a+value+with+embedded+spaces”> Text to display on the page for this link

Introduction to Project 6 You will write an html page that sends request data to a server via either get or post You will use the reflect.cgi program on my website to “echo” the request data back to your browser so that you can see a response You will also use Wireshark to see the actual IP traffic on the Ethernet port when you send your get or post request

Wireshark

HTTP Get/Post Requests Browser submits data to server programs in one of two ways: Get or Post “Get” = request data is appended to url after ‘?’ url?parameter1=value1&parameter2=value2 “Post” = request data is in “Line-based text” field of the HTTP request”