Introduction to HTML and HTTP web designing

divyapatel123440 28 views 25 slides May 28, 2024
Slide 1
Slide 1 of 25
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25

About This Presentation

Introduction to HTML

Size: 2.47 MB
Language: en
Added: May 28, 2024
Slides: 25 pages

Slide Content

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

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.: & nbsp ; 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)

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

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

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 (2 nd edition) , p. 3 From Head First Servlets and JSP (2 nd edition) , p. 4

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

How do you tell a browser to send a request to a particular server? Head First Servlets and JSP (2 nd edition) , p. 3 ?

URL (Uniform Resource Locator) http://www.wickedlysmart.com:80/beeradvice/select/beer1.html Protocol (http, https, etc.) Domain Name (web server) Port (optional) Resource Path

What protocol do these interactions follow? Head First Servlets and JSP (2 nd edition) , p. 4

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 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-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
Tags
Categories
Technology
Download
Download Slideshow Get the original presentation file
Quick Actions
Statistics
  • Views 28
  • Slides 25
  • Age 568 days
Related Slideshows
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx 11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
81 views
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx 10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
76 views
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx 13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
73 views
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx 11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
58 views
Know for Certain 21
Know for Certain
DaveSinNM
33 views
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx 17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
37 views
View More in This Category