HTML 的基本概念(一)

　當網頁製作成為網路生活必備基本能力時。HTML 便是大家不可或缺的基本常識！可惜的是，Jさん發現大多數的網頁設計人員(尤其是偏向視覺視設計的設計師)，竟然大多只懂工具，不懂語法。知其然，不知其所以然！所以，這幾篇簡單的概念，希望能幫助一些有興趣但不得其門而入的朋友，清楚網頁運作的基本原理。期待即使國小高年級的學生，也可以看懂這些內容。

　就像你開始學算術一樣，你的啟蒙老師絕不會給你一部計算機！你需要的只是一顆清楚的腦袋和一枝鉛筆(或十根手指頭)！但是，絕大部份學習網頁製作者，可能一開始就使用像DreamWeaver 或 Front Page 這一類工具。所以，常常遇到比較棘手的問題就不知道如何下手。

現在，我們將從 Browser 的運作開始介紹，讓大家可以了解 HTML 語法。並且，只需要使用記事本就可以做出簡單的網頁。當你熟悉了這些基本運作原理之後，使用工具才能得心應手。

首先，我們先應該要了解在網址列所輸入網址代表的意義（直接按連結時也一樣）。一般我們輸入的網址列可以將它區分成以下幾段：

　http://www.abc-company.com.tw:80/index.html

當我們在網址列輸入網址時，第一個接受指令的是瀏覽器（你用的 IE 或 firefox 等）。 以上這一串資訊已提供足夠的訊息，讓瀏覽器到茫茫網海中，去找到你所指定的資料。

  • http:　代表你要和遠端的伺服器（就是遠端的一部連上網路、提供服務的電腦）要用什麼通訊協定溝通。通訊協定，你可以先將它想像成人類的語言。就像你看到老外會先來一聲 ”Hello!"，表示你可以和他說英文；http: 在一開始的位置，就是告訴伺服器，我要用 http 這種通訊協定，取得一些資料。至於，http的細節有什麼？一般的使用者倒可以不必太在意。
  • //www.abc-company.com.tw ：這是伺服器的位置，用’.'區分開來。我們從最後往前說明：tw 是國碼，就代表台灣。com，代表是一家公司（其他，gov、org...分別代表政府單位，法人組織...等）。abc-company 就是公司（或組織）網域名稱（想像一個公司內有許許多多的伺服器，它們所組成的群組就是網域）。www，通常是一部伺服器的名稱（網域內的一部伺服器）。
  • :80 :是一個埠(port)的代號，通常不同的 port 提供不同服務。80 是預設 http 使用的埠所以一般可以省略。（你可以把它看成不同的）
  • /index.html :這就是我們要學習的重點，這是放在該伺服器內的檔案。它最終傳送到瀏覽器的格式必須是 HTML 或 XHTML。
　　瀏覽器接著會根據你的TCP/IP設定，先找到 DNS 伺服器（想像它存放著一堆伺服器名稱和 IP 的對照表）的 IP，再依照你所給的網址由 DNS 查出你指定伺服器的 IP（就是你常聽到的 xxx.xxx.xxx.xxx，它就像網路上電腦的門牌號碼）。以上的步驟也就是利用”給人看”的 URL 網址，查出”給電腦看”的 IP。
　
　　查到目的伺服器的 IP 之後，這個要求就會往所在的伺服器被指定的埠送。伺服器收到要求後，便會回傳文件內容到你的電腦。電腦收到文件內容，便回送到提出要求的瀏覽器。瀏覽器會將文件內容的 HTML 碼，作解析後呈現出來。這就是你所看到的網頁結果。
　
　　所以，HTML 碼是瀏覽器所能解析的最重要語法。其他我們所常見的 JSP、ASP、PHP ...等語言，其實它們都是在伺服器端已先被解析成 HTML 再丟給你的瀏覽器。瀏覽器最終看到的還是 HTML (當然，另還有一些 CSS 或 Script)。因此，如果你還沒弄懂 HTML (or XHTML) ，就去學那些什麼 "P"的。會像是還不懂算術就去學代數，還不會算術就拿著計算機猛按一樣！接下來我們就正式進入 HTML 的內容。（待續...)


留言

張貼留言

這個網誌中的熱門文章

GSM Modem 傳送簡訊的幾個 AT 指令

圖片
以下是使用 GSM MODEM 傳送簡訊時的基本指令。你可以用 GSM Modem 連接到你的電腦 COM port，再利用 Windows  的超級終端機，就可以利用電腦傳送簡訊。 1. AT 回傳 OK 則表示 GSM Modem 正常運作。 2. AT+CPIN="xxxx" 用以輸入 SIM 卡的 PIN CODE，xxxx 就是 SIM 卡的 PIN CODE 3. AT+CMGF=1 用以設定簡訊傳送的格式為 TEXT 模式。它只能傳送英文和數字。 　如果要中文或 Unicode 文字（或中英混合模式）要使用 AT+CMGF=0 這是 PDU 模式。 4.AT+CMGS="+886933xxxxxx" 出現以下的 ”>” 提示符號，就可以鍵入你要傳送的（英文）簡訊內容 。   > Hello! GSM Modem SMS Message! 最後按下 Control-Z (鍵盤的 Control + Z)簡訊就會傳到指定號碼的手機。（以上886 是台灣的國碼，933xxxxxx 是收訊者的手機號碼去掉第一個 0;你也可以直接打”0933XXXXXX"） 以上是 TEXT  模式。 若是使用 PDU 模式，除了將第３步驟改為 AT+CMGF=0之外， 在第4 個步驟按下 後出現"＞"的提示符號之後，你要輸入的可就 不是給人看的東西 了！例如：要傳送給 0932123456（可別真的傳，這支電話我可不知道是誰家的） 一個訊息： "恭喜你,試成功了!" 那麼在＞之後你可能必須輸入 0011000a91 9023214365 0008a712606d559c4f60002c8a666210529f4e860021 如果真的想試看看，可以將紅字部份改成你的手機號碼，再傳送即可。（注意兩碼兩碼對調 09 -> 90 32 -> 23 12 -> 21 34 -> 43 56 -> 65 ） 如果，你打算繼續找到那一串 16 進位數字代表什麼意思。那麼，請你參考　 http://www.dreamfabric.com/sms/ 。這裏有詳細的說明。
閱讀完整內容

FlashDevelop 3.0.x 開發環境安裝及使用(二)

圖片
另一個使用 FlashDevelop 的開發流程是利用Flash 來建立資源(圖形、影片片段等)而用 Flex SDK 來編譯程式： 　1.使用 Flash 建立圖形及內嵌的資源（如字型、聲音） 　2.使用 Flash 發佈 SWC library 檔。 　3.將 SWC 加入到 FlashDevelop 專案。 　4.使用 FlashDevelop 結合 Flex SDK 編譯你的專案。 元件設計 　 　首先，假設你是扮演視覺設計師的角色。你要做的就是將 Flash 影片中要使用的元件設計好。然後，必須在各個需要供程式操作的元件中加入與該元件與該元件結合的類別。如下圖（特別注恴：fla 文件類別設定要留白，不要與任一個 Class 結合） 　並且在發佈設定的 Flash 頁籤勾選要匯出 SWC。然後，按下發佈按鈕。Flash 會將SWC 發佈到與 .swf 檔案同一目錄。將此一SWC 交給程式設計人員。 程式設計 1.建立一個 AS3 專案。(記得讓它自行產生目錄) 2.將 SWC 複製到專案的 lib 目錄下。然後，在 SWC 按右鍵勾選目 Add to Library。 3.開始在 Main.as 寫程式，使用 SWC 內的元件。(你不一定要將主程式命名為 Main.as ，如果是多個類別同時存在時，只要在進入點的 Class 按右鍵，選取 Always Compile 即可) package { import flash.display.MovieClip; import jason.test.Square; /** * @author Jason Chen */ public class Main extends MovieClip { public function Main():void { var sq:Square= new Square(); addChild(sq); sq.x = 100; sq.y = 100; sq.width = 50; sq.height = 50; } } } 4.如果你要該 swf 產生在不同目錄，或用不同名稱，你可以在 project-> Properties 設定其輸出檔案路徑名稱。 5.最後，在 FlashDevelop 使用 Project->test movie 測試其執行結果。 如此...
閱讀完整內容

ActionScript 3.0 顯示物件(DisplayObject)與顯示物件容器(DisplayObjectContainer)

圖片
　ActionScript 3.0 針對影片片段及各種顯示物件的概念與 2.0 有截然不同。如果你寫過 ActionScript 2.0 請務必先忘了_root,_level0,_level1...和 getNextHighestDepth()這些東西。 　ActionScript 3.0 的顯示最上層是舞台(Stage)，然後是 文件類別的實體 ，往下是則可以顯示的顯示物件或者顯示物件容器，大致如圖一所示。顯示物件容器本身也是一種顯示物件，只不過它可以再包含其他的顯示物件在其中，而成為一個顯示物件列示(display list)；而單純的顯示物件就無法再含有其他物件。例如：Shape 是顯示物件，MoiveClip、Sprite 是顯示物件容器。 圖一 　任何顯示物都可以透過 stage 屬性來取得舞台物件。以下的程式範例：簡單說明如何使用顯示物件及顯示物件容器。 package jason.tutorial.actionscript { import flash.display.MovieClip; import flash.display.Sprite; import flash.display.Shape; /** * @author JASON */ public class Document extends MovieClip // 這是文件類別 { public function Document() //建構元 { // 建立一個名為 container 的顯示物件容器 // 自建一個 Container Class 且必須先和一個已存在的影片片段結合 var container:Container=new Container(); addChild(container); //容器加到主影片成為子物件 container.x=(container.stage.stageWidth-container.width)/2; //在舞台居中 container.y=(container.stage.stageHeight-container.height)/2; // 直接畫一個圓的形狀 var circle:Shape=new Shape(); container.addChild(circle); //加成容器的子物件 circle.graphics...
閱讀完整內容