Intro to the Internet & HTML

384 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
384
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Intro to the Internet & HTML

    1. 1. WEB DEVELOPMENT BASICSTHE INTERNET AND INTRO TO HTML
    2. 2. WHAT’S IN A WEB REQUEST?
    3. 3. WHAT’S IN A WEB REQUEST?
    4. 4. WHAT’S IN A WEB REQUEST? http://www.cnn.com/2011/10/17/tech/iphone-injunction/index.html
    5. 5. WHAT’S IN A WEB REQUEST? http://www.cnn.com/2011/10/17/tech/iphone-injunction/index.html
    6. 6. AFTER BROWSER RENDER
    7. 7. AFTER BROWSER RENDER
    8. 8. DISSECTING THE URL
    9. 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. 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. 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. 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. 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. 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. 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. 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. 17. WEB SERVER RESPONSE
    18. 18. WEB SERVER RESPONSEHEADERS
    19. 19. WEB SERVER RESPONSEHEADERS CONTAIN INFORMATION FOR BROWSER USE
    20. 20. WEB SERVER RESPONSEHEADERS CONTAIN INFORMATION FOR BROWSER USE CAN SPECIFY CONTENT TYPE, RESPONSE CODE, INSTRUCTIONS TO REDIRECT, ETC.
    21. 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. 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. 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. 24. HTML OVERVIEW
    25. 25. HTML OVERVIEW
    26. 26. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGE
    27. 27. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)
    28. 28. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)TAG-BASED LANGUAGE, E.G.
    29. 29. HTML OVERVIEWHYPER TEXT MARKUP LANGUAGECONSISTS OF STRUCTURED CONTENT (NO FORMATTING)TAG-BASED LANGUAGE, E.G.! <tagname>Some content here</tagname>
    30. 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. 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. 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. 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. 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. 35. HTML ATTRIBUTES
    36. 36. HTML ATTRIBUTESATTRIBUTES APPEAR IN OPENING TAGS AND ARE USED MAINLYFOR ONE OF TWO PURPOSES:
    37. 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. 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. 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. 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. 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. 42. WHITE SPACE
    43. 43. WHITE SPACE
    44. 44. WHITE SPACEBROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACECHARACTERS
    45. 45. WHITE SPACEBROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACECHARACTERSWHITE SPACE IS COLLAPSED
    46. 46. WHITE SPACEBROWSERS IGNORE MULTIPLE CONSECUTIVE WHITE SPACECHARACTERSWHITE SPACE IS COLLAPSEDONE EXCEPTION IS <pre> ELEMENT (SHORT FOR PRESERVE)
    47. 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. 48. XHTML
    49. 49. XHTML
    50. 50. XHTMLXTENSIBLE HTMLE
    51. 51. XHTMLEXTENSIBLE HTMLIMPOSES THE STRICTEST AND MOST STRUCTUREDSTANDARDS ON TRADITIONAL HTML, E.G.
    52. 52. XHTMLEXTENSIBLE HTMLIMPOSES THE STRICTEST AND MOST STRUCTUREDSTANDARDS ON TRADITIONAL HTML, E.G. EVERY OPENING TAG MUST BE CLOSED
    53. 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. 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. 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

    ×