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

Slides:



Advertisements
Similar presentations
認識食品標示 東吳大學衛生保健組製作.
Advertisements

2010高考科学备考策略 夯实基础 抓纲织网 掌握技巧 提高能力 辽宁省实验中学 徐广宇 2010年9月13日.
HTML5.
新多益擬真英檢系統 以專區帳密登入 選擇任一項目 注意:限用IE瀏覽器!!.
颞下颌关节常见病.
致理科技大學保險金融管理系 實習月開幕暨頒獎典禮
HTML第一课 李 伟 HTML开发语言基础.
結腸直腸腫瘤的認知.
郭詩韻老師 (浸信會呂明才小學音樂科科主任)
良心處方 Click to start..
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
食品安全知多少 製作人:邱顯亦.
CH.12 CSS清單語法與格式設定.
2. 戰後的經濟重建與復興 A. 經濟重建的步驟與措施 1.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
数据访问页.
HTML基本語法及文字 靜宜大學 資管系 楊子青.
CT212 (02/03)-Network Programming and design
ASP动态网页设计实用教程 主讲教师: 开课单位:.
4. 聯合國在解決國際衝突中扮演的角色 C. 聯合國解決國際衝突的個案研究.
HTML5全栈开发序列课程 《前端入门》之HTML入门 余鹏作品.
新陸書局股份有限公司 發行 第十九章 稅捐稽徵法 稅務法規-理論與應用 楊葉承、宋秀玲編著 稅捐稽徵程序.
Ch01 HTML 5 資料格式 網頁程式設計.
第 2 章 必備的 HTML 與 CSS 重點.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
HTML 钟晖云 QQ:
Ch.13 HTML網頁實作.
網頁製作入門 電算中心 – 蔡京甫.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
CSS樣式 靜宜大學 資管系 楊子青.
PHP+MySQL免費網站空間 實例:000webhost
ASP.NET基本設計與操作 建國科技大學 資管系 饒瑞佶 2007年.
Text To Speech (TTS, 文字轉語音) 靜宜大學資管系 楊子青
自由軟體介紹(一) 把flash通通帶回家 報告人:陳俊銘.
本學期資訊系統開發專案之技術架構.
HTML – 文字格式 資訊教育.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
Web Component: Accessing the Web and CSV 靜宜大學資管系 楊子青
HTML超連結及多媒體 靜宜大學 資管系 楊子青.
四年級 中 文 科.
W3C标准网页制作 主讲教师:张 涛.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
HTML 5與課程簡介 靜宜大學 資管系 楊子青.
网页设计与制作 Dreamweaver CS6 标准教程
第一個cordova project Cordova project建立與平台設定,均藉由cli(command line interface來完成 建立project請打開命令提示字元視窗應輸入下列命令 cordova create hello tw.edu.stust.mis.hello HelloWorld.
文字與圖片.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
本學期資訊系統開發專案之技術架構.
網頁設計 清單設計 Instructor: Reporter:楊政勳 Date:
Text To Speech (TTS, 文字轉語音) 靜宜大學資管系 楊子青
HTML大探索.
HelloPurr_Extend 靜宜大學資管系 楊子青
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
第7章 使用CSS设置链接与导航菜单 经济管理学院.
CSS樣式 靜宜大學 資管系 楊子青.
JQuery 標籤操作 建國科技大學 資管系 饒瑞佶 2013/4 V1.
從HTML表格到CSS 靜宜大學 資管系 楊子青.
如何從政大圖書館館藏目錄匯出書目至EndNote
Brief Guide of FrontPage
國立台灣大學 關懷弱勢族群電腦課程 By 資訊工程 黃振修
清單的CSS樣式.
Web Component: Accessing the Web and CSV 靜宜大學資管系 楊子青
HTML基本語法及文字 靜宜大學 資管系 楊子青.
第五章 自訂佈景主題與文字處理 講授者:詹雅愔.
NFC (近場通訊, Near Field Communication) 靜宜大學資管系 楊子青
Presentation transcript:

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

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

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

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

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

body加入語意結構 請用記事本 將左方標籤複製貼上 另存新檔至桌面 編碼請選UTF-8 存檔類型請選擇*.* 檔名test3.htm <!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該檔案 即可用瀏覽器觀看結果

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 /> 設定段落標題 <h1>至<h6> http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers 加入分隔線 <hr> 換行 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test

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

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

列表 ol標籤 屬性 設定值 說明 type 設定值有五種,請參考下表 設定數目樣式,預設值:type="1" start 1、2、3等整數值 設定編號起始值,預設值:start=1 reversed 反向排序,數字改為由大到小(IE9不支援) type設定值 項目編號樣式 說明 1 1, 2, 3, ... 阿拉伯數字 A A, B, C, ... 大寫英文字母 a a, b, c, ... 小寫英文字母 I I, II, III, ... 大寫羅馬數字 i i, ii, iii, ... 小寫羅馬數字

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

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