ASP.NET 網頁製作教本 -- 從基本語法學起 第 2 章 進入 ASP.NET 網頁製作的準備工作
2-1 ASP.NET 相關技術概說
Client 與 Server 網頁提供者將其製作好的網頁放在 Server(伺服器)上，稱為伺服端(Server端)。
伺服端與客戶端在同一區域網路上 上圖中，雖然將伺服端與客戶端以網際網路連結起來，但實際上，伺服端與客戶端卻不一定要分處於網際網路的兩端，它們可以是同一區域網站的兩部機器，甚至是同一部機器既是伺服端又是客戶端。
伺服端與客戶端 在同一區域網路上(續)
伺服端與客戶端在同一機器上 您在安裝書本範例之後，啟動瀏覽器，然後在位址欄輸入http://localhost/kjaspx藉以檢驗範例網頁是否安裝妥當，此時瀏覽器(也就是上網這一端)與 ASP.NET (也就是伺服器這一端)是位於同一部機器上。
伺服端與客戶端在同一機器上(續)
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 ASP.NET 網頁必須透過 IIS 來執行方才有效，如果直接以瀏覽器或其他工具(例如 FrontPage)來開啟 .aspx 檔案，則 ASP.NET 網頁中的 ASP 程式是不會被執行的。 舉例來說明：
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續1) 請利用「記事本」開啟 ch02 目錄的Whattime.aspx 檔案，可看到其內容如下： <HTML> <BODY> 現在時間： <% Dim T As Date T = Now Response.Write( T ) %> </BODY> </HTML>
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續2)
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續3) 2.請利用瀏覽器的「檔案/開啟舊檔」開啟 Whattime.aspx，結果並不會執行 Whattime.aspx 網頁中的程式，而只是啟動系統中預設的程式開啟 Whattime.aspx 檔案，以作者的機器為例，.aspx 檔案預設的編輯程式為「記事本」，結果開啟 Whattime.aspx 的作用是啟動「記事本」編輯 Whattime.aspx 檔案。
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續4) 3.在瀏覽器的位址欄輸入： 如果您所建立的是區域網路作業平台， 請輸入以下網址： http://localhost/kjaspx/ch02/Whattime.aspx http://IIS所在機器的IP位址/kjaspx/ch02/Whattime.aspx
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續5)
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續6) 以下是說明開啟.aspx 檔案(檔案/開啟舊檔)及瀏覽 ASP.NET 網頁(位址欄輸入網址)的差異：
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續7) 檔案/開啟舊檔：結果是啟動系統中預設的程式開啟 Whattime.aspx，而不會執行其中的 ASP 程式。
瀏覽 ASP.NET 網頁 vs. 開啟 .aspx 檔案 (續8) 在位址欄輸入網址：網址會送到 IIS，而 IIS 會開啟 Whattime.aspx，並且解讀檔案內容，然後執行其中的 ASP 程式，最後再把結果下載到瀏覽器，而由於 IIS 在執行 ASP 程式之後，會將執行結果(以 Whattime.aspx 為例，結果是系統時間)下載到瀏覽器，所以瀏覽器除了顯示 "現在時間：" 之外，也能夠顯示系統時間。
練習 先利用瀏覽器的「檔案/開啟舊檔」開啟 kjaspx\ch02 的 Week02.aspx，然後在瀏覽器位址欄輸入 http://localhost/kjaspx/ch02/Week02.aspx ，並比較兩者的差異。
HTML 語言 HTML(HyperText Markup Language，超文字標示語言)是構成網頁最「基礎」的要素，雖然隨著技術的演進，又有各種新技術的誕生，例如 Dynamic HTML、Java Script、VB Script、ASP、ASP.NET…，但它們依然是建構在HTML 之上，並沒有捨棄既有的 HTML。
需要學 HTML? 現在 HTML 編輯工具已經相當普遍，要建立一個 .htm 的網頁(文件)，只要使用自己最習慣的 HTML 編輯工具(例如FrontPage、Dreamweaver 、Word…) 加以編輯即可。 我們會利用 ASP 程式動態建立 HTML 格式的文件，然後下傳到瀏覽器端，所以不可不瞭解 HTML 語言的文法(簡稱「語法」)。
HTML 是語言非程式語言 HTML 是一種語言，但並不算是「程式」語言，HTML 所定義的範疇僅侷限於如何表現文字、圖片，以及如何建立文件之間的連結；程式則是經過規劃的一連串命令(或稱為「敘述」)，而這樣的命令可用來驅使作業系統或應用程式執行某些工作 。
動態網頁 由於HTML並不是程式語言，因此由HTML 所構成的文件並不會因時因地產生變化，所以便有「靜態」(static)網頁之稱。為了讓網頁具備動態變化的能力，不管是瀏覽器或 Web Server 製造廠商，都著手將程式加到單純的 HTML 文件中，而發展出動態網頁的技術。
Server 及瀏覽器都可以執行程式 要產生動態網頁，一定要撰寫程式，至於該選擇哪一種程式語言，往往令網頁製作者感到頭痛。 首先必須說明的是，程式的執行端可分成客戶端(瀏覽器)及伺服端(Server)，如果程式在瀏覽器上面執行，則 Server 必須把程式碼傳下來，而瀏覽器也要聰明到可以執行 Server 所傳輸下來的程式，而如果程式在 Server 端執行，則 Server 只要把執行的結果傳下來即可。
Server 及瀏覽器 都可以執行程式(續1)
Server 及瀏覽器 都可以執行程式 (續2)
什麼是 CGI? 早期在 Server 端執行的程式，最有名的莫過於 CGI(Common Gateway Interface)，對網路族來說，CGI 好像是很技術的東西，但實際上，它的觀念卻與 UNIX 或 DOS 的 Shell 很像。 對 Shell 而言，使用者是利用鍵盤輸入指令，然後由 Shell 解譯此一指令並且啟動對應的程式。 對 CGI 而言，指令則是來自於瀏覽器，以 CGI 介面傳送到伺服器之後，再由伺服器解譯後啟動伺服器之中對應的程式。
從 CGI 到 ASP 對 Shell 指令而言，可能帶有參數，當程式被 Shell 啟動之後，它可以透過 Shell 所提供的介面讀取指令的參數；對伺服端的程式而言，當它被啟動之後，則可以透過 CGI 所提供的介面讀取指令的參數。 最後是輸出的比較，同一個程式可能被 Shell 啟動或 CGI 所啟動，被 Shell 啟動的程式其輸出是螢幕，被 CGI 啟動的程式其輸出則是網路，也就是傳輸給瀏覽器。
CGI 程式的問題 CGI 可以說沒有任何技術可言，如果 Web 伺服器提供有 CGI 介面程式(可能的形式有原始程式碼、程式庫、動態連結程式庫…，視 Web伺服器而定)，那麼撰寫伺服端的 CGI 程式與一般程式是沒什麼差別的。 不過在實務上，同樣的作業系統，若 Web 伺服器不同，則 CGI 介面程式也會不同，過去常有人抱怨：「Web 伺服器由 WebSite 換成 IIS 之後，原來的 CGI 程式就無法使用了」，原因就是因為不同 Web 伺服器所提供的 CGI 介面程式不同所致。
ASP vs. CGI ASP 程式也算是 CGI 程式，或者說是CGI 程式的改良版，它跟 CGI 程式一樣是在伺服端執行的，但是它有以下優點： CGI 介面物件化：在CGI 程式中收集網頁資料最麻煩的事情是解析瀏覽器上傳的資料(主要是為了解析特殊字元及中文碼)，若使用 ASP 程式來收集網頁資料，則 ASP.NET 會代為解析，並且轉換成物件供 ASP 程式來讀取，簡單地說，就是 ASP.NET 提供有豐富的物件(以下簡稱「ASP 物件」)讓 ASP 程式簡化 CGI 的相關處理工作。
ASP vs. CGI (續) 2. 可以使用 .NET 物件類別：除了 ASP 物件外，舉凡 .NET Framework 系統底下的物件也都可以讓 ASP 程式來使用，使其成為 ASP 網頁製作中的資源，而由於 ASP 程式可以使用 .NET Framework 的物件類別，也使得 ASP 程式可以做的事情比傳統的 CGI 程式要多出許多 。
ASP.NET 網頁的程式語言 在 ASP.NET 網頁的製作中，我們可以選擇 Visual Basic.NET(以下簡稱 VB.NET 或 VB)、Visual C#.NET、Java Script…等做為撰寫 ASP 程式的語言，本書選擇的是 VB.NET，因此除了 HTML 語言之外，VB.NET 程式語言可以說是製作 ASP.NET 網頁最重要的基礎，預定在下一章為您介紹 VB.NET 的程式設計。
整理一下 1. 單純由 HTML 所構成的網頁是靜態的網頁，欲產生動態網頁必須撰寫程式。網頁程式的執行可以分成在客戶端執行及在伺服端執行兩種狀態，而 ASP 是在伺服端執行的程式。 2. 以開啟檔案的方式開啟 .aspx 檔案，並不會讓檔案中 ASP 程式被執行。要讓 ASP 程式被執行的條件是：(1) 系統安裝有 IIS (2) 以瀏覽的方式瀏覽 ASP.NET 網頁。
整理一下 (續1) 3. ASP 已經將 CGI 的介面封裝成比較容易使用的物件，如果已經開始使用 ASP，就可以不必再學 CGI。 4. HTML 是製作 ASP.NET 網頁很重要的基礎。
整理一下(續2) 5.VB.NET、Visual C#.NET 及 Java Script…等都可以用來撰寫 ASP 程式，而本書將採用 VB.NET 做為撰寫 ASP 程式的語言。 6.本書所介紹的 ASP.NET 網頁是由 HTML 與 VB.NET 所構成的，其中 HTML 是構成網頁的基礎，而 VB.NET 則是用來撰寫 ASP.NET 網頁所需之 ASP 程式。
2-2 使用 HTML 的基本觀念
為什麼要學 HTML? 在 ASP.NET 網頁的製作中，瞭解 HTML 語法是必要的，舉例說明為什麼： 1. 首先請瀏覽 kjaspx/ch02 的week01.aspx ，結果網頁會顯示「今天是：星期X」的內容。
為什麼要學 HTML? (續1) 2. 檢視 week01.aspx 檔案的內容，其內容如下： <HTML> <BODY> 今天是： <% Dim week Week = DatePart( DateInterval.Weekday, Now() ) Response.Write( WeekdayName(Week) ) %> </BODY> </HTML>
為什麼要學 HTML? (續2) 其中粗體字部分為 ASP 程式，非粗體字部分則是傳統的 HTML 文件，ASP 程式與 HTML 文件可以說是涇渭分明，感覺上撰寫 ASP 程式似乎與 HTML 無關，但其實不然。 3. 請再瀏覽 ch02 目錄的 week02.aspx，同樣的網頁也會顯示「今天是：星期X」的內容，但星期 X 的部分則會因為星期一、二、…、日的不同，而顯示不同的顏色，其中星期一～五顯示成藍色、星期六顯示成綠色、星期日則顯示成紅色。
為什麼要學 HTML? (續3) 4. 讓我們稍微思考一下，week02.aspx 是怎麼做到的，別以為 ASP 程式可以控制瀏覽器所顯示的內容，ASP 程式沒有這種能力，ASP 程式與瀏覽器之間關係只有下載網頁及上載資料的關係，以 week02.aspx 為例，如果 ASP 程式希望瀏覽器能夠將網頁文字顯示成紅色，則方法是下載 "<FONT COLOR=Red>" 給瀏覽器，所撰寫的程式如下： Response.Write( "<FONT COLOR=Red>" )
為什麼要學 HTML? (續4) 其中 <FONT COLOR=Red> 就是標準的 HTML 語法，被瀏覽器解讀之後，會將後續的文字顯示成紅色。 再看完整的 week02.aspx，其中粗體字的部分，都是由 ASP 程式下載 HTML 語句給瀏覽器的例子：
為什麼要學 HTML? (續5) <HTML> <BODY> 今天是： <% Dim Week Week = DatePart( DateInterval.Weekday, Now() ) If Week = 1 Then ' 星期日 Response.Write( "<FONT COLOR=Red>" ) ElseIf Week = 7 Then ' 星期六 Response.Write( "<FONT COLOR=Green>" ) Else Response.Write( "<FONT COLOR=Blue>" ) End If Response.Write( WeekdayName(Week) ) Response.Write( "</FONT>" ) %> </BODY> </HTML>
為什麼要學 HTML? (續6) 5. 在 week02.aspx 的例子中，我們可以看到 ASP 程式若要「控制」瀏覽器所顯示的內容，其方法是下載正確的 HTML 語句給瀏覽器，這就是撰寫 ASP 程式也必須瞭解 HTML 語法的原因。
標示的觀念 首先來看一個很簡單的 HTML 檔案，請使用記事本程式開啟本書 kjaspx/ch02目錄底下的 htm01.htm，其內容如下： <H1>初試 HTML 語法</H1> <HR> <H2>使用 HTML 的基本觀念</H2><P> <UL> <LI>標示的觀念</LI> <LI>區塊的觀念</LI> <LI>參數的觀念</LI> </UL>
標示的觀念 (續1) 以上所看到的是 htm01.htm 檔案的原始碼，其中含有一些 HTML 標示(例如 <H1>、<HR>、<H2>、<UL>、<LI>)，這些標示都是有意義的，每一個標示就好像是下給瀏覽器的一個指令，舉例來說，<H1> 標示在告訴瀏覽器文字要顯示成「最大的標題」，所以「<H1>初試 HTML 語法</H1>」經瀏覽器解讀之後，顯示出來的結果便如下圖：
標示的觀念 (續2)
標示的觀念 (續3) 除了 htm01.htm 之外，如果您使用記事本檢視其他 .htm 檔案，可以發現它們也都是由標示所組成的，HTML 的全名是 HyperText Markup Language(超文字標示語言)，其中 Markup (標示) 的意義就是這樣來的。
區塊的觀念 除了標示的觀念之外，HTML另一個重要的觀念是「區塊」，以前面的htm01.htm 檔案為例，「<H1>…</H1>」、「<H2>…</H2>」、「<UL>…</UL>」、及「<LI>…</LI>」都算是區塊。
區塊的觀念 (續1)
區塊的觀念(續2) 區塊的辨識很簡單，如果開頭的標示寫成 <標示Ｘ>，則一直向後尋找直到 </標示Ｘ> 時，就是一個區塊。 區塊的好處是讓 HTML 檔案具有結構性，可提高其可讀性，接下來讓我們繼續觀察 htm02.htm檔案，以下是以 IE 開啟的結果：
區塊的觀念 (續3)
區塊的觀念 (續4) 再使用記事本加以檢視，結果也可以看到不少由標示所構成的區塊：
標示的屬性 在 htm02.htm 裡面，我們也發現有些標示並不是單純的 <標示> 型態，而是 <標示 xxx=? yyy=?…> 的型態，這一類的標示稱為有屬性的標示，例如 <IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300>。
屬性的表示 含有屬性的標示其屬性之間須使用空白字元區隔，屬性本身則是「xxx = yyy」的型態，位於 ‘=’ 號前面的是屬性名稱，‘=’ 號後面的則是屬性值 。 屬性名稱是不可以改變的，而屬性值則依設計者的需求來設定。
屬性的表示 (續) 舉例來說，如果我們把： 改成： 則顯示出來的 stone.jpg 圖片將變成原來 的四分之一。 <IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300> <IMG SRC="stone.jpg" HEIGHT=100 WIDTH=150>
階層的觀念 在 htm02.htm 裡面，我們還發現標示是有階層的，如果把 htm02.htm 標示之外的文字及標示之中的屬性刪除，並且按階層來排列，結果如下：
階層的觀念 (續)
階層的優點 有些 HTML 編輯工具在產生 HTML 原始檔時，會將其中的 HTML 標示按照階層關係來排列(例如以上的排序方式)，可以給人一目了然的感覺。
階層 -- <HTML>標示 HTML：用來表示 <HTML> 與 </HTML> 之間的文字是一份 HTML 文件。對絕大部分的瀏覽器來說，會自動將 .htm 及 .html 的檔案視為 HTML 文件，所以省略此一標示並不會影響顯示的結果。
階層 -- <HEAD>標示 HEAD：用來設定 HTML 文件的標題、作者…等資訊，但這些資訊都不會顯示在瀏覽視窗上，因此有人會乾脆省略這個標示，例如： <HTML> <!-- 省略了 HEAD 標示 --> <BODY> HTML 文件的主體在此 </BODY> </HTML>
階層 -- <BODY>標示 BODY：撰寫在 <BODY> 及 </BODY> 之間的 HTML 標示經瀏覽器解讀之後，會顯示在瀏覽視窗中，所以這是 HTML 主體的部分。對大部分瀏覽器來說，省略 BODY 標示也是無所謂的，例如 htm01.htm 就是一個沒有 HTML、HEAD、及 BODY 標示的文件，而使用 IE 及 Netscape 來瀏覽，也都可以正常顯示。
超文字的觀念 HTML指的是HyperText Markup Language，這 HyperText直譯為「超文字」，主要是指「連結」及「圖片」(也包含其他任何非文字性的媒體，例如聲音、音樂、影片…等)，以下解說「連結」及「圖片」與 HTML 文件的關係：
超文字的觀念 -- 圖片 圖片：在 htm02.htm 標示中，我們已經 看到用來插入圖片的標示 <IMG>，其中 設定圖片來源檔案的屬性是 SRC、而屬 性值是 “stone.jpg”，如下： 這表示瀏覽器在解讀此一標示時，必須 繼續下載(或讀取) stone.jpg 這個檔案， 然後將其顯示在瀏覽視窗上。 <IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300>
圖檔來源目錄的設定 但瀏覽器該從哪一個目錄讀取 stone.jpg 檔案呢？以「SRC=“stone.jpg”」的設定方式來看，stone.jpg 必須與 HTML 檔案放在同一個目錄。除了「SRC="stone.jpg"」的設定格式之外，以下也是常見的設定方式： (1) SRC="picture/stone.jpg" (2) SRC="../stone.jpg" (3) SRC="http://www.kj.com.tw/graphic/stone.jpg"
圖檔來源目錄的設定(續1) (1)SRC=“picture/stone.jpg”： 以 HTML 檔案的所在目錄為基礎， stone.jpg 必須放在 HTML 檔案所在目錄的 picture 子目錄。 (2)SRC="../stone.jpg"： 以 HTML 檔案的所在目錄為基礎， stone.jpg 必須放在 HTML 檔案所在目錄的上一層目錄。 簡單地說，(1)(2)的設定格式是以 HTML 檔案做為相對的目錄。
圖檔來源目錄的設定 (續2) (3)SRC=“http://www.kj.com.tw/graphic/stone.jpg”：stone.jpg 必須放在 www.kj.com.tw 這個 Web 伺服器的 /graphic 目錄底下。
超文字的觀念 -- 連結 連結：在瀏覽網頁時，將滑鼠指標移到某一段文字或圖片上面，如果會出現 指標，就表示這是一個連結，在此按下會連結到另一個網頁。
超文字的觀念 -- 連結(續1)
超文字的觀念 -- 連結(續2) 以 kjaspx\ch02 目錄的 VBBooks.htm 為例， 將 “Visual Basic 6.0 與 Windows API 講 座” 定義成連結的標示是 <A>，如下： 其中標示的HREF屬性被設定成 “api/vbapi.htm”，這表示在 “Visual Basic 6.0 與 Windows API 講座” 上面按 下連結之後，會跳到api子目錄的 vbapi.htm 網頁 <A HREF="api/vbapi.htm">Visual Basic 6.0 與 Windows API 講座</A>
連結之網頁的目錄設定 HREF=“api/vbapi.htm” 表示以 HTML 的所在目錄為基礎，在 api 子目錄底下必須含有 vbapi.htm 網頁，才能構成正確的連結。除此之外，以下也是常見的設定方式： (1) HREF="vbapi.htm" (2) HREF="../vbapi.htm" (3) HREF="http://www.kj.com.tw/2000/vb/api/vbapi.htm"
連結之網頁的目錄設定 (續) (1)HREF="vbapi.htm": vbapi.htm 檔案必須放在目前所在目錄。 vbapi.htm 必須放在 www.kj.com.tw 這個 Web 伺服器的 /2000/vb/api 目錄底下。
其他觀念一 多個放在一起的空白字元，只會被瀏覽器視為 一個空白字元： 舉例來說，以下兩行標示所顯示的結果是相同 的： 結果 "初試" 與 "HTML" 之間都只會顯示一個 空白字元。 <H1>初試 HTML 語法</H1> <H1>初試 HTML 語法</H1>
其他觀念一 (續) 既然多個放在一起的空白字元，只會顯示出一個空白字元，那麼如果我們想將字元與字元之間的距離拉寬一點，該如何做呢？ 最簡便的方法是在字元與字元之間插入中文(全形字型)的空白字元，中文的空白字元並不會被解讀成空白字元，而是被解讀成中文字，故多插入幾個中文的空白字元便可以達到拉大字元與字元距離的目的。
其他觀念二 跳行字元是沒有作用的字元： 在我們編輯文字檔時，往往會按下 Enter 鍵來 表示跳行，如下： 而實際上顯示在瀏覽視窗時，其結果卻是「這 是第一行這是第二行」，根本沒有被分成兩行 來顯示。
其他觀念二 (續1) 那麼如何將文字分行呢？ 常用的方法是在文字之間插入 <P> 或 <BR> 標示。 <P> 標示的作用是分段落，也就是位於 <P> 標示後面的文字會放在新的段落(也就是新的一行)。 <BR> 標示的作用是斷行，兩者的差別如下圖，若利用 <P> 標示來分行，則行與行之間的距離比較大。
其他觀念二 (續2)
其他觀念三 標示是不區分大小寫的： 舉例來說，<BR>、<Br>、及 <br> 的意義是完全相同的。
其他觀念四 註解標示： 凡是放在 <!-- 與 --> 之間的文字，都會被瀏覽器略過不予解讀，也就是不會顯示在瀏覽視窗上。由於 <!-- --> 具有不被解讀的特性，我們可以利用它來插入註解文字。
其他觀念四(續1) 舉例來說，有一串標示如下： 其作用是「以置中方式插入 stone.jpg 圖片」，那 麼我們可以在此一標示之前插入以下的註解標示： 則 <!-- 以置中方式插入 stone.jpg 圖片 --> 在此的 用途便是解釋 <CENTER><IMG SRC=...></CENTER> 這一串標示的作用，而且不 會改變既有標示的意義。 <CENTER><P><IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300></P></CENTER> <!-- 以置中方式插入 stone.jpg 圖片 --> <CENTER><P><IMG SRC="stone.jpg" HEIGHT=200 WIDTH=300></P></CENTER>
其他觀念五 前面在設定屬性值時，有些標示在屬性值的前後含有 " "(例如 SRC= "stone.jpg")，但有些卻沒有(例如 HEIGHT=200 )，請問設定屬性值時，前後加不加 " "，該如何判斷？ 在屬性值前後加上 " " 是比較標準的寫法，但如果屬性值之中只有中英文字及數字，則屬性值前後不加 " " 也沒關係。如果您沒有把握該不該在屬性值前後加上 " "，那麼加上 " " 總是不會錯的。
2-3 常用的 HTML 標示
learn.aspx：HTML 學習網頁 左邊的架框會列出本節所有的 .htm 網頁，選取後其原始碼會顯示於右上方的架框，網頁瀏覽的結果會顯示於右下方的架框。
learn.aspx：HTML 學習網頁(續1)
learn.aspx：HTML 學習網頁(續2) 右上方的框架還可用來輸入HTML標示，為「輸入架框」，輸入後，按下「解讀HTML」鈕，則輸入於架框內的文字即會被解讀，然後顯示在右下方的架框中。
learn.aspx：HTML 學習網頁(續3)
上機練習 接下來讓我們來嘗試前面所介紹過的 HTML 標示，請分別輸入 (1)～(5) 的HTML標示，然後按下「解讀 HTML」鈕，看看瀏覽的結果：
上機練習(1) 輸入： 結果：瀏覽窗格上只會顯示「上一行是 一個註解，不會顯示在瀏覽視窗上」這 一行文字。 <!-- 這是一個註解，內容不會顯示在瀏覽視窗上 --> 上一行是一個註解，不會顯示在瀏覽視窗上
上機練習(2) 輸入： 結果：這四行文字會顯示成三個落段， 其中由於第三行與第四行之間沒有 <P> 標示，所以會顯示成同一個段落。 這是第一個段落。<P> 這是第二個段落。<P> 這是第三個段落。 這還是第三個段落，因為兩行之間沒有段落標示 P。
上機練習(3) 輸入： 結果：兩行「 P 是段落標示」之間有明 顯的間距，但兩行「BR 是斷行標示」之 間則沒有明顯的間距。 P是段落標示<P> P是段落標示<P> BR是斷行標示<BR> BR是斷行標示
上機練習(4) 輸入： 結果：第一行的 6 個空白字元只會顯示 出一個空白字元，而第二行的 3 個中文 全形空白字元則會完全顯示出來。 這一行插入 6個空白字元(英文半形)<P> 這一行插入 3個中文全形空白字元
上機練習(5) 輸入： 說明：以上在測試 <IMG> 標示(用來插入圖片)， 其中比較有趣的是第二個 <IMG> 標示，此一 標示省略了 HEIGHT 及 WIDTH 屬性，這表 示圖片要以原大小來顯示，另外增加了 BORDER=1 屬性，這表示圖片顯示時要含有邊 框。 <CENTER> <IMG SRC="F8316.gif" HEIGHT=66 WIDTH=440><BR>圖片一<P> <IMG SRC="F8315.gif" BORDER=1><BR>圖片二<P> </CENTER>
練習一 利用 learn.aspx 網頁檢測以下 HTML 顯示的結果： 1)<HTML> <BODY BgColor=Blue> </BODY> </HTML> 2)這是第一階 <BLOCKQUOTE> 這是第二階 <BLOCKQUOTE> 這是第三階 </BLOCKQUOTE> </BLOCKQUOTE>
練習一 (續) 3)<HTML> <BODY Background="stone.jpg"> </BODY> </HTML> 4)<IMG SRC=“../B01.jpg”> 5)<A HREF=“ba/vbba6.htm”> 新觀念的 VB6 教本 </A><P> <A HREF=“ex/vbex6.htm”> VB6 實戰講座 </A>
設定文字外觀的標示 設定文字外觀的標示，常用者有 <B>、 <I>、<U>、<SUP>、<SUB>、<TT>、 <FONT> 。 <B>：將文字設定成粗體字，例如： 「<B>這是粗體字</B>」所顯示的結果 為「這是粗體字」。
設定文字外觀的標示 (續1) <I>：將文字設定成斜體字，例如： 「<I>這是斜體字</I>」所顯示的結果為 「這是斜體字」。 <U>：將文字設定成加底線，例如： 「<U>這是加底線字</U>」所顯示的結 果為「這是加底線字」。
設定文字外觀的標示(續2) <SUP>：將文字設定成上標字，例如： 「這是正常字<SUP>這是上標字</SUP>」 所顯示的結果為「這是正常字這是上標字」。 <SUB>：將文字設定成下標字，例如： 「這是正常字<SUB>這是下標字</SUB>」 所顯示的結果為「這是正常字這是下標字」。
設定文字外觀的標示 (續3) <TT>：採用等寬字型來顯示文字，例如：「<TT>這是 Windows 的等寬字</TT>」所顯示的結果為「這是Windows的等寬字」。(註：以 "Windows" 為例，在不等寬字體中，"W" 比 "i" 來得寬，但是在等寬字體中，"W" 與 "i" 是等寬的)。
設定文字外觀的標示 (續4) <FONT>：FONT 標示通常帶有屬性，例如「<FONT SIZE=+1>字體放大一級</FONT>」(註：SIZE 為 FONT 標示的屬性)，表示所顯示出來的字體要放大一級，有關 FONT 標示的屬性請參閱稍後的說明。
設定文字外觀的標示 (續5) Text.htm 網頁：
FONT 標示的屬性 -- SIZE FONT標示的屬性有 SIZE、COLOR、及FACE 三種，茲說明如後： SIZE屬性：SIZE 屬性的用途是設定字體的大小： <FONT SIZE=+4>Size=+4</FONT><P> <FONT SIZE=+3>Size=+3</FONT><P> <FONT SIZE=+2>Size=+2</FONT><P> <FONT SIZE=+1>Size=+1</FONT><P> <FONT SIZE=+0>Size=+0</FONT><P> <FONT SIZE=-1>Size=-1</FONT><P> <FONT SIZE=-2>Size=-2</FONT><P>
FONT 標示的屬性 – SIZE (續1) Size.htm
FONT 標示的屬性 – SIZE (續2) 也就是以 0 為基礎，每加一則字體放大 一級，每減一則字體縮小一級，但放大 的最大值為 +4、縮小的最小值為 -2。 除了採用 '+' 及 '-' 號來改變字體大小之外， 也可以使用絕對值的設定方法，例如 「<FONT SIZE=7>第七級字體大小 </FONT>」。
FONT 標示的屬性 – SIZE (續3) 兩種方法在字體大小的對應關係如下： Size=+4 等於 Size=7 Size=+3 等於 Size=6 Size=+2 等於 Size=5 Size=+1 等於 Size=4 Size=+0 等於 Size=3 Size=-1 等於 Size=2 Size=-2 等於 Size=1
FONT 標示的屬性 – COLOR COLOR 屬性：COLOR屬性的用途是設定字體 的顏色，設定的格式有以下兩種： 第一種設定方法是將 COLOR 的屬性值輸入成 「顏色的英文名稱」，例如我們熟知的 Black(黑色)、White(白色)、Red(紅色)、 Green(綠色)、Blue(藍色)、Cyan(青色)…等， 都可以成為 COLOR 的屬性值。 (1) <FONT COLOR="Red">紅色字</FONT><P> (2) <FONT COLOR="#FF0000">紅色字</FONT><P>
FONT 標示的屬性 – COLOR (續1) 第二種設定方法則必須瞭解 RGB 的配色 原理(R、G、B 三個英文字母代表的是組 成各種顏色變化的三原色 Red、Green、 Blue 三原色)。 舉例來說，紅色與綠色會組合成黃色。 除了取色之外，R、G、B 三原色的強度 也會影響組合出來的顏色，例如綠色的 強度只有一半時，與紅色組合出來的顏 色會變成橘色。
FONT 標示的屬性 – COLOR (續2)
FONT 標示的屬性 – COLOR (續3) 第二種設定格式中含有 6 個字元，就是用來設定三原色的強度值：
FONT 標示的屬性 – COLOR (續4) 其中的 rr、gg、bb 分別代表 R、G、B 的強度值，其有效範圍為 00～FF(註：這是十六進位表示法，其值相當於 0～255)，以下舉幾個例子來看： 1. 紅色取最強的 FF，綠色及藍色取最弱的 00： 此時的設定值等於 "#FF0000"，所得到的顏色將等於紅色。
FONT 標示的屬性 – COLOR (續5) 2. 紅色及綠色取最強的FF，藍色取最弱的 00： 此時的設定值等於 “#FFFF00”，所得到的顏 色將等於黃色。 3. 紅色、綠色、及藍色都取最強的 FF： 此時的設定值等於 "#FFFFFF"，所得到的顏 色將等於白色。 4. 紅色、綠色、及藍色都取最弱的 00： 此時的設定值等於 "#000000"，所得到的顏色 將等於黑色。
FONT 標示的屬性 – COLOR (續6) 以下所列出的是一些常用顏色的設定值：
FONT 標示的屬性 – COLOR (續7) color.htm：
FONT 標示的屬性 – FACE FACE 屬性： FACE 屬性的用途是選擇文字所使用的字型，例如 「<FONT FACE=標楷體>我是標楷體</FONT>」。
FONT 標示的屬性 – 練習 想要顯示以下結果，請完成其 HTML：
設定段落樣式的標示 HTML 用來設定段落的標示有 <H1>、<H2>、<H3>、<H4>、<H5>、<H6>、<ADDRESS>、<PRE>、<blockquote>、<OL>、<UL>、<DL>…等。
設定段落樣式的標示 -- <H1> <H1>～<H6>：這幾個標示的用途是設定段落標題的大小級數。
設定段落樣式的標示-- <ADDRESS> <ADDRESS>： 此一標示會採用斜體字做為該段落的字體，例如「<ADDRESS>此一段落採斜體字為字體</ADDRESS>」
設定段落樣式的標示 -- <PRE>
設定段落樣式的標示--<PRE>(續1)
設定段落樣式的標示--<PRE> (續2) 如果我們採用預設的段落，則由於跳行字元會被視為無效字元，而多個空白字元只會顯示出一個空白字元，所以結果如下： For I = 1 To 9 For J = 1 To 9 Response.Write I*J Next Next
設定段落樣式的標示--<PRE> (續2)
設定段落樣式的標示 -- <blockquote> <blockquote>：此一標示稱為「縮排」標示，如果我們希望某一段落採縮排方式顯示，則只要將其放在 <BLOCKQUOTE> 及 </BLOCKQUOTE> 即可，例如：
設定段落樣式的標示 -- <blockquote> (續1) <H2>使用 HTML 的基本觀念</H2> <BLOCKQUOTE> 標示的觀念<BR> 區塊的觀念<BR> 其他觀念 <BLOCKQUOTE> 多個放在一起空白字元，只會被瀏覽器視為一個空白字元<BR> 跳行字元是沒有作用的字元<BR> 標示是不區分大小寫的 </BLOCKQUOTE> </BLOCKQUOTE>
設定段落樣式的標示 -- <blockquote> (續2)
設定段落樣式的標示 -- <blockquote> (續3) 在 BlockQuo.htm 之中，比較有意思的事情是 <BLOCKQUOTE>～</BLOCKQUOTE> 裡面還有 <BLOCKQUOTE>，結果將會造成後面的段落更大的縮排。 其實在某一個標示區塊裡面又有相同的標示，在 HTML 裡面是很普遍的，除了 <BLOCKQUOTE> 標示之外，以下所介紹的 <OL>、<UL>、<DL>…等標示也都具有類似的特性。
練習 有一文字檔如下：(收錄於aspbook.txt) ASP.NET 網頁製作教本 第一章 建立ASP.NET的作業平台 -- 安裝IIS 1-1 安裝IIS的軟硬體需求 1-2 單機作業平台的建立 1-3 區域網路作業平台的建立 第二章 進入ASP.NET網頁製作的準備工作 2-1 ASP.NET相關技術概說 2-2 使用HTML的基本觀念 2-3 常用的HTML標示
練習(續) 請利用 HTML 將其顯示成：
設定段落樣式的標示 -- <OL>
設定段落樣式的標示 -- <OL>(續1) 舉例來說，我們想要將資料顯示成： Visual Basic 系列叢書 1. 新觀念的 Visual Basic 6.0 教本 一本為完全初學者所寫的書 2. Visual Basic 6.0 實戰講座 一本實用的‧技術的‧資訊完整的書 3. Visual Basic 6.0 資料庫程式設計 從實務經驗中整理出來的資料庫設計寶典 4. Visual Basic 6.0 與 Windows API 講座 Visual Basic 專業人員最不可或缺的一本書
設定段落樣式的標示 -- <OL>(續2) 撰寫的方法是： (1) 在需要編號的資料前面加上 <LI> 標示 。 (2) 將所有的 <LI> 標示放在 <OL> 及 </OL> 區塊之間。
設定段落樣式的標示 -- <OL>(續3) Visual Basic 系列叢書 <OL> <LI>新觀念的 Visual Basic 6.0 教本<BR> 一本為完全初學者所寫的書 <LI>Visual Basic 6.0 實戰講座<BR> 一本實用的‧技術的‧資訊完整的書 <LI>Visual Basic 6.0 資料庫程式設計<BR> 從實務經驗中整理出來的資料庫設計寶典 <LI>Visual Basic 6.0 與 Windows API 講座<BR> Visual Basic 專業人員最不可或缺的一本書 </OL>
設定段落樣式的標示 -- <OL>(續4) 在以上例子中，如果我們想要在「一本為完全初學者所寫的書」後面顯示以下內容，則 HTML 標示該如何寫呢？
設定段落樣式的標示 -- <OL>(續5) Visual Basic 系列叢書 1. 新觀念的 Visual Basic 6.0 教本 一本為完全初學者所寫的書 1. 基礎學習篇 2. 程式實務篇 3. 物件應用篇 4. 專題研究篇 2. Visual Basic 6.0 實戰講座 一本實用的‧技術的‧資訊完整的書 3. Visual Basic 6.0 資料庫程式設計 從實務經驗中整理出來的資料庫設計寶典 4. Visual Basic 6.0 與 Windows API 講座 Visual Basic 專業人員最不可或缺的一本書
設定段落樣式的標示 -- <OL>(續6) 答案是在「一本為完全初學者所寫的書」之後插入以下標示： <OL> <LI>基礎學習篇 <LI>程式實務篇 <LI>物件應用篇 <LI>專題研究篇 </OL>
設定段落樣式的標示 -- <UL> <UL>：此一標示稱為「項目清單」標示，功能與 <OL> 相類似，以 ol2.htm 範例為例，如果我們將其中的 <OL> 全部改成 <UL>、將 </OL> 全部改成 </UL>，則顯示的結果將如下，也就是「編號」被「項目符號」(‧ 。 )所取代。
設定段落樣式的標示 -- <UL>(續) Visual Basic 系列叢書 . 新觀念的 Visual Basic 6.0 教本 一本為完全初學者所寫的書 。 基礎學習篇 。 程式實務篇 。 物件應用篇 。 專題研究篇 . Visual Basic 6.0 實戰講座 一本實用的‧技術的‧資訊完整的書 . Visual Basic 6.0 資料庫程式設計 從實務經驗中整理出來的資料庫設計寶典 . Visual Basic 6.0 與 Windows API 講座 Visual Basic 專業人員最不可或缺的一本書
練習 利用 HTML 將 aspbook.tx 檔案的內容顯示成 ：
設定段落樣式的標示 -- <DL> <DL>：此一標示稱為「定義清單」標示，若有兩段文字而第二段文字用來解釋第一段文字時，使用 <DL> 標示最為合適，例如：
設定段落樣式的標示 -- <DL>(續1)
設定段落樣式的標示 -- <DL>(續2) 撰寫的方法是： (1)在被解釋的段落(第一個段落)前面加上 <DT> 標示 。 (2)在解釋的段落(第二個段落)前面加上 <DD> 標示。 (3)將第一、二兩個段落放在 <DL> 及 </DL> 區塊之間。
練習 利用 HTML 將 aspbook2.txt 檔案的內容顯示成：
設定對齊的標示 對齊可分成靠左、靠右、及置中三種，而我們可以根據以下兩種情況來選擇對齊的標示：(1) 單一段落的對齊 (2) 連續多個段落的對齊。 單一段落的對齊：單一段落的對齊可以選擇以下標示： 靠左 <P ALIGN="Left">這是左靠的段落</P> 置中 <P ALIGN="Center">這是置中的段落</P> 靠右 <P ALIGN="Right">這是右靠的段落</P>
設定對齊的標示(續1) 連續多個段落的對齊： 要將多個段落一起靠右對齊，則將多個段落放在 <DIV Align=“Right”> 及 </DIV> 之間。 若要置中對齊，則是將 Align 的屬性設定成 “Center”(也就是將 “Right” 改成 “Center”)。 若要靠左對齊，則是將Align的屬性設定成 “Left”(註：靠左對齊是預設的對齊方式)，請看 Align.htm 範例。
設定對齊的標示(續2)
表格(Table)標示 HTML 語法中用來產生表格的標示包含 <TABLE>、<TR>、及 <TD>，這幾個標示必須互相配合使用，才能正確地產生表格。
表格的結構
表格的結構(續)
單一欄位的對齊設定
單一欄位的對齊設定(續) 以上9種對齊方式的設定標示分別如下： Align(水平對齊)屬性及 Valign (垂直對齊)屬性。 Align 及 Valign 屬性如果省略，則水平對齊表 示靠左、垂直對齊表示置中。 (1) <TD Align="Left" Valign="Top">水平:靠左<br>垂直:靠上</TD> (2) <TD Align="Center" Valign="Top">水平:置中<br>垂直:靠上</TD> (3) <TD Align="Right" Valign="Top">水平:靠右<br>垂直:靠上</TD> (4) <TD Align="Left" Valign="Center">水平:靠左<br>垂直:置中</TD> (5) <TD Align="Center" Valign="Center">水平:置中<br>垂直:置中</TD> (6) <TD Align="Right" Valign="Center">水平:靠右<br>垂直:置中</TD> (7) <TD Align="Left" Valign="Bottom">水平:靠左<br>垂直:靠下</TD> (8) <TD Align="Center" Valign="Bottom">水平:置中<br>垂直:靠下</TD> (9) <TD Align="Right" Valign="Bottom">水平:靠右<br>垂直:靠下</TD>
設定同一列的垂直對齊 如果同一列的所有欄位都採用相同的對 齊方式，則我們只要將 Valign 屬性設定 於 <TR> 標示中即可，不必逐一在同一 列的所有 <TD> 標示中加以設定。 以 Table02.htm 為例，欄位 (1)(2)(3) 都是 靠上對齊、欄位 (4)(5)(6) 都是置中對齊、 欄位 (7)(8)(9) 都是靠下對齊，因此可以 將 HTML 標示修改成：
設定同一列的垂直對齊 (續) <TR Valign="Top"><!-- 這一行都是靠上對齊 --> <TD Align="Left">水平:靠左<br>垂直:靠上</TD> <TD Align="Center">水平:置中<br>垂直:靠上</TD> <TD Align="Right">水平:靠右<br>垂直:靠上</TD> </TR> <TR Valign="Center"><!-- 這一行都是置中對齊 --> <TD Align="Left">水平:靠左<br>垂直:置中</TD> <TD Align="Center">水平:置中<br>垂直:置中</TD> <TD Align="Right">水平:靠右<br>垂直:置中</TD> </TR> <TR Valign="Bottom"><!-- 這一行都是靠下對齊 --> <TD Align="Left">水平:靠左<br>垂直:靠下</TD> <TD Align="Center">水平:置中<br>垂直:靠下</TD> <TD Align="Right">水平:靠右<br>垂直:靠下</TD> </TR>
練習一 完成以下 HTML 的製作：(提示：使用 <TABLE> 標示)(註：圓球圖檔收錄於Ball.gif)
練習二 有一文字檔如下：(收錄於 stock.txt) 股票代號 股票名稱 收盤價 漲跌 2328 廣宇 103.50 -1.50 2329 華泰 92.00 -2.00 2330 臺積電 152.00 0.00 2331 精英 54.00 0.00
練習二 (續) 利用 HTML 將其製作成以下表格：
表格及欄位屬性的設定 - BgColor BgColor(背景顏色)屬性： 設定方法是 “#rrggbb” 或 “英文顏色名稱”，BgColor屬性可以使用於 <TD>、<TR>、及 <TABLE> 標示。 若使用於 <TD> 標示，則可設定單一欄位的背景顏色。 若使用於 <TR> 標示，則可設定同一列的背景顏色。 若使用於 <TABLE> 標示，則可設定整個表格的背景顏色。
表格及欄位屬性的設定-BgColor(續) 將 (1, 1) 欄的背景顏色設定黃色、將第2列的背景顏色設定成青色 <TABLE BORDER=1> <TR> <TD BgColor="yellow"> (1, 1) </TD> <TD> (1, 2) </TD> </TR> <TR BgColor="Cyan"> <TD> (2, 1) </TD> <TD> (2, 2) </TD> </TR> <TR> <TD> (3, 1) </TD> <TD> (3, 2) </TD> </TR> </TABLE>
表格及欄位屬性的設定 -- Border 、 CellPadding 、 CellSpacin Border(邊框寬度)、CellPadding(儲存格與儲存格邊框之距離)、 CellSpacing(儲存格與表格邊框之距離)：這幾個屬性可用來調整表格的外觀。
表格及欄位屬性的設定 -- Border 、 CellPadding 、 CellSpacin(續1)
表格及欄位屬性的設定 -- Border 、 CellPadding 、 CellSpacin(續2) <TABLE Border=7 CellSpacing=15 CellPadding=5> <TR> <TD> (1, 1) </TD> <TD> (1, 2) </TD> </TR> <TR> <TD> (2, 1) </TD> <TD> (2, 2) </TD> </TR> </TABLE>
表格及欄位屬性的設定 -- Width Width(寬度)：Width 屬性可用來設定表格、列、及儲存格的寬度，以表格的寬度為例，請比較以下兩種設定方法： <TABLE Border=1 Width="80%"> ... </TABLE> <TABLE Border=1 Width="350"> ... </TABLE>
表格及欄位屬性的設定 - Width (續) 「Width=“80%”」表示表格將佔據可顯示寬度的 80%，而「Width=“350”」則表示表格將佔據 350 點的寬度，顯示結果如下：
表格及欄位屬性的設定 - NoWrap NoWrap(不自動折行)： NoWrap 屬性的用途是設定欄位內的文字，若某一欄位中的文字太長，而沒有設定此一屬性，則該文字太長的部分會自動折到下一行，若設定此一屬性，則不會折行，此一屬性沒有屬性值，設定方法如下： <TD NoWrap>本欄位不自動折行</TD
表格及欄位屬性的設定 - NoWrap (續)
畸形表格的產生 產生畸形表格要使用到ColSpan及RowSpan 屬性，先畫一個標準的表格，如下：
畸形表格的產生 (續) 然後標出要延伸多少格，再將 ColSpan 或 RowSpan 屬性寫到 <TD> 標示之中。 <TABLE Border=1 Width="100%" > <TR> <TD ColSpan="3"> </TD> </TR> <TR> <TD RowSpan="2"> </TD> <TD ColSpan="2"> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE>
實例 完成以下表格的製作：
實例 (續1) <TABLE Border=1 Cellpadding=2 Cellspacing=0 width="100%"> <TR> <TD Align=Center Rowspan=5> <IMG Src="F8315.jpg"> </TD> <TD Align=Center Colspan=2><FONT Size=+2> <B>新觀念的 Visual Basic 6.0教本</B></FONT> </TD> </TR> <TR> <TD NoWrap Valign=Top>基礎學習篇:</TD> <TD>將VisualBasic琳瑯滿目的操作環境化簡御繁，讓您能儘速上手進入VisualBasic的世界。</TD> </TR>
實例 (續2) <TR> <TD NoWrap Valign=Top>程式實務篇:</TD> <TD>突破程式語言刻板的教學方式，以精心設計的例子逐步引領您掌握VisualBasic程式語言的核心。</TD> </TR> <TR> <TD NoWrap Valign=Top>物件應用篇:</TD> <TD>教您如何控制VisualBasic的物件，進而組合出有實用價值的應用程式。</TD> </TR> <TR> <TD NoWrap Valign=Top>專題研究篇:</TD> <TD>包含「應用程式的散發」、「螢幕保護程式」、「資料庫」、及「WindowsAPI」四種專題。</TD> </TR> </TABLE>
實例 (續3) 在以上 HTML 之中，除了要將圖片欄位的 Rowspan 屬性設定為 5、將「新觀念的 Visual Basic 6.0教本」欄位的 Colspan屬性設定為 2 之外，「基礎學習篇:」、「程式實務篇:」、「物件應用篇:」、「專題研究篇:」等 4 個欄位須將 Valign 屬性設定為 Top、並設定 NoWrap 屬性。
練習 請製作您個人基本資料的網頁，如下圖：