Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Basic HTML + SEO - A Simple Tutorial @5945

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Andro Chen Chun-An Andro Chen Chun-An
May 02, 2013
Programming
0
55

Basic HTML + SEO - A Simple Tutorial @5945

2013-05-02 Basic HTML + SEO - A Simple Tutorial @5945

Avatar for Andro Chen Chun-An

Andro Chen Chun-An

May 02, 2013
Tweet

More Decks by Andro Chen Chun-An

See All by Andro Chen Chun-An
入坑滑雪自由行: 新手入門懶人包 - 雪場,費用,行程,行李,訓練 全攻略
Avatar for Andro Chen Chun-An androchentw
0
27
2021-02-17_splunk_cafe.pdf
Avatar for Andro Chen Chun-An androchentw
0
82
When Andro Meets Android - Android Taipei
Avatar for Andro Chen Chun-An androchentw
0
200
What I've Learned From Startups
Avatar for Andro Chen Chun-An androchentw
0
100
Baidu SEO II
Avatar for Andro Chen Chun-An androchentw
1
90
Baidu SEO - A Practical Guide
Avatar for Andro Chen Chun-An androchentw
0
66
Privacy-Preserving Data Mining and Collusion Resistance
Avatar for Andro Chen Chun-An androchentw
0
52
啡˙聞
Avatar for Andro Chen Chun-An androchentw
1
61
VANET Simulation of AP assistance
Avatar for Andro Chen Chun-An androchentw
0
46

Other Decks in Programming

See All in Programming
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
200
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
260
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
230
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
170
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
720
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
170
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130

Featured

See All Featured
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
900
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
180
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
48
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
450

Transcript

  1. Basic HTML + SEO
 - A Simple Tutorial " 2013/05/02"

    Andro Chen 陳俊安" 5945 呼叫師傅

  2. Agenda •  HTML" •  Basic" •  With CSS" •  Tools"

    •  Example – 電子報" •  SEO Concept" •  Q & A" •  There is no stupid question!" 2014/3/20 Andro Chen © 5945 呼叫師傅 2

  3. HTML - HyperText Markup Language •  Structure(Bone) of a webpage"

    •  CSS – Skin, color" •  JavaScript – Brain, animation " •  Tags!" 2014/3/20 Andro Chen © 5945 呼叫師傅 3

  4. 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!"

  5. Layout – Wiki Outside In 2014/3/20 Andro Chen © 5945

    呼叫師傅 5

  6. Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅

    6

  7. Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅

    7

  8. Layout – Wiki " 2014/3/20 Andro Chen © 5945 呼叫師傅

    8

  9. 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)"

  10. 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"

  11. 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

  12. HTML – Tools •  Editor - Sublime Text 2" • 

    Chrome DevTools" •  More on 5945 blog" 2014/3/20 Andro Chen © 5945 呼叫師傅 12

  13. HTML – 電子報v1 by Lucien 2014/3/20 Andro Chen © 5945

    呼叫師傅 13

  14. 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

  15. 2014/3/20 Andro Chen © 5945 呼叫師傅 15

  16. 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

  17. 2011 Google Ranking Factors 2014/3/20 Andro Chen © 5945 呼叫師傅

    17 By SEOMoz 

  18. Details •  必讀" •  Google搜尋引擎最佳化初學者指南" •  Google’s SEO 報告解析" • 

    工作分配: 一個完整的SEO團隊人員基本配置" •  具體做法" •  搭配 Paid Search 的關鍵字，撰寫專文頁面" 2014/3/20 Andro Chen © 5945 呼叫師傅 18

  19. 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

  20. " " " " " " "Q & A 2014/3/20

    Andro Chen © 5945 呼叫師傅 20

  21. " " " " " "Thank you! 2014/3/20 Andro Chen

    © 5945 呼叫師傅 21