Intro to HTML & CSS

678 views

Published on

Slides from the Reno Collective University introduction to HTML & CSS workshop.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
678
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to HTML & CSS

  1. 1. WEB 101HTML & CSS
  2. 2. TOOLS OFTHE TRADE
  3. 3. CODA
  4. 4. TEXT WRANGLER
  5. 5. TExTMATE
  6. 6. EXPRESSION WEB
  7. 7. DREAMWEAVER
  8. 8. BROWSERS the big four
  9. 9. BUILDINGTHE FOUNDATION
  10. 10. HTMLbuilding blocks
  11. 11. <html> html tag
  12. 12. <html></html>
  13. 13. <head>head definitions
  14. 14. <html> <head> </head></html>
  15. 15. <title> page title
  16. 16. <html> <head> <title>Our Page</title> </head></html>
  17. 17. <body>document body
  18. 18. <html> <head> <title>Our Page</title> </head> <body> </body></html>
  19. 19. <!-- # --> comments
  20. 20. <html> <head> <title>Our Page</title> </head> <body> <!-- code body here --> </body></html>
  21. 21. <p>paragraph tag
  22. 22. <p>My paragraph</p>
  23. 23. <br>line break
  24. 24. <br /> line break
  25. 25. <p>My<br /> paragraph</p>
  26. 26. <h1>heading tag
  27. 27. <h2>heading tag
  28. 28. <h3>heading tag
  29. 29. <h4>heading tag
  30. 30. <h5>heading tag
  31. 31. <h1> Important heading</h1><h3> Less important heading</h3>
  32. 32. <small>small font style tag
  33. 33. <p> Some text <small> some smaller text </small></p>
  34. 34. <div>division/container tag
  35. 35. <div> <h3>My section</h3> <p>Lorem ipsum</p></div>
  36. 36. <span>inline container
  37. 37. <p> Some<span>thing</span></p>
  38. 38. BUILD TIME
  39. 39. <ul>unordered list
  40. 40. <li>list item
  41. 41. <ul> <li>item 1</li> <li>item 2</li></ul>
  42. 42. <table>table definition
  43. 43. <thead> table header
  44. 44. <th>table header cell
  45. 45. <tbody> table body
  46. 46. <tr>table row
  47. 47. <td>table cell
  48. 48. <tfoot> table footer
  49. 49. <table> <thead> <th>Name</th> <th>Price</th> </thead> <tbody> <tr> <td>Latte</td> <td>$3.95</td> </tr> </tbody></table>
  50. 50. NAMINGCONVENTION
  51. 51. ids
  52. 52. singular
  53. 53. <div id = “intro”> Some text</div>
  54. 54. classes
  55. 55. many
  56. 56. <div class = “product”> Some text</div>
  57. 57. SEMANTIC WEB
  58. 58. less > MORE
  59. 59. SELFdocumenting
  60. 60. BUILD TIME
  61. 61. ADDING STYLE
  62. 62. stylesheets
  63. 63. .css files
  64. 64. selectors
  65. 65. h2 { ... }li { ... }p { ... }by element
  66. 66. .products { ... }li.products { ... }li .products { ... } by class
  67. 67. #intro { ... }div#intro { ... }div #intro { ... } by ID
  68. 68. #intro ul.products li{ ... } mix and match
  69. 69. style options
  70. 70. structure
  71. 71. height 50px;
  72. 72. width: 100px;
  73. 73. margin:5px 5px 5px 5px
  74. 74. WAIT!
  75. 75. introducing the box model
  76. 76. margin padding height width
  77. 77. padding: 5px 5px 5px 5px
  78. 78. div { height: 50px; width: 100px; padding: 5px 10px 5px 10px; margin: 5px 10px 5px 10px;}
  79. 79. 5px 5px10px 10px 50px 10px 10px 100px 5px 5px
  80. 80. HEIGHTHeight + padding-top + padding-bottom + margin-top + margin-bottom 50px + 5px + 5px + 5px + 5px = 70px WIDTHWidth + padding-left + padding-right + margin-left + margin-right50px + 10px + 10px + 10px + 10px = 90px
  81. 81. div { margin: top right bottom left;}div { margin: 5px 10px 5px 10px;}
  82. 82. Shorthanddiv { margin: 5px 10px;}div { margin: 5px;}
  83. 83. OK!
  84. 84. BUILD TIME
  85. 85. FLOATS
  86. 86. div { float: left;}div { float: right;}
  87. 87. fonts
  88. 88. font-family: helvetica, arial, sans-serif;
  89. 89. font-size: 12px;
  90. 90. font-size: 12pt;
  91. 91. font-size: 1em;
  92. 92. font-size: 70%;
  93. 93. font-weight: bold;
  94. 94. font-weight: normal;
  95. 95. text-decoration: underline;
  96. 96. text-decoration: none;
  97. 97. color
  98. 98. color: black;
  99. 99. color:#000000;
  100. 100. color: #000;
  101. 101. color:rgb(0,0,0);
  102. 102. background-color: black;
  103. 103. BUILD TIME

×