Download presentation
Presentation is loading. Please wait.
1
Ch01 HTML 5 資料格式 網頁程式設計
2
大綱 網頁設計流程 編輯工具 HTML 5 基本語法 文件結構 區段結構 區塊格式 文字格式 項目符號與編號 2018/11/9
3
網頁設計流程 階段一 階段二 階段三 階段四 蒐集資料 規劃網站架構 網頁製作 測試 網站上傳 推廣網站 網站更新 網站維護
2018/11/9
4
編輯工具 2018/11/9
5
HTML 5 基本語法 <元素 屬性1=“設定值1” > 元素設定後，寫入輸出的內容，再以
語法格式: <元素 屬性1=“設定值1” > 元素與屬性，或屬性與屬性間用1空白格隔開 屬性值以 “ ” 括弧括起來 元素設定後，寫入輸出的內容，再以 <／元素 >，結束一區資料的設定 2018/11/9
6
文件結構 <!doctype html> 文件類型定義 <html> 文件根元素，文件開始 <head>
文件標頭 <meta charset=“utf-8” > 指定為UTF-8編碼方式，避免中文亂碼 <title>我的第一個HTML文件</title> 網頁標籤 </head> 文件標頭結束 <body> 文件主體 我的第一個HTML文件，ＹＡ！ 網頁內容 </body> 文件主體結束 </html> 文件根元素結束 2018/11/9
7
<body>元素 <body>元素標示HTML文件的主體
background=“uri”:指定網頁的背景圖片相對或絶對位址 bgcolor=“color | #rrggbb”: 指定網頁背景顏色 可以在網路上搜尋顏色，例如:color picker text=“color | #rrggbb”: 網頁文字的色彩 2018/11/9
8
<h1>~<h6> 元素 (標題1~6)
align: 可能值：left, center, right；分別為向左、置中、向右靠齊 例： <h1 align=“center”> 字型練習１ </h1> 2018/11/9
9
<p>元素(段落) 網頁內容通常會包含多個段落
HTML文件中，會忽略空白字元或[enter]鍵，所以同一段落要用<p> </p> <br>:換行符號  : 空白字元 align: 指定段落對齊方式 2018/11/9
10
HTML 5 結構元素 <article>: 標示網頁的本文或獨立的內容，例如：一則新聞內容
<section>: 標示通用的區段，例如：將本文分割為不同的主題區段 <hgroup>: 將區段內的主標題、副標題或其他標語統整成一個群組標題，而且只有層級最高的標題會被列入文件大綱 <nav>: 導覽列 <header>: 網頁或區段的頁首 <footer>: 網頁或區段的頁尾 <aside>: 側邊欄，包含摘要、廣告等，可以從區段內容抽離的其它內容 2018/11/9
11
區段練習 http://mis2.nkmu.edu.tw/wangdaj/new_php/w1/page1.html header nav
18% article 60% aside 18% footer 2018/11/9
12
區塊格式 <pre>: 預先格式化的區塊 <blockquote>: 左右縮排的區塊 <hr>: 水平線
<div>: 群組成一個區塊 <marquee>: 跑馬燈 <!-- -->: 註解 2018/11/9
13
文字格式 2018/11/9
14
2018/11/9
15
字型 font 2018/11/9
16
換行 <br> 2018/11/9
17
群組成一行 <span> 2018/11/9
18
項目符號－<ul>、<li>
2018/11/9
19
<ul> 屬性 src=“uri”: 指定項目符號圖片的相對或絕對位址
type=“{square, circle, disc}” square:項目符號為▓ circle:項目符號為○ disc:項目符號為● 2018/11/9
20
項目編號－<ol>、<li>
<ol> <li>唐</li> <li>宋</li> <li>元</li> </ol> 2018/11/9
21
<ol> 屬性 type=“{1,A,a,I,i}”:指定編號類型 start=“n”: 指定編號的起始值 2018/11/9
22
定義清單－<dl>、<dt>、<dd>
2018/11/9
23
提示文字－title 屬性 2018/11/9
Similar presentations
