1. HTML: Basics

2. Agenda 12:00 - HTML Basics 1:00 - HTML – Lists & Styling Break 2:00 CSS Basics 3:00 Lunch 3:30 CSS Selectors & Classes Break 5:00 HTML5 Page using CSS & HTML

3. HTML is the BEST!

4. See the code with the s? HTML is the BEST!

5. Your turn HTML is the BEST!

6. Key Points 1.HTML stands for HyperText Markup Language. Hypertext means "text with links in it."

7. Key Points 2. A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more.

8. Key Points 3.What makes webpages look attractive? That's CSS—Cascading Style Sheets. “Think of it like skin and makeup that covers the bones of HTML.” - codecademy

9. Basic Components Add your own text to the page.

10. Add your own text to the page.

11. Tags Question: So what are the <> open and close brackets? Answer: Anything inside these brackets is called a Tag

12. Rules for Tags 1.Tags nearly always come in pairs: an open tag and a closing tag Open: Close:

13. Rules for Tags 2. They’re like parentheses: if you open one, you have to close it.

14. Rules for Tags 3. Tags nest, like the Russian dolls, so you should close them in the same order they lay down.

15. Rules for Tags - Nesting TEXT

16. Head & Body Add your own text to the page.

17. Titles

18. My Title

19. Body & Paragraphs

20. My Title

21. Checking In Everyone has coded in HTML today!

22. New Skills 1.When and why we use HTML 2.Set up an HTML file with tags 3.Title the webpage (in the ) 4.Create paragraphs (in the with tags)

23. Headings

25. Links

26. Same Window (_Self)

27. Same Window (_Self)

28. Same Window (_Self)

29. News! Same Window (_Self)

30. News! Same Window (_Self)

31. News! Same Window (_Blank)

32. Me Same Window (_Mailto:)

33. Images

36. Images + Links

39. Review

40. My Title

41. Header

42. Paragraph

45. HTML: Lists & Styling

46. http://www.w3schools.com/

47. Ordered Lists 1.Coffee 2.Tea 3.Milk

48. Coffee Tea Milk

49. Coffee Tea Milk

50. Unordered Lists Coffee Tea Milk

51. Nested Lists Coffee Tea o Black tea o Green tea Milk

52. Nested Lists

53. Nested Lists

54. Nested Lists

55. Guacamole

56. Guacamole

57. Styling

58. comments This is a paragraph.

59. font-size

60. color

61. color + font-size

62. font-family Title

63. all together

64. background-color

65. align

66. bold (strong) You have Mad Skills

67. emphasis You have Mad Skills

68. Summary – your new skills! Make ordered and unordered lists Change the color, size and type of font Add comments to our HTML file Change the background color Align text Bold and italicize text

69. Review Make ordered and unordered lists Change the color, size and type of font Add comments to our HTML file Change the background color Align text Bold and italicize text

70. image & link

71. lists Sherlock Holmes Watson loyal patient brave Mycroft

72. style Title

73. bold & emphasis

74. HTML: Tables, Div & Span

75. tables

77. Tessa Gray Magnus Bane

78. Tessa Gray Changling? Magnus Bane Warlock

80. Tessa Gray Changling? Magnus Bane Warlock

81. Tessa GrayChangling? Magnus BaneWarlock James CarstairsNephilium

82. Character Gift Tessa GrayChangling? Magnus BaneWarlock James CarstairsNephilium

83. NameGift Tessa GrayChangling? Magnus BaneWarlock James CarstairsNephilium

84. 3 columns across!

85. Infernal Devices Character Gift

86. Infernal Devices Character Gift

87. style

88. div(isions)

89. Header

90. style

93. linking a div tag

94. span tags

95. paragraph

97. CSS: Basics

98. CSS

99. span { color:blue; }

100. span { color:blue; font-family: verdana; }

101. inline styling vs. css One is awesome

102. syntax selector { property: value; }

103. syntax Source: http://www.w3schools.com/css/css_syntax.asp

104. h1 { text-align:center; font-size:30px; color: Orange; }

105. span { font-size:40px; background-color: Green; font-style: italic; }

106. comments /*I'm a CSS comment!*/

107. review

108. h1 { color:red; } h2 { color:purple; font-size:25px; } h3 { font-family:Impact; } p { font-style:italic; color:blue; }

109. hexadecimal colors h1 { color:#DAA520; }

110. pixels vs. em p { font-size:2em; }

111. default fonts h1 { color:#E87D73; font-family:serif; }

112. backup values p { font-family: Garamond, cursive; }

113. background-color, height & width div { background-color:#cc0000; height:100px; width:100px; }

114. borders td { height:50px; width:50px; border:1px dashed blue; } table { border: 1px solid black;

115. styling links a { color:#cc0000; text-decoration:none; }

116. review h1 { font-family: verdana; color:#00FF00; } p { font-size:18px; color:#FFA500; }

117. CSS: Selectors

118. body { background-color:#C6E2FF; }

119. div { background-color:#C6E2FF; } div li { font-family: Impact; {

120. CSS: Branching

121. classes.fancy { font-family: cursive; color: #0000CD; }

122. ids #serious { font-family:Courier; color:#CC0000; }

123. Bring it all together – HTML5

124. Specify a language

125. Specify your character set

126. Specify a language

127. Semantic Layout