Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Demystifying HTML: An introduction for beginners
Search
Lucas Cherkewski
August 12, 2017
Programming
0
240
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
690
Tiny Little Pieces: Designing and developing with pattern libraries
lchski
1
160
Why bother with code?
lchski
1
680
(Re)Designing Creativity
lchski
0
170
Be the Perfect Client (Round 2!)
lchski
0
520
Be the Perfect Client
lchski
1
340
Other Decks in Programming
See All in Programming
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
継続的な活動で築く地方エンジニアの道
myamashii
2
350
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Temporalを取り巻く仕様を整理する
sajikix
0
110
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Featured
See All Featured
Being A Developer After 40
akosma
72
580k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Fireside Chat
paigeccino
25
2.8k
Happy Clients
brianwarren
94
6.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Statistics for Hackers
jakevdp
792
220k
Embracing the Ebb and Flow
colly
81
4.3k
Automating Front-end Workflow
addyosmani
1362
200k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
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!
[email protected]
@lchski