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
Basic HTML + SEO - A Simple Tutorial @5945
Search
Andro Chen Chun-An
May 02, 2013
Programming
0
52
Basic HTML + SEO - A Simple Tutorial @5945
2013-05-02 Basic HTML + SEO - A Simple Tutorial @5945
Andro Chen Chun-An
May 02, 2013
Tweet
Share
More Decks by Andro Chen Chun-An
See All by Andro Chen Chun-An
入坑滑雪自由行: 新手入門懶人包 - 雪場,費用,行程,行李,訓練 全攻略
androchentw
0
10
2021-02-17_splunk_cafe.pdf
androchentw
0
75
When Andro Meets Android - Android Taipei
androchentw
0
190
What I've Learned From Startups
androchentw
0
94
Baidu SEO II
androchentw
1
85
Baidu SEO - A Practical Guide
androchentw
0
55
Privacy-Preserving Data Mining and Collusion Resistance
androchentw
0
49
啡˙聞
androchentw
1
55
VANET Simulation of AP assistance
androchentw
0
42
Other Decks in Programming
See All in Programming
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
160
Navigating Dependency Injection with Metro
zacsweers
3
2.3k
Kiroで始めるAI-DLC
kaonash
2
610
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
700
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
アセットのコンパイルについて
ojun9
0
130
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
250
testingを眺める
matumoto
1
140
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Cult of Friendly URLs
andyhume
79
6.6k
RailsConf 2023
tenderlove
30
1.2k
4 Signs Your Business is Dying
shpigford
184
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
It's Worth the Effort
3n
187
28k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
Basic HTML + SEO - A Simple Tutorial " 2013/05/02"
Andro Chen 陳俊安" 5945 呼叫師傅
Agenda • HTML" • Basic" • With CSS" • Tools"
• Example – 電子報" • SEO Concept" • Q & A" • There is no stupid question!" 2014/3/20 Andro Chen © 5945 呼叫師傅 2
HTML - HyperText Markup Language • Structure(Bone) of a webpage"
• CSS – Skin, color" • JavaScript – Brain, animation " • Tags!" 2014/3/20 Andro Chen © 5945 呼叫師傅 3
HTML = Tags + Attributes • Basic1.html" • <!DOCTYPE HTML>"
• <html>" • <head>! • <title>! • <body>! • Basic2.html" • <!-- .. -->" • <h1> to <h6>! • <p>" • Basic3.html" • <a href=“URL”>! • <strong>" • <hr>" 2014/3/20 Andro Chen © 5945 呼叫師傅 4 • Basic4.html" • <meta> utf-8" • <img src=“URL” alt=“text”>! • <button>" • <br>" • <blockquote>" • <i>" • Basic5.html" • <meta> keywords, description! • <div>! • <span>" • <iframe>" • Basic6.html" • <ol>, <li>" • <ul>, <li>" • <table>" • <form>, <input>" • Google!"
Layout – Wiki Outside In 2014/3/20 Andro Chen © 5945
呼叫師傅 5
Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅
6
Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅
7
Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅
8
HTML – Layout With CSS • 行內套用 (Inline)" • <p
style=“font-size: 16px;”></p>" • 嵌入套用 (Embed) " • <style type="text/css"> div { background-color: #abcdef; } </style> " • 外部連接套用 (External Link)" • <link rel=stylesheet type="text/css" href=“site.css"> 2014/3/20 Andro Chen © 5945 呼叫師傅 9 • Box Model" (Via 1keydata.com)"
HTML – Layout With CSS • Basic4_css1.html" • Selector –
tag, #id, .class" • font-size, font-weight, text-decoration" • color, background-color" • Basic4_css2.html" • width, height" • margin, padding, border" • -top, -right, -bottom, -left" 2014/3/20 Andro Chen © 5945 呼叫師傅 10 • float_demo.html" • float <-> clear" • left, right, none"
HTML – Cheat sheet • 改圖 <img src=“URL” alt=“替代文字”>" •
改連結 <a href=“URL”>連結文字</a>" • CSS" • #id {" font-family: “微軟正黑體”, Verdana; /* 字型 */" font-size: 12px; /* 字體大小 */" font-weight: bold; /* 粗斜體 */" text-decoration: underline; /* 底線 */" "color: blue; /* 字顏色 */" }" 2014/3/20 Andro Chen © 5945 呼叫師傅 11
HTML – Tools • Editor - Sublime Text 2" •
Chrome DevTools" • More on 5945 blog" 2014/3/20 Andro Chen © 5945 呼叫師傅 12
HTML – 電子報v1 by Lucien 2014/3/20 Andro Chen © 5945
呼叫師傅 13
Terms • SEM " • Search Engine Marketing" • ~=
Paid search + SEO" • Instant qualified traffic" • SEO" • Search Engine Optimization" • Organic search results • Site Structure, content, keywords" • Long-term management" 2014/3/20 Andro Chen © 5945 呼叫師傅 14
2014/3/20 Andro Chen © 5945 呼叫師傅 15
SEO - Index • Principal" • Spider/Crawler => pre-process =>
rank" • Structure" • Website structure – HTML" • Structure Optimization" • Content" • Page Optimization" • Link Optimization" • Keyword" • Cheat/Punishment: Black Hat SEO" 2014/3/20 Andro Chen © 5945 呼叫師傅 16
2011 Google Ranking Factors 2014/3/20 Andro Chen © 5945 呼叫師傅
17 By SEOMoz
Details • 必讀" • Google搜尋引擎最佳化初學者指南" • Google’s SEO 報告解析" •
工作分配: 一個完整的SEO團隊人員基本配置" • 具體做法" • 搭配 Paid Search 的關鍵字,撰寫專文頁面" 2014/3/20 Andro Chen © 5945 呼叫師傅 18
Reference • HTML + CSS" • http://www.w3schools.com/tags/" • http://css.1keydata.com/tw/" •
SEO & SEM" • Google SEO Report Card" • 社会化媒体对SEO的帮助–社群讯号 • Google!" 2014/3/20 Andro Chen © 5945 呼叫師傅 19
" " " " " " "Q & A 2014/3/20
Andro Chen © 5945 呼叫師傅 20
" " " " " "Thank you! 2014/3/20 Andro Chen
© 5945 呼叫師傅 21