HTML基礎教學
HTML V.S. XHTML
XHTML是XML的一種應用。
基於這一事實，
那些在以SGML為基礎的HTML 4中，
不完全合法的用法，應被改寫。
HTML V.S. XHTML - #1
XHTML : 所有的元素，都要有結束符號。
- 換行<br> --> <br />
- 水平線<hr> --> <hr />
- 圖片<img src=""> --> <img src="" />
所有屬性都要有引號包住。
- <img src=123.jpg /> --> <img src="123.jpg" />
所有元素都必需要小寫。
那我們現在開始吧
XHTML教學
HTML 標記
圍堵標記
<起始標記> ... </終止標記>
範例
<title>這內容是標題</title>
單一標記
<hr />
<br />
HTML組成
標記的屬性值
<標記 屬性1="設定值1" 屬性2="設定值2" ……/>
FOR EXAMPLE
<img src="1.png" width="500" height="400" />
HTML常用單位
- 百分比 %
- 像素 px ( 預設 )
FOR EXAMPLE :
width=50%
width=250px
HTML的顏色設定
-
以顏色名稱來表示(不建議)
<body bgcolor="red"> -
以色碼來表示[HEX碼表示]
<body bgcolor="#FF0000">
HTML顏色設定
練習 : 修改網頁背景色彩
建立一個檔案名稱叫bgcolor_test.html的檔案，
用屬性方式把網頁背景顏色改成你喜歡的顏色。
提示 : body 的 bgcolor屬性。
相對路徑與絕對路徑
相對路徑
- 網頁跟檔案在同一個資料夾
<img src="a.jpg" /> - 檔案位於上一層資料夾
<img src="../a.jpg" /> - 檔案位於下一層資料夾
<img src="folder/a.jpg" />
絕對路徑
<img src="http://google.com/logo.jpg" />
相對路徑絕對路徑 - #2
絕對路徑可以節省網站流量，
但是要連結你信任的單位...
新聞 :
文字變化與排版技巧
段落效果—使用排版標記
<p align="left">這是一個段落</p>
align屬性 - 預設是靠左
- right - 靠右
- left - 靠左
- cancer - 置中
文字變化與排版技巧
網頁寫得好累，想換一行怎麼辦？
<br />
文字變化與排版技巧
水平線
<hr />
文字變化與排版技巧
段落標題(一樣有align屬性
right (靠右)、left (靠左)、center (置中)，預設值：left)
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
文字變化與排版技巧
使用文字標記
<font size="2" color="#FF0000" face="標楷體">
size - 文字大小
color - 文字顏色
face - 文字字型
文字變化與排版技巧
<b>、<u>、<i> 圍堵標記
-
<b> blod 粗體
- <u> underline 底線
- <i> Italic 斜體
文字變化與排版技巧
符號清單 - <ul><li>標記語法：
<ul type="square">...</ul>
<ul>標記的屬性
type 預設值：type="disc"
-
disc - 圓點
-
circle - 圓圈
- square - 正方型
文字變化與排版技巧
項目符號與編號—使用清單標記
<li type="square" value="3">
value 設定清單的起始值 - 預設值是 : 1
type 預設值：type="disc"
-
disc - 圓點
-
circle - 圓圈
- square - 正方型
文字變化與排版技巧
編號清單
<ol>標記語法：
<ol type="i" start="4"></ol>
- type="1" --> 阿拉伯數字 1,2,3
- type="A" --> 大寫英文字母 A,B,C
- type="a" --> 小寫英文字母 a,b,c
- type="I" --> 大寫羅馬數字 I,II,III
- type="i" --> 小寫羅馬數字i,ii,iii
文字變化與排版技巧
巢狀清單
在清單裡再加入另一層清單，
清單項目也會隨著一層層往內縮。
-
A
-
1
- @
- #
- $
- 2
-
1
- B
文字變化與排版技巧
加入註解
<!-- 老闆是白痴!!!! -->
特殊符號
-
© --> ©
- < --> ⁢
- > --> >
- " --> "
- & --> &
- 半形空白 -->
網頁圖片
圖片的尺寸與解析度
- 格式 : JPEG、GIF、PNG
- 解析度 : 電腦螢幕為 72 dpi
- 大小 : 越小越好(需考慮圖檔的清晰度 )
網頁圖片
圖片來源
- 利用繪圖軟體自行製作圖片
- 從掃描器或數位相機
- 網路上免費的網頁素材
※用網頁素材需要注意版權
網頁加入圖片
- src="images/butterfly.jpg" 指定圖片的路徑及檔名
- alt="這是蝴蝶圖片" 設定圖片的替代文字
- width="300" 圖片寬度
- height="350" 圖片高度
- hspace="5" 圖片左右的留白距離
- vspace="5" 圖片上下的留白距離
- border="2" 外框線的厚度
- align="top" 設定圖片的位置。
src跟alt是必要的，
樣式設定會在CSS教更好的解法。
製作表格
<table>
<caption>表格標題</caption>
<thead><!--表頭--></thead>
<tbody><!--表格主體-->
</tbody>
<tbody>
<!--表格主體-->
</tbody>
<tfoot><!--表尾-->
</tfoot>
</table>
製作表格
當報表很長時，
thead 與 tfoot 可以顯示在每一頁上。
一份報表只能有一個 thead 及一個 tfoot，
但可以有多個 tbody。
製作表格
表頭 thead
<thead>
<tr>
<th>月份</th>
<th>價錢</th>
</tr>
</thead>
製作表格
tbody
<tbody>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</tbody>
製作表格
tfoot
<tfoot>
<tr>
<td>總計</td>
<td>$180</td>
</tr>
</tfoot>
製作表格
文字對齊位置
- align 水平位置 left(靠左)、right(靠右)、center(置中)
- valign 垂直位置 top(上)、middle(中)、bottom(下)
FOR EXAMPLE :
<td align="left" valign="top">...</td>
製作表格
表格美化
-
bgcolor="#FF0000"
- background="images/bg1.jpg"
- border="1"
- bordercolor="#FF00FF"
其實還有很多 :
表格製作
但是
可以用CSS來做樣式設定會更好。
CSS我們後面會教到。
製作表格
練習
製作表格
合併儲存格
-
合併左右欄 colspan="2"
-
合併上下欄
rolspan="3"更正 : rowspan="3"
製作表格
練習 : 合併儲存格
超連結
你們剛在簡報內所看到的藍色網址，都是超連結。
FOR EXAMPLE :
超連結
基本語法
-
文字超連結
<a href="index.htm">這是一個超連結</a>
-
圖片超連結
<a href="index.htm"><img src="logo.jpg" alt="這是一張圖片" /></a>
超連結
target屬性
- _blank -->在新視窗。
- _self --> 預設。在相同的框架。
- _parent --> 在父框架中。
- _top --> 在整個視窗。
- framename --> 在指定的框架中。
超連結
連結方式
-
站外連結
<a href="http://www.google.com"
target="_blank">google</a> -
站內連結
<a href="連結目標相對路徑">…</a>
<a href="index.htm">回首頁</a>
超連結
錨點(同一個頁面)
- 設定錨點位置
<a name="錨點名稱">...</a>
- 加入錨點超連結
<a href="#錨點名稱">…</a>
超連結
連結至EMAIL
mailto
<a href="mailto:who@email.com">歡迎來信</a>
超連結
練習:
建立一個超連結，連結到學校首頁
完
回家後自己試一下綜合實作練習題。