HTML Basic

行動開發學院 http://MobileDev.TW
HTML Basic 1
Hyper-Text Markup Language
Basic
Ryan@MobileDev.TW

HTML Basic 2
大綱
1.  簡介
2.  結構
3.  元件
4.  屬性
5.  標題
6.  水平線
7.  註解
8.  段落
9.  斷行
10. 保留原編排
11. 文字格式
12. 超連結
13. 影像
14. 表格
15. 清單
16. 表單
17. 顏色
18. 框架
19. 特殊字元
20. 表頭
21. 文件宣告

HTML Basic 3
第1章：簡介
l  HTML
l  網頁描述語言
l  HyperText Markup Language 超文字標記語言
l  HTML不是程式語言，而是一種標記語言
l  標記語言是標記標籤的集合
l  HTML使用標記語言來描述網頁
l  HTML Tag 標籤
l  由角型括弧所包圍 xxx
l  通常成對 x ......./x
x：開始標籤
/x：結束標籤
l  瀏覽器不會顯示出標籤，會透過這些標籤來表達一個網頁

HTML Basic 4
第1章：簡介
年代
版本
1991
HTML
1993
HTML+
1995
HTML 2.0
1997
HTML 3.2
1999
HTML 4.01
2000
XHTML 1.0
2012
HTML5

HTML Basic 5
第1章：簡介

HTML Basic 6
第2章：結構
html
/html
head
/head
body
/body
跟全頁面相關的資訊放這裡
想要呈現給讀者看的資訊放這裡

HTML Basic 7
第2章：結構

LAB. Hello HTML!
HTML Basic 8

HTML Basic 9
l  元件 = 開始標籤+內容 +結束標籤
開始標籤
內容
結束標籤
p
這是一個段落
/p
a href=default.htm
這是一個連結
/a
br /
l  有些HTML元件沒有內容(empty element)
l  沒有內容的HTML元件會在開始標籤中結束
l  多數HTML元件可擁有屬性
l  元件可以巢狀方式出現(pbhello/b/p)
第3章：元件 element

HTML Basic 10
第4章：屬性
l  指定於開始標籤中的附加資訊
l  table border=1
l  a href=http://www.iii.org.tw/
l  body bgcolor=yellow Deprecated
l  屬性值以雙引號標示，值內若包含雙引號可使用單
引號標示 name='John ShotGun Nelson'
l  屬性名稱=屬性值
a href=http://www.iii.org.twThis is a link/a

HTML Basic 11
第5章：標題
h1This is a heading/h1
l  h1最大，h6最小
l  不要為了把字放大而使用標題標籤
l  標題前後會自動有一行空行
l  提供搜尋引擎網頁內容資訊結構

HTML Basic 12
第6章：水平線hr
l  產生一條水平線 hr
l  五個屬性
l  size 決定水平線的粗細 Deprecated
hr size=5
l  width 決定水平線的長度 Deprecated
hr width=100
l  align 決定水平線的對齊 left / center / right Deprecated
hr align=left Deprecated
l  noshade 無陰影線
hr noshade=noshade Deprecated
l  color 決定水平線的顏色
hr color=red Deprecated

LAB
HTML Basic 13

HTML Basic 14
第7章：註解
l  註解會被瀏覽器忽略而不顯示
l  !-- This is a comment --
l  常見註解方式
l  單行註解 Inline comments
// C, C++, Java, JavaScript, PHP
l  區塊註解 Block comments
/* */ C, C++, Java, JavaScript, PHP, CSS
!-- -- HTML, XML

http://en.wikipedia.org/wiki/Comparison_of_programming_languages_%28syntax%29#Comments

HTML Basic 15
第8章： p段落/p
l  瀏覽器會在段落前後自動加上一空行
l  pThis is a paragraph/p
l  align屬性
-  屬性值
l  left 靠左對齊
l  right 靠右對齊
l  center 置中對齊
l  justify 兩邊對齊

HTML Basic 16
第9章：斷行 br
l  斷行標籤可在段落中使文字換行顯示，且仍在同一
個段落。
l  br是一個空元件(empty element)
l  瀏覽器會自動忽略HTML中多餘的空格或空行

HTML Basic 17
第10章：保留原編排
l  保留原本編排
pre
for i = 1 to 10
print i
next i
/pre
l  屬性：width 指定每行最大字元數
pre width=8
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
/pre

HTML Basic 18
第11章：文字格式
l  看似相同但意義不同(1)
l  粗體b/b
l  強化strong/strong
l  看似相同但意義不同(2)
l  斜體i/i
l  強調em/em
l  放大與縮小
l  放大big/big
l  縮小small/small

l  上標與下標
l  上標sup/sup
l  下標sub/sub
l  其他花樣
l  刪除線del/del
l  底線ins/ins
建議採用CSS來
決定樣式

HTML Basic 19
第12章：超連結
l  外部連結
l  網頁、檔案
a href=''http://www.yahoo.com.tw''Yahoo!奇摩/a
a href=''1.pdf''第一章文件/a
l  郵件(預設主旨，多人，附本，內容)
l  內部連結
l  文章的指定位置
•  先設定數個連結目標 a name=''Ch12''Ch12/a
•  再進行連結 a href=''#Ch12''Goto Ch12/a

LAB
HTML Basic 20

LAB2
mailto:joe@example.com
?subject=feedback%20from%20web
body=hello%0D%0Aanother%20line
HTML Basic 21

URL Encoding Reference
HTML Basic 22

HTML Basic 23
第13章：影像 1/2
l  插入圖片至網頁中
l  標籤：img /
l  屬性：
-  src：圖片位置
-  width：圖片寬度
-  height：圖片高度
-  alt：圖片註解
-  align：對齊 Deprecated
top、bottom、middle、left、right
-  border：邊框 Deprecated
0～n
範例
img src=''pic.jpg'' width=''200'' height=''100'' /
img src=goleft.gif alt=Go Left width=32 height=32 /

LAB
HTML Basic 24

HTML Basic 25
第14章：表格 1/5
•  Row data cell
table border=1
tr
tdData1/td
tdData2/td
/tr
/table
•  標題
table border=1
tr
thName/th
thTelephone/th
/tr
tr
tdBill Gates/td
td555 77 854/td
/tr
/table
Data1 Data2
Name Telephone
Bill Gates 555 77 854

LAB
HTML Basic 26

HTML Basic 27
第14章：表格 2/5

•  邊框
table border=x..../table
•  表外標題
標籤：caption/caption
屬性：align Deprecated
值：left,right,top,bottom
Name Telephone
Bill Gates 555 77 854
My Caption

HTML Basic 28
第14章：表格 3/5

•  儲存格合併
l  colspan →

l  rowpan ↓

table border=1
tr
thName/th
th colspan=2Telephone/th
/tr
tr
tdBill Gates/td
td555 77 854/td
td555 77 855/td
/tr
/table
Name Telephone
Bill Gates 555 77 854 555 77 855
table border=1
tr
thFirst Name:/th
tdBill Gates/td
/tr
tr
th rowspan=2Telephone:/th
td555 77 854/td
/tr
tr
td555 77 855/td
/tr
/table
First Name: Bill Gates
Telephone:
555 77 854
555 77 855

HTML Basic 29
第14章：表格 4/5

•  邊距(cellpadding)
文字與儲存格邊框的距離

•  格距(cellspacing)
儲存格之間的距離

HTML Basic 30
第14章：表格 5/5

•  表格顏色與背景
顏色：bgcolor Deprecated
背景圖片：background
•  儲存格顏色與背景 (亦可套用在整列)
顏色：bgcolor Deprecated
背景圖片：background
•  儲存格文字對齊 Deprecated
left, center, right, justify

Homework
運用表格，製作一個行動版
個人簡介
HTML Basic 31

HTML Basic 32
第15章：清單
•  無序(3種)
l  circle
l  disc
l  square
•  有序(5種)
l  1
l  A
l  a
l  I
l  i
•  階層
ul type=disc
liApples/li
liBananas/li
liLemons/li
liOranges/li
/ul
ol type=A
liApples/li
liBananas/li
liLemons/li
liOranges/li
/ol
start：決定起始值 - 置於ol tag
value：改變該數值 - 置於 li tag

LAB
HTML Basic 33

HTML Basic 34
第16章：表單
l  表單應用
使用者輸入資料
↓
HTML表單接收資料
↓
將資料傳送至程式
(PHP,ASP,...)
↓
程式處理資料
↓
將資料寫入資料庫
↓
產生結果網頁回傳給使用者
HTML
PHP(1) PHP(2)
E-mail
BossDB

常見表單一覽
HTML Basic 35
名稱
語法
外觀
文字
input type=text name=firstname
input type=password name=pwd
單選
input type=radio name=sex value=maleMalebr
input type=radio name=sex value=femaleFemale
複選
input type=checkbox name=vehicle value=Bike
I have a bike br
input type=checkbox name=vehicle value=Car
I have a car
下拉
select name=cars
option value=volvoVolvo/option
option value=saabSaab/option
option value=audiAudi/option
/select
文章
textarea rows=10 cols=30 placeholder=comment...
/textarea

HTML Basic 36
第16章：表單
l  一個含有表單元件的區域
l  表單元件：允許使用者輸入資訊
l  form/form
l  input
l  type
-  text
l  size：顯示長度
l  value：預設輸入文字
l  maxlength：可輸入字元數
-  radio
l  設定預選屬性：checked=checked
l  同一組radio的name屬性一定要相同
-  checkbox
l  設定預選屬性：checked=checked
-  reset 回復表單預設資料
l  value：按鈕上面的文字
-  submit 送出表單資料
l  value：按鈕上面的文字

LAB
HTML Basic 37

LAB
HTML Basic 38

HTML Basic 39
下拉式選單與文字輸入區塊
l  dropdown
l  標籤：selectoption/option/select
l  設定預選屬性：selected=selected
l  textarea
l  標籤：textarea/textarea
l  屬性：
-  name：變數名稱
-  rows：列數
-  cols：每列字元數

LAB
HTML Basic 40

Dropdown在iOS7
HTML Basic 41

HTML Basic 42
第17章：顏色
l  HEX
l  #000000 ~ #FFFFFF
l  #2AB - #22AABB
l  RGB
l  rgb(0,0,0) ~ rgb(255,255,255)
l  Name
l  Black、Green、Pink、.........
http://www.colorschemer.com/online.html

HTML Basic 43
第18章：框架
l  分割種類
l  垂直分割
l  水平分割
l  巢狀使用
l  hyperlink – target屬性
l  framename 特定frame名稱
l  _blank 新視窗
l  _top 目前整個視窗
l  _parent 父frameset
HTML網頁設計
關於我們
產品介紹
聯絡我們

HTML Basic 44
第18章：框架
l  frame屬性
l  src：指定框架顯示網頁
-  src=1.html
l  frameborder：框線大小
-  1 有框線(預設值)
-  0 無框線
l  noresize：是否允許變更大小
-  noresize=noresize
l  scrolling：是否允許捲動
-  yes
-  no
-  auto (預設值)
l  marginheight：內容與上下邊界的距離
l  marginwidth：內容與左右邊界的距離

iFrame
•  語法與Frame tag相同，但可同時出現在同一網
頁中
•  使用方式
•  先在適當的位置安排iframe tag，並記得一定要使
用name屬性

•  在超連結的tag中指定target的屬性值為該iframe
HTML Basic 45

iFrame Lab
HTML Basic 46

HTML Basic 47
第19章：特殊字元
Result Description Entity Name Entity Number
non-breaking space nbsp; #160;
less than lt; #60;
greater than gt; #62;
ampersand amp; #38;
¢ cent cent; #162;
£ pound pound; #163;
¥ yen yen; #165;
€ euro euro; #8364;
§ section sect; #167;
© copyright copy; #169;
® registered trademark reg; #174;

HTML Basic 48
第20章： Head
l  與整個頁面相關的資訊
l  title標題
l  base target=_blank
l  將本頁所有link的目標框架預設為在新頁開啟
l  meta相關資訊(元、後設)
l  關鍵字
meta name=description content=HTML examples /
meta name=keywords content=HTML,CSS,JavaScript /
l  轉向
meta http-equiv=Refresh content=5;url=http://MobileDev.tw /
l  編碼指定
meta http-equiv=Content-Type content=text/html;charset=UTF-8 /
meta charset=UTF-8

HTML Basic 49
第21章：文件宣告

Web世界的三方角力
W3C
Standard
Developer
Browser
HTML Basic 50

HTML Basic 51
l  !DOCTYPE 非HTML的一部分，告訴browser以下這個
HTML是什麼版本
1.  HTML 4.01 Strict：無樣式元件、無frame
2.  HTML 4.01 Transitional：無frame
3.  HTML 4.01 Frameset
4.  XHTML 1.0 Strict = 1+well-formed XML
5.  XHTML 1.0 Transitional = 2+well-formed XML
6.  XHTML 1.0 Frameset = 3+well-formed XML
7.  XHTML 1.1
l  Why !DOCTYPE?
l  透過版本的指定，可提高在不同瀏覽器中網頁呈現的一致性。

HTML Basic 52
l  HTML 4.01 Transitional Rules
l  DOCTYPE宣告
l  編碼宣告
l  圖片要有ALT
l  HTML 4.01 Strict Rules
l  不使用已淘汰的樣式元件與屬性
body text=black/body
font face=arial/font
center/center
l  行內(inline)元素必須放在區塊(block)元素內
l  html必須是第一個元素、並且用/html結束頁面
l  head/head裡一定要有title/title
l  body裡必須先放區塊元素，再將其他元素放進區塊元素中
l  ul與ol裡面只能有li
l  巢狀使用必須清楚，不可混亂

•  現在你只需要 (HTML5)
!DOCTYPE html

HTML Basic 53

HTML Basic 54
l  What's well-formed XML?
l  所有元素名稱為小寫
l  每個標籤都必須有結束標籤
l  所有屬性值都要有雙引號
l  Validator from W3C
http://validator.w3.org/

相關資源
•  標籤列表參考
•  http://www.w3schools.com/tags/
•  W3C官方網站
•  http://www.w3.org/
HTML Basic 55

留言板實作 – HTML表單+PARSE
前後端整合
HTML Basic 56

申請Parse帳號與專案(Parse.com)
HTML Basic 57

在已存在的專案中
匯入parse的js、初始化Parse
HTML Basic 58

測試
如有跳出視窗，代表成功建立連線，並可上傳資料
HTML Basic 59

建立輸入介面
讓使用者輸入暱稱與建議
HTML Basic 60

建立JavaScript與HTML的關係
全域變數，找到輸入暱稱以及輸入評論的元件
HTML Basic 61

按下按鈕後，將資料送進Parse
HTML Basic 62

進行測試
HTML Basic 63

檢查結果
HTML Basic 64

HTML Basic

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to HTML Basic

Similar to HTML Basic (20)

More from Ryan Chung

More from Ryan Chung (20)

HTML Basic

Editor's Notes