Intro to the Internet & HTML

  • 256 views
Uploaded on

 

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
256
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. WEB DEVELOPMENT BASICSTHE 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 RESPONSEHEADERS
  • 19. WEB SERVER RESPONSEHEADERS CONTAIN INFORMATION FOR BROWSER USE
  • 20. WEB SERVER RESPONSEHEADERS CONTAIN INFORMATION FOR BROWSER USE CAN SPECIFY CONTENT TYPE, RESPONSE CODE, INSTRUCTIONS TO REDIRECT, ETC.
  • 21. WEB SERVER RESPONSEHEADERS 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 RESPONSEHEADERS 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 FOLLOWSCONTENT
  • 23. WEB SERVER RESPONSEHEADERS 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 FOLLOWSCONTENT IF A WEB PAGE WAS REQUESTED, THE CONTENT IS HTML!
  • 24. HTML OVERVIEW
  • 25. HTML OVERVIEW
  • 26. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGE
  • 27. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
  • 28. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)TAG-BASED LANGUAGE, E.G.
  • 29. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)TAG-BASED LANGUAGE, E.G.! <tagname>Some content here</tagname>
  • 30. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)TAG-BASED LANGUAGE, E.G.! <tagname>Some content here</tagname>HTML IS HIERARCHICAL, E.G.
  • 31. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)TAG-BASED LANGUAGE, E.G.! <tagname>Some content here</tagname>HTML IS HIERARCHICAL, E.G.! <div>
  • 32. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS 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 OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS 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 OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS 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 ATTRIBUTESATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLYFOR ONE OF TWO PURPOSES:
  • 37. HTML ATTRIBUTESATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLYFOR ONE OF TWO PURPOSES: 1. TO PROVIDE REQUIRED INFORMATION TO THE BROWSER, E.G.
  • 38. HTML ATTRIBUTESATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLYFOR ONE OF TWO PURPOSES: 1. TO PROVIDE REQUIRED INFORMATION TO THE BROWSER, E.G.! <img src=”images/homer.jpg” alt=”Homer Simpson” />
  • 39. HTML ATTRIBUTESATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLYFOR 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 ATTRIBUTESATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLYFOR 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 ATTRIBUTESATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLYFOR 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 SPACEBROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACECHARACTERS
  • 45. WHITE SPACEBROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACECHARACTERSWHITE SPACE IS COLLAPSED
  • 46. WHITE SPACEBROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACECHARACTERSWHITE SPACE IS COLLAPSEDONE EXCEPTION IS <pre> ELEMENT (SHORT FOR PRESERVE)
  • 47. WHITE SPACEBROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACECHARACTERSWHITE SPACE IS COLLAPSEDONE EXCEPTION IS <pre> ELEMENT (SHORT FOR PRESERVE)<pre>Render all white space characters</pre>
  • 48. XHTML
  • 49. XHTML
  • 50. XHTMLXTENSIBLE HTMLE
  • 51. XHTMLEXTENSIBLE HTMLIMPOSES THE STRICTEST AND MOST STRUCTUREDSTANDARDS ON TRADITIONAL HTML, E.G.
  • 52. XHTMLEXTENSIBLE HTMLIMPOSES THE STRICTEST AND MOST STRUCTUREDSTANDARDS ON TRADITIONAL HTML, E.G. EVERY OPENING TAG MUST BE CLOSED
  • 53. XHTMLEXTENSIBLE HTMLIMPOSES THE STRICTEST AND MOST STRUCTUREDSTANDARDS ON TRADITIONAL HTML, E.G. EVERY OPENING TAG MUST BE CLOSED SELF-CLOSING ELEMENTS USED WHERE NECESSARY
  • 54. XHTMLEXTENSIBLE HTMLIMPOSES THE STRICTEST AND MOST STRUCTUREDSTANDARDS ON TRADITIONAL HTML, E.G. EVERY OPENING TAG MUST BE CLOSED SELF-CLOSING ELEMENTS USED WHERE NECESSARY ATTRIBUTE VALUES ENCLOSED IN QUOTES
  • 55. XHTMLEXTENSIBLE HTMLIMPOSES THE STRICTEST AND MOST STRUCTUREDSTANDARDS 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