Basic HTML + SEO - A Simple Tutorial @5945

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

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