作者benck (小倫)
看板b97902HW
標題[心得] HTML語法初級教學 (包含單班計概hw5教學)
時間Sat Nov 29 01:05:55 2008
因為小的寫網頁有一段的時間了，所以就代替強者來完成這項教學了。
這篇主要會涵蓋到單班計概Assignment #5的內容，還有基礎HTML教學和部份W3C規則。
-------------------------------------------------------------------------------
一個符合最新XHTML 1.0協定的網頁至少會有以下的內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>This is title.</title>
</head>
<body>
</body>
</html>
至於為什麼是這樣，就像#include <stdio.h> int main(){return 0;}一樣，背起來吧！
而由於這次作業還沒需要這麼嚴格的限制，所以就先打以下這樣就可以了。
<html>
<head>
<title>This is title.</title>
</head>
<body>
</body>
</html>
HTML語法是屬於tagged語言，就是
所有的東西都要用前後標籤標起來，後標籤要加上"/"，
而如果是不需要後標籤的br或img的話，則在標籤後加上" /"即可，範例如下。
<p>this is test.</p>
<br />
<p><img src="pic.jpg" /></p>
而且有點像stack(堆疊)的概念，
先進後出，後進先出，標籤一定要成對，範例如下。
<font size="20"><p>this is a sentence.</p></font> //這是對的
<p><font size="20">this is a sentence.</p></font> //這是錯的
而在網頁中如果要"顯示"以下字元(<,>,&)需分別使用< > &，範例如下。
<p> I & you</p> //錯
<p> I & you</p> //正確
<a href="
http://www.website.com/test.php?a=1&b=2"> //錯
<a href="
http://www.website.com/test.php?a=1&b=2"> //正確
-------------------------------------------------------------------------------
以下先解釋一下基本語法使用(p,br,a,img,table)。
<p>主要是作為換行用途，範例如下。
<p>這是第一行</p>
<p>這是第二行</p>
而<br />則是另外一種換行。
這是第一行<br />
這是第二行
<a>則是連結使用，範例如下。
<a href="
http://tw.yahoo.com/" target="_blank">Yahoo!奇摩首頁</a>
target中主要是在寫有框架的網頁中使用，
指定要用哪個框架開啟連結網頁。
而如果要開新網頁的話，則是使用_blank，若未填target表示使用原來的同一頁面。
<img>則是圖片使用，範例如下。
<img src="test.jpg" alt="測試" />
src中填入圖片檔名(含副檔名)，alt中則填入替代文字，主要是在圖片無法顯示時替代。
<table>則是較複雜的語法之一，以下範例是一個2row*3column的表格。
<table>
<tr>
<td>
A</td>
<td>
B</td>
<td>
C</td>
</tr>
<tr>
<td>
D</td>
<td>
E</td>
<td>
F</td>
</tr>
</table>
最外層先使用table框起來，tr則是開啟一row，td則是一row要開幾個column。
如果你有某格想要用類似word中合併儲存格的功能，則就要使用到colspan或rowspan。
而因為這是作業之一，就不告訴大家了，大家可以自己測試看看，不難。
關於作業有某部份關於style，來解釋一下。
style可以任意加在可使用style的標籤中，如a,table,tr,td,p…等。
若需使用1個以上的style，可用分號分開，範例如下。
<p style="color:#FF0000">這會變紅色的字</p>
<p style="color:#FF0000;font-size:large">這會變紅色而且變大</p>
style語法可以參考這個網頁：
http://css.1keydata.com/tw/
常常看到某些網頁要特別手動調整編碼才可正常瀏覽，那是因為原先網頁撰寫者設定錯誤
，不然就是未設定，網頁編碼使用如下(放在head標籤之間)。
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
如果要用utf-8的話
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
到這邊，這次作業應該就結束了。
-------------------------------------------------------------------------------
來提一下容易犯的一些W3C規範錯誤。
而標籤中的所有設定值，都要有值，而且要用雙引號quote起來。
如果不需設定值，則使用 屬性="屬性" 的方式設定。
<frame noresize> //錯的
<frame noresize="noresize"> //正確
<font size=20> //錯
<font size="20"> //正確
在HTML語言中，註解文字是使用以下規則，記住，註解文字中不可包含"-"字元。
<!--這是註解文字-->
<!--這是---錯誤的註解文字-->
而最新的XHTML協定中，標籤需要是小寫的。
<TITLE>This is title.</TITLE> //這是錯的
<title>This is title.</title> //這才是標準寫法
所有圖片一定要含有alt屬性。
<img src="yahoo.jpg"> //錯誤
<img src="test.jpg" alt="測試" /> //正確
大致是如此，而W3C也提供了個線上檢測是否符合W3C規定的網頁，如下：
http://validator.w3.org/
可測測看你寫的網頁究竟正確與否。
基礎HTML教學就大致是這樣，有問題請發問，有錯誤也麻煩更正，謝謝。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 123.204.92.151
1F：推 LPH66:路人補充: <p>是分段(paragraph) <br>只是單純分行 11/29 01:21
2F：→ LPH66:所以<p>的行間距會比<br>的大 11/29 01:21
3F：推 crystal0825: 謝謝強發倫 強發倫好棒!! 11/29 01:45
4F：推 jimmyken793:還有請盡量用div和css排版 table排版是壞習慣 11/29 08:34
5F：→ jimmyken793:到最後改網頁常常痛不欲生阿.... 11/29 08:34
6F：→ jimmyken793:另外class和ID請盡量用有意義的名稱 跟變數名一樣 11/29 08:35
7F：→ benck:樓上說的很有道理 可是畢竟這是初級教學= =" 11/29 08:45
8F：推 jimmyken793:我來寫個CSS教學吧 科科 11/29 08:58
9F：推 jimmyken793:然後其實後來的table規格裡面有caption和tbody 11/29 09:01
10F：→ jimmyken793:很有趣也很好用的功能 11/29 09:01
11F：→ jimmyken793:阿 還有thead 11/29 09:01
12F：推 matt7983:(看來我把CSS書拿出來多看一看好了XDD) 11/29 12:16
13F：推 tempTTP1:作業不是要有背景色嗎?那怎麼做? 11/29 15:31
14F：→ tempTTP1:圖片放上去變成框中一個X的情形怎麼辦? 11/29 15:32
15F：→ benck:如文中所說的 用style達成 背景的屬性是background-color 11/29 15:37
16F：→ benck:在上面提供的網址可以查到 11/29 15:37
17F：→ benck:而你應該是想要整頁變色吧？ 所以就加在body中 11/29 15:37
18F：→ benck:如以下 <body style="background-color:#FF0000"> 11/29 15:38
19F：→ benck:而圖片無法顯示的問題是因為你在上傳網頁時沒有把該圖一同上 11/29 15:38
20F：→ benck:傳，才會讓網頁找不到圖片，網頁中的圖片連結大多使用相對路 11/29 15:38
21F：→ benck:徑，就是和網頁目錄的相對關係 如果是src="test.jpg" 11/29 15:38
22F：→ benck:在上傳網頁時 就要把該圖一同上傳至同一網頁目錄 11/29 15:39
23F：推 tempTTP1:感謝!!不過...圖片怎麼上傳啊? 11/29 15:45
24F：推 fishead1116:推樓上問題 11/29 16:00
25F：→ chenaren:用ftp程式 位址跟用putty連217一樣 設定記得選sftp 11/29 16:12
26F：推 jackwhitekim:Q3是照投影片的圖回答嗎? 還是......?? 11/29 16:34
27F：→ benck:補充樓樓上 port打22也可以 11/29 18:42
28F：→ benck:樓樓上的問題，投影片是想要在最後一頁最請大家檢視原始碼看 11/29 18:42
29F：→ benck:如果沒有記錄下來 可能就要再做一次了 11/29 18:43
30F：推 jimmyken793:其實並不推廌在標籤裡面直接打style="XXX"...改起來很 11/29 20:52
31F：→ jimmyken793:麻煩的= = 11/29 20:52
32F：推 LoganChien:要用 target 屬性好像要用特別的 DTD。而且新標準好像 11/29 20:53
33F：→ LoganChien:太建議用 target="_blank" 11/29 20:53
34F：推 jimmyken793:target在新標準裡面廢掉囉 11/29 20:54
35F：推 LoganChien:囧了，少打一個字...，樓上上，是： 11/29 20:56
36F：→ LoganChien:不太建議用 target="blank" 11/29 20:57
37F：→ benck:果然很多網頁強者呢，以上教學大部份是依照投影片內容和作業 11/29 20:59
38F：→ benck:要求打出來的，還請強者們一一更正喔 11/29 20:59
39F：推 applerman:單班學好多喔!!好羨慕@@! 11/29 21:35
40F：推 ming1053:推不要用table排版，太噁心了。 11/29 23:46
41F：推 lmr3796:單班要css啊...真發 11/30 10:35
42F：→ benck:樓上爆走了 11/30 12:19
43F：推 jimmyken793:小倫好發 11/30 12:49