Download presentation
Presentation is loading. Please wait.
1
Web Basics: HTML and HTTP
1993 version of Mosaic browser. Must be loading Yahoo! from the late 90s (note ‘NSync link). Web Basics: HTML and HTTP
2
Implies formatting tags
What is HTML? Implies links Implies formatting tags HyperText Markup Language Main language for writing web pages that can be displayed in a web browser
3
Brief History of HTML 1991ish: Born Thru 1990s: Evolves
Versions 0 to 4 By 2000: Ver wins! Still most common/supported 2008: HTML5 introduced Rich media and mobility Not yet final Not fully supported We’ll use HTML5
4
HTML5 = 3 Technologies HyperText Markup Language (HTML) for Structure
I’ll cover HyperText Markup Language (HTML) for Structure Cascading Style Sheets (CSS) for Style JavaScript for Behavior Explore on your own
5
Then load it in a browser
How HTML Works <!DOCTYPE html> <html> <head> <title>Hello!</title> </head> <body> <h1>Howdy Y'all</h1> <p> How do ya like my HTML? </p> </body> </html> You write HTML text Then load it in a browser
6
<p>This is a paragraph.</p>
HTML Elements Start tag End tag <p>This is a paragraph.</p> Tag name Note slash! Renders as This is a paragraph.
7
<p>This is a <b>paragraph</b>.</p>
Elements can be nested Nested element <p>This is a <b>paragraph</b>.</p> Renders as This is a paragraph.
8
Elements can have attributes
<p style="color:blue">I'm blue!</p> Equals Attribute name Value string Renders as I’m blue!
9
head element for metadata body element for content
HTML Page Structure Doctype info <!DOCTYPE html> <html> <head> <title>Hello!</title> </head> <body> <h1>Howdy Y'all</h1> <p> How do ya like my HTML? </p> </body> </html> html element head element for metadata body element for content
10
Oh yeah, and … A few tags don’t come in pairs:
E.g.: <br> for line breaks E.g.: <img> for images Browsers collapse whitespace (spaces, newlines): Consecutive whitespace treated as single space Leading/trailing whitespace eliminated Special symbols: E.g.: for non-breaking space See: and
11
Now, all you need to do is learn these tags: http://www. w3schools
Now, all you need to do is learn these tags: (Ignore the ones marked “new” for now) (Ignore the “not supported” ones)
12
But how does the Web work
But how does the Web work? When you open a web page in your browser, where does that page come from, and how does it get there?
13
The architecture of the Web
Head First Servlets and JSP (2nd edition), p. 3
14
Typical web browser/server interaction
At the very least, what must to give your browser so that it can request a web page? A URL! Head First Servlets and JSP (2nd edition), p. 4
15
Anatomy of a URL Path Server Resource Port (optional) Protocol (http, https, etc.)
16
So what do requests and responses actually look like anyway?
Head First Servlets and JSP (2nd edition), p. 4
17
Example HTTP GET request
HTTP Method Path to resource Protocol version GET /select/selectBeerTaste.jsp HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X… Accept: text/xml,application/xml,application/xhtml+xml… Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO ,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Request headers
18
Text version of status code
Example HTTP response Protocol version HTTP status code Text version of status code HTTP/ OK Content-Type: text/html Content-Length: 397 Date: Wed, 19 Nov :25:40 GMT Server: Apache-Coyote/1.1 Connection: close <html> … </html> Response headers Response body
19
Let’s see the request/response in a bit more detail…
Head First Servlets and JSP (2nd edition), p. 18
20
Head First Servlets and JSP (2nd edition), p. 18
21
We need to create a web app (aka dynamic web page)
But the example only covers static web pages (i.e., just retrieve an HTML file) What if we want a richer user interaction? User sends additional data Server processes data and generates custom response We need to create a web app (aka dynamic web page)
22
Typical architecture of a web app
Head First Servlets and JSP (2nd edition), p. 27
23
Typical architecture of a web app
You write (e.g., your Ruby/Rails code) Given to you (e.g., Rails server) Head First Servlets and JSP (2nd edition), p. 27
24
Typical architecture of a web app
Head First Servlets and JSP (2nd edition), p. 27
25
Typical architecture of a web app
Head First Servlets and JSP (2nd edition), p. 27
26
How send parameters from browser?
Recall step #2… How send parameters from browser? Head First Servlets and JSP (2nd edition), p. 27
27
GET requests can embed parameters in the URL
Parameter list Head First Servlets and JSP (2nd edition), p. 14
28
Limitations of GET parameters
Total characters limited (varies by server) Parameters are exposed Bad for passwords! Another way to pass parameters: The HTTP POST method
29
Example HTTP POST request
HTTP Method Path to resource Protocol version POST /select/selectBeerTaste.do HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X… Accept: text/xml,application/xml,application/xhtml+xml… Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO ,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive color=dark&taste=malty Request headers Request body But how do you make a POST request? HTML Forms!
30
Structure of a form Optional ID for form Helper app URL
(more next lecture) form block <form name="myName" action="myHelperApp.do" method="post"> ...input elements here... <input type="submit" value="Submit"> </form> HTTP method Text on button Submit button input element
31
Common Input-Element Types (attributes vary)
password text submit radio checkbox select/ option textarea See
32
In Rails Tutorial Chapter 2, the generated scaffold includes HTML and forms
33
Summary HTML element syntax HTML page structure HTML tags
Summary HTML element syntax HTML page structure HTML tags Dynamic web pages and POST requests Form structure and input elements
Similar presentations
