<del> 刪除的文字 deleted text <div> 文件內區段 <dfn> a Deflnition term <dl> 字典式樣清單 deflnition list <dt> 字典式樣之辭彙 deflnition term <em> 斜體字 emphasized text <flelds

Size: px

Start display at page:

Download "<del> 刪除的文字 deleted text <div> 文件內區段 <dfn> a Deflnition term <dl> 字典式樣清單 deflnition list <dt> 字典式樣之辭彙 deflnition term <em> 斜體字 emphasized text <flelds"

则环视戎
5 years ago
Views:

1 1. 重要名詞中英對照網頁設計的基礎 / HTML5 語法 2013, 明志科大視傳系 / 林金祥名詞中文 link 連結 ( 鏈結 ) server 伺服器 attribute 屬性 render 彩現表現 homepage 首頁 browser 瀏覽器 value 值 property 樣式性質 element 元素 web page 網頁 deprecated 負面 HTML Tag 標籤 website 網站 pseudo 偽類 ( 標籤 ) 2. HTML5 基本標籤 ( 依標籤字母排序 ) 本表所列為 HTML5 之標籤, 完整內容請參考 W3C 的網頁, 有更詳細的定義也可以參考網站 : 標籤功能說明屬性英文字義 <! > 註解 <!DOCTYPE> 文件類型 Document Types <a> 錨點 href id name target title <abbr> 縮寫 ( 僅念字母 ) lang title anchor abbreviations <address> 住址元件 address <area> 定義影像地圖內部的區域做鏈結 shape coords href title <base /> 文件內 ULR 之預設位置 <bdo> 改變文字顯示方向 rtl ltr area Bio-direction order <blockquote> 長段區塊文字 cite block quotation <body> 本文內容 <br /> 換行 break <button> 按鍵 button <caption> 表格標題 caption <cite> 使用引文 citation <code> 電腦程式內文 code <col /> 表格內之欄屬性 span column <colgroup> 群組之表格的欄 column group <dd> 字典式樣之定義 deflnitions 2013, C. Lin, MCUT-VCD / 1

2 <del> 刪除的文字 deleted text <div> 文件內區段 <dfn> a Deflnition term <dl> 字典式樣清單 deflnition list <dt> 字典式樣之辭彙 deflnition term <em> 斜體字 emphasized text <fleldset> 設定表單元件組 fleld set <form> 產生表單 form <h1> to <h6> 標題字 1 至 6 級 headline <head> HTML 文件檔頭 head <hr /> 橫線 size horizontal rule <html> HTML 文件 html <iframe> 插入行內框架 inline frame <img /> 插入影像 width height border src alt title images <input /> 輸入欄 input <ins> 插入的文字 inserted text <kbd> keyboard text <label> 表單控制標籤 label <legend> a title in a fleldset <li> 條列項目 lists <link> 連結外部資源 <map> 影像地圖 image map <meta> 網頁文件資訊 meta information <noscript> 不使用語法 (scripts) no scripts <object> 嵌入物件 ( 多媒體 ) classid width height object <ol> 有序清單 type ordered list <optgroup> an option group <option> 定義下拉選項的參數 option <p> 段落 paragraph <param> 設定物件的參數 parameter <pre> 文字預設式樣 preformated <q> 內文短引用語 quotions <samp> 電腦程式樣本 <script> 使用語法 (e.g. JavaScript) type scripts 2 / 網頁設計的基礎

3 <select> a selectable list select <small> 文字縮小 small <span> 設定行內式樣 span <strong> 文字加粗 strong <style> 使用樣式 (e.g. CSS) type style <sub> 下標字 subscript <sup> 上標字 superscript <table> 插入表格 border cellspacing cellpadding width table <tbody> 表格內文 table body <td> 表格之儲存格 colspan rowspan table data <textarea> 多行文字的區域 text area <tfoot> 表格註解 table footage <th> 表格之標題儲存格 scope table head <thead> 表格之標題 table header <title> HTML 文件之標題 title <tr> 表格的列 table row <ul> 無序清單 type unordered list <var> 變數或使用者定義的文字 Variable 3. HTML5 新增的媒體元素標籤功能說明屬性 <audio> 使用音訊 autoplay ( 自動播放 ) controls ( 控制列 ) loop ( 循環播放 ) poster ( 媒體圖示 ) preload ( 預下載 ) src ( 來源 ) <video> 使用視訊 autoplay ( 自動播放 ) controls ( 控制列 ) height ( 高 ) loop ( 循環播放 ) poster ( 媒體圖示 ) preload ( 預下載 ) src ( 來源 ) width ( 寬 ) <source> <embed> <track> 定義媒體來源為嵌入的互動媒體定義容器定義 <audio><video> 之文字內容 2013, C. Lin, MCUT-VCD / 3

4 4. HTML5 新增的結構元素 <article> <aside> <bdi> 標籤功能說明屬性 <command> <details> <summary> <flgure> <flgcaption> <footer> <header> <hgroup> <mark> 定義文章定義側欄定義範圍內文字的方向 ( 目前僅 FireFox 支援 ) 定義具功能的按鍵 ( 目前僅 IE9 支援 ) 定義互動面板的內容細節定義互動面板的標籤定義圖片影像媒體等定義圖片之說明標題定義結尾區定義標題區對 <h1>..<h6> 的標題群組定義標記區的文字 Bi-directional Isolation <meter> 產生設定的範圍比例圖示 value ( 被量測的值 ) min ( 範圍內最小值, 預設為 0) max ( 範圍內最大值, 預設為 1) low ( 相對低值 ) high ( 相對高值 ) optimum ( 最佳化 ) <nav> <progress> <ruby> <rt> <rp> <section> 定義導覽列鏈結表現目前工作進度 ( 宜使用 meter 取代 ) 定義與顯示東亞文字裡的聲調或注音解釋 ( 中文日文 ) 定義文件裡的區塊 <time> 定義日期與時間 datetime pubtime <wbr> 5. HTML 5 的新繪圖元素定義連續字母中可分行處 max ( 最大值 ) value ( 目前的值 ) 元素功能說明屬性 <canvas> 配合 JavaScript 繪製圖案 width height 參考網站 4 / 網頁設計的基礎

5 6. <link> 標籤的屬性說明 6.1. 標準屬性屬性屬性值說明 class classname Specifles a classname for an element dir rtl ltr Specifles the text direction for the content in an element id id Specifles a unique id for an element lang language_code Specifles a language code for the content in an element style style_deflnition Specifles an inline style for an element title text Specifles extra information about an element xml:lang language_code Specifles a language code for the content in an element, in XHTML documents 6.2. 選擇性屬性屬性屬性值說明 charset char_encoding Specifles the character encoding of the linked document href URL Specifles the location of the linked document hre ang language_code Specifles the language of the text in the linked document media screen tty tv projection handheld print braille aural all Specifles on what device the linked document will be displayed 2013, C. Lin, MCUT-VCD / 5

6 rel rev target alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection alternate appendix bookmark chapter contents copyright glossary help home index next prev section start stylesheet subsection _blank _self _top _parent frame_name 6 / 網頁設計的基礎 Specifles the relationship between the current document and the linked document Specifles the relationship between the linked document and the current document Specifles where the linked document is to be loaded type MIME_type Specifles the MIME type of the linked document 斜體字表示為自訂的名稱 7. 淘汰元素淘汰或負面 (deprecated) 元素 (element) 或屬性 (attribute) 是指被新的語言文件列為過時的標籤或屬性, 在 HTML 5 中已經被淘汰其中以排版或改變字形的標籤為主 W3C 已將 HTML 負責文字內容, 而排版的部份則交給 CSS 處理因此, 以下標籤不要在網頁設計中使用

7 標籤功能說明英文字義淘汰原因 <acronym> 字首縮寫 ( 讀縮寫音 ) lang title <applet> 插入 JAVA 元件 Java application 由 <abbr> 取代由 <object> 取代 <b> 字體加粗 bold 由 <strong> 取代 <big> 字體加大 big 由 CSS 取代 <basefont /> 基本字型式樣 base font 由 CSS 取代 <center> 文字居中對齊 center 由 CSS 取代 <dir> 目錄清單 directory 與 <ul> 同, 故刪除 <embed /> 嵌入元素 embed elements 由 <object> 取代 <font> 設定字體大小字型顏色 font 由 CSS 取代 <frame> 框架 frame 不再支援 <frameset> 框架組 frame sets 不再支援 <i> 斜體字 italic 由 <em> 取代 <isindex/> 單行輸入 input single index 由 <input> 取代 <layer/> 層 layer 由 CSS 取代 <menu> 目錄清單 menu 與 <ul> 同, 故刪除 <noframes> 不使用框架 no frames 不再支援 <s> 文字刪除線 strike-through 由 CSS 取代 <shadow> 陰影效果 shadow 由 CSS 取代 <strike> 文字刪除線 strike-through 由 CSS 取代 <tt> 電報字格式 teletype text 不再支援 <u> 文字下加底線 underlined text 由 CSS 取代 8. 負面屬性一如負面元素將被淘汰, 許多屬性原 HTML 較早的版本是用來設定版面 ; 而未來的版面設定工作, 也都轉由 CSS 執行, 故以下元素將在未來的 HTML 中被淘汰因此, 以下屬性不應在網頁設計中使用屬性功能說明英文字義負面原因 align 水平對齊 alignment 由 CSS 取代 alink 設定活動中的鏈結 active link 由 CSS 取代 background 設定底圖 background 由 CSS 取代 bgcolor 設定背景色 background color 由 CSS 取代 border 設定邊框高度 border 由 CSS 取代 color 設定顏色 color 由 CSS 取代 face 設定字體 font face 由 CSS 取代 height 元素的高度 height 由 CSS 取代 hspace 水平間距 horizontal space 由 CSS 取代 2013, C. Lin, MCUT-VCD / 7

8 link 設定鏈結顏色 link 由 CSS 取代 noshade 設定無陰影 no shade 由 CSS 取代 nowrap 設定文字不換行 no wrap 由 CSS 取代 type 列表符號之形式 type 由 CSS 取代 start 列表之開始數字 Starting number 由 CSS 取代 valign 垂直對齊 vertical alignment 由 CSS 取代 value 列表值 value 由 CSS 取代 version 文件版本 version 由 DTDs 取代 vlink 設定拜訪過的鏈結 visited link 由 CSS 取代 vspace 垂直間距 vertical space 由 CSS 取代 width 元素的寬度 width 由 CSS 取代 8 / 網頁設計的基礎

9 9. 網頁設計 HTML5 基本語法結構示意 <!DOCTYPE HTML> <html> <head> <title> 網頁標題 </title> <link rel="shortcut icon" type="image/x-ico" href=" 小圖.ico" /> <meta charset="utf-8" /> <meta name="author" content=" 作者 " /> <meta name="keyword" content=" 關鍵字 " /> <style> 此為定義 CSS 的規則處 </style> <script type="text/javascript"> 此為定義 JavaScript 程式 </script> </head> <body> <h1 id="top"> 標題一文字 </h1> <hr size="n" /> <h2> 標題二文字 </h2> <p> 段落文字轉變成 <em> 斜體字 </em> 或是變成 <strong> 粗體字 </strong> </p> <p> 段落文字 <br /> 文字內容 </p> <ol type="a"> <li> 條列內容 </li> <li> 條列內容 </li> <li> 條列內容 </li> </ol> <ul type="square"> <li> 條列內容 </li> <li> 條列內容 <br /> 條列內容 </li> <li> 條列內容 </li> </ul> <dl> <dt> 定義項目 </dt> <dd> 定義內容 </dd> <dt> 定義項目 </dt> 2013, C. Lin, MCUT-VCD / 9

10 <dd> 定義內容 </dd> <dt> 定義項目 </dt> <dd> 定義內容 <br /> 定義內容 </dd> </dl> <hr size="n" /> <table> <tr> <th> 欄位標題 1</th> <th> 欄位標題 2</th> <th> 欄位標題 3</th> </tr> <tr> <td> 表格內容 1-1</td> <td> 表格內容 1-2</td> <td> 表格內容 1-3</td> </tr> <tr> <td> 表格內容 2-1</td> <td> 表格內容 2-2</td> <td> 表格內容 2-3</td> </tr> </table> <img src="photo.jpg" alt="photo" /> <a href=" target="_blank"> 鏈結外部網站 </a>, 並開啟在新視窗 <a href="fllename.pdf"> 內部鏈結檔案 </a> <a href="#top"> 鏈結到本網頁的錨點 "top" </a> <a 鏈結選項 </a> </body> </html> 10 / 網頁設計的基礎

11 10. 檔案命名原則電腦檔案的命名是很重要的一環, 除了自己 ( 人 ) 要能夠懂之外, 最重要的是不同的電腦程式語言 (JAVA, asp.net, C#, Action Script, Java Script...), 以及硬體設備 ( 電腦網路伺服器...) 也要能夠辨識, 否則便無法順利讀取或執行因為, 養成良好的檔案命名習慣, 有助於未來學習更多的電腦軟體與技能以下是較嚴謹的命名規則, 請各位務必遵守 : a) 可以使用英文字母 b) 不要使用中文或亞洲語系文字 c) 不要使用數字開頭 d) 不要使用空格 e) 不要使用標點符號 (,. ; :?!) f) 不要使用運算符號 (+ * / % ^) 下面的檔名都可能在讀取時發生錯誤 : a) 我的攝影作品.html 使用中文 b) 365dayphoto.html 使用數字開頭 c) my friend.html 使用空白 d) wow!.html 使用符號 (! ) 因此, 合理的檔案名稱可以像是 : a) index.html 用單字 b) myproflle.html 插入大寫分隔 c) art_work.html 使用 _ 分隔 d) myfriend.html e) myclass html f) MCUT_Life.html 2013, C. Lin, MCUT-VCD / 11

12 12 / 網頁設計的基礎

XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vsp

XHTML CSS CSS CSS DOCTYPE Switch XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vspace big tabindex accesskey