Slide 1

Slide 1 text

行動開發學院 http://MobileDev.TW HTML Basic 1 Hyper-Text Markup Language Basic [email protected] http://MobileDev.tw

Slide 2

Slide 2 text

行動開發學院 http://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. 文件宣告

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

行動開發學院 http://MobileDev.TW 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

Slide 5

Slide 5 text

行動開發學院 http://MobileDev.TW HTML Basic 5 第1章：簡介

Slide 6

Slide 6 text

行動開發學院 http://MobileDev.TW HTML Basic 6 第2章：結構跟全頁面相關的資訊放這裡想要呈現給讀者看的資訊放這裡

Slide 7

Slide 7 text

行動開發學院 http://MobileDev.TW HTML Basic 7 第2章：結構

Slide 8

Slide 8 text

行動開發學院 http://MobileDev.TW LAB. Hello HTML! HTML Basic 8

Slide 9

Slide 9 text

行動開發學院 http://MobileDev.TW HTML Basic 9 l  元件 = 開始標籤+內容 +結束標籤開始標籤內容結束標籤

這是一個段落

這是一個連結
l  有些HTML元件沒有內容(empty element) l  沒有內容的HTML元件會在開始標籤中結束 l  多數HTML元件可擁有屬性 l  元件可以巢狀方式出現(

hello

) 第3章：元件 element

Slide 10

Slide 10 text

行動開發學院 http://MobileDev.TW HTML Basic 10 第4章：屬性 l  指定於開始標籤中的附加資訊 l  l  l  Deprecated l  屬性值以雙引號標示，值內若包含雙引號可使用單引號標示 name='John "ShotGun" Nelson' l  屬性名稱="屬性值" This is a link

Slide 11

Slide 11 text

行動開發學院 http://MobileDev.TW HTML Basic 11 第5章：標題

This is a heading

l 

最大，

最小 l  不要為了把字放大而使用標題標籤 l  標題前後會自動有一行空行 l  提供搜尋引擎網頁內容資訊結構

Slide 12

Slide 12 text

行動開發學院 http://MobileDev.TW HTML Basic 12 第6章：水平線

l  產生一條水平線

l  五個屬性 l  size 決定水平線的粗細 Deprecated

l  width 決定水平線的長度 Deprecated

l  align 決定水平線的對齊 left / center / right Deprecated

Deprecated l  noshade 無陰影線

Deprecated l  color 決定水平線的顏色

Deprecated

Slide 13

Slide 13 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 13

Slide 14

Slide 14 text

行動開發學院 http://MobileDev.TW HTML Basic 14 第7章：註解 l  註解會被瀏覽器忽略而不顯示 l  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

Slide 15

Slide 15 text

行動開發學院 http://MobileDev.TW HTML Basic 15 第8章：

段落

l  瀏覽器會在段落前後自動加上一空行 l 

This is a paragraph

l  align屬性 -  屬性值 l  left 靠左對齊 l  right 靠右對齊 l  center 置中對齊 l  justify 兩邊對齊

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

行動開發學院 http://MobileDev.TW HTML Basic 17 第10章：保留原編排 l  保留原本編排

for i = 1 to 10
print i
next i

l  屬性：width 指定每行最大字元數

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks

Slide 18

Slide 18 text

行動開發學院 http://MobileDev.TW HTML Basic 18 第11章：文字格式 l  看似相同但意義不同(1) l  粗體 l  強化 l  看似相同但意義不同(2) l  斜體 l  強調 l  放大與縮小 l  放大 l  縮小 l  上標與下標 l  上標 l  下標 l  其他花樣 l  刪除線 l  底線建議採用CSS來決定樣式

Slide 19

Slide 19 text

行動開發學院 http://MobileDev.TW HTML Basic 19 第12章：連結 l  外部連結 l  網頁、檔案 Yahoo!奇摩第一章文件 l  郵件(預設主旨，多人，附本，內容) l  內部連結 l  文章的指定位置 •  先設定數個連結目標 Ch12 •  再進行連結 Goto Ch12

Slide 20

Slide 20 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 20

Slide 21

Slide 21 text

行動開發學院 http://MobileDev.TW LAB2 mailto:[email protected] ?subject=feedback%20from%20web &body=hello%0D%0Aanother%20line HTML Basic 21

Slide 22

Slide 22 text

行動開發學院 http://MobileDev.TW URL Encoding Reference HTML Basic 22

Slide 23

Slide 23 text

行動開發學院 http://MobileDev.TW HTML Basic 23 第13章：影像 1/2 l  插入圖片至網頁中 l  標籤： l  屬性： -  src：圖片位置 -  width：圖片寬度 -  height：圖片高度 -  alt：圖片註解 -  align：對齊 Deprecated top、bottom、middle、left、right -  border：邊框 Deprecated 0～n 範例

Slide 24

Slide 24 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 24

Slide 25

Slide 25 text

行動開發學院 http://MobileDev.TW HTML Basic 25 第14章：表格 1/5 •  Row & data cell Data1 Data2 •  標題 Name Telephone Bill Gates 555 77 854 Data1 Data2 Name Telephone Bill Gates 555 77 854

Slide 26

Slide 26 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 26

Slide 27

Slide 27 text

行動開發學院 http://MobileDev.TW HTML Basic 27 第14章：表格 2/5 •  邊框 .... •  表外標題標籤：屬性：align Deprecated 值：left,right,top,bottom Name Telephone Bill Gates 555 77 854 My Caption

Slide 28

Slide 28 text

行動開發學院 http://MobileDev.TW HTML Basic 28 第14章：表格 3/5 •  儲存格合併 l  colspan → l  rowpan ↓ Name Telephone Bill Gates 555 77 854 555 77 855 Name Telephone Bill Gates 555 77 854 555 77 855 First Name: Bill Gates Telephone: 555 77 854 555 77 855 First Name: Bill Gates Telephone: 555 77 854 555 77 855

Slide 29

Slide 29 text

行動開發學院 http://MobileDev.TW HTML Basic 29 第14章：表格 4/5 •  邊距(cellpadding) 文字與儲存格邊框的距離 •  格距(cellspacing) 儲存格之間的距離

Slide 30

Slide 30 text

行動開發學院 http://MobileDev.TW HTML Basic 30 第14章：表格 5/5 •  表格顏色與背景顏色：bgcolor Deprecated 背景圖片：background •  儲存格顏色與背景 (亦可套用在整列) 顏色：bgcolor Deprecated 背景圖片：background •  儲存格文字對齊 Deprecated left, center, right, justify

Slide 31

Slide 31 text

行動開發學院 http://MobileDev.TW Homework 運用表格，製作一個行動版個人簡介 HTML Basic 31

Slide 32

Slide 32 text

行動開發學院 http://MobileDev.TW HTML Basic 32 第15章：清單 •  無序(3種) l  circle l  disc l  square •  有序(5種) l  1 l  A l  a l  I l  i •  階層

Apples
Bananas
Lemons
Oranges

Apples
Bananas
Lemons
Oranges

start：決定起始值 - 置於ol tag value：改變該數值 - 置於 li tag

Slide 33

Slide 33 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 33

Slide 34

Slide 34 text

行動開發學院 http://MobileDev.TW HTML Basic 34 第16章：表單 l  表單應用使用者輸入資料 ↓ HTML表單接收資料 ↓ 將資料傳送至程式 (PHP,ASP,...) ↓ 程式處理資料 ↓ 將資料寫入資料庫 ↓ 產生結果網頁回傳給使用者 జΤ٫ జΤًر ᜑͪ HTML జΤ ၣࠫ PHP(1) PHP(2) E-mail Boss DB

Slide 35

Slide 35 text

行動開發學院 http://MobileDev.TW 常見表單一覽 HTML Basic 35 名稱語法外觀文字單選 Male
Female 複選 I have a bike
I have a car 下拉 Volvo Saab Audi 文章

Slide 36

Slide 36 text

行動開發學院 http://MobileDev.TW HTML Basic 36 第16章：表單 l  一個含有表單元件的區域 l  表單元件：允許使用者輸入資訊 l  l  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：按鈕上面的文字

Slide 37

Slide 37 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 37

Slide 38

Slide 38 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 38

Slide 39

Slide 39 text

行動開發學院 http://MobileDev.TW HTML Basic 39 下拉式選單與文字輸入區塊 l  dropdown l  標籤： l  設定預選屬性：selected="selected" l  textarea l  標籤： l  屬性： -  name：變數名稱 -  rows：列數 -  cols：每列字元數

Slide 40

Slide 40 text

行動開發學院 http://MobileDev.TW LAB HTML Basic 40

Slide 41

Slide 41 text

行動開發學院 http://MobileDev.TW Dropdown在iOS7 HTML Basic 41

Slide 42

Slide 42 text

行動開發學院 http://MobileDev.TW 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

Slide 43

Slide 43 text

行動開發學院 http://MobileDev.TW HTML Basic 43 第18章：框架 l  分割種類 l  垂直分割 l  水平分割 l  巢狀使用 l  hyperlink – target屬性 l  framename 特定frame名稱 l  _blank 新視窗 l  _top 目前整個視窗 l  _parent 父frameset

Slide 44

Slide 44 text

行動開發學院 http://MobileDev.TW 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：內容與左右邊界的距離

Slide 45

Slide 45 text

行動開發學院 http://MobileDev.TW iFrame •  語法與Frame tag相同，但可同時出現在同一網頁中 •  使用方式 •  先在適當的位置安排iframe tag，並記得一定要使用name屬性 •  在超連結的tag中指定target的屬性值為該iframe HTML Basic 45

Slide 46

Slide 46 text

行動開發學院 http://MobileDev.TW iFrame Lab HTML Basic 46

Slide 47

Slide 47 text

行動開發學院 http://MobileDev.TW HTML Basic 47 第19章：特殊字元 Result Description Entity Name Entity Number non-breaking space < less than < < > greater than > > & ampersand & & ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € § section § § © copyright © © ® registered trademark ® ®

Slide 48

Slide 48 text

行動開發學院 http://MobileDev.TW HTML Basic 48 第20章： Head l  與整個頁面相關的資訊 l  標題 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">

Slide 49

Slide 49 text

行動開發學院 http://MobileDev.TW HTML Basic 49 第21章：文件宣告

Slide 50

Slide 50 text

行動開發學院 http://MobileDev.TW Web世界的三方角力 W3C Standard Developer Browser HTML Basic 50

Slide 51

Slide 51 text

行動開發學院 http://MobileDev.TW HTML Basic 51 第21章：文件宣告 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  透過版本的指定，可提高在不同瀏覽器中網頁呈現的一致性。

Slide 52

Slide 52 text

行動開發學院 http://MobileDev.TW HTML Basic 52 第21章：文件宣告 l  HTML 4.01 Transitional Rules l  DOCTYPE宣告 l  編碼宣告 l  圖片要有ALT l  HTML 4.01 Strict Rules l  不使用已淘汰的樣式元件與屬性 l  行內(inline)元素必須放在區塊(block)元素內 l  必須是第一個元素、並且用結束頁面 l  裡一定要有 l  裡必須先放區塊元素，再將其他元素放進區塊元素中 l 

l  巢狀使用必須清楚，不可混亂

Slide 53

Slide 53 text

行動開發學院 http://MobileDev.TW 第21章：文件宣告 •  現在你只需要 (HTML5) HTML Basic 53

Slide 54

Slide 54 text

行動開發學院 http://MobileDev.TW HTML Basic 54 第21章：文件宣告 l  What's well-formed XML? l  所有元素名稱為小寫 l  每個標籤都必須有結束標籤 l  所有屬性值都要有雙引號 l  Validator from W3C http://validator.w3.org/

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

最大，

最小 l 不要為了把字放大而使用標題標籤 l 標題前後會自動有一行空行 l 提供搜尋引擎網頁內容資訊結構

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

最小 l  不要為了把字放大而使用標題標籤 l  標題前後會自動有一行空行 l  提供搜尋引擎網頁內容資訊結構