HTML HTML5, CSS/LESS, jquery 新. 一代網頁設計

Size: px

Start display at page:

Download "HTML HTML5, CSS/LESS, jquery 新. 一代網頁設計"

田余
2 years ago
Views:

1 HTML HTML5, CSS/LESS, jquery 新. 一代網頁設計

2 什麼是 HTML?

3 HTML 的演進 HTML 2.0:1995 年 11 月發布 HTML 3.2:1997 年 1 月發布為 W3C 推薦標準 (W3C Recommendation) HTML 4.0:1997 年 12 月發布為 W3C 推薦標準 HTML 4.01 ( 小幅修正 ):1999 年 12 月發布為 W3C 推薦標準 HTML 5:2012 年發布為 W3C 候選推薦

4 W3C HTML 5 官方網站 W3C 建立規格的流程

5 HTML 5 的新功能簡化的文件類型定義簡化的字元集指定方式新增的元素 :HTML 5 增加了一些新的元素, 例如 <section> <article> <aside> <nav> <header> <footer> <hgroup> <video> <audio> <source> <embed> <figure> <figcaption> <canvas> <progress> <keygen> <output> <meter> <time> <menu> <command> <datalist> <details> <summary> <ruby> <rt> <rp> <mark> 等

6 修改的元素 :HTML 5 修改了一些既有的元素, 例如 <em> <i> <strong> <b> <address> <ol> 等移除的元素 :HTML 移除了一些既有的元素, 例如 <frame> <frameset> <noframes> <font> <basefont> <big> <blink> <center> <strike> <tt> <nobr> <spacer> <marquee> <bgsound> <noembed> <acronym> <applet> <dir> <plaintext> <listing> <xmp> <rb> 等新增的全域屬性新增的表單驗證功能

7 HTML 文件的編輯工具任何文字編輯器

8 常見編輯工具

9 直接點兩下怎麼打開網頁?

10 用瀏覽器瀏覽

11 網址列 file://... 瀏覽器直接開檔案只有自己這台電腦能看得到或伺服器經由 HTTP 通訊協定所傳送的頁面 Google Yahoo

12 學習撰寫 HTML 文件 HTML (HyperText Markup Language) - 標記語言是所有 Web 技術的基礎 Markup 即為標籤之意使用標籤 (Tag) 來標示功能單位, 簡單易學容易上手

13 標籤 Tag 用小於 < 和大於 > 兩個符號所包住的文字, 我們稱為標籤像是 <html> <body>,html 和 body 我們稱為標籤的名稱標籤通常成對存在, 有開始標籤和結束標籤夾在開始和結束標籤中的內容稱為標籤的內文 (inner HTML or inner Text) <b>this is bold text</b> <u> 這是有底線的文字 </u> 有些 element 僅由單一標籤構成, 如 <input><hr><img><br> 等 This is bold text 這是有底線的文字

14 標籤的內文標籤的內文可以是純文字或者包含其他標籤 Example <body><b>hello World</b></body> 我們說 body 標籤包含 b 標籤 b 標籤中包含純文字串 Hello World

15 HTML 文件的基本要素以下為基本 HTML 文件的格式, 所有網頁都建議套用此格式 <html> <head> 描述網頁用的資料 Metadata </head> <body> 實際顯示在畫面中的網頁內容 </body> </html> <! html 文件最上層必須是 html 標籤 -->

16 實機操作我的第一份 HTML 文件 :Hello World

17 中文出現亂碼怎麼辦網頁現在都是採用 UTF-8 編碼, 但是在某些瀏覽器呈現時, 卻是出現亂碼 ( 自動偵測語系 ) 於 HTML head 指定此頁編碼為 UTF-8: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> < /head> 或簡化版 :

18 <br> : 換行 ex: 第一課 : 換行與空白空白鍵預設會重疊 ex: s e p a r a t e<br> s e p a r a t e<br> : 可疊加的空白 character entity s e p &n bsp; a r a&nbs p; t e<br>  : 多行註解 ex:  This line is<br> broken<br> However this is in the same line.<br> <br>

19 沒有內文的標籤 - 水平線標籤有些功能性的標籤不需要內文, 則可以省略不寫, 如下 <hr></hr> 或者縮寫成 <hr/> 或 <hr> 功能 : 作為水平線來分隔文章

20 標籤的屬性 Attribute 標籤除了名稱和內文之外, 可能還有一些用來描述這個標籤的屬性一個屬性是由屬性名稱和屬性的值所組成寫法如下 Attribute-Name="Value" 屬性的值我們會用雙引號標示出來 Example <a href=" Kimo!</a> 我們說標籤 a 有一個屬性, 屬性名稱為 href

21 多個屬性 Attributes 標籤的屬性必須寫在開始標籤的 <> 中一個標籤可以有多個屬性屬性之間必須至少用一個空白分開 <div class="con" id="list">hello</div>

22 HTML 中定義的標籤 HTML 是一個大家共同制定的文件格式, 因此也定義了許多標準的標籤名稱和用法我們將一一介紹較為重要的標籤用法

23 利用 title 標籤 <title> 必須放在 <head> 標籤中, 用來告訴瀏覽器網頁的標題是甚麼不會顯示在主畫面中 <html> <head> <title>my Homepage</title> </head> <body>my name is Peng Peng</body> </html>

24 使用 h1 ~ h6 標題標籤這些標籤用來表示他們所包含的內文是最主要的標題 (head number 1) 副標題 (h2) 還是更次要的 (h3 ~ h6) Example: <h3>this is my Title</h3> align="{left,center,right}" (Deprecated)

25 <p> 段落 <p> 元素用來標示段落, 屬性如下 :

26 語意標籤 - 內文系列 <h1>~<h6>: 標題 <p>: 段落 ; <blockquote>: 引文 <strong>: 重點 ;<em>: 強調

27 <hr>: 分隔線語意標籤 - 列表定義 <ol>,<ul>: 有序 / 無序列表 ;<li>: 列表的項目 <dl>: 定義列表 ; <dt>: 被定義的項目 ; <dd>: 定義

28 使用 b, u, i 標籤 <b>: 所包含的內文必須粗體顯示 (bold) <u>: 所包含的內文必須加底線 (underline) <i>: 所包含的內文必須斜體顯示 (italic) Example <b><u>bold and underline text</u></b>

29 建立超連結 Hyper Link 利用 <a> 建立超連結標籤屬性 href 的值代表要連結的網址, 內文代表要顯示在畫面上的文字 Example <a href=" Kimo!</a>

30 URI 的類型 Universal Resource Identifier 超連結的定址方式稱為 URI (Universal Resource Identifier), 通常包含下列幾個部分 : 例如 :

31 絕對 URI 與相對 URI 絕對 URI (Absolute URI) 包含通訊協定伺服器名稱資料夾和文件名稱相對 URI (Relative URI) 通常只包含資料夾和文件名稱, 有時甚至連資料夾都可以省略不寫相對 URI 又分為下列兩種類型 : 文件相對 URI (Document-Relative URI) 伺服器相對 URI (Server-Relative URI)

32 加入圖片利用 <img> 標籤加入圖片屬性 src 代表欲顯示的圖片所在位址 (URL) <img> 是一個不需要內文的標籤 <img src=" 或 <img src=" /> <img src="images/h_logo.gif" />

33 建立書籤

35 建立列表利用 <ul> 和 <li> 標籤合力建立列表 <ul> <li>item 1</li> <li>item 2</li> </ul> 此為無順序的列表如果希望有明確的順序標示, 您可以將 <ul> 換成 <ol>

list-style-type list-style-type 屬性是用來設定在清單中, 每一條之前的記號要用什麼最常見的 list-style-type 設定值為 : none ( 沒有 ) disc ( 全黑圓圈 ) circle ( 空心圓圈 ) square ( 正方形 ) One may also wish to use

36 list-style-type list-style-type 屬性是用來設定在清單中, 每一條之前的記號要用什麼最常見的 list-style-type 設定值為 : none ( 沒有 ) disc ( 全黑圓圈 ) circle ( 空心圓圈 ) square ( 正方形 ) One may also wish to use ordered character sets. Common ones are: upper-latin ( 大寫拉丁文 ) lower-latin ( 小寫拉丁文 ) upper-roman ( 大寫羅馬文 ) lower-roman ( 小寫羅馬文 ) upper-alpha ( 大寫希臘文 ) lower-alpha ( 小寫希臘文 )

37 建立表格我們用 <table> 表示要建立一個新的表格用 <tr> 建立一個列 (Table Row),<tr> 必須被包在 <table> 標籤中用 <td> 建立一個資料欄 (Table Data),<td> 必須被包在 <tr> 中

38 <Table> 建立表格 <tr> <tr> <tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tr> </tr> </tr> </Table>

40 表格的背景色彩與背景圖片以下二圖是在 <table> 元素分別加上 bgcolor="lightyellow" background="bg.gif" 屬性的瀏覽結果

41 回家 / 課堂作業請建立一個簡單的個人首頁, 最好能包含超連結圖片以及表格等用法

42 參考資料 W3School HTML Tags:

43 <Table> 進階巢狀表格, 結合欄 <tr> <tr> <tr> <tr> <td colspan="3"></td> <td></td> <td></td> <td></td> <td></td> </tr> </tr> </tr> </tr> </Table>

44 <Table> 進階巢狀表格, 結合列 <tr> <td></td> <td></td> </tr> <tr> <tr> <td rowspan="4"> </td> <td></td> <td></td> </tr> </tr> <tr> <td></td> </tr> </Table>

46 表格的對齊方式 <table> 元素的 align 屬性提供了 left ( 靠左 ) center ( 置中 ) right ( 靠右 ) 等對齊方式, 例如 : <table border="1" align="left"> <table border="1" align="center"> <table border="1" align="right">

47 儲存格的對齊方式

48 向使用者收集資料 - 表單元素有一群特別的標籤, 可以用來向使用者收集資料包括 <input> <select> <textarea> 通常我們會把這些標籤包裹在表單標籤 <form> 裡面

49 input 標籤 <input> 顧名思義向使用者要求輸入, 其中有三個屬性是最重要的 type: 用來表達不同種類的輸入 name: 輸入資料的名稱 value: 輸入資料的內容

50 單行文字輸入框在 <input> 設定屬性 type 為 text 則表示一個單行輸入框 <input type="text" /> 為這個輸入取一個名字, 設定資料預設值 <input type="text" name="title" value ="Home" />

51 密碼輸入框在 <input> 設定屬性 type 為 password 則表示一個密碼專用的輸入框 <input type="password" /> 為這個輸入取一個名字 <input type="password" name="password" />

53 按鈕在 <input> 設定屬性 type 為 button 則表示一個按鈕 <input type="button" /> 設定按鈕上的文字 <input type="button" value=" 按我 " />

55 多重選取框在 <input> 設定屬性 type 為 checkbox 則表示一個可勾選的選取框 <input type="checkbox" /> 設定選取框被預設選取 <input type="checkbox" checked="true" />

57 單選框在 <input> 設定屬性 type 為 radio 則表示一個單選框 <input type="radio" />

58 單選框單選框必須配合 name 屬性運作, 擁有同樣 name 屬性的單選框為一個 Group 使用者只能在一個 Group 中選擇一個男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" /> <br/> 成年 <input type="radio" name="age" /> 未成年 <input type="radio" name="age" />

60 多行文字輸入框使用 <textarea> 提供多行文字輸入利用 rows 屬性指定高度 cols 屬性指定寬度標籤內文為輸入文字內容 <textarea rows="3" cols="20" > My name is Chao-Wei Peng. Welcome to my home. </textarea>

62 下拉式選單我們利用 <select> 和 <option> 配合製作下拉式選單 <select name="sex"> <option value="male"> 男 </option> <option value="female"> 女 </option> </select> <option> 的 value 屬性為真正有意義的資料, 內文則是顯示給使用者看的文字

64 兩個表示區塊的標籤有兩個單純表示區塊的標籤, 未來會很常用到通常包含內文, 只是標籤本身沒有其他特殊意義, 只表達一個區塊的意思 <span> 用來表示一個不會自動換行的區塊 (inline) <div> 用來表示一個會自動換行的區塊 (block)

65 實機練習設計一個問卷調查表單, 並使用上述的功能 : 單行文字輸入框按鈕多重選取框單選框多行文字輸入框下拉式選單

66 HTML5 語意標籤 <section>: 章節 / 小節 <article>: 一篇文章兩者可以互包 <nav>: 導覽選單 <header> <footer>: 文章段落或頁面的開頭結尾

67 網頁排版

68 無語意標籤 div 與 span 單純將元素群組起來 CSS 或 Javascript 的操作對象

69 通用屬性大部分 element 都有下面屬性 class, id: 替該 element 加上一個 classname / unique ID 使 CSS 的 selector 能選取 JavaScript 方便操作 title: 工具提示 (tooltip) style: 加上 CSS Declaration

70 參考資料 MDN HTML Elements 標籤列表屬性介紹

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05