Your SlideShare is downloading. ×
Intro to the Internet & HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Intro to the Internet & HTML

268
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
268
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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