Basic HTML + SEO - A Simple Tutorial @5945

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

7

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 •  ﬂoat_demo.html" •  ﬂoat <-> 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 qualiﬁed trafﬁc" •  SEO" •  Search Engine Optimization" •  Organic search results •  Site Structure, content, keywords" •  Long-term management" 2014/3/20 Andro Chen © 5945 呼叫師傅 14

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

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

Basic HTML + SEO - A Simple Tutorial @5945

Basic HTML + SEO - A Simple Tutorial @5945

Andro Chen Chun-An

More Decks by Andro Chen Chun-An

Other Decks in Programming

Featured

Transcript

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

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

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

HTML = Tags + Attributes •  Basic1.html" •  <!DOCTYPE HTML>"

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

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

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

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

HTML – Layout With CSS •  行內套用 (Inline)" •  <p

HTML – Layout With CSS •  Basic4_css1.html" •  Selector –

HTML – Cheat sheet •  改圖 <img src=“URL” alt=“替代文字”>" •

HTML – Tools •  Editor - Sublime Text 2" •

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

Terms •  SEM " •  Search Engine Marketing" •  ~=

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

SEO - Index •  Principal" •  Spider/Crawler => pre-process =>

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

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

Reference •  HTML + CSS" •  http://www.w3schools.com/tags/" •  http://css.1keydata.com/tw/" •

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

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