Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Demystifying HTML: An introduction for beginners
Lucas Cherkewski
August 12, 2017
Programming
0
160
Demystifying HTML: An introduction for beginners
Lucas Cherkewski
August 12, 2017
Tweet
Share
More Decks by Lucas Cherkewski
See All by Lucas Cherkewski
Learning to Code by Failing Safely
lchski
0
330
Tiny Little Pieces: Designing and developing with pattern libraries
lchski
1
140
Why bother with code?
lchski
1
520
(Re)Designing Creativity
lchski
0
120
Be the Perfect Client (Round 2!)
lchski
0
300
Be the Perfect Client
lchski
1
160
Other Decks in Programming
See All in Programming
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.6k
From Java 11 to 17 and beyond
josepaumard
0
300
職場にPythonistaを増やす方法
soogie
0
310
2022 FrontEnd Training
mixi_engineers
1
280
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
microcms
0
470
Yumemi.apk #6 ~ゆめみのAndroidエンジニア 日頃の成果大発表会!~ Session 2
blendthink
1
210
Modern Web Apps with Spring Boot, Angular & TypeScript
toedter
12
14k
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
posquit0
1
320
Explore Java 17 and beyond
josepaumard
3
650
プログラミングを勉強したいと言われたら
yuba_4
0
400
読みやすいコードを書こう
yutorin
0
400
書籍【テスト駆動開発による組み込みプログラミング】を写経した感想
kabe
0
100
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
Robots, Beer and Maslow
schacon
152
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
Product Roadmaps are Hard
iamctodd
34
6.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Code Review Best Practice
trishagee
41
6.7k
Building an army of robots
kneath
299
40k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
What's new in Ruby 2.0
geeforr
336
30k
Transcript
Demystifying HTML An introduction for bloggers
What’s the plan?
1. What is HTML?
1. What is HTML? 2. Why use it?
1. What is HTML? 2. Why use it? 3. How
do we use it?
1. What is HTML? 2. Why use it? 3. How
do we use it? 4. Where can we learn more?
(Picture of me)
Lucas Cherkewski
What is HTML?
HTML is…
HTML is… content
HTML is… content HTML is… description
HTML is… content HTML is… description HTML is… structure
HTML:
HTML: HyperText HTML:
HTML: HyperText HTML: Markup
HTML: HyperText HTML: Markup HTML: Language
Why use HTML?
Specify precisely what you mean
Accessibility
Easier editing in WordPress
Customizing plugins and themes
Stepping stone to learning to code
How do we write HTML?
Somewhere to code…
Somewhere to code… the “text” tab!
None
None
Back to language school!
Meet your new best friends:
Meet your new best friends: </>
A basic HTML “tag”:
A basic HTML “tag”: <p>
A basic HTML “tag”: <p>Our words…
A basic HTML “tag”: <p>Our words…</p>
<p>Our words…</p>
A real-world example…
None
None
None
None
None
=
= <strong>
None
<p> Yaks are the <strong>best</ strong> </p>
Some basic tags…
Some basic tags… • <p>
Some basic tags… • <p> • <h1>
Some basic tags… • <p> • <h1>, <h2>, <h3>, …
Some basic tags… • <p> • <h1>, <h2>, <h3>, …
• <a>
Going beyond simple description
<a>Check out my site!</a>
<a href="example.com">Check out my site!</a>
<a href="example.com">Check out my site!</a>
A small post
My great adventure I went to Vancouver. It was so
cool!
<article> <h1>My great adventure</h1> <p>I went to <a href="example.org">Vancouver</a>. It
was so <strong>cool</strong>!</p> </article>
<article> <h1>My great adventure</h1> <p>I went to <a href="example.org">Vancouver</a>. It
was so <strong>cool</strong>!</p> </article>
Where can we learn more about HTML?
In-person
In-person • Ladies Learning Code
In-person • Ladies Learning Code • Camp Tech
In-person • Ladies Learning Code • Camp Tech • Lighthouse
Labs
Online courses
Online courses • Treehouse
Online courses • Treehouse • Codecademy
Online courses • Treehouse • Codecademy • Lynda
Online resources
Online resources • CSS-Tricks
Online resources • CSS-Tricks • MDN
Online resources • CSS-Tricks • MDN • Stack Overflow
Tools
Tools • Code editors
Tools • Code editors • Codepen
Tools • Code editors • Codepen • Glitch
WordPress specific
WordPress specific • Codex
WordPress specific • Codex • Facebook groups
WordPress specific • Codex • Facebook groups • WordCamps and
meetups
What’d we talk about?
HTML is a language to describe content
Knowing HTML helps us work on the web
There are many resources to learn from
None
Thanks!
Thanks! lucas@lucascherkewski.com @lchski