Introduction to HTML and HTTP web designing

HTML and HTTP
http://www.computerhistory.org/timeline/images/1993_mosaic_browser_large.jpg

Overview
• HTML – How webpages are made
• HTTP – How the web works

What is HTML?
HyperText Markup Language
Main language for writing web pages that
can be displayed in a web browser
Implies links Implies formatting tags

Web Pages = 3 Technologies
• HTML for Structure
• Cascading Style Sheets (CSS) for Style
• JavaScript for Behavior

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

HTML Elements
<p>This is a paragraph.</p>
Start tag End tag
Note slash!
This is a paragraph.
Renders as

Elements can be nested
<p>This is a <b>paragraph</b>.</p>
This is a paragraph.
Renders as
Nested element

Elements can have attributes
<p style="color:blue">I'm blue!</p>
I’m blue!
Renders as
Attribute
Attribute
name
Equals
Value
string

HTML Page Structure
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
</head>
<body>
<h1>Howdy Y'all</h1>
<p>
How do ya like my HTML?
</p>
</body>
</html>
Doctype info
html
element
head element
for metadata
body element
for content

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: http://www.w3schools.com/html/html_entities.asp
and http://www.w3schools.com/tags/ref_symbols.asp

Now, all you need to do is learn these tags:
http://www.w3schools.com/tags/ref_byfunc.asp
(Ignore the “not supported” ones)

So how does the Web work?
When you open a web page in your browser,
where does that HTML come from, and
how does it get to your browser?

Client-Server Architecture of the Web
Head First Servlets and JSP (2nd edition), p. 3
From Head First Servlets and JSP (2nd edition), p. 4

Client-Server Interaction
From Head First Servlets and JSP (2nd edition), p. 4

How do you tell a browser to send
a request to a particular server?
?

URL (Uniform Resource Locator)
http://www.wickedlysmart.com:80/beeradvice/select/beer1.html

What protocol do these interactions follow?

HTTP (Hypertext Transfer Protocol)
• Request “methods” or “verbs”
– GET: Retrieve resource
– POST: Create resource
– PATCH: Update resource
– DELETE: Destroy resource
– … more …
• Response (only one type)
CRUD: 4 basic operations
of persistent storage

Example HTTP GET Request
GET /select/selectBeerTaste.jsp HTTP/1.1
Host: www.wickedlysmart.com
User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac O
Accept: text/xml,application/xml,application/xht
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
HTTP
Method
Path to
resource
Protocol
version
Request
headers

Example HTTP Response
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 397
Date: Wed, 19 Nov 2003 03:25:40 GMT
Server: Apache-Coyote/1.1
Connection: close
<html>
…
</html>
HTTP status code
Protocol
version
Response
headers
Response
body
Text version of status code

Coding Apps in Rails = Creating a Custom Server
• Define how to respond to different requests
• Define HTML to be sent to clients
Rails Server
HTTP Requests
HTTP Responses
Browser

Summary
• How to code HTML
• How HTTP and the Web works
http://flic.kr/p/aCLor3

Introduction to HTML and HTTP web designing

More Related Content

Similar to Introduction to HTML and HTTP web designing

More from divyapatel123440

Recently uploaded

Introduction to HTML and HTTP web designing

Editor's Notes