第2週-HTML架構與Table HTML語法請參考
http://www.pcnet.idv.tw/pcnet/html/html.htm
HTML架構與TABLE <HTML> <!-- HTML開始 -->
<HEAD> <!-- HEAD(頭部)開始 -->
<TITLE>我的第一個HTML程式</TITLE> <!-- 標題 -->
</HEAD> <!-- HEAD(頭部)結束 -->
<BODY> <!-- BODY(身體)開始 -->
<P>Hello world!
</BODY> <!-- BODY(身體)結束 -->
</HTML> <!-- HTML結束 --> // 改成PHP
<?php
echo "<HTML>"; // HTML開始
echo "<HEAD>" // HEAD(頭部)開始
echo "<TITLE>我的第一個HTML程式</TITLE>";
echo "</HEAD>"; // HEAD(頭部)結束
echo "<BODY>"; // BODY(身體)開始
echo "<P>Hello world!";
echo "</BODY>" // BODY(身體)結束
echo "</HTML>"; // HTML結束
?>
由前面兩個範例可以知道, PHP是利用echo輸出HTML, 再交給瀏覽器處理 HTML TABLE 語法
<table ...> .... </table> SUMMARY=Text (purpose/structure of table)
- WIDTH=Length (table width)
- BORDER=Pixels (border width)
- FRAME=[ void | above | below | hsides | lhs | rhs | vsides | box | border ] (outer border)
- RULES=[ none | groups | rows | cols | all ] (inner borders)
- CELLSPACING=Length (spacing between cells)
- CELLPADDING=Length (spacing within cells)
- ALIGN=[ left | center | right ] (table alignment)
- BGCOLOR=Color (table background color)
<!-- HTML版 範例-->
<html>
<body>
<center>
<table border=1 cellpadding=1 cellspacing=1>
<!-- border=邊界 border=0 無邊界 -->
<!-- cellpadding 儲存格邊界 -->
<!-- cellspacing 儲存格間距 -->
<caption>公佈欄</caption>
<tr>
<td>第一列第一行</td>
<td>第一列第二行</td>
</tr>
<tr>
<td>第二列第一行</td>
<td>第二列第二行</td>
</tr>
</center>
</table>
</body>
</html>
// PHP版
<?php
echo "<html>";
echo "<body><center>";
echo "<table border=1 cellpadding=1 cellspacing=1>
<caption>公佈欄</caption>";
echo "<tr> <td>第一列第一行</td>";
echo "<td>第一列第二行</td>";
echo "</tr>";
echo "<tr><td>第二列第一行</td>";
echo "<td>第二列第二行</td>";
echo "</tr>";
echo "</table>";
echo "</center></body>";
echo "</html>";
?>
超連結語法
<a href="http://www.cust.edu.tw/">中華科技大學</a>
或
echo "<a href='http://www.cust.edu.tw/'>中華科技大學</a>";
作業：參考範例與TABLE與法，以HTML與PHP設計您個人本學期課表，將程式碼post到ePortfolio
並送到ccs.cust.edu.tw/~s學號/www目錄下，並設兩個超連結，一個指向HTML檔、一個指向PHP檔
範例
<html>
<body>
<center> <table border=1 bordercolor='red' cellpadding=1 cellspacing=1 width=100%> <tr bgcolor='#ccccff'> <td>課表</td><td align=center>星期一</td><td align=center>星期二</td> <td align=center>星期三</td><td align=center>星期四</td> <td align=center>星期五</td><td align=center>星期六</td><td align=center>星期日</td> </tr> <tr bgcolor='#ccccff'> <td>第一節</td><td align=center>物件導向程式設計</td><td></td> <td></td><td></td><td></td><td></td><td></td> </tr> </table> </center> </body> </html>
每一個儲存格的第一列為課程名稱 是一個超連結 指向課程簡介
第二列為 課程代碼 是一個超連結 指向課程大綱
第三列為授課教師姓名 是一個超連結 指向該教師的 ePortfolio
| 
