The document provides an introduction to HTML, CSS, and JavaScript for creating online news packages. It discusses the main HTML tags and attributes used, including <h1>, <h2>, <p>, id, class, and style. It then covers CSS selectors like #id, .class, and style properties. Examples are provided for adjusting font sizes and colors. Div tags are also introduced, including how they are block elements that stretch full width by default.

1. HTML CSS
Online News Packages

2. Review

3. HTML
CSS
JavaScript

4. HTML
CSS
JavaScript
Content (tags)

5. HTML
CSS
JavaScript
Content (tags)
Form (styles)

6. HTML
CSS
JavaScript
Content (tags)
Form (styles)
Function (code)

7. HTML Review
<h1>
</h1>
an HTML tag

8. HTML Review
<h1 id="title" >
an HTML tag
an attribute

9. Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"

10. Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"

11. Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"

12. Three attributes we will be using a lot:
id="some_identifier"
class="some_grouping"
style="size:14px; margin:0;"

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. 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. 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. ID Selector for CSS
#someid{
!
font-­‐size:
40px;
!
}

17. ID Selector for CSS
#someid{
!
font-­‐size:
40px;
!
}

18. ID Selector for CSS
#someid{
!
font-­‐size:
40px;
!
}

19. ID Selector for CSS
#someid{
!
font-­‐size:
40px;
!
}

20. ID Selector for CSS
#someid{
!
font-­‐size:
40px;
!
}

21. ID Selector for CSS
#someid{
!
font-­‐size:
40px;
!
}

22. ID Selector for CSS
#someid{
!
font-­‐size:
40px;
!
}

23. CSS goes in the <style> tag
<script>
!
#some_id1{
font-­‐size:22px;
}
!
#some_id2{
font-­‐size:35px;
}
!
</script>

24. CSS goes in the <style> tag
<script>
!
#some_id1{
font-­‐size:22px;
}
!
#some_id2{
font-­‐size:35px;
}
!
</script>

25. Exercise

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. Step 2
Give each h2 header a unique ID
attribute.

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. Step 3
Create a pair of <style> tags
(opening and closing) above
everything else you just typed.

30. Answer so far
<style>
!
</style>

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. 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. Class attribute in HTML
<h1>
</h1>

34. Class attribute in HTML
<h1 class="name">

35. Class Selector for CSS
.name{
!
font-­‐size:
40px;
!
}

36. Class Selector for CSS
.name{
!
font-­‐size:
40px;
!
}

37. Class Selector for CSS
.name{
!
font-­‐size:
40px;
!
}

38. Class Selector for CSS
.name{
!
font-­‐size:
40px;
!
}

39. Class Selector for CSS
.name{
!
font-­‐size:
40px;
!
}

40. Class Selector for CSS
.name{
!
font-­‐size:
40px;
!
}

41. Class Selector for CSS
.name{
!
font-­‐size:
40px;
!
}

42. Exercise

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. 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. 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. Answer
<style>
!
.fun{
!
color:
red;
!
}
!
!
</style>

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. Inline CSS
<h2 style="color:red;"> </h2>
style attribute

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. 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. 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. Pop Quiz

53. What's the pound symbol for?

54. What's the pound symbol for?
Signifies an ID sector

55. What CSS selector uses the period?

56. What CSS selector uses the period?
A class selector

57. Which selector would I use if I wanted
to style multiple items in my news
package at once?

58. Which selector would I use if I wanted
to style multiple items in my news
package at once?
A class selector

59. Explain the difference between a
class selector and ID selector

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. Recap
Three Attributes:

62. Recap
Three Attributes:
ID attribute: Give each tag a unique
identifier, so we can reference it in CSS.

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. 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. Understanding
<div>
tags

66. HTML:
<div
id="container">
!
!
</div>
CSS:

67. Some rules about divs
•
By default, <div> tags are invisible.

68. Some rules about divs
•
•
By default, <div> tags are invisible.
By default, <div> tags have height of zero.

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. HTML:
<div
id="container">
!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
!
}

71. HTML:
<div
id="container">
!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
height:
300px;
!
}

72. HTML:
<div
id="container">
!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
height:
300px;
width:
200px;
!
}

73. HTML:
<div
id="container">
!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
height:
300px;
width:
400px;
background:
red;
}

74. Pop Quiz!

75. If I don't set a width, how wide are
divs by default?

76. If I don't set a width, how wide are
divs by default?
100% or the full browser width!

77. How tall are empty divs
if I don't set a height?

78. How tall are empty divs
if I don't set a height?
Zero pixels.!

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. 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. •
<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. HTML:
<div
id="container">
!
!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
!
}

83. HTML:
<div
id="container">
!
Hello
world!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
!
}
Hello world!

84. HTML:
<div
id="container">
!
Hello
world!<br>
Foo<br>
Bar<br>
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
!
}
Hello world!
Foo
Bar

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. HTML:
<div
id="container">
!
Hello
world!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
height:
25px;
width:
20px;
!
}
Hello
world!

87. CSS!
IS!
AWESOME

88. Pop Quiz!

89. What happens to a <div> tag's
height when I add some text to it?

90. What happens to a <div> tag's
height when I add some text to it?
It expands to conform to the content.!

91. What happens if the width of a
<div> is smaller than a single word?

92. What happens if the width of a
<div> is smaller than a single word?
The text will protrude from the box.!

93. HTML:
<div
id="container">
!
Hello
world!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
height:
15px;
width:
50px;
!
}
Hello world!

94. HTML:
<div
id="container">
!
Hello
world!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
height:
15px;
width:
50px;
overflow:
hidden;
}
Hello world!

95. HTML:
<div
id="container">
!
Hello
world!
!
</div>
CSS:
#container{
!
border:
1px
solid
black;
height:
15px;
width:
50px;
overflow:
hidden;
}
Hello world!

96. The Box Model

97. The box model
hello
Margin
Border
Width
Padding

98. Box Model
Any padding, borders or
margin are in addition to
the width of the box.

99. HTML:
<div
id="container">
!
<div
id="navigation">
</div>
!
</div>
CSS:
#container{
width:
960px;
}
960px

100. HTML:
<div
id="container">
!
<div
id="navigation">
</div>
!
</div>
CSS:
#container{
width:
960px;
}
#navigation{
width:
960px;
background:
gray;
}
960px

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. HTML:
<div
id="container">
!
<div
id="navigation">
</div>
!
</div>
CSS:
#container{
width:
960px;
}
#navigation{
width:
960px;
background:
gray;
border:
5px
solid
red;
}
960px

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. 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. 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. Margins, Padding, Width
hello
Margin
Border
Width
Padding

107. Box model

108. Box model

109. Box model

110. Box model

111. Pop Quiz

112. What is the width of this box?
hello
20px
2px
200px
10px

113. What is the width of this box?
hello
20px
2px
200px
200 pixels
10px

114. What is the width and
padding combined?
hello
20px
2px
200px
10px

115. What is the width and
padding combined?
hello
20px
2px
200px
220 pixels
10px

116. What is the width and
padding and border combined?
hello
20px
2px
200px
10px

117. What is the width and
padding and border combined?
hello
20px
2px
200px
224 pixels
10px

118. What is the total (outer) width?
hello
20px
2px
200px
10px

119. What is the total (outer) width?
200 + 20 + 20 + !
10 + 10 + 2 + 2 =!
hello
!
264 pixels
20px
2px
200px
10px

120. padding and margins
padding:

121. padding and margins
padding:10px;

122. padding and margins
padding:10px
5px
1px
0;

123. padding and margins
padding:10px
5px
1px
0;
top

124. padding and margins
padding:10px
5px
1px
0;
top right

125. padding and margins
padding:10px
5px
1px
0;
top right
bottom

126. padding and margins
padding:10px
5px
1px
0;
top right
left
bottom

127. padding and margins
padding:10px
5px
1px
0;
top right
left
bottom

128. padding and margins
margin: 5px
15px
1px
10px;

129. padding and margins
margin: 5px
15px
1px
10px;
top

130. padding and margins
margin: 5px
15px
1px
10px;
top right

131. padding and margins
margin: 5px
15px
1px
10px;
top right bottom

132. padding and margins
margin: 5px
15px
1px
10px;
top right bottom left

133. padding and margins
padding:10px
2px;

134. padding and margins
padding:10px
2px;
top!
bottom

135. padding and margins
padding:10px
2px;
top! right!
bottom left

136. Pop Quiz

137. Explain the size of the
margins around the box
margin:
5px
25px;

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. Explain the size of the
padding inside this box
padding:
1px
1px
1px
40px;

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. Explain the size of the
margins around the box
margin:
0
5px;

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. Explain the size of the
padding inside the box
padding:
15px;

144. Explain the size of the
padding inside the box
padding:
15px;
All sides are 15 pixels

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. Bootstrap

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. start with a responsive image
<img
src="http://placehold.it/2000x1000"
class="img-­‐responsive"
/>

149. start with a responsive image
<img
src="http://placehold.it/2000x1000"
class="img-­‐responsive"
/>

150. add a container
<div
class="container">
!
!
!
!
!
</div>

151. add a container
<div
class="container">
!
!
!
!
!
</div>

152. Grid System

161. 4 col
4 col
4 col
8 col

162. row

163. row
col 3

164. row
col 3
col 3

165. row
col 3
col 3
col 3

166. row
col 3
col 3
col 3
col 3

167. row
col 3
col 3
col 3
col 3
=12

168. row
row
col 3
col 3
col 3
col 3
=12

169. row
row
col 3
col 5
col 3
col 3
col 3
=12

170. row
row
col 3
col 5
col 3
col 3
col 2
col 3
=12

171. row
row
col 3
col 5
col 3
col 3
col 2
col 3
col 4
=12

172. row
row
col 3
col 5
col 3
col 3
col 2
=12
col 3
col 4
col
1

173. row
row
col 3
col 5
col 3
col 3
col 2
=12
col 3
col 4
col
1
=12

174. Nested grids
Row

175. Nested grids
Row
col 8

176. Nested grids
Row
col 8
col 4

177. Nested grids
Row
Row
col 8
col 4

178. Nested grids
Row
Row
col 8
col 4

179. Nested grids
Row
Row
col 8
col 4

180. Nested grids
col 4
Row
Row
col 8
col 4

181. Nested grids
col 4
Row
Row
col 4
col 8
col 4

182. Nested grids
col 4
Row
Row
col 4
col 8
col 4
col 4

183. Nested grids
col 4
Row
Row
col 4
col 8
col 4
col 4

187. row
row

188. row
row
col 4

189. row
row
col 4
col 8

190. row
row
col 4
col 8

191. row
row
col 4
col 8

192. col 4
row
row
col 4
col 8

193. col 4
row
row
col 4
col 8
col 8

194. col 4
row
col 4
col 8
col 8
col 8
row

195. col 4
row
col 4
col 8
col 8
col 8
row
col 4

198. col 8

199. col 8
col 4

200. col 8
col 4

201. col 6
col 8
col 4

202. col 6
col 6
col 8
col 4

203. col 6
col 6
col 8
col 4

204. col 6
col 6
col 8
col 4
col 4

205. col 6
col 6
col 8
col 4
col 4
col 4

206. col 6
col 6
col 8
col 4
col 4
col 4
col 4

207. Offsets
col 6
col 5
col 2
col 4
col
1

208. Offsets
col 6
offset-3
col 5
col 2
col 4
col
1

209. Offsets
col 6
offset-3
col 5
col 2
col 4
col
1

210. Offsets
col 6
3 col
col 5
offset-3
col 2
col 4
col
1

211. Offsets
col 6
3 col
col 5
offset-3
col 2
3 col
col 4
col
1

212. Responsiveness
row
col 3
col 3
col 3
col 3

213. Responsiveness
row
col 3
col 3
col 3
col 3

214. Responsiveness
col 3
row
col 3
col 3
col 3

215. col 3
col 5
col 3
col 3
col 2
col 3
col 4
col
1

216. 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

217. When should they stack?
never
col-sm-
750px
col-md-
970px
col-lg-
1170px

218. When should they stack?
never
col-sm-
750px
col-md-
970px
col-lg-
1170px

219. When should they stack?
col-xs-
never
col-sm-
750px
col-md-
970px
col-lg-
1170px

220. Add some rows
<div
class="container">
!
!
!
!
!
!
!
!
!
</div>

221. Add some rows
<div
class="container">
!
<div
class="row">
! !
! !
!
</div>
! !
!
<div
class="row">
! !
! !
</div>
</div>
!

222. Add some rows
<div
class="container">
!
<div
class="row">
! !
! !
!
</div>
! !
!
<div
class="row">
! !
! !
</div>
</div>
!

223. Add some rows
<div
class="container">
!
<div
class="row">
! !
! !
!
</div>
! !
!
<div
class="row">
! !
! !
</div>
</div>
!

224. Add some rows
<div
class="row">
!
<div
class="col-­‐sm-­‐8
col-­‐sm-­‐offset-­‐2">
!
!
!
</div>
!
!
!
!
!
</div>