html & css

22
羅羅羅

Upload: leo-lo

Post on 17-Dec-2014

2.086 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Html & Css

羅世豪

Page 2: Html & Css

OutlineHTML & CSSHTML 的基本構成常用的 HTML 標籤HTML 的巢狀結構與階層性What is CSS?Why CSS?CSS 基本語法常見的 CSS 使用方式

Page 3: Html & Css

HTML & CSS為什麼 PM 要上這堂課 ?當 HTML 遇上 CSS 會擦出什麼火花 ?

Page 4: Html & Css

HTML 的基本構成標籤 (Tags)關閉標籤 (Closing tags)屬性 (Attributes)元素 (Elements)

<tag attribute="value"> 我是一段文字 </tag>

<tag2 attribute2="value2“ />

Page 5: Html & Css

HTML 的基本構成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<body>

相簿很大不用錢 </body>

</html>

Page 6: Html & Css

HTML 的基本構成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> 天空部落 </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

相簿很大不用錢 </body>

</html>

Page 7: Html & Css

常用的 HTML 標籤p 標籤 (paragraph) ,也就是段落

<p> 這是一段文字 </p>

換行標籤 (Line Breaks) <br />

h1 、 h2 、 h3 、 h4 、 h5 和 h6 標籤用來定義標題 <h1> 我是標題 </h1>

a 標籤用來定義一個連結href 屬性用來定義連結的目標target 屬性用來定義在何處開啟連結

<a href="http://blog.yam.com" target="_blank"> 這是一個連結 </a>

Page 8: Html & Css

常用的 HTML 標籤<h1> 風林火山 6/3 不刪檔封測 </h1>

<h2> 遊戲簡介 </h2>

<p> 由台灣知名入口網站 yam 天空代理的線上遊戲-風林火山 ONLINE....</p><p> 韓國知名大廠 Mgame 斥資數十億精心開發的風林火山 ONLINE...</p>

<h2> 遊戲 MV</h2>

<p> yam 天空提供絕無僅有的【風林火山 ONLINE 】結合羅憶詩的 MV 大首播: <br /><a href=“http://mymedia.yam.com/m/2746718” target=“_blank”> 點此觀看 </a> 。 </p>

Page 9: Html & Css

常用的 HTML 標籤img 圖片標籤

src 屬性定義圖片的位址alt 屬性定義替代的描述width 長度屬性和 height 高度屬性定義圖片呈現的長寬

<img height="69" width="84" src=“http://blog.yam.com/2008index/i/logo.jpg“ alt=“yam logo” />

無序列表 (unordered lists)<ul><li>blog</li><li>album</li></ul>

有序列表 (ordered lists)<ol><li> 列表項目 1</li><li> 列表項目 2</li></ol>

列表項目 (list item)<li> 這是一個列表項目 </li>

Page 10: Html & Css

常用的 HTML 標籤<ul>

<li>blog 排名 <ol>

<li>Brenda★ 晶晶 ~ 寵貓一生 </li>

<li>486 的 大丈夫週記 </li>

</ol>

</li>

<li><img height="69" width="84" src="http://blog.yam.com/2008index/i/logo.jpg" alt=“yam logo” /></li>

</ul>

Page 11: Html & Css

常用的 HTML 標籤table 定義表格tr (table row) 定義表格中的一行th (table header cell) 定義一行或一列資料的表頭,不

可為資料td (table data cell) 定義表格中的一資料單元格 (data

cell) ,必須包含在 tr 內colspan 屬性指出要跨越幾個單元格rowspan 屬性指出要跨越幾行

Page 12: Html & Css

常用的 HTML 標籤<table border="1“>

<caption> 福委投票結果 </caption>

<tr>

<th> 姓名 </th>

<th> 票數 </th>

</tr>

<tr>

<td > 黃旭廷 </td>

<td >48</td>

</tr>

<tr>

<td > 邱奕超 </td>

<td>46</td>

</tr>

<tr>

<td> 吉芷宜 </td>

<td >22</td>

</tr>

</table>

Page 13: Html & Css

常用的 HTML 標籤<table border="1“>

<caption> 表格標題 </caption>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td colspan=“2”> 第 1 行的第 1 列跟第 2 列合併 </td>

</tr>

<tr>

<td rowspan=“2”> 第 2 行跟第 3 行的第 1 列合併 </td>

<td> 第 2 行第 2 列 </td>

</tr>

<tr>

<td> 第 3 行第 2 列 </td>

</tr>

</table>

Page 14: Html & Css

常用的 HTML 標籤<table border="1“><caption> 表格標題 </caption>

<thead>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Footer 1</td>

<td>Footer 2</td>

</tr>

</tfoot>

<tbody>

<tr>

<td> 第 1 行第 1 列 </td>

<td> 第 1 行第 2 列 </td>

</tr>

<tr>

<td> 第 2 行第 1 列 </td>

<td> 第 2 行第 2 列 </td>

</tr>

</tbody></table>

Page 15: Html & Css

常用的 HTML 標籤div (division) & span

div排版很方便,但不要走火入魔。表單

<div id=“content"> <p>遊戲名稱叫做 <span class=“game“>風林火山 </span></p> </div>

Page 16: Html & Css

HTML 的巢狀結構與階層性巢狀結構錯誤示範

<html> <head><title> 天空部落 </title></head><body>

<div> <a href=“http://blog.yam.com”>

天空部落的連結 </div> </a>

</body> </html>

巢狀結構正確示範<html> <head><title> 天空部落 </title></head><body>

<div> <a href=“http://blog.yam.com”>

天空部落的連結 </a></div>

</body> </html>

Page 17: Html & Css

HTML 的巢狀結構與階層性<html>

<head><title> 天空部落 </title>

</head><body>

<p> <a href=“http://blog.yam.com”>

天空部落的連結 </a></p><p> 相簿無限大 </p>

</body> </html>

Page 18: Html & Css

What is CSS?CSS (Cascading Style Sheets) 串接樣式表樣式表

將內容與樣式(顯示出來的模樣)分離串接

Page 19: Html & Css

Why CSS?更強大的網頁控制與排版能力修改容易提高網頁顯示速度並節省頻寬有利於搜尋引擎的搜索

Page 20: Html & Css

CSS 基本語法

body { color: black; background: white; }

多種宣告間以分號隔開

宣告( declaration block)

決定展現的樣式

宣告( declaration block)

決定展現的樣式

特性(property)

值(value)

選取符( selector)決定這個規則所影響的範圍選取符( selector)決定這個規則所影響的範圍

Page 21: Html & Css

常見的 CSS 使用方式

Page 22: Html & Css

Thank you!