HyperText Markup Language

Presentation on theme: "HyperText Markup Language"— Presentation transcript:

1 HyperText Markup Language
網頁設計 HyperText Markup Language 資管3B 陳則維

2 瀏覽網頁過程 網路

3 Sass (Syntactically Awesome Stylesheets) 腳本畫css
ASP.NET網頁處理、擴充以及HTTP通道的應用程式與通訊處理等工作

4 網頁設計的劃分 前端(html、css、javascript) 服務(php、asp、jsp) 資料庫(ms sql、mysql)
Superleague 2015 HTML TOP10

5 HTML的基本架構

6 Sublime Text 2

7 標籤 說明 <title> 網頁標題 <meta> Metadata資料，提供網頁的描述、關鍵字、作者……等資訊

8 HTMarkup Language元素介紹
<a herf=“ 結尾標籤 屬性 標籤名稱 屬性值 內容

9 HTML共同屬性 屬性 用意 Class(.) 給標籤元素定義類別 id(#) 定義一個識別名稱給一個元素，且不能重複 style
指定HTML元素局部套用的CSS lang 指定HTML元素使用的語言 dir 指定元素內容的文字方向是左至右還是右至左 title 指定HTML元素的額外資訊

10 HTML基本元素 <div> 切割區塊 屬性 值 用意 align center 將位置置中 left 將位置靠左 right
將位置靠右 div div div div

11 HTML基本元素 <br> 換行(break)

12 HTML基本元素 <hl> 水平線 屬性 值 用意 size pixels 尺寸 width 寬 align center
left right 顯示位置

13 HTML基本元素 <i> 斜體、 <b> 粗體、 <del> 刪除線

14 HTML基本元素 <h1>～<h6> 標題

15 屬性 值 用意 align center 將位置置中 left 將位置靠左 right 將位置靠右

16 HTML基本元素 <a> 超連結 屬性 值 用意 download 檔案位置 下載該檔案 target _blank _self
_new 在新視窗開啟(每次按都有不同的新視窗) 在當前是窗開啟(預設) 第一次次按會有新視窗，之後每次按都會跑到同一個視窗

17 HTML基本元素 <img> 圖片 屬性 值 用意 src 檔案位置或網址 顯示圖片 align
top bottom middle left right 顯示位置 border pixels 圖片框線 height 高度 width 寬度

18

19 HTML基本元素 <ul> 圖形項目、 <ol> 數字項目、 <li> 項目 屬性 值 用意 type
disc circle square 實心圓(預設) 空心圓 正方形

20 HTML基本元素 <table> 表格、 <tr> 橫列、 <td> 直欄、

21 屬性 值 用意 broder 0 or 1 開啟或關閉 align center left right 顯示位置 bgcolor rgb(r,g,b) #xxxxxx(16) colorname 背景顏色 height pixels 高度 width 寬度 colspan rowspan 格數 合併儲存格

22 W3school 背景素材 Css table generator Class & id 小遊戲