1. WEB DEVELOPMENT BASICS
THE INTERNET AND INTRO TO HTML

2. WHAT’S IN A WEB REQUEST?

3. WHAT’S IN A WEB REQUEST?

4. WHAT’S IN A WEB REQUEST?
http://www.cnn.com/2011/10/17/tech/iphone-injunction/index.html

5. WHAT’S IN A WEB REQUEST?
http://www.cnn.com/2011/10/17/tech/iphone-injunction/index.html

6. AFTER BROWSER RENDER

7. AFTER BROWSER RENDER

8. DISSECTING THE URL

9. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL

10. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL
UNIFORM RESOURCE LOCATOR
PROTOCOL!! ! !
FULLY-QUALIFIED DOMAIN NAME
DOMAIN NAME
TOP-LEVEL DOMAIN
SUBDIRECTORY(IES)
PAGE
QUERY STRING
HASH TAG

11. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL
UNIFORM RESOURCE LOCATOR
PROTOCOL!! ! ! http
FULLY-QUALIFIED DOMAIN NAME
DOMAIN NAME
TOP-LEVEL DOMAIN
SUBDIRECTORY(IES)
PAGE
QUERY STRING
HASH TAG

12. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL
UNIFORM RESOURCE LOCATOR
PROTOCOL!! ! ! http
FULLY-QUALIFIED DOMAIN NAME
DOMAIN NAME
example.com
TOP-LEVEL DOMAIN
SUBDIRECTORY(IES)
PAGE
QUERY STRING
HASH TAG

13. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL
UNIFORM RESOURCE LOCATOR
PROTOCOL!! ! ! http
FULLY-QUALIFIED DOMAIN NAME
DOMAIN NAME
example.com
TOP-LEVEL DOMAIN
SUBDIRECTORY(IES) /hello
PAGE
QUERY STRING
HASH TAG

14. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL
UNIFORM RESOURCE LOCATOR
PROTOCOL!! ! ! http
FULLY-QUALIFIED DOMAIN NAME
DOMAIN NAME
example.com
TOP-LEVEL DOMAIN
SUBDIRECTORY(IES) /hello
PAGE /index.php
QUERY STRING
HASH TAG

15. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL
UNIFORM RESOURCE LOCATOR
PROTOCOL!! ! ! http
FULLY-QUALIFIED DOMAIN NAME
DOMAIN NAME
example.com
TOP-LEVEL DOMAIN
SUBDIRECTORY(IES) /hello
PAGE /index.php
QUERY STRING ?course=ics&block=1
HASH TAG

16. h t t p : / / w w w. e x a m p l e . c o m / h e l l o / i n d e x . p h p ? c o u r s e = i c s & b l o c k = 1 # s y l l a b u s
DISSECTING THE URL
UNIFORM RESOURCE LOCATOR
PROTOCOL!! ! ! http
FULLY-QUALIFIED DOMAIN NAME
DOMAIN NAME
example.com
TOP-LEVEL DOMAIN
SUBDIRECTORY(IES) /hello
PAGE /index.php
QUERY STRING ?course=ics&block=1
HASH TAG #syllabus

17. WEB SERVER RESPONSE

18. WEB SERVER RESPONSE
HEADERS

19. WEB SERVER RESPONSE
HEADERS
CONTAIN INFORMATION FOR BROWSER USE

20. WEB SERVER RESPONSE
HEADERS
CONTAIN INFORMATION FOR BROWSER USE
CAN SPECIFY CONTENT TYPE, RESPONSE CODE,
INSTRUCTIONS TO REDIRECT, ETC.

21. WEB SERVER RESPONSE
HEADERS
CONTAIN INFORMATION FOR BROWSER USE
CAN SPECIFY CONTENT TYPE, RESPONSE CODE,
INSTRUCTIONS TO REDIRECT, ETC.
CONTENT-TYPE: HTML, IMAGE DATA, VIDEO, AUDIO, PDF,
ETC. THIS TELLS THE BROWSER WHAT TO DO WITH THE
DATA THAT FOLLOWS

22. WEB SERVER RESPONSE
HEADERS
CONTAIN INFORMATION FOR BROWSER USE
CAN SPECIFY CONTENT TYPE, RESPONSE CODE,
INSTRUCTIONS TO REDIRECT, ETC.
CONTENT-TYPE: HTML, IMAGE DATA, VIDEO, AUDIO, PDF,
ETC. THIS TELLS THE BROWSER WHAT TO DO WITH THE
DATA THAT FOLLOWS
CONTENT

23. WEB SERVER RESPONSE
HEADERS
CONTAIN INFORMATION FOR BROWSER USE
CAN SPECIFY CONTENT TYPE, RESPONSE CODE,
INSTRUCTIONS TO REDIRECT, ETC.
CONTENT-TYPE: HTML, IMAGE DATA, VIDEO, AUDIO, PDF,
ETC. THIS TELLS THE BROWSER WHAT TO DO WITH THE
DATA THAT FOLLOWS
CONTENT
IF A WEB PAGE WAS REQUESTED, THE CONTENT IS
HTML!

24. HTML OVERVIEW

25. HTML OVERVIEW

26. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE

27. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)

28. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
TAG-BASED LANGUAGE, E.G.

29. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
TAG-BASED LANGUAGE, E.G.
! <tagname>Some content here</tagname>

30. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
TAG-BASED LANGUAGE, E.G.
! <tagname>Some content here</tagname>
HTML IS HIERARCHICAL, E.G.

31. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
TAG-BASED LANGUAGE, E.G.
! <tagname>Some content here</tagname>
HTML IS HIERARCHICAL, E.G.
! <div>

32. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
TAG-BASED LANGUAGE, E.G.
! <tagname>Some content here</tagname>
HTML IS HIERARCHICAL, E.G.
! <div>
<h2>Some heading here</h2>

33. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
TAG-BASED LANGUAGE, E.G.
! <tagname>Some content here</tagname>
HTML IS HIERARCHICAL, E.G.
! <div>
<h2>Some heading here</h2>
<p>Some content here</p>

34. HTML OVERVIEW
HYPER TEXT MARKUP LANGUAGE
CONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
TAG-BASED LANGUAGE, E.G.
! <tagname>Some content here</tagname>
HTML IS HIERARCHICAL, E.G.
! <div>
<h2>Some heading here</h2>
<p>Some content here</p>
</div>

35. HTML ATTRIBUTES

36. HTML ATTRIBUTES
ATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLY
FOR ONE OF TWO PURPOSES:

37. HTML ATTRIBUTES
ATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLY
FOR ONE OF TWO PURPOSES:
1. TO PROVIDE REQUIRED INFORMATION TO THE BROWSER, E.G.

38. HTML ATTRIBUTES
ATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLY
FOR ONE OF TWO PURPOSES:
1. TO PROVIDE REQUIRED INFORMATION TO THE BROWSER, E.G.
! <img src=”images/homer.jpg” alt=”Homer Simpson” />

39. HTML ATTRIBUTES
ATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLY
FOR ONE OF TWO PURPOSES:
1. TO PROVIDE REQUIRED INFORMATION TO THE BROWSER, E.G.
! <img src=”images/homer.jpg” alt=”Homer Simpson” />
2. TO ALLOW FOR CUSTOM STYLING (FORMATTING) OF HTML
ELEMENTS, E.G.

40. HTML ATTRIBUTES
ATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLY
FOR ONE OF TWO PURPOSES:
1. TO PROVIDE REQUIRED INFORMATION TO THE BROWSER, E.G.
! <img src=”images/homer.jpg” alt=”Homer Simpson” />
2. TO ALLOW FOR CUSTOM STYLING (FORMATTING) OF HTML
ELEMENTS, E.G.
! <span class=”highlight”>lorem ipsum</span>

41. HTML ATTRIBUTES
ATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLY
FOR ONE OF TWO PURPOSES:
1. TO PROVIDE REQUIRED INFORMATION TO THE BROWSER, E.G.
! <img src=”images/homer.jpg” alt=”Homer Simpson” />
2. TO ALLOW FOR CUSTOM STYLING (FORMATTING) OF HTML
ELEMENTS, E.G.
! <span class=”highlight”>lorem ipsum</span>

42. WHITE SPACE

43. WHITE SPACE

44. WHITE SPACE
BROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACE
CHARACTERS

45. WHITE SPACE
BROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACE
CHARACTERS
WHITE SPACE IS COLLAPSED

46. WHITE SPACE
BROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACE
CHARACTERS
WHITE SPACE IS COLLAPSED
ONE EXCEPTION IS <pre> ELEMENT (SHORT FOR PRESERVE)

47. WHITE SPACE
BROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACE
CHARACTERS
WHITE SPACE IS COLLAPSED
ONE EXCEPTION IS <pre> ELEMENT (SHORT FOR PRESERVE)
<pre>Render all white space characters</pre>

48. XHTML

49. XHTML

50. XHTML
XTENSIBLE HTML
E

51. XHTML
EXTENSIBLE HTML
IMPOSES THE STRICTEST AND MOST STRUCTURED
STANDARDS ON TRADITIONAL HTML, E.G.

52. XHTML
EXTENSIBLE HTML
IMPOSES THE STRICTEST AND MOST STRUCTURED
STANDARDS ON TRADITIONAL HTML, E.G.
EVERY OPENING TAG MUST BE CLOSED

53. XHTML
EXTENSIBLE HTML
IMPOSES THE STRICTEST AND MOST STRUCTURED
STANDARDS ON TRADITIONAL HTML, E.G.
EVERY OPENING TAG MUST BE CLOSED
SELF-CLOSING ELEMENTS USED WHERE
NECESSARY

54. XHTML
EXTENSIBLE HTML
IMPOSES THE STRICTEST AND MOST STRUCTURED
STANDARDS ON TRADITIONAL HTML, E.G.
EVERY OPENING TAG MUST BE CLOSED
SELF-CLOSING ELEMENTS USED WHERE
NECESSARY
ATTRIBUTE VALUES ENCLOSED IN QUOTES

55. XHTML
EXTENSIBLE HTML
IMPOSES THE STRICTEST AND MOST STRUCTURED
STANDARDS ON TRADITIONAL HTML, E.G.
EVERY OPENING TAG MUST BE CLOSED
SELF-CLOSING ELEMENTS USED WHERE
NECESSARY
ATTRIBUTE VALUES ENCLOSED IN QUOTES
TAG NAMES ARE LOWERCASE