雲端教學課程
2013 / 05 /16
XHTML 練習
這簡報在
文字變化與排板技巧
練習使用文字標記
<font size="2" color="#FF0000" face="標楷體">
FOR EXAMPLE
鬼
才
好
厲
害
^_<
文字變化與排板技巧
練習
<b>、<u>、<i> 圍堵標記
-
<b> blod 粗體
- <u> underline 底線
- <i> Italic 斜體
鬼才 超強的!!
文字變化與排板技巧
段落練習
<p>這是一個段落</p>
到網路上找一篇新聞,然後把他內文段落排版一下。
FOR EXAMPLE :
文字變化與排板技巧
段落標題練習
<h1>hollo world!</h1>
.
.
.
.
.
.
<h6>hello world!</h6>
文字變化與排板技巧
段落標題練習:
來排版得跟WIKI一樣吧!
文字變化與排板技巧
練習 : 符號清單
我們來把寫過的程式或語言全部分類列出來。
- 網頁
- 伺服端
- PHP
- JSP
- 客戶端
- CSS ( Bootstrap )
- JavaScript ( JQuery )
- XHTML
- 伺服端
- 晶片
- C
- VHDL
- windows應用程式
文字變化與排板技巧
練習 : 加入註解
<!-- 這邊是第二層符號清單結束 -->
當然也可以.....
<!-- 無敵數位黨證 -->
Hacks In Taiwan 台灣駭客年會 ( Hitcon )
網頁圖片
練習 : 到 IconArchive 找圖片,
再指定圖片路徑。
- 絕對路徑
-
相對路徑
- 同一層
- 上一層
- 下一層
網頁圖片
HTML常用單位
- 百分比 %
- 像素 px ( 預設 )
FOR EXAMPLE :
width=50%
width=250px
超連結
練習 : 基本語法
-
文字超連結
<a href="index.htm" target="_blank">鬼才好厲害</a>
-
圖片超連結
<a href="index.htm"><img src="logo.jpg" alt="這是一張圖片" /></a>
製作表格
表格分成 : 標題、表頭、主體、表尾
<table>
<caption>表格標題</caption>
<thead><!--表頭--></thead>
<tbody><!--表格主體--></tbody>
<tbody><!--表格主體--></tbody>
<tfoot><!--表尾-->
</tfoot>
</table>
製作表格
- tr = 橫列
- td = 直欄
-
th = thead裡的直欄
FOR EXAMPLE : 一列兩欄
<tr>
<td>第一列,第一欄</td>
<td>第一列,第二欄</td>
</tr>
製作表格
練習 :

製作表格
練習 : 做出這表格

製作表格
合併儲存格
-
合併左右欄 colspan="2"
-
合併上下欄
rolspan="3"更正 : rowspan="3"
製作表格
練習 : 合併儲存格

完
練習完基礎的XHTML了,
我們來開始用PHP產生XHTML吧 ^_<
HTML練習
By jackai
HTML練習
- 1,801