首頁
文章清單
RSS 
|
這是一份最最最基本的 HTML 入門文件，說穿了，是 HTML 3.2 版本文件。為什麼要放這麼一份「古早」文件呢？ 我的理由是：
要再進階者，去爬爬文，翻翻書，總要留點空間給作者出書，這裡全講完了，那豈不斷人生路！
|
HTML 是純文字檔案，用記事本即可撰寫，只不過撰寫完成的內容，要透過瀏覽器來呈現，於是，我們必需告訴瀏覽器我們心裡預期想表現的內容，例如有些字大點，加粗，換個顏色，加張圖片什麼的。
為了達前述效果，我們必需和瀏覽器作好溝通動作，這時就透過 HTML 來表現，例如，我們想讓幾個字變粗體，像這樣粗粗的， 只要在字的前後加個記號讓瀏覽器知道即可，看起來像是：
| <B>像這樣粗粗的</B> |
這裡我們在字的前面加上了<B>在結尾處加上了</B>，凡是在這成對的記號之間的字都要用粗體來呈現。
大部份標籤是成對的，用一個字母或單字來作為標籤，用斜線加上標籤來作為結尾。
| <U>猜猜看這串字會變怎樣？</U> |
顯然，這裡又有一串字被標籤包圍了，顯然要對這串字作點變化，我們知道<B>代表字體變粗，所以只要知道<U>代表什麼，就能知道結果了。結果如下：
猜猜看這串字會變怎樣？
HTML 就是在定義到底有那些標籤可用，好讓寫的人有所依循，也讓瀏覽器的設計商也能依規範來製作瀏覽器，不然，如果我們出這麼一段
| <加粗>像這樣粗粗的</加粗> |
想當然爾，美國人用英文，日本人用日本，中國還用簡體吶！那豈不亂了套？所以檔然要有規範，而這些規範一陣子就會修訂一次，所以又有版本的差異，最新的 HTML 版本為 4.1
4 字頭版本的 HTML 最大的特色是加入了CSS 規範，CSS 目前成了當紅炸子雞了，不過光 CSS 仍無用武之處，CSS 是用來加強、強化 HTML 的效果，沒有 HTML 有 CSS 一樣沒有用處。
佈景主題可以讓你的 Windows 更漂亮，CSS 也可以讓你的 HTML 更美觀。
唯有當你能 HTML 這些543的東西，才能看懂 CSS 是怎麼套上去的。
HTML的文件的架構包括 檔頭 (HEAD) 和 文件本體 (BODY) 兩大部份。檔頭的敘述 是用來提供這份文件的整體資訊，如：文件的標題(TITLE)。而身體的部份想當然而是 指連接在頭部以下的部份；如：文件內的本文及文字的格式。
| <html> | |||
| <head> | |||
| <title> html第一個實作 </title> | |||
| ................................. | |||
| ................................. | |||
| <style type="text/css"> | |||
| ........................ | |||
| </style> | |||
| <script language="javascript"> | |||
| ...................... | |||
| </script> | |||
| </head> | |||
| <body> | |||
| 這裡是文件的本體，所有表格，圖形等都寫在這裡 | |||
| </body> | |||
| </html> | |||
第一列的<html>與最後一列的</html>表示一份html文件，可略過不寫，寫了有助閱讀
接著<head>...</head>定義文件本身的特色，可以不寫
描述的是這個 html 檔在 bookmark 中顯示的名稱，也就是流覽器上頭看的的網站名稱。
<body>...</body>之間的內容就是顯示的內容
誠如前面所述 HTML 的標籤大多都是成對的，以 <標籤> 執行內容 </標籤>。我們下的標籤都必需用 大於小於符號<>和雙引號"" 所以在文件中要顯示這些符號就用如下表示(含特殊字元):
| & | & | © | © |
| " | " | ® | ® |
| < | < | ™ | ™ |
| > | > | ||
| | 實際的空白 |
在瀏覽程式中便可直接觀看文件的原始碼，例如：在Netscape上則是在拉下View的選單後選取Page Source即可。(有些JavaScript的語法這樣是看不到的)
# 可以 1 到 6，共6級的字體大小供您選擇。其中，<h1>所標 註的文字字體最大，數字越增加，字體越縮小。在使用段名的時候，被這類標註所包 起來的文字段落的前後會自動空出一列，如果後面緊接有一個<p>（<p>會在文字段落 前加入一列空白），則這兩段文字中並不會出現兩列空白而只有一列空白。以段名作 標註的段落中，所有文字都會以粗體字表示。
| 含標籤文件 | 在瀏覽器中所看到的 |
|---|---|
| <h1>這是一段h1的文字</h1> | 這是一段h1的文字 |
| <h2>這是一段h2的文字</h2> | 這是一段h2的文字 |
| <h3>這是一段h3的文字</h3> | 這是一段h3的文字 |
| <h4>這是一段h4的文字</h4> | 這是一段h4的文字 |
| <h5>這是一段h5的文字</h5> | 這是一段h5的文字 |
| <h6>這是一段h6的文字</h6> | 這是一段h6的文字 |
# 為 1 到 7
| <font size="1"> | 字級大小 |
| <font size="2"> | 字級大小 |
| <font size="3"> | 字級大小 |
| <font size="4"> | 字級大小 |
| <font size="5"> | 字級大小 |
| <font size="6"> | 字級大小 |
| <font size="7"> | 字級大小 |
預設值為 3, <font size=5> 也可以寫成 <font size=+2>
標籤也可以作一些加強的描述，專有名詞叫作屬性，前述的 font 標籤的 size 就是一個屬於 font 的屬性，屬性的寫法寫在標籤內，像是：
| <H3 align="center">要處理的文字</H3> |
上例，align 就是一個屬性，用途是對齊：
在<h#> 之後可直接加入 align 屬性指定文字對齊方式( html 有許多都是如此的語法 )
| align="left" | 靠左 |
| align="right" | 靠右 |
| align="center" | 置中 |
| align="justify" | 由瀏覽器自定 |
不同標籤，有不同屬性，但別太緊張，屬性並不太多，而且大多數的屬性都被 CSS 重新定義了。不過，必要的，我們還是建議讀者一定要稍為瞄一下才好。
在<ol>...</ol>中間的項目只要在每項前加一個<li>標籤即可排列為清單(註) 例:左為標籤行/右為顯示結果
| 標籤 | 預覽結果 | |
|---|---|---|
| <ol> | ||
|
<li>第一項</li> | 1.第一項 |
|
<li>第二項</li> | 2.第二項 |
|
<li>第三項</li> | 3.第三項 |
| </ol> | ||
和 <ol> 的差異在於不使用數字，而是使用符號(註)
| 標籤 | 預覽結果 | |
|---|---|---|
| <ull> | ||
|
<li>第一項</li> | ‧第一項 |
|
<li>第二項</li> | ‧第二項 |
|
<li>第三項</li> | ‧第三項 |
| </ul> | ||
<body bgcolor=#nnnnnn> 設定版面背景色，內定為灰色(註)
<body background="圖檔檔名"> 您也可以使用圖案為背景，這好像windows的桌面
<body text=#nnnnnn> 一般文字顏色內定為黑
<body link=#nnnnnn> 如果文字被設為超鏈結文字時的顏色(就是滑鼠指到時為變手指的字)
<body alink=#nnnnnn>文字被設為超鏈結文字時，正選取時
<body vlink=#nnnnnn> 文字被設為超鏈結文字時，己被選取過
| 一個白底黑字的網頁的顏色顯示法則是寫成 <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#FF0000" VLINK="#800080" ALINK="#0000FF"> |
註解是被放置在<!-和->之間。例如：<!- easy
html manul->
| 屬性 | 功能說明 |
|---|---|
| border | 定圖案邊線粗細 <img src="graphic.gif" border=0> |
| width 和 height | 設定圖檔大小 <img src="graphic.gif" border=0 width=100 height=40> 數字的單位是 pixel 也可以用原圖的百分比表示(這部份我仍存疑)成 <img src="graphic.gif" border=0 width=100% height=80%> |
| align | 設定圖片與相鄰文字的對齊方式  align 的選項由左至右的語法為 TEXTTOP/ABSCENTER/CENTER/BOTTOM/ABSBOTTOM/LEFT/RIGHT <img src="graphic.gif" border=0 width=100% height=80% align="center"> |
| alt | 代替圖案的文字，若是圖形檔損壞或無法顯示，或是仍在download中，在圖檔的位置以文字代替 <img src="graphic.gif" border=0 width=100% height=80% align="center" alt="圖形按鈕"> |
| title | 當滑鼠指標移到圖形上時，顯示的文字 |
| hspace, vspace | 當字繞圖時，與圖片的邊界 |
<a href=.....>...</a> -- 連結目的點，如果想要某一段文字或圖形按下後會自動連結到某一畫面或某一個站如 <a href="index.htm">按此處回首頁</a> 若是配合前述的圖形，結果如 <a href="index.htm"><img src="graphic.gif"></a> 連結還可以指定開啟的視窗，若不指定則開啟在同一視窗。語法則為 <a href="連結目的地" target="開啟的視窗"> target 的值計有下列數項
| _blank | 重新開啟瀏覽器(那您就不能再 back 到前一畫面了) |
| _self | 從那一個視窗啟動，顯示在該視窗 |
| _parent | 回到上一層分割視窗 |
| _top | 展開為全視窗 |
| _new | 和 _blank 相同 |
當我們完成如上建立超連結的檔案後，試著用 瀏覽器 看看是不是被我們建立超連結的文字會變成像 這是連到拋錨起點的鍵 成藍色有底線，這表示我們建立起超連結，而建立超連結中的標籤 <a> 我把它翻譯成"拋錨"像是將船定在某一點上，這些點就是我們想連的其他網址或顯示特定檔案， 也可以說我們把錨拋到某個網址或檔案上，那像本文同一個檔案中能不能拋錨呢?當然可以，作法如下
1.先下錨-下錨的地方可以在任一處 語法是 <a name="錨的名稱">
2.超連結至下錨處-連結時語法為 <a href=#錨的名稱>注意在錨的名稱前加一個#
例: <a href=#1>第一章 基礎理論</a>
................
................
<a name="1">基礎理論</a>
分割視窗只有一個命令就是 frameset 不過倒是有幾個附加屬性可用，先來看看如何分割視窗。
<frameset>...</frameset> - frameset 不可以和 body.../body 同時存在，同時存在時那一個在前，哪一個生效。
<frameset rows=> - 決定上下共分為幾個視窗
<frameset cols=> - 決定左右共分為幾個視窗
這裡rows=和cols=填的不是分割數，而是直接填入每個分割視窗的大小，數值和數值之間用逗號隔開即可。
而填入的數字可為「點數」「百分比」「大小比」如：
<frameset rows=100,200,300> 固定大小為100點200點和300點
或
<frameset rows=20%,20%,60%> 注意總和等於100%
或
<frameset rows=1*,2*,3*> 使視窗依
1:2:3 的比例分割。三種寫法可同時存在如：
<frameset rows=20%,200,1*,1*> 此時瀏覽器會先分 200 點給第二個視窗，其餘的20% 給第一個視窗，剩下再 1:1
分配。
我們分割完成視窗後是不是該指定每個視窗內容等的事項呢？在
<frameset>...</frameset>之間就是我們對每個分割好的視窗內容作定義，不定義也可以，
那部份的視窗就空空的了。
<frame src=> - 您可以指定一份文件或一個圖案在視窗中
<frame src="文件或圖案" name=> - 為這個分割視窗取取名字。建議最好取名字，將來指定顯示時才不會出問題。
前面我們要您為分割視取名字，原因主要是怕拋錯錨，瀏覽器會自動將拋錨所指的文件內容顯示在同一視窗上。像本網，您要看這份文件時是在標題欄按[html 入門]這個錨，但是卻顯示在內容視窗(我對視窗分別取名為title,channel,content)。所以一旦用了分割視窗，我們拋錨時就要特別注意。
<a href="文件名" targe="視窗名">...</a> - 這樣子就不會亂跳了。
視窗的名稱有幾個是不能亂用的，列舉在下面：
_blank - 重新開啟瀏覽器(那您就不能再 back 到前一畫面了)
_self - 從那一個視窗啟動，顯示在該視窗
_parent - 回到上一層分割視窗
_top - 展開為全視窗
_new - 和 _blank 相同
所謂巢狀結構，我想是翻譯來的名稱，事實下並沒有那麼複雜。只是要在視窗中再分割視窗的方法而己。 像是寫程式中的for...next中又有for..next一樣。 要注意的是順序，先看例子：
| <frameset rows=1*,5*> | 先宣告上下分為1:5 | ||
|
<frameset cols=1*,1*> | 宣告第一個(上面的)視窗再分成左右1:1 | |
|
<frame src=h-1.html name=f1> | 在左邊視窗顯示 h-1 的文件，取名為 f1 | |
|
<frame src=h-2.html name=f2> | 在右邊視窗顯示 h-2 的文件，取名為 f2 | |
|
</frameset> | 結束第一個視窗宣告 | |
|
<frameset cols=1*,6*,1*> | 宣告第二個(下面的)視窗分成左右共三個 | |
|
<frame src=h-3.html name=f3> | 在第一個視窗顯示 h-3 的文件，取名為 f3 | |
|
<frame src=h-4.html name=f4> | 在第二個視窗顯示 h-4 的文件，取名為 f4 | |
|
<frame src=h-5.html name=f5> | 在第三個視窗顯示 h-5 的文件，取名為 f5 | |
|
</frameset> | 結束第二個視窗宣告 | |
| </frameset> | 結束分割視窗宣告 | ||
製作表格的標籤不多，想要畫好表格其實不難。首先我們介紹有關表格的標籤
<table>...</table> 指定要畫表格
<tr>..</tr>每行(row)的內容，也可看成是加一行表格的標籤。
<td>...</td>每個欄位的資料，這個標籤我們也可以看成是畫直線或是加入一個欄位的標籤。 這樣的話我們的表格要畫起來就容易多了，請看：
| 一 | 二 | 三 |
| 四 | 五 | 六 |
| 七 | 八 | 九 |
| <tabel> | ||||
| <tr> | <td>一</td> | <td>二</td> | <td>三</td> | </tr> |
| <tr> | <td>四</td> | <td>五</td> | <td>六</td> | </tr> |
| <tr> | <td>七</td> | <td>八</td> | <td>九</td> | </tr> |
| </table> | ||||
當然，像上面這樣寫是不可能畫出同樣的表格的，下面我們介紹表格的附加屬性：
<table border> - 設定表格邊的寬度，注意只有最外框的寬度。
<table cellspacing> - 設定線條的寬度
<table cellpadding> - 設定表格中資料和線條的距離
<table width> - 設定表格的大小。瀏覽器會自動依據表格中的資料長度來設定每格的橫寬，當您想指定其寬度時可以使用 width=200 指定點數或 width=50% 指定佔視窗的比例兩種方法
上面的附加屬性所畫出的表格仍是等分的表格(也就是如果您有三列:在一個tr之後下三個td的意思)，
而大小是每欄都是依欄位中最長的欄為準，除非總寬度超過視窗的大小時，會依視窗的大小等分。
要作出變化較多，且不規則比例的表格就要靠 td 的附加屬性
<td width=> - 指定某一欄的寬度。如 td width=200 指定本欄為 200 點。
<td align=> - 指定這欄的資料水平對齊的方式。align 可為 left:靠左 right:靠右 center:靠中
<td valign=> - 指定這欄的資料垂直對齊的方式。align 可為 top:靠上 middle:靠中 bottom:靠下
<td rowspan=> - 欄位上下延展/合併
<td colspan=> - 欄位左右延展/合併
最後兩個附加屬性，我們先看下面的表格：
| a | b | c | d |
| e | f | ||
| g | h | ||
| i | |||
|
左邊的表格共16格，每格我們加以編號。要畫這樣的表格我們要下四個tr 的標籤(共四行)及 16個 td 的標籤(共 16 個欄位)上面的表格中和左側的表格對應起來，左側的 1,5 該合並成上面表格中編的a 這時我們在屬於1的 td 標籤後面加屬性成td rowspan=2 合併 1 和 5 所以值是=2同理在屬於 4 的 td 加上 td rowspan=4 這時第一行的 tr 後仍應有四個 td 分別表示1234 而第二行的 tr 後只剩二個 td 因為 5,8 不見了 同上面的說法 9,10 合併所以在屬於 9 的 td 加上 td colspan=2 第三行的 tr 之後只有二個 td 因為 10 和 12 分別被合併掉了。 最後在屬於 13 的 td 改成 tdcolspan=3 用來合併 13,14,15 這行就只剩一個 td 了。 最後我建議各位在寫複雜表格時不要一下就填入內容，先作好分欄，再去掉不該有的td 即可。寫的時候像下面的寫法較好 |
|
談到此，您或許可以寫出一個簡單的網頁，希望這份文件對您有幫助
<ol type=#>#的選項為 Ａ :依 Ａ、Ｂ、Ｃ、Ｄ、Ｅ、Ｆ、Ｇ 排列 ａ :依 ａ、ｂ、ｃ、ｄ、ｅ、ｆ、ｇ 排列 i :依Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ、Ⅵ、Ⅶ 排列 i :依 i、ii、iii、iv、v、vi、vii 排列 １ :依 １、２、３、４、５、６、７ 排列 也可指定開始的號次如：<ol start=3> |
type="disc"實心圓點
type="circle"空心圓點
type="square"實心方塊
| 名稱 | 十六進位值 | 色樣 | 名稱 | 十六進位值 | 色樣 |
|---|---|---|---|---|---|
| aliceblue | #F0F8FF | antiquewhite | #FAEBD7 | ||
| aqua | #00FFFF | aquamarine | #7FFFD4 | ||
| azure | #F0FFFF | beige | #F5F5DC | ||
| bisque | #FFE4C4 | black | #000000 | ||
| blanchedalmond | #FFEBCD | blue | #0000FF | ||
| blueviolet | #8A2BE2 | brown | #A52A2A | ||
| burlywood | #DEB887 | cadetblue | #5F9EA0 | ||
| chartreuse | #7FFF00 | chocolate | #D2691E | ||
| coral | #FF7F50 | cornflowerblue | #6495ED | ||
| cornsilk | #FFF9DC | crimson | #DC143C | ||
| cyan | #00FFFF | darkblue | #00008B | ||
| darkcyan | #008B8B | darkgoldenrod | #B8860B | ||
| darkgray | #A9A9A9 | darkgreen | #006400 | ||
| darkkhaki | #DBB76B | darkmagenta | #8B008B | ||
| darkolivegreen | #556B2F | darkorange | #FF8C00 | ||
| darkorchid | #9932CC | darkred | #8B0000 | ||
| darksalmon | #E9967A | darkseagreen | #8FBC8F | ||
| 名稱 | 十六進位值 | 色樣 | 名稱 | 十六進位值 | 色樣 |
| darkslateblue | #483D8B | darkslategray | #2F4F4F | ||
| darkturquoise | #00CED1 | darkviolet | #9400D3 | ||
| deeppink | #FF1493 | deepskyblue | #00BFFF | ||
| dimgray | #696969 | dodgerblue | #1E90FF | ||
| firebrick | #B22222 | floralwhite | #FFFAF0 | ||
| forestgreen | #228B22 | fuchsia | #FF00FF | ||
| gainsboro | #DCDCDC | ghostwhite | #F8F8FF | ||
| gold | #FFD700 | goldenrod | #DAA520 | ||
| gray | #808080 | green | #008000 | ||
| greenyellow | #ADFF2F | honeydew | #F0FFF0 | ||
| hotpink | #FF69B4 | indianred | #CD5C5C | ||
| indigo | #4B0082 | ivory | #FFFFF0 | ||
| khaki | #F0E68C | lavender | #E6E6FA | ||
| lavenderblush | #FFF0F5 | lawngreen | #7CFC00 | ||
| lemonchiffon | #FFFACD | lightblue | #ADD8E6 | ||
| lightcoral | #F08080 | lightcyan | #E0FFFF | ||
| lightgoldenrod yellow | #FAFAD2 | lightgreen | #90EE90 | ||
| 名稱 | 十六進位值 | 色樣 | 名稱 | 十六進位值 | 色樣 |
| lightgrey | #D3D3D3 | lightpink | #FFB6C1 | ||
| lightsalmon | #FFA07A | lightseagreen | #20B2AA | ||
| lightskyblue | #87CDFA | lightslategray | #778899 | ||
| lightsteelblue | #B0C4DE | lightyellow | #FFFFE0 | ||
| lime | #00FF00 | limegreen | #32CD32 | ||
| linen | #FAF0E6 | magenta | #FF00FF | ||
| maroon | #800000 | mediumaquamarine | #66CDAA | ||
| mediumblue | #0000CD | mediumorchid | #BA55D3 | ||
| mediumpurple | #9370DB | mediumseagreen | #3CB371 | ||
| mediumslateblue | #7B68EE | mediumspringgreen | #00FA9A | ||
| mediumturquoise | #48D1CC | mediumvioletred | #C71585 | ||
| midnightblue | #191970 | mintcream | #F5FFFA | ||
| mistyrose | #FFE4E1 | moccasin | #FFE4B5 | ||
| navajowhite | #FFDEAD | navy | #000080 | ||
| oldlace | #FDF5E6 | olive | #808000 | ||
| olivedrab | #6B8E23 | orange | #FFA500 | ||
| orangered | #FF4500 | orchid | #DA70D6 | ||
| 名稱 | 十六進位值 | 色樣 | 名稱 | 十六進位值 | 色樣 |
| palegoldenrod | #EEE8AA | palegreen | #98FB98 | ||
| paleturquoise | #AFEEEE | palevioletred | #DB7093 | ||
| papayawhip | #FFEFD5 | peachpuff | #FFDAB9 | ||
| peru | #CD853F | pink | #FFC0CB | ||
| plum | #DDA0DD | powderblue | #B0E0E6 | ||
| purple | #800080 | red | #FF0000 | ||
| rosybrown | #BC8F8F | royalblue | #4169E1 | ||
| saddlebrown | #8B4513 | salmon | #FA8072 | ||
| sandybrown | #F4A460 | seagreen | #2E8B57 | ||
| seashell | #FFF5EE | sienna | #A0522D | ||
| silver | #C0C0C0 | skublue | #87CEEB | ||
| slateblue | #6A5ACD | slategray | #708090 | ||
| snow | #FFFAFA | springgreen | #00FF7F | ||
| steelblue | #4682B4 | tan | #D2B48C | ||
| teal | #008080 | thistle | #D8BFD8 | ||
| tomato | #FF6347 | turquoise | #40E0D0 | ||
| violet | #EE82EE | wheat | #F5DEB3 | ||
| white | #FFFFFF | whitesmoke | #F5F5F5 | ||
| yellow | #FFFF00 | yellowgreen | #9ACD32 |
同意轉載，不過麻煩看一下轉載需知
粉絲 2011/7/29 上午 01:26:00
好難~
卜維丰 2008/12/23 下午 11:18:00
MO, 你的問題看起來不像用工具能解決的~~^^
MO 2008/12/17 上午 03:52:00
請問老師要在網頁上加個小月曆
可以選任一年份和任一月份
裡面每個日期也都可以自己加超連結到另個網頁
請問要用什麼工具才做得到呢?
謝~
阿濡 2007/7/8 上午 09:43:00
還不錯但是沒有找到我要的~如何註冊網頁的網址
