Demystifying HTML: An introduction for beginners

9059e112be00a40606e7e16162e10e9a?s=47 Lucas Cherkewski
August 12, 2017
Programming
0
71

Demystifying HTML: An introduction for beginners

9059e112be00a40606e7e16162e10e9a?s=128

Lucas Cherkewski

August 12, 2017
Tweet

More Decks by Lucas Cherkewski

See All by Lucas Cherkewski
9059e112be00a40606e7e16162e10e9a?s=48 lchski
0
170
9059e112be00a40606e7e16162e10e9a?s=48 lchski
1
130
9059e112be00a40606e7e16162e10e9a?s=48 lchski
1
420
9059e112be00a40606e7e16162e10e9a?s=48 lchski
0
100
9059e112be00a40606e7e16162e10e9a?s=48 lchski
0
220
9059e112be00a40606e7e16162e10e9a?s=48 lchski
1
140

Other Decks in Programming

See All in Programming
770ede26fb450c104128e35ac37711fd?s=48 musaprg
0
710
38a509643276213e62730e92ef220405?s=48 masatakamiki
0
210
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
300
C9ab1175a6981a2f67ce8d08aa17c15a?s=48 mpilquist
0
140
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
1.2k
E6143330e12cd226c3dab99f3fe8cb3e?s=48 yanaemon
1
150
D9e4d5a4b36f83fbde1076815df1362f?s=48 bmack
0
180
018058d75600e02954f48b471765ae3a?s=48 yuki384
0
190
3295d80faee461db1093982361256fe4?s=48 panini
0
100
E48bd6aeb77b88d5762cd5d96e2c397d?s=48 wen_liao
2
1.1k
Bf3acef686273e03fa4fdf125fdad3e9?s=48 kuncevic
0
120
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
310

Featured

See All Featured
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
8
950
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
256
24k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
99
5.7k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
65
2.9k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
183
14k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
620
40k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
398
20k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
230
750k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k

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!

  27. None
  28. None

  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…

  38. None
  39. None
  40. None
  41. None
  42. None

  43. =

  44. = <strong>

  45. None

  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

  85. None

  86. Thanks!

  87. Thanks! lucas@lucascherkewski.com @lchski