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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Andro Chen Chun-An
May 02, 2013
Programming
57
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Basic HTML + SEO - A Simple Tutorial @5945
2013-05-02 Basic HTML + SEO - A Simple Tutorial @5945
Andro Chen Chun-An
May 02, 2013
More Decks by Andro Chen Chun-An
See All by Andro Chen Chun-An
入坑滑雪自由行: 新手入門懶人包 - 雪場,費用,行程,行李,訓練 全攻略
androchentw
0
52
2021-02-17_splunk_cafe.pdf
androchentw
0
90
When Andro Meets Android - Android Taipei
androchentw
0
210
What I've Learned From Startups
androchentw
0
110
Baidu SEO II
androchentw
1
93
Baidu SEO - A Practical Guide
androchentw
0
69
Privacy-Preserving Data Mining and Collusion Resistance
androchentw
0
53
啡˙聞
androchentw
1
64
VANET Simulation of AP assistance
androchentw
0
48
Other Decks in Programming
See All in Programming
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
wagyu
0
220
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
2
1.5k
JavaDoc 再入門
nagise
0
320
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
minodriven
20
6.5k
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
gawa
12
3.6k
Datadog × OpenTelemetry 入門と実践のあいだ
kn_to_maxpno
1
150
AIとASP.NET Coreで雑Webアプリを作った話
mayuki
0
510
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
contour_gara
0
530
エージェンティックRAGにAWSで入門しよう!
har1101
8
1.4k
スマートグラスで並列バイブコーディング
hyshu
0
120
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
240
AI 時代のソフトウェア設計の学び方
masuda220
PRO
29
12k
Featured
See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
230
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
1
340
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
330
Unsuck your backbone
ammeep
672
58k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
560
The SEO Collaboration Effect
kristinabergwall1
1
480
How STYLIGHT went responsive
nonsquared
100
6.2k
Odyssey Design
rkendrick25
PRO
2
690
WCS-LA-2024
lcolladotor
0
630
Docker and Python
trallard
47
3.9k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.6k
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
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