

| 本文目的在教國中生用wordpad編寫一簡單homepage不相信試試看您自己的能力.您只要開啟 wordpad編入本文符號.存檔時用純文字.而副檔名加 .htm 或 .html 再用 netscape 開啟出來看.慢慢自學.恭喜您..您成功的學會第一步了.
叫出範例 另存新檔.再用wordpad叫出來修成您的.
|
三、指令集
四、圖文並茂的烘焙機
五、建立超連結
七、製作表格
尾、註記
html (hypertext markup language 超文字標記語言) 是一種直譯式語言,就像早期透過倚天列印指令一般,在瑩幕上看不到結果,必需經由印表機來展示結果, html 的印表機就是瀏覽器 (browser) 如 netscape , microsoft explorer 等, 顯示一些類似排版的效果,如:字體、大小、文字中插入圖像等等。
html的文件的架構包括 檔頭 (head) 和 文件本體 (body) 兩大部份。檔頭的敘述 是用來提供這份文件的整體資訊,如:文件的標題(title)。而身體的部份想當然而是 指連接在頭部以下的部份;簡單的說,只要是有提供文件某部份的資訊,就全部都算 是身體,如:文件內的本文及文字的格式。

<html>...</html> 定義 html 文件
第一列的<html>與最後一列的</html>表示一份html文件,可略過不寫,寫了有助閱讀
<head>...</head> 定義檔頭
接著<head>...</head>定義文件本身的特,可以不寫
<title>...</title>
中描述的是這個 html 檔在 bookmark 中顯示的名稱,也可以不寫
<注意>:把標題的長度限制在64個字元以內。
<body>...</body>
<body>...</body>之間的內容就是顯示烘焙機的內容
以下就是一份最簡單的 html 文件
|
<html> <head> <title> html第一個實作 </title> ................................. ................................. </head> <body> 這裡是文件的本體,所有表格,圖形等 都寫在這裡 </body> </html> |
html 的指令都是成對的,以 <指令> 開始 </指令> 結束。我們下的指令都必需用 大於小於符號<>和雙引號"" 所以在文件中要顯示這些符號就用如下表示:
|
& == & " == " < == < > == > == 實際的空白 |
在瀏覽程式中便可直接觀看文件的原始碼,例如:在netscape上則是在拉下view的選單後選取source即可。
# 可以 1 到 6,共6級的字體大小供您選擇。其中,<h1>所標 註的文字字體最大,數字越增加,字體越縮小。在使用段名的時候,被這類標註所包 起來的文字段落的前後會自動空出一列,如果後面緊接有一個<p>(<p>會在文字段落 前加入一列空白),則這兩段文字中並不會出現兩列空白而只有一列空白。以段名作 標註的段落中,所有文字都會以粗體字表示。(註)
align 文字對齊
在<h#> 之後可直接加入 align 指令指定文字對齊方式( html 有許多都是如此的語法 )align的選項有 left 向左 right 向右 center 靠中 justify 由瀏覽器自定,如<h2 align="center">
<font size=#>...</font> 字級大小
# 為 1 到 7 預設值為 3 ,<font size=5> 也可以寫成 <font size=+2>
<i>...</i> 文字斜體
<u>...</u> 加底線
<nobr>...</nobr> 不自動換行
上述<br>是不需要成對出現,因為一般瀏覽器會根據窗大小自動轉折文字,若是在一段文字中某處您認為一定要換行在這個地方加 <br> 反之某個長度是最理想的不會破壞完整性,就可以使用<nobr>...</nobr>這個指令,那麼想看的時候就必需使用捲軸
<blink>...</blink> 文字閃爍
|
含指令文件 |
在瀏覽器中所看到的 |
|
<h1>這是一段h1的文字</h1> <h2>這是一段h2的文字</h2> <h3>這是一段h3的文字</h3> <h4>這是一段h4的文字</h4> <h5>這是一段h5的文字</h5> <h6>這是一段h6的文字</h6> 在這裡加個<br>文字就換行了也 可以<b>文字加粗</b>,或是<i>傾斜</i>, 也可以<u>加底線</u>,<blink>閃爍</blink> |
這是h1的文字這是一段h2的文字這是一段h3的文字這是一段h4的文字這是一段h5的文字這是一段h6的文字在這裡加個 文字就換行了也可以文字加粗,或是傾斜,也可以 加底線, |
在文件中加入清單可更清晰表達重點,不過小心別搞的太複雜
<ol>...</ol> 建立循序清單
在<ol>...</ol>中間的項目只要在每項前加一個<li>指令即可排列為清單(註)
例:左為指令行/右為顯示結果
|
<ol> <li>第一項 <li>第二項 <li>第三項 </ol> |
1.第一項 2.第二項 3.第三項 |
<ul>...</ul> 建立非循序清單
和 <ol> 的差異在於不使用數字,而是使用符號(註)

我們介紹過主要版面是在 <body>...</body> 之間,另外版面也有一些選項可供使用
<body bgcolor=#nnnnnn> 設定版面背景色,內定為灰色(註)
<body background="圖檔檔名"> 您也可以使用圖案為背景,這好像windows的桌面
<body text=#nnnnnn> 一般文字顏色內定為黑
<body link#nnnnnn> 如果文字被設為超鏈結文字時的顏色(就是滑鼠指到時為變手指的字)
<body alink=#nnnnnn>文字被設為超鏈結文字時,正選取時
<body vlink#nnnnnn> 文字被設為超鏈結文字時,己被選取過
<hr> 畫一條水平線,水平線也有數個子功能,此處先不提
註解其實就是附註,這是會被瀏覽程式忽略過去的部份。不會接影響顯示效果,但能讓它容易被了解,而且修改html文件也較容易。
註解是被放置在<!-和->之間。例如:<!- carousel easy html manul->

如果您的烘焙機上只有字,沒有圖,那肯定沒有人喜歡第二次光臨,你可以利用標註和元件來把影像插進一份html的文份中。 就好比前面我們不提水平線的調整選項,因為利用圖形,可以作出多樣化的線條.但是.,不要以為這樣子乾脆全部用圖好了,建議您,圖檔不要太大,50k很了不起了,最好一整頁加起來的圖不要超過100k,(數字是我的建議,見人見志)影像格式為 jpg 或 gif檔.
<img sr="圖檔名稱"> 讀取圖檔
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 的選項有 top/center/left/bottom/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="圖形按鈕">

請先找到符合 gif 89a 的軟體如 gif construction set ( gifcon.exe) 以後再談這個問題
<a href=.....>...<a/> -- 連結目的點,如果想要某一段文字或圖形按下後會自動連結到某一畫面或某一個站如 <a href="index.htm">按此處回首頁</a> 若是配合前述的圖形,結果如下
<a href="index.htm"><img src="graphic.gif"></a>
例如下面的按鈕圖檔名稱是 net_address_button1.gif 我們想按下後會連到卡羅素提供的網站址,而我們網址的 html 檔名是 net_address.htm 語法如下:
<a href="net_address.htm"><img src="penciler.gif" align="center"></a>
當我們完成如上建立超連結的檔案後,試著用 瀏覽器 看看是不是被我們建立超連結的文字會變成像 這是連到拋錨起點的鍵 成藍色有底線,這表示我們建立起超連結,而建立超連結中的指令 <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*> <frameset cols=1*,1*> </frame src=h-1.htm name=f1> </frame src=h-2.htm name=f2> </frameset> <frameset cols=1*6*,1*> </frame src=h-3.htm name=f3> </frame src=h-4.htm name=f4> </frame src=h-5.htm name=f5> </frameset> </frameset> |
先宣告上下分為1:5 宣告第一個(上面的)視窗再分成左右1:1 在左邊視窗顯示 h-1 的文件,取名為 f1 在右邊視窗顯示 h-2 的文件,取名為 f2 結束第一個視窗宣告 宣告第二個(下面的)視窗分成左右共三個 在第一個視窗顯示 h-3 的文件,取名為 f3 在第二個視窗顯示 h-4 的文件,取名為 f4 在第三個視窗顯示 h-5 的文件,取名為 f5 結束第二個視窗宣告 結束分割視窗宣告 |
然後所謂巢狀結構就是如此
製作表格的指令不多,想要畫好表格其實不難。首先我們介紹有關表格的指令
<table>...</table> 指定要畫表格
<tr>..</tr>每行(row)的內容,也可看成是加一行表格的指令。
<td>...</td>每個欄位的資料,這個指令我們也可以看成是畫直線或是加入一個欄位的指令。
這樣的話我們的表格要畫起來就容易多了,請看:
|
一 |
二 |
三 |
|
四 |
五 |
六 |
|
七 |
八 |
九 |
像這的一個表格,我們的寫法非常容易,程式碼如下:
|
<tabel> <tr><td>一<td>二<td>三</td></tr> <tr><td>四<td>五<td>六</td></tr> <tr><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 |
|||
我們把握前面提到的原則,tr就是加一行(row水平) td就是加一列(col垂直)。這樣再配合 rowspan 和 colspan 就很容易畫出來,步驟如下:
先畫一個4x4的表格(為方便起見,下面的表格是用pe2畫的)(註)
┌──┬──┬──┬──┐左邊的表格共16格,每格我們加以編號。要畫這
│ 1│ 2│ 3│ 4│樣的表格我們要下四個tr 的指令(共四行)及
16個
├──┼──┼──┼──┤ td 的指令(共 16 個欄位)上面的表格中和左側的
│ 5│ 6│ 7│ 8│表格對應起來,左側的 1,5 該合並成上面表格中
├──┼──┼──┼──┤編的a 這時我們在屬於1的 td 指令後面加指令成
│ 9│10│11│12│td rowspan=2 合併 1 和 5
所以值是=2
├──┼──┼──┼──┤同理在屬於 4 的 td 加上 td rowspan=4
│13│14│15│16│這時第一行的 tr 後仍應有四個 td
分別表示1234
└──┴──┴──┴──┘而第二行的 tr 後只剩二個 td
因為 5,8 不見了
同上面的說法 9,10 合併所以在屬於 9 的 td 加上 td
colspan=2 第三行的 tr 之後只有二個 td 因為 10
和 12 分別被合併掉了。 最後在屬於 13 的 td 改成 td
colspan=3 用來合併 13,14,15 這行就只剩一個 td 了。
最後我建議各位在寫複雜表格時不要一下就填入內容,先作好分欄,再去掉不該有的 td 即可。寫的時候像下面的寫法較好
|
|
位址(address)通常是用來指出e-mail位址、簽名、或是文件出處。它一般都出 現在文件的頂端或是末端。使用此標註會讓文字以斜體表示,並且會自動將段落中斷 。 |
|
<blockquote> |
這個<blockquote>和</blockquote>標註是成對的。這個標註常用來代表這段文 字是引用他人的話,例如: <blockquote>carousel's html document is good . </blockquote> 像這樣子的本文一般會稍微往左和往右內縮一點且(或)使用斜體。這時候段落會 發生中斷,這段本文的前後會各出現一列空白列。 |

|
<ol type=#> #的選項為 A :依 A、B、C、D、E、F、G 排列 a :依 a、b、c、d、e、f、g 排列 i :依Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ、Ⅵ、Ⅶ 排列 i :依 i、ii、iii、iv、v、vi、vii 排列 1 :依 1、2、3、4、5、6、7 排列 也可指定開始的號次如:<ol start=3> |

#的選項為
type="disc"實心圓點
type="circle"空心圓點
type="square"實心方塊

html以 rgb 表示顏色,每種色以16進位表示,全部都是ff則為白,全為00為黑,三個數值相同即為灰色
#ff0000 紅色 #ffffff 白色
#00ff00 綠色 #00000黑色
#0000ff 藍色
為什麼不用 pe2 畫表格就好了呢? 因為瀏覽器會將多餘的空白刪除,所以在編寫 html 語言時,若要真的有空白,就必需按 shift-space 這如同瀏覽器會忽略您換行的指令般,除非您在指定的地方下 br 的指令。