HTML Basic

7,715 views

Published on

http://MobileDev.TW

Published in: Technology, Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,715
On SlideShare
0
From Embeds
0
Number of Embeds
769
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • 1. 語言的分類: Markup Language – HTML, XML Script Language – JavaScript, VBScript Programming Language – Java, C, C++ 2. 標記語言三要件: 標籤 Tag 屬性 Attribute 值 Value
  • HTML Basic

    1. 1. 行動開發學院 http://MobileDev.TW HTML Basic 1 Hyper-Text Markup Language Basic Ryan@MobileDev.TW
    2. 2. 行動開發學院 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. 文件宣告
    3. 3. 行動開發學院 http://MobileDev.TW 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  瀏覽器不會顯示出標籤,會透過這些標籤來表達一個網頁
    4. 4. 行動開發學院 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
    5. 5. 行動開發學院 http://MobileDev.TW HTML Basic 5 第1章:簡介
    6. 6. 行動開發學院 http://MobileDev.TW HTML Basic 6 第2章:結構 html /html head /head body /body 跟全頁面相關的資訊放這裡 想要呈現給讀者看的資訊放這裡
    7. 7. 行動開發學院 http://MobileDev.TW HTML Basic 7 第2章:結構
    8. 8. 行動開發學院 http://MobileDev.TW LAB. Hello HTML! HTML Basic 8
    9. 9. 行動開發學院 http://MobileDev.TW 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
    10. 10. 行動開發學院 http://MobileDev.TW 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
    11. 11. 行動開發學院 http://MobileDev.TW HTML Basic 11 第5章:標題 h1This is a heading/h1 h2This is a heading/h2 h3This is a heading/h3 h4This is a heading/h4 h5This is a heading/h5 h6This is a heading/h6 l  h1最大,h6最小 l  不要為了把字放大而使用標題標籤 l  標題前後會自動有一行空行 l  提供搜尋引擎網頁內容資訊結構
    12. 12. 行動開發學院 http://MobileDev.TW 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
    13. 13. 行動開發學院 http://MobileDev.TW LAB HTML Basic 13
    14. 14. 行動開發學院 http://MobileDev.TW 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
    15. 15. 行動開發學院 http://MobileDev.TW HTML Basic 15 第8章: p段落/p l  瀏覽器會在段落前後自動加上一空行 l  pThis is a paragraph/p l  align屬性 -  屬性值 l  left 靠左對齊 l  right 靠右對齊 l  center 置中對齊 l  justify 兩邊對齊
    16. 16. 行動開發學院 http://MobileDev.TW HTML Basic 16 第9章: 斷行 br l  斷行標籤可在段落中使文字換行顯示,且仍在同一 個段落。 l  br是一個空元件(empty element) l  瀏覽器會自動忽略HTML中多餘的空格或空行
    17. 17. 行動開發學院 http://MobileDev.TW 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
    18. 18. 行動開發學院 http://MobileDev.TW 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來 決定樣式
    19. 19. 行動開發學院 http://MobileDev.TW 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
    20. 20. 行動開發學院 http://MobileDev.TW LAB HTML Basic 20
    21. 21. 行動開發學院 http://MobileDev.TW LAB2 mailto:joe@example.com ?subject=feedback%20from%20web body=hello%0D%0Aanother%20line HTML Basic 21
    22. 22. 行動開發學院 http://MobileDev.TW URL Encoding Reference HTML Basic 22
    23. 23. 行動開發學院 http://MobileDev.TW 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 /
    24. 24. 行動開發學院 http://MobileDev.TW LAB HTML Basic 24
    25. 25. 行動開發學院 http://MobileDev.TW 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
    26. 26. 行動開發學院 http://MobileDev.TW LAB HTML Basic 26
    27. 27. 行動開發學院 http://MobileDev.TW 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
    28. 28. 行動開發學院 http://MobileDev.TW 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
    29. 29. 行動開發學院 http://MobileDev.TW HTML Basic 29 第14章: 表格 4/5 •  邊距(cellpadding) 文字與儲存格邊框的距離 •  格距(cellspacing) 儲存格之間的距離
    30. 30. 行動開發學院 http://MobileDev.TW HTML Basic 30 第14章: 表格 5/5 •  表格顏色與背景 顏色:bgcolor Deprecated 背景圖片:background •  儲存格顏色與背景 (亦可套用在整列) 顏色:bgcolor Deprecated 背景圖片:background •  儲存格文字對齊 Deprecated left, center, right, justify
    31. 31. 行動開發學院 http://MobileDev.TW Homework 運用表格,製作一個行動版 個人簡介 HTML Basic 31
    32. 32. 行動開發學院 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 •  階層 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
    33. 33. 行動開發學院 http://MobileDev.TW LAB HTML Basic 33
    34. 34. 行動開發學院 http://MobileDev.TW HTML Basic 34 第16章: 表單 l  表單應用 使用者輸入資料 ↓ HTML表單接收資料 ↓ 將資料傳送至程式 (PHP,ASP,...) ↓ 程式處理資料 ↓ 將資料寫入資料庫 ↓ 產生結果網頁回傳給使用者 HTML PHP(1) PHP(2) E-mail BossDB
    35. 35. 行動開發學院 http://MobileDev.TW 常見表單一覽 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
    36. 36. 行動開發學院 http://MobileDev.TW 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:按鈕上面的文字
    37. 37. 行動開發學院 http://MobileDev.TW LAB HTML Basic 37
    38. 38. 行動開發學院 http://MobileDev.TW LAB HTML Basic 38
    39. 39. 行動開發學院 http://MobileDev.TW HTML Basic 39 下拉式選單與文字輸入區塊 l  dropdown l  標籤:selectoption/option/select l  設定預選屬性:selected=selected l  textarea l  標籤:textarea/textarea l  屬性: -  name:變數名稱 -  rows:列數 -  cols:每列字元數
    40. 40. 行動開發學院 http://MobileDev.TW LAB HTML Basic 40
    41. 41. 行動開發學院 http://MobileDev.TW Dropdown在iOS7 HTML Basic 41
    42. 42. 行動開發學院 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
    43. 43. 行動開發學院 http://MobileDev.TW HTML Basic 43 第18章: 框架 l  分割種類 l  垂直分割 l  水平分割 l  巢狀使用 l  hyperlink – target屬性 l  framename 特定frame名稱 l  _blank 新視窗 l  _top 目前整個視窗 l  _parent 父frameset HTML網頁設計 關於我們 產品介紹 聯絡我們
    44. 44. 行動開發學院 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:內容與左右邊界的距離
    45. 45. 行動開發學院 http://MobileDev.TW iFrame •  語法與Frame tag相同,但可同時出現在同一網 頁中 •  使用方式 •  先在適當的位置安排iframe tag,並記得一定要使 用name屬性 •  在超連結的tag中指定target的屬性值為該iframe HTML Basic 45
    46. 46. 行動開發學院 http://MobileDev.TW iFrame Lab HTML Basic 46
    47. 47. 行動開發學院 http://MobileDev.TW 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;
    48. 48. 行動開發學院 http://MobileDev.TW 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
    49. 49. 行動開發學院 http://MobileDev.TW HTML Basic 49 第21章: 文件宣告
    50. 50. 行動開發學院 http://MobileDev.TW Web世界的三方角力 W3C Standard Developer Browser HTML Basic 50
    51. 51. 行動開發學院 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  透過版本的指定,可提高在不同瀏覽器中網頁呈現的一致性。
    52. 52. 行動開發學院 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  不使用已淘汰的樣式元件與屬性 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  巢狀使用必須清楚,不可混亂
    53. 53. 行動開發學院 http://MobileDev.TW 第21章: 文件宣告 •  現在你只需要 (HTML5) !DOCTYPE html HTML Basic 53
    54. 54. 行動開發學院 http://MobileDev.TW HTML Basic 54 第21章: 文件宣告 l  What's well-formed XML? l  所有元素名稱為小寫 l  每個標籤都必須有結束標籤 l  所有屬性值都要有雙引號 l  Validator from W3C http://validator.w3.org/
    55. 55. 行動開發學院 http://MobileDev.TW 相關資源 •  標籤列表參考 •  http://www.w3schools.com/tags/ •  W3C官方網站 •  http://www.w3.org/ HTML Basic 55
    56. 56. 行動開發學院 http://MobileDev.TW 留言板實作 – HTML表單+PARSE 前後端整合 HTML Basic 56
    57. 57. 行動開發學院 http://MobileDev.TW 申請Parse帳號與專案(Parse.com) HTML Basic 57
    58. 58. 行動開發學院 http://MobileDev.TW 在已存在的專案中 匯入parse的js、初始化Parse HTML Basic 58
    59. 59. 行動開發學院 http://MobileDev.TW 測試 如有跳出視窗,代表成功建立連線,並可上傳資料 HTML Basic 59
    60. 60. 行動開發學院 http://MobileDev.TW 建立輸入介面 讓使用者輸入暱稱與建議 HTML Basic 60
    61. 61. 行動開發學院 http://MobileDev.TW 建立JavaScript與HTML的關係 全域變數,找到輸入暱稱以及輸入評論的元件 HTML Basic 61
    62. 62. 行動開發學院 http://MobileDev.TW 按下按鈕後,將資料送進Parse HTML Basic 62
    63. 63. 行動開發學院 http://MobileDev.TW 進行測試 HTML Basic 63
    64. 64. 行動開發學院 http://MobileDev.TW 檢查結果 HTML Basic 64

    ×