Demystifying HTML: An introduction for beginners

Transcript

1. Demystifying HTML An introduction for bloggers
2. What’s the plan?
3. 1. What is HTML?
4. 1. What is HTML? 2. Why use it?
5. 1. What is HTML? 2. Why use it? 3. How do we use it?
6. 1. What is HTML? 2. Why use it? 3. How do we use it? 4. Where can we learn more?
7. (Picture of me)
8. Lucas Cherkewski
9. What is HTML?
10. HTML is…
11. HTML is… content
12. HTML is… content HTML is… description
13. HTML is… content HTML is… description HTML is… structure
14. HTML:
15. HTML: HyperText HTML:
16. HTML: HyperText HTML: Markup
17. HTML: HyperText HTML: Markup HTML: Language
18. Why use HTML?
19. Specify precisely what you mean
20. Accessibility
21. Easier editing in WordPress
22. Customizing plugins and themes
23. Stepping stone to learning to code
24. How do we write HTML?
25. Somewhere to code…
26. Somewhere to code… the “text” tab!
29. Back to language school!
30. Meet your new best friends:
31. Meet your new best friends: </>
32. A basic HTML “tag”:
33. A basic HTML “tag”: <p>
34. A basic HTML “tag”: <p>Our words…
35. A basic HTML “tag”: <p>Our words…</p>
36. <p>Our words…</p>
37. A real-world example…
43. =
44. = <strong>
46. <p>
 Yaks are the <strong>best</ strong> </p>
47. Some basic tags…
48. Some basic tags… • <p>
49. Some basic tags… • <p> • <h1>
50. Some basic tags… • <p> • <h1>, <h2>, <h3>, …
51. Some basic tags… • <p> • <h1>, <h2>, <h3>, … • <a>
52. Going beyond simple description
53. <a>Check out my site!</a>
54. <a href="example.com">Check out my site!</a>
55. <a href="example.com">Check out my site!</a>
56. A small post
57. My great adventure I went to Vancouver. It was so cool!
58. <article> <h1>My great adventure</h1> <p>I went to <a href="example.org">Vancouver</a>. It was so <strong>cool</strong>!</p> </article>
59. <article> <h1>My great adventure</h1> <p>I went to <a href="example.org">Vancouver</a>. It was so <strong>cool</strong>!</p> </article>
60. Where can we learn more about HTML?
61. In-person
62. In-person • Ladies Learning Code
63. In-person • Ladies Learning Code • Camp Tech
64. In-person • Ladies Learning Code • Camp Tech • Lighthouse Labs
65. Online courses
66. Online courses • Treehouse
67. Online courses • Treehouse • Codecademy
68. Online courses • Treehouse • Codecademy • Lynda
69. Online resources
70. Online resources • CSS-Tricks
71. Online resources • CSS-Tricks • MDN
72. Online resources • CSS-Tricks • MDN • Stack Overflow
73. Tools
74. Tools • Code editors
75. Tools • Code editors • Codepen
76. Tools • Code editors • Codepen • Glitch
77. WordPress specific
78. WordPress specific • Codex
79. WordPress specific • Codex • Facebook groups
80. WordPress specific • Codex • Facebook groups • WordCamps and meetups
81. What’d we talk about?
82. HTML is a language to describe content
83. Knowing HTML helps us work on the web
84. There are many resources to learn from
86. Thanks!
87. Thanks! lucas@lucascherkewski.com @lchski