Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Demystifying HTML: An introduction for beginners

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Lucas Cherkewski Lucas Cherkewski
August 12, 2017
Programming
370
0

Demystifying HTML: An introduction for beginners

Avatar for Lucas Cherkewski

Lucas Cherkewski

August 12, 2017

More Decks by Lucas Cherkewski

See All by Lucas Cherkewski
Learning to Code by Failing Safely
Avatar for Lucas Cherkewski lchski
0
1k
Tiny Little Pieces: Designing and developing with pattern libraries
Avatar for Lucas Cherkewski lchski
1
300
Why bother with code?
Avatar for Lucas Cherkewski lchski
1
810
(Re)Designing Creativity
Avatar for Lucas Cherkewski lchski
0
300
Be the Perfect Client (Round 2!)
Avatar for Lucas Cherkewski lchski
0
790
Be the Perfect Client
Avatar for Lucas Cherkewski lchski
1
470

Other Decks in Programming

See All in Programming
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
Avatar for rockname rockname
0
180
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
260
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ！ ~
Avatar for po3rin po3rin
1
5.7k
iOSDCのペンライトを自動制御したい！
Avatar for Akio Itaya akkeylab
0
330
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
1.4k
AI時代のコードレビューは人に向けるな、仕組みに向けろ
Avatar for meijin texmeijin
5
3.2k
Heart of Swift Concurrency
Avatar for Yuta Koshizawa koher
0
1.1k
Verilogで学ぶCPU自作入門.pdf
Avatar for uyuki uyuki234
7
3.9k
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
570
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
820
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.8k
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
130

Featured

See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.8k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
20k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
410
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.8k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
710
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
300
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k

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! [email protected] @lchski