Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How the Web Works: Lecture 2

How the Web Works: Lecture 2

This talk was designed for a class (98-135) taught at Carnegie Mellon University in Spring 2010.

Abhinav Sharma

January 27, 2010
Tweet

More Decks by Abhinav Sharma

Other Decks in Education

Transcript

  1. HTML Markup Language for Webpages .html files Has styling abilities

    too (color, font, layout) But we’ll avoid them and favor CSS
  2. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>
  3. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>
  4. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>
  5. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>
  6. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>
  7. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>
  8. Paragraph <p>This is a long paragraph.</p> For paragraphs of text

    Block Level Useful for multi-paragraph texts Usually overridden by CSS
  9. Headings <h1>Awesome Website Name</h1> <h2>Semi-Awesome Website</h2> Simply headers on a

    page Different sizes: h1, h2 Block-level Elements Usually Overridden with CSS
  10. Links <a href=”page.htm”>Link Name</a> Links one page to another Can

    be relative or absolute Inline <a href=”calendar.php”>Calendar</a> <a href=”www.google.com”>Goo</a>
  11. Images <img src=”pic.jpg” alt=”Oops, Backup” /> Embed images on Page

    Inline Alternative text if image fails Notice how the tag closes!
  12. Images <img src=”pic.jpg” alt=”Oops, Backup” /> Embed images on Page

    Inline Alternative text if image fails Notice how the tag closes!
  13. Images <img src=”pic.jpg” alt=”Oops, Backup” /> Embed images on Page

    Inline Alternative text if image fails Notice how the tag closes!
  14. Lists <li> ... </li> Block Level Useless on their own

    Must go with <ul> or <ol> Usually overridden with CSS
  15. Div <div id=”main”> ... </div> <div class=”button”> ... </div> Block

    Level Defines parts of a page Commonly Nested Assign IDs and Classes for CSS
  16. Div <div id=”main”> ... </div> <div class=”button”> ... </div> Block

    Level Defines parts of a page Commonly Nested Assign IDs and Classes for CSS
  17. <table> <table> ... </table> Represent Tabular Data Structure the webpage

    CSS Favors Tableless Designs Good idea, but don’t be obsessed!
  18. <form> ... input fields ... submit button </form> Fields to

    enter values into Text Boxes Radio Boxes Check Boxes... Submit button POSTs input data to another page. which is then processed using PHP, etc... Forms
  19. <form method="POST" action="target.php"> <input type="text" name="login" /><br /> <input type="password"

    name="pass" /><br /> <input type="submit" value=”Submit Query”> </form>
  20. <form method="POST" action="target.php"> <input type="text" name="login" /><br /> <input type="password"

    name="pass" /><br /> <input type="submit" value=”Submit Query”> </form>
  21. Head Declares a Name (Title) Controls Behavior (Javascript Code) Styles

    the Body (CSS Code) Contains page information (Meta Tags)
  22. <title> <title>My Page Title</title> Specifies Page Title Shows on top

    of browser Shows on Google result Important to Search
  23. <title> <title>My Page Title</title> Specifies Page Title Shows on top

    of browser Shows on Google result Important to Search
  24. <link> Not a hyperlink! Links to other documents <link rel="stylesheet"

    type="text/css" href="style.css" media=”screen”> Usually CSS files Can specify “back” and “next”
  25. <link> Not a hyperlink! Links to other documents <link rel="stylesheet"

    type="text/css" href="style.css" media=”screen”> Usually CSS files Can specify “back” and “next”
  26. <meta> Contains extra metadata Can specify HTTP headers <meta name=”key”

    value=”val”> | <meta http-equiv=”key” content=”bar”>
  27. <meta> Contains extra metadata Can specify HTTP headers <meta name=”key”

    value=”val”> | <meta http-equiv=”key” content=”bar”>
  28. Can link to a CSS file (yes, there’s multiple ways)

    Can specify CSS inside HTML <style> <style type=”text/css”> /*raw css*/ </style> <style> @import url </style>
  29. Can link to a CSS file (yes, there’s multiple ways)

    Can specify CSS inside HTML <style> <style type=”text/css”> /*raw css*/ </style> <style> @import url </style>
  30. <style> Can link to a CSS file (yes, there’s multiple

    ways) <style type=”text/css”> /*raw css*/ </style> <style> @import url </style> Can specify CSS inside HTML
  31. <style> Can link to a CSS file (yes, there’s multiple

    ways) <style type=”text/css”> /*raw css*/ </style> <style> @import url </style> Can specify CSS inside HTML
  32. css

  33. CSS Selectors Selection (HTML) Styling (CSS) Tag ID Class <h1>,

    <p> h1 { color: blue } <div id=”windshield”> </div> #windshield { color: blue } <div class=”door”> </div> .door { color: blue }
  34. How to use CSS? Inline Embedded External <p style=”color:blue”>Hello</p> <style>

    #helloWorld { color:blue } </style> <link rel=”stylesheet” href=”blue.css” />
  35. Resetting Defaults Browsers apply a default style ex. Bullets for

    <ul> <li> We reset these with reset.css Then we apply our style.css Find reset.css online http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css
  36. #logo { text-align: center; margin-top: 20px; margin-bottom: 15px; } text-align

    on images is bad! Lookup absolute and relative Try the Mini for more....
  37. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }
  38. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }
  39. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; } Inheritance Unordered Lists inside #nav
  40. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }
  41. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }
  42. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; } Convert <li> to inline element
  43. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }
  44. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }
  45. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; } Border Margin Padding
  46. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }
  47. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }
  48. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; } Top, Right Top, Right, Bottom, Left
  49. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }
  50. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }
  51. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; } Removes Underline
  52. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }
  53. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }
  54. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; } Multiple Selection Conditional Effects
  55. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }
  56. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }
  57. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; } New Feature (CSS3) Irregular Implementation
  58. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }
  59. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }
  60. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; } Float
  61. .content_text { font-size: 14px; font-family: 'Lucida Grande', 'Helvetica', Arial, Sans-Serif;

    line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; }
  62. .content_text { font-size: 14px; font-family: 'Lucida Grande', 'Helvetica', Arial, Sans-Serif;

    line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; }
  63. .content_text { font-size: 14px; font-family: 'Lucida Grande', 'Helvetica', Arial, Sans-Serif;

    line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; } Line Spacing