1 / 14

HTML 基本語法及文字

HTML 基本語法及文字. 靜宜大學 資管系 楊子青. 大綱. HTML5 宣告與編碼設定 文字段落 列表. 1. HTML5 宣告與編碼設定. 文件類型 <!DOCTYPE html> HTML 的基本架構 <!DOCTYPE html> <html> <head> <title> 網頁標題 </title> </head> <body> 網頁內容 </body> </html>. 請用記事本 將左方標籤複製貼上 另存新檔至桌面 存檔類型請選擇* .* 檔名 test1.htm

suchi
Download Presentation

HTML 基本語法及文字

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML基本語法及文字 靜宜大學 資管系 楊子青

  2. 大綱 • HTML5宣告與編碼設定 • 文字段落 • 列表

  3. 1. HTML5宣告與編碼設定 • 文件類型 • <!DOCTYPE html> • HTML 的基本架構 <!DOCTYPE html> <html> <head> <title>網頁標題</title> </head> <body> 網頁內容 </body> </html> 請用記事本 將左方標籤複製貼上 另存新檔至桌面 存檔類型請選擇*.* 檔名test1.htm 回到桌面double click該檔案 即可用瀏覽器觀看結果

  4. HTML基本結構 • <html>…</html> • <html lang="zh-TW">表示文件內容使用台灣的繁體中文 • <head>…</head> 文件標籤 • <title>網頁標題</title> • <meta charset="big5"> • 建議使用utf-8多語系編碼(根據使用者作業系統來決定編碼方式，較能避免出現亂碼) • <body>…</body> 文件內容

  5. head加入語言及編碼 <!DOCTYPE html> <html lang="zh-TW"> <head> <title>網頁標題</title> <meta charset="utf-8"> </head> <body> 網頁內容 </body> </html> 請用記事本 將左方標籤複製貼上 另存新檔至桌面 編碼請選UTF-8 存檔類型請選擇*.* 檔名test2.htm 回到桌面double click該檔案 即可用瀏覽器觀看結果

  6. body加入語意結構 <!DOCTYPE html> <html lang="zh-TW"> <head> <title>網頁標題</title> <meta charset="utf-8"> </head> <body> <header>網頁內容</header> <nav>連結選單</nav> <article>主要內容 <section>章節段落</section> </article> <aside>側邊欄</aside> <footer>頁尾</footer> </body> </html> 請用記事本 將左方標籤複製貼上 另存新檔至桌面 編碼請選UTF-8 存檔類型請選擇*.* 檔名test3.htm 回到桌面double click該檔案 即可用瀏覽器觀看結果

  7. 2. 文字段落 • 設定段落樣式的標記 • <br> 換行 • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_br • <p>…</p>文字分段 • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_paragraphs1 • <p>= <br /><br /> • 設定對齊與縮排的標記 • <pre>…</pre>依文字原來格式排列 • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_pre • <blockquote>…</ blockquote > • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_blockquote_test

  8. 文字段落 • 設定段落標題 • <h1>至<h6> • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers • 加入分隔線 • <hr> 換行 • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test • 設定上標、下標 • <sup>及<sub> • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_sup

  9. 文字段落 • 加入註解 • <!-- 註解文字 --> • 使用特殊符號 (Non-Breaking SPace)

  10. 3. 列表 • (1)無序號列表 (符號清單, Unordered List) <ul> <li> <li> … </ul> • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists4 • 改變項目符號的樣式 <ul type>

  11. 列表 • (2)有序號列表 (Ordered List) <ol> <li> <li> … </ol> • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists • 改變項目符號的樣式 <ol type> • 改變編號的起始值 <ol start>

  12. 列表 • ol標籤

  13. 列表 • (3)定義用列表 (Definition List) • 適用在有主題與內容的兩段式文字，通常第一段是以<dt>標記定義主題，第二段以<dd>標記來定義內容 <dl> <dt> <dd> <dt> <dd> … </dl> • http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test

  14. 參考資料 • 教科書 • 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 • Chap 04: HTML入門 • Chap 05:文字與排版技巧 • 網路資源 • http://www.w3schools.com/tags/

More Related