Basic HTML + SEO - A Simple Tutorial @5945

Basic HTML + SEO - A Simple Tutorial @5945

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

C8ac5985121a65cbe37e11e5cdfeb02c?s=128

Andro Chen

May 02, 2013
Tweet

Transcript

  1. 1.

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

    Andro Chen 陳俊安" 5945 呼叫師傅
  2. 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. 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. 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. 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)"
  6. 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"
  7. 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
  8. 12.

    HTML – Tools •  Editor - Sublime Text 2" • 

    Chrome DevTools" •  More on 5945 blog" 2014/3/20 Andro Chen © 5945 呼叫師傅 12
  9. 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
  10. 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
  11. 18.

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

    工作分配: 一個完整的SEO團隊人員基本配置" •  具體做法" •  搭配 Paid Search 的關鍵字,撰寫專文頁面" 2014/3/20 Andro Chen © 5945 呼叫師傅 18
  12. 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
  13. 20.

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

    Andro Chen © 5945 呼叫師傅 20
  14. 21.