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.

1b26895a0be18b58a2ec0447115a63aa?s=128

Abhinav Sharma

January 27, 2010
Tweet

Transcript

  1. None
  2. Lecture 2 HTML & CSS

  3. Waitlist 12 Students 6 Spots Uh-Oh But Probabilistically....

  4. Office Hours After Class | Email

  5. Languages

  6. HTML CSS PHP MySQL Javascript Java

  7. HTML CSS PHP MySQL Javascript Java

  8. HTML CSS PHP MySQL Javascript Java

  9. HTML CSS PHP MySQL Javascript Java

  10. <html>

  11. Disclaimer

  12. Ask Questions!

  13. None
  14. None
  15. HTML Markup Language for Webpages .html files Has styling abilities

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

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

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

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

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

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

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>
  22. <body>

  23. Body Contains Page Content

  24. Types of Elements Inline: Continue where they left off. Block

    Level: Adds a newline before/after
  25. Line Breaks

  26. Line Breaks DONT MATTER

  27. Paragraph <p>This is a long paragraph.</p> For paragraphs of text

    Block Level Useful for multi-paragraph texts Usually overridden by CSS
  28. 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
  29. 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>
  30. Images <img src=”pic.jpg” alt=”Oops, Backup” /> Embed images on Page

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

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

    Inline Alternative text if image fails Notice how the tag closes!
  33. Blank Line <br /> Don’t use <p> for this! Notice

    how the tag closes!
  34. Lists <li> ... </li> Block Level Useless on their own

    Must go with <ul> or <ol> Usually overridden with CSS
  35. Ordered Lists <ol> ... </ol> Automatic Numbering

  36. Ordered Lists <ul> ... </ul> Automatic Bulleting

  37. Div <div id=”main”> ... </div> <div class=”button”> ... </div> Block

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

    Level Defines parts of a page Commonly Nested Assign IDs and Classes for CSS
  39. Span <span> ... </span> Similar to DIV Inline Also used

    with CSS
  40. <table>

  41. <table> <table> ... </table> Represent Tabular Data Structure the webpage

    CSS Favors Tableless Designs Good idea, but don’t be obsessed!
  42. <tr> <td>Hi</td> <td>Yo</td> </tr> <tr> <td>How</td> <td>You</td> </tr> <tr> <td>I’m</td>

    <td>Goo</td> </tr> <table> </table>
  43. <tr> <td>Hi</td> <td>Yo</td> </tr> <tr> <td>How</td> <td>You</td> </tr> <td> <td>I’m</td>

    <td>Goo</td> </tr>
  44. <td>Hi</td> <td>Yo</td> <td>How</td> <td>You</td> <td>I’m</td> <td>Goo</td>

  45. Hi Yo How You I’m Goo

  46. <form>

  47. User Web Server

  48. User Web Server I want to send you data!

  49. User Web Server I want to send you data! Remember

    POST? Now use it!
  50. <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
  51. <form method="POST" action="target.php"> ... input fields here ... submit button

    </form>
  52. <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>
  53. <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>
  54. Other Input Types

  55. Radio Boxes

  56. Check Boxes

  57. Drop Down

  58. Text Area

  59. <head>

  60. Head Declares a Name (Title) Controls Behavior (Javascript Code) Styles

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

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

    of browser Shows on Google result Important to Search
  63. <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”
  64. <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”
  65. <meta> Contains extra metadata Can specify HTTP headers <meta name=”key”

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

    value=”val”> | <meta http-equiv=”key” content=”bar”>
  67. <script> Contains Javascript <script type=”text/javascript” src=”js/script.js”> <script type=”text/javascript”>/* raw js

    code */</script>
  68. <script> Contains Javascript <script type=”text/javascript” src=”js/script.js”> <script type=”text/javascript”>/* raw js

    code */</script>
  69. 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>
  70. 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>
  71. <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
  72. <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
  73. Phew!

  74. None
  75. Let’s Build It!

  76. None
  77. css

  78. Styling Language Easy English Syntax W3C .css File Control Multiple

    Pages What is CSS?
  79. page.html

  80. page.html Label the Parts

  81. page.html Doors Windshield

  82. page.html Doors Windshield <div id=”windshield”> ... </div> <div class=”door”> ...

    </div>
  83. 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 }
  84. car.html red.css Why CSS? + =

  85. car.html blue.css Why CSS? + =

  86. car.html blue.css Why CSS? + = Isolates Design & Content

  87. How to use CSS? Inline Embedded External <p style=”color:blue”>Hello</p> <style>

    #helloWorld { color:blue } </style> <link rel=”stylesheet” href=”blue.css” />
  88. None
  89. 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
  90. Resetting Defaults

  91. Resetting Defaults

  92. Resetting Defaults

  93. Resetting Defaults

  94. Select the Body | Select Default Font | Color Styling

    the Body
  95. Styling the Body body { background-color: #060808; font-family: "Lucida Grande",

    "Arial", sans-serif; color: #F2EDEB; }
  96. Margin & Width Width of the Content | Centering with

    Margins
  97. Margin & Width Width of the Content | Centering with

    Margins
  98. Margin & Width Width of the Content | Centering with

    Margins
  99. #page_wrap { width: 820px; margin-left: auto; margin-right: auto; } 820

    pixels
  100. Centering, Margins

  101. Centering, Margins

  102. Centering, Margins

  103. #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....
  104. Navigation Bar Inheritance | Change Block-Level to Inline | Border

  105. Navigation Bar Inheritance | Change Block-Level to Inline | Border

  106. Navigation Bar Inheritance | Change Block-Level to Inline | Border

  107. /* 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; }
  108. /* 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; }
  109. /* 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
  110. /* 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; }
  111. /* 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; }
  112. /* 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
  113. /* 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; }
  114. /* 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; }
  115. /* 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
  116. Content Margin Padding Border

  117. Effects! Multiple Selection | Effects

  118. Effects! Multiple Selection | Effects

  119. #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; }
  120. #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; }
  121. #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
  122. #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; }
  123. #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; }
  124. #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
  125. #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; }
  126. #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; }
  127. #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
  128. Looking Good! Rounded Corners (CSS3) | Float

  129. /* 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; }
  130. /* 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; }
  131. /* 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
  132. /* 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; }
  133. /* 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; }
  134. /* 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
  135. Almost There Using Classes

  136. Almost There Using Classes

  137. Almost There Using Classes

  138. .content_text { font-size: 14px; font-family: 'Lucida Grande', 'Helvetica', Arial, Sans-Serif;

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

    line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; }
  140. .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
  141. One Last Thing #footer { text-align: center; margin-bottom: 30px; color:

    #BFB8BD; font-size: 11px; }
  142. One Last Thing #footer { text-align: center; margin-bottom: 30px; color:

    #BFB8BD; font-size: 11px; }
  143. One Last Thing #footer { text-align: center; margin-bottom: 30px; color:

    #BFB8BD; font-size: 11px; }
  144. None
  145. http://reference.sitepoint.com/css

  146. Thank You

  147. Announcements

  148. S.O.S. Mini Project 2

  149. S.O.S. Mini Project 2 Highly Recommended if you’re here today

  150. Week 3 Week 4

  151. Photo Credits http://teresacentric.com/images/headbody.jpg http://thesuspiciousmind.com/wp-content/uploads/2009/08/body_outline2009-03-31-1238504214.jpg http://3.bp.blogspot.com/_4WqvfgHNn0g/Sbuk83YCLlI/AAAAAAAADQc/TPfidmxBsis/s400/Pigeonhole_Principle_Drichlet_Box_Drawer_Pigeons.jpg http://lh5.ggpht.com/_uvgFyH0uVeM/Rmkelro5nzI/AAAAAAAAAuU/FrQvjYQdb-M/web_hand_mouse_www_click.jpg

  152. None