HTML Basic

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

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

行動開發學院 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  瀏覽器不會顯示出標籤，會透過這些標籤來表達一個網頁

行動開發學院 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

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

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

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

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

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

行動開發學院 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.tw">This is a link</a>

行動開發學院 http://MobileDev.TW HTML Basic 11 第5章：標題 <h1>This is a heading</h1>
<h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> l  <h1>最大，<h6>最小 l  不要為了把字放大而使用標題標籤 l  標題前後會自動有一行空行 l  提供搜尋引擎網頁內容資訊結構

行動開發學院 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

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

行動開發學院 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

行動開發學院 http://MobileDev.TW HTML Basic 15 第8章： <p>段落</p> l  瀏覽器會在段落前後自動加上一空行 l 
<p>This is a paragraph</p> l  align屬性 -  屬性值 l  left 靠左對齊 l  right 靠右對齊 l  center 置中對齊 l  justify 兩邊對齊

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

行動開發學院 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>

行動開發學院 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來決定樣式

行動開發學院 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>

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

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

行動開發學院 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" />

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

行動開發學院 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

行動開發學院 http://MobileDev.TW HTML Basic 28 第14章：表格 3/5 •  儲存格合併
l  colspan → l  rowpan ↓ <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> Name Telephone Bill Gates 555 77 854 555 77 855 <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> First Name: Bill Gates Telephone: 555 77 854 555 77 855

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

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

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

行動開發學院 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"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> start：決定起始值 - 置於ol tag value：改變該數值 - 置於 li tag

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

行動開發學院 http://MobileDev.TW 常見表單一覽 HTML Basic 35 名稱語法外觀文字
<input type="text" name="firstname"> <input type="password" name="pwd"> 單選 <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female 複選 <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="volvo">Volvo</option> <option value="saab">Saab</option> <option value="audi">Audi</option> </select> 文章 <textarea rows="10" cols="30" placeholder="comment..."> </textarea>

行動開發學院 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：按鈕上面的文字

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

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

行動開發學院 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

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

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

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

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

行動開發學院 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 ® ®

行動開發學院 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">

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

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

行動開發學院 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  透過版本的指定，可提高在不同瀏覽器中網頁呈現的一致性。

行動開發學院 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  巢狀使用必須清楚，不可混亂

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

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

HTML Basic

HTML Basic

More Decks by Ryan Chung

Other Decks in Technology

Featured

Transcript