雲端教學課程


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