HTML News Packages Lesson

977 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
977
On SlideShare
0
From Embeds
0
Number of Embeds
207
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML News Packages Lesson

  1. 1. HTML CSS Online News Packages
  2. 2. Review
  3. 3. HTML CSS JavaScript
  4. 4. HTML CSS JavaScript Content (tags)
  5. 5. HTML CSS JavaScript Content (tags) Form (styles)
  6. 6. HTML CSS JavaScript Content (tags) Form (styles) Function (code)
  7. 7. HTML Review <h1> </h1> an HTML tag
  8. 8. HTML Review <h1 id="title" > an HTML tag an attribute
  9. 9. Three attributes we will be using a lot: id="some_identifier" class="some_grouping" style="size:14px; margin:0;"
  10. 10. Three attributes we will be using a lot: id="some_identifier" class="some_grouping" style="size:14px; margin:0;"
  11. 11. Three attributes we will be using a lot: id="some_identifier" class="some_grouping" style="size:14px; margin:0;"
  12. 12. Three attributes we will be using a lot: id="some_identifier" class="some_grouping" style="size:14px; margin:0;"
  13. 13. ID Attribute <h1  id="title">This is a title</h1> <h2  id="subhead">This is a subhead</h2> <p  id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p  id="part2">This is another paragraph.</p>
  14. 14. ID Attribute <h1  id="title">This is a title</h1> <h2  id="subhead">This is a subhead</h2> <p  id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p  id="part2">This is another paragraph.</p> <style>   #title{  font-­‐size:  20px;  }   #subhead{  font-­‐size:  30px;  }   #part1{  font-­‐size:  22px;  }   </style>
  15. 15. ID Attribute <h1  id="title">This is a title</h1> <h2  id="subhead">This is a subhead</h2> <p  id="part1">This is a paragraph describing something important. I've given it an identifier.</p> <p  id="part2">This is another paragraph.</p> <style>   #title{  font-­‐size:  20px;  }   #subhead{  font-­‐size:  30px;  }   #part1{  font-­‐size:  22px;  }   </style>
  16. 16. ID Selector for CSS #someid{   ! font-­‐size:  40px;   ! }
  17. 17. ID Selector for CSS #someid{   ! font-­‐size:  40px;   ! }
  18. 18. ID Selector for CSS #someid{   ! font-­‐size:  40px;   ! }
  19. 19. ID Selector for CSS #someid{   ! font-­‐size:  40px;   ! }
  20. 20. ID Selector for CSS #someid{   ! font-­‐size:  40px;   ! }
  21. 21. ID Selector for CSS #someid{   ! font-­‐size:  40px;   ! }
  22. 22. ID Selector for CSS #someid{   ! font-­‐size:  40px;   ! }
  23. 23. CSS goes in the <style> tag <script>   ! #some_id1{   font-­‐size:22px;   }   ! #some_id2{   font-­‐size:35px;   }   ! </script>
  24. 24. CSS goes in the <style> tag <script>   ! #some_id1{   font-­‐size:22px;   }   ! #some_id2{   font-­‐size:35px;   }   ! </script>
  25. 25. Exercise
  26. 26. Step 1 In your text-editing app, create three headlines as <h2> tags. They should be: ! "My favorite movie" "My favorite restaurant" and "My favorite hobby"
  27. 27. Step 2 Give each h2 header a unique ID attribute.
  28. 28. Answer so far <h2  id="movie">My favorite movie</h2> <h2  id="food">My favorite restaurant</h2> <h2  id="hobby">My favorite hobby</h2>
  29. 29. Step 3 Create a pair of <style> tags (opening and closing) above everything else you just typed.
  30. 30. Answer so far <style>   ! </style>
  31. 31. Step 4 Using the pound-sign selector, type CSS code to adjust the font-­‐size for each headline so that they are all different sizes.
  32. 32. Answer <style>   #movie{   font-­‐size:  30px;   }   #food{   font-­‐size:  22px;   }   </style>   <h2  id="movie">My favorite movie</h2> <h2  id="food">My favorite restaurant</h2> <h2  id="hobby">My favorite hobby</h2>
  33. 33. Class attribute in HTML <h1> </h1>
  34. 34. Class attribute in HTML <h1 class="name">
  35. 35. Class Selector for CSS .name{   ! font-­‐size:  40px;   ! }
  36. 36. Class Selector for CSS .name{   ! font-­‐size:  40px;   ! }
  37. 37. Class Selector for CSS .name{   ! font-­‐size:  40px;   ! }
  38. 38. Class Selector for CSS .name{   ! font-­‐size:  40px;   ! }
  39. 39. Class Selector for CSS .name{   ! font-­‐size:  40px;   ! }
  40. 40. Class Selector for CSS .name{   ! font-­‐size:  40px;   ! }
  41. 41. Class Selector for CSS .name{   ! font-­‐size:  40px;   ! }
  42. 42. Exercise
  43. 43. Step 1 Give two of your <h2> tags the same class attribute. ! Hint: Tags can have both an id and a class attribute!
  44. 44. Answer so far <h2  id="movie"  class="fun">My favorite movie</h2> <h2  id="food"  class="fun">My favorite restaurant</h2> <h2  id="hobby">My favorite hobby</h2>
  45. 45. Step 2 Add a single CSS class to your style tag and set the color property to red. ! Hint: look at how you did the ID, and use the same format.
  46. 46. Answer <style>   ! .fun{   ! color:  red;   ! }   ! ! </style>
  47. 47. Let's add some more properties Try adding a few more properties to either individual tags, or to the class. ! border:  1px  solid  black;   background:  green;   background:  url('http://placekitten.com/200/');
  48. 48. Inline CSS <h2 style="color:red;"> </h2> style attribute
  49. 49. Exercise Write some CSS directly in the h2 tag. ! Create a style attribute where the style sets the color property to blue. ! Take note, if it contradicts your CSS in your <style> tag, this takes precedence.
  50. 50. Answer so far <h2  id="movie"  class="fun">My favorite movie</h2> <h2  id="food"  class="fun">My favorite restaurant</h2> <h2  id="hobby"  style="color:blue;">My favorite hobby</h2>
  51. 51. Answer so far <h2  id="movie"  class="fun">My favorite movie</h2> <h2  id="food"  class="fun">My favorite restaurant</h2> <h2  id="hobby"  style="color:blue;">My favorite hobby</h2>
  52. 52. Pop Quiz
  53. 53. What's the pound symbol for?
  54. 54. What's the pound symbol for? Signifies an ID sector
  55. 55. What CSS selector uses the period?
  56. 56. What CSS selector uses the period? A class selector
  57. 57. Which selector would I use if I wanted to style multiple items in my news package at once?
  58. 58. Which selector would I use if I wanted to style multiple items in my news package at once? A class selector
  59. 59. Explain the difference between a class selector and ID selector
  60. 60. Explain the difference between a class selector and ID selector IDs are used to reference one unique tag. ! Classes are used to reference multiple tags at once.
  61. 61. Recap Three Attributes:
  62. 62. Recap Three Attributes: ID attribute: Give each tag a unique identifier, so we can reference it in CSS.
  63. 63. Recap Three Attributes: ID attribute: Give each tag a unique identifier, so we can reference it in CSS. CLASS attribute: Give groups of tags a class name, so we can reference it in CSS.
  64. 64. Recap Three Attributes: ID attribute: Give each tag a unique identifier, so we can reference it in CSS. CLASS attribute: Give groups of tags a class name, so we can reference it in CSS. STYLE attribute: Screw all that. Just put the CSS right in the tag.
  65. 65. Understanding <div>   tags
  66. 66. HTML: <div  id="container">   ! ! </div> CSS:
  67. 67. Some rules about divs • By default, <div> tags are invisible.
  68. 68. Some rules about divs • • By default, <div> tags are invisible. By default, <div> tags have height of zero.
  69. 69. Some rules about divs • • • By default, <div> tags are invisible. By default, <div> tags have height of zero. By default, <div> tags stretch to the full width of the browser.
  70. 70. HTML: <div  id="container">   ! ! </div> CSS: #container{   ! border:  1px  solid  black;   ! }
  71. 71. HTML: <div  id="container">   ! ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  300px;   ! }
  72. 72. HTML: <div  id="container">   ! ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  300px;   width:  200px;   ! }
  73. 73. HTML: <div  id="container">   ! ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  300px;   width:  400px;   background:  red;   }
  74. 74. Pop Quiz!
  75. 75. If I don't set a width, how wide are divs by default?
  76. 76. If I don't set a width, how wide are divs by default? 100% or the full browser width!
  77. 77. How tall are empty divs if I don't set a height?
  78. 78. How tall are empty divs if I don't set a height? Zero pixels.!
  79. 79. If I create a div, and I don't see it on my screen, what do I need to do to see it?
  80. 80. If I create a div, and I don't see it on my screen, what do I need to do to see it? Add some CSS styling, like border, height, width, background colors/images, etc.!
  81. 81. • <div> tags conform to the height of their content.! • If you set a height on a <div> tag, it overrides the content inside of it.! • If you set a width on a <div> tag, it overrides the content inside of it.
  82. 82. HTML: <div  id="container">   ! ! ! </div> CSS: #container{   ! border:  1px  solid  black;   ! }
  83. 83. HTML: <div  id="container">   ! Hello  world!   ! </div> CSS: #container{   ! border:  1px  solid  black;   ! } Hello world!
  84. 84. HTML: <div  id="container">   ! Hello  world!<br>   Foo<br>   Bar<br>   ! </div> CSS: #container{   ! border:  1px  solid  black;   ! } Hello world! Foo Bar
  85. 85. HTML: <div  id="container">   ! Hello  world!<br>   Foo<br>   Bar<br>   ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  12px;   ! } Hello world! Foo Bar
  86. 86. HTML: <div  id="container">   ! Hello  world!   ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  25px;   width:  20px;   ! } Hello world!
  87. 87. CSS! IS! AWESOME
  88. 88. Pop Quiz!
  89. 89. What happens to a <div> tag's height when I add some text to it?
  90. 90. What happens to a <div> tag's height when I add some text to it? It expands to conform to the content.!
  91. 91. What happens if the width of a <div> is smaller than a single word?
  92. 92. What happens if the width of a <div> is smaller than a single word? The text will protrude from the box.!
  93. 93. HTML: <div  id="container">   ! Hello  world!   ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  15px;   width:  50px;   ! } Hello world!
  94. 94. HTML: <div  id="container">   ! Hello  world!   ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  15px;   width:  50px;   overflow:  hidden;   } Hello world!
  95. 95. HTML: <div  id="container">   ! Hello  world!   ! </div> CSS: #container{   ! border:  1px  solid  black;   height:  15px;   width:  50px;   overflow:  hidden;   } Hello world!
  96. 96. The Box Model
  97. 97. The box model hello Margin Border Width Padding
  98. 98. Box Model Any padding, borders or margin are in addition to the width of the box.
  99. 99. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   960px
  100. 100. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;   } 960px
  101. 101. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;   } 960px
  102. 102. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;   } 960px
  103. 103. HTML: <div  id="container">   !    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;      padding:  5px;   } 960px
  104. 104. HTML: <div  id="container">   ! 960px    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;      padding:  5px;   } 960px
  105. 105. HTML: <div  id="container">   ! 960px    <div  id="navigation">      </div>   ! </div> CSS: #container{      width:  960px;   }   #navigation{      width:  960px;      background:  gray;      border:  5px  solid  red;      padding:  5px;   } 960px
  106. 106. Margins, Padding, Width hello Margin Border Width Padding
  107. 107. Box model
  108. 108. Box model
  109. 109. Box model
  110. 110. Box model
  111. 111. Pop Quiz
  112. 112. What is the width of this box? hello 20px 2px 200px 10px
  113. 113. What is the width of this box? hello 20px 2px 200px 200 pixels 10px
  114. 114. What is the width and padding combined? hello 20px 2px 200px 10px
  115. 115. What is the width and padding combined? hello 20px 2px 200px 220 pixels 10px
  116. 116. What is the width and padding and border combined? hello 20px 2px 200px 10px
  117. 117. What is the width and padding and border combined? hello 20px 2px 200px 224 pixels 10px
  118. 118. What is the total (outer) width? hello 20px 2px 200px 10px
  119. 119. What is the total (outer) width? 200 + 20 + 20 + ! 10 + 10 + 2 + 2 =! hello ! 264 pixels 20px 2px 200px 10px
  120. 120. padding and margins padding:
  121. 121. padding and margins padding:10px;
  122. 122. padding and margins padding:10px  5px  1px  0;
  123. 123. padding and margins padding:10px  5px  1px  0; top
  124. 124. padding and margins padding:10px  5px  1px  0; top right
  125. 125. padding and margins padding:10px  5px  1px  0; top right bottom
  126. 126. padding and margins padding:10px  5px  1px  0; top right left bottom
  127. 127. padding and margins padding:10px  5px  1px  0; top right left bottom
  128. 128. padding and margins margin: 5px  15px  1px  10px;
  129. 129. padding and margins margin: 5px  15px  1px  10px; top
  130. 130. padding and margins margin: 5px  15px  1px  10px; top right
  131. 131. padding and margins margin: 5px  15px  1px  10px; top right bottom
  132. 132. padding and margins margin: 5px  15px  1px  10px; top right bottom left
  133. 133. padding and margins padding:10px  2px;
  134. 134. padding and margins padding:10px  2px; top! bottom
  135. 135. padding and margins padding:10px  2px; top! right! bottom left
  136. 136. Pop Quiz
  137. 137. Explain the size of the margins around the box margin:  5px  25px;
  138. 138. Explain the size of the margins around the box margin:  5px  25px; Top and bottom are 5 pixels, ! left and right are 25 pixels.!
  139. 139. Explain the size of the padding inside this box padding:  1px  1px  1px  40px;
  140. 140. Explain the size of the padding inside this box padding:  1px  1px  1px  40px; Top, right, bottom are 1 pixel,! the left side is 40 pixels
  141. 141. Explain the size of the margins around the box margin:  0  5px;
  142. 142. Explain the size of the margins around the box margin:  0  5px; Top, right are 0 pixels,! the left and right side is 5 pixels
  143. 143. Explain the size of the padding inside the box padding:  15px;
  144. 144. Explain the size of the padding inside the box padding:  15px; All sides are 15 pixels
  145. 145. ͞ otˌstrap| bootstrap |ˈbo ! noun ! 1 a loop at the back of a boot, used to pull it on. ! 2 Computing [ usu. as modifier ] the technique of starting with existing resources to create something more complex and effective: we see the creative act as a bootstrap process. ! ! verb (bootstraps, bootstrapping, bootstrapped) [ with obj. ] ! 1 get (oneself or something) into or out of a situation using existing resources: the company is bootstrapping itself out of a marred financial past. ! • start up (an enterprise), esp. one based on the Internet, with minimal resources: they are bootstrapping their stations themselves, not with lots of dot-com venture capital.
  146. 146. Bootstrap
  147. 147. Bootstrap CDN http://bit.ly/google-bootstrap Include these <script> and <link> tags in the head of your document. ! You should also include jQuery too.
  148. 148. start with a responsive image <img  src="http://placehold.it/2000x1000"  class="img-­‐responsive"  />
  149. 149. start with a responsive image <img  src="http://placehold.it/2000x1000"  class="img-­‐responsive"  />
  150. 150. add a container <div  class="container">   ! ! ! ! ! </div>
  151. 151. add a container <div  class="container">   ! ! ! ! ! </div>
  152. 152. Grid System
  153. 153. 4 col 4 col 4 col 8 col
  154. 154. row
  155. 155. row col 3
  156. 156. row col 3 col 3
  157. 157. row col 3 col 3 col 3
  158. 158. row col 3 col 3 col 3 col 3
  159. 159. row col 3 col 3 col 3 col 3 =12
  160. 160. row row col 3 col 3 col 3 col 3 =12
  161. 161. row row col 3 col 5 col 3 col 3 col 3 =12
  162. 162. row row col 3 col 5 col 3 col 3 col 2 col 3 =12
  163. 163. row row col 3 col 5 col 3 col 3 col 2 col 3 col 4 =12
  164. 164. row row col 3 col 5 col 3 col 3 col 2 =12 col 3 col 4 col 1
  165. 165. row row col 3 col 5 col 3 col 3 col 2 =12 col 3 col 4 col 1 =12
  166. 166. Nested grids Row
  167. 167. Nested grids Row col 8
  168. 168. Nested grids Row col 8 col 4
  169. 169. Nested grids Row Row col 8 col 4
  170. 170. Nested grids Row Row col 8 col 4
  171. 171. Nested grids Row Row col 8 col 4
  172. 172. Nested grids col 4 Row Row col 8 col 4
  173. 173. Nested grids col 4 Row Row col 4 col 8 col 4
  174. 174. Nested grids col 4 Row Row col 4 col 8 col 4 col 4
  175. 175. Nested grids col 4 Row Row col 4 col 8 col 4 col 4
  176. 176. row row
  177. 177. row row col 4
  178. 178. row row col 4 col 8
  179. 179. row row col 4 col 8
  180. 180. row row col 4 col 8
  181. 181. col 4 row row col 4 col 8
  182. 182. col 4 row row col 4 col 8 col 8
  183. 183. col 4 row col 4 col 8 col 8 col 8 row
  184. 184. col 4 row col 4 col 8 col 8 col 8 row col 4
  185. 185. col 8
  186. 186. col 8 col 4
  187. 187. col 8 col 4
  188. 188. col 6 col 8 col 4
  189. 189. col 6 col 6 col 8 col 4
  190. 190. col 6 col 6 col 8 col 4
  191. 191. col 6 col 6 col 8 col 4 col 4
  192. 192. col 6 col 6 col 8 col 4 col 4 col 4
  193. 193. col 6 col 6 col 8 col 4 col 4 col 4 col 4
  194. 194. Offsets col 6 col 5 col 2 col 4 col 1
  195. 195. Offsets col 6 offset-3 col 5 col 2 col 4 col 1
  196. 196. Offsets col 6 offset-3 col 5 col 2 col 4 col 1
  197. 197. Offsets col 6 3 col col 5 offset-3 col 2 col 4 col 1
  198. 198. Offsets col 6 3 col col 5 offset-3 col 2 3 col col 4 col 1
  199. 199. Responsiveness row col 3 col 3 col 3 col 3
  200. 200. Responsiveness row col 3 col 3 col 3 col 3
  201. 201. Responsiveness col 3 row col 3 col 3 col 3
  202. 202. col 3 col 5 col 3 col 3 col 2 col 3 col 4 col 1
  203. 203. Order 1 Order 2 Order 3 Order 4 col 3 col 3 col 3 col 3 Order 5 col 5 Order 6 Order 7 col 2 col 4 Order 8 col 1
  204. 204. When should they stack? never col-sm- 750px col-md- 970px col-lg- 1170px
  205. 205. When should they stack? never col-sm- 750px col-md- 970px col-lg- 1170px
  206. 206. When should they stack? col-xs- never col-sm- 750px col-md- 970px col-lg- 1170px
  207. 207. Add some rows <div  class="container">   ! ! ! ! ! ! ! ! ! </div>
  208. 208. Add some rows <div  class="container">   !   <div  class="row">   ! ! ! ! !   </div>   ! ! !   <div  class="row">   ! ! ! !   </div>   </div> !
  209. 209. Add some rows <div  class="container">   !   <div  class="row">   ! ! ! ! !   </div>   ! ! !   <div  class="row">   ! ! ! !   </div>   </div> !
  210. 210. Add some rows <div  class="container">   !   <div  class="row">   ! ! ! ! !   </div>   ! ! !   <div  class="row">   ! ! ! !   </div>   </div> !
  211. 211. Add some rows <div  class="row">   ! <div  class="col-­‐sm-­‐8  col-­‐sm-­‐offset-­‐2">       ! ! ! </div> ! ! ! ! ! </div>

×