發信人: wini (廢人), 信區: bwin 標 題: 自由開放的盲用網頁架設文件 第二版 發信站: 淡江蝙蝠BBS資訊總站 (Sun Mar 12 17:32:34 2006), 轉信 =自由開放的盲用網頁架設文件 第二版(2006/03/12 17:30 台灣時區)= 前言：這份文件是為了讓各位寫出能與 CSS 配合良好的 (X)HTML 文件而寫的。 本文件也有在以下討論區進行討論，各位亦可至此看看。（目前主機暫停服務中） http://forum.moztw.org/viewtopic.php?p=68474#68474 我並不是盲人，所以大概不能提供如何用 Mail3 主機架站的方法。 不過我可以大致說一下要架站要怎麼做。 流程: 1. 找到網頁空間並申請帳號 2. 在本機或網頁空間提供的架站工具寫好網頁並上傳 3. 後續的維護 4. 其它尚需要的文件 流程 1. - 找到網頁空間並申請帳號 目前可以利用的網頁空間很多，申請帳號也只要填些基本資料， 然後等認證信寄到你的電子郵件信箱中，再依指示完成註冊就好了。 網頁空間依費用可分成付費的、免費但有廣告的、供教育機關利用的、自行架設的。 依照你的需求，你可能只會需要一個支援一般圖片影音文字的網頁空間， 或者是有提供 CGI 、 ASP 、 ASPX 、 PHP 等的互動功能的。 不管是哪種，國外的服務通常比國內的還好，只不過需要懂點外文才能申請。 而想要自行架設站台的，一定要學會安裝控制流量的軟體，不然你的頻寬會被吃光， 還有很多安全性方面的問題要注意，這兒就先不提了。 關於空間，我只能提供我知道的和有用過的，要用哪個要自己去看該站的說明。 1. PCHome http://home.pchome.com.tw/ 2. Geocities.jp http://geocities.yahoo.co.jp/ 3. Brinkster http://www.brinkster.com/Default.aspx 4. PowWeb http://powweb.com/PowWeb/OnePlan/Detail 流程 2. - 在本機或網頁空間提供的架站工具寫好網頁並上傳 現在有蠻多的網頁空間都會提供架站工具了，這點你可以自行確認。 我現在要來說的是關於在自機編寫的方法。 要編輯網頁這種原始碼是純文字的文件， 只要有一個好用的純文字編輯器就好了， 其它也有把 HTML 標籤做成按鈕讓你直接點選的那種， 或是你寫的就直接是成品的所見即所得編輯器。 不過在此必須強調，不管用的是哪種，都該讓所有的瀏覽器能正常瀏覽， 就算不能正常瀏覽，也要有備用方案讓來訪者看見不能正常瀏覽的資料為何。 先來說明一下 HTML 是什麼。 HTML 全名 HyperText Markup Language ， 中文大致翻譯為超文本標記語言，主要是應用在網頁編寫上的程式語言。 可以拿來寫純文字，可以替純文字加上樣式， 可以建立超連結來連向其它網頁或圖片音樂的多媒體檔案， 可以建立表單與後端資料庫進行互動，總之就是用簡單的文字命令來達成工作而已。 基本上 HTML 是一個由 W3C 協會維護的公開規格， 依循此規格而繼續發展的新規格是 XML 跟 XHTML ， X 代表的就是具延伸性或具擴展性的 Extensible　。 純文字編輯器，有相當多種類，從只是當筆記本等級的陽春編輯器， 到有語法變色標示，跟能編輯二進位碼，和可以直接編譯程式出來的都有。 但是你必須要注意的是它到底支援哪些的文字儲存格式。 基本上 TXT, HTML, CSS, XML... 以及一些不特定副檔名的純文字檔都要能開， 而要能開這些純文字檔，該編輯器必須支援 DOS 及 Unix, MAC 格式的文件， 還有 Unicode 跟含 BOM (Byte Order Mark) 的 Unicode 文件。 可以直接點選 HTML 標籤來用的純文字編輯器我不熟，各位可以先記下來就好。 所見即所得的，跟純文字的比來是比較少，但是絕大多數人都是用這個的， 不過我必須在此提醒各位，這種東西畢竟是機器，所以錯誤是很多的。 Microsoft 出的 FrontPage 如果不注意的話，就會變成只有 IE 瀏覽器能看的網頁。 Macromedia 的 Dreamweaver 基本上也差不多會有這問題， 但是功能比起 FP 來說，使用上會更強而有力。 至於 Linspire 的 Nvu ，雖然寫出來的都是符合 W3C 所公開制訂的網頁標準規格， 但這並不保證該網頁的親和力能讓各位盲胞看得很舒服。 所以最後就是回到純文字編輯器了，基本上用 GNU/Linux 有著數不盡的工具可用， 不過我是用 Windows 的，但是我不用內建的記事本，雖然我一開始是用這寫的， 不過我現在用的是支援語法變色跟不同平台格式還有 Unicode 的文件的 SuperEdi 。 用純文字編輯器寫網頁，就一定會需要嘹解 HTML ，但是我可以告訴各位， 現在你學 HTML 只要十分鐘就好，因為大多數的都是複製貼上跟找資料就好， 你需要去修改跟去背下來的地方很少的，就算網頁有寫錯， 只要你丟給 W3C 的檢查工具，它就會跟你說哪一行有錯，並給你建議了。 關於網頁的檢錯，我是利用 Firefox 瀏覽器上的 WebDeveloper 擴充套件來協助的， 只要按按鍵盤組合鍵，就可以檢查本機或網頁的 HTML 是否有寫錯了。 總之我就先進入正題，告訴各位為何花十分鐘就能學會 HTML 吧，雖然說得有點誇大啦。 首先 HTML 有四個基本的專有名詞要記，就是元素、標籤、特徵、值。 元素就是構成網頁的元件，標籤則是用以標示元素的起始及結束範圍， 特徵則是該元素的特色，值則是用以描述該元素的特徵如何如何用的。 四者的英文依序是 element, tag, attribute, value. 以下以一個段落(p, paragraph)元素為例來說明:

這是範例

上例中用 < 和 > 包起來的就是一個標籤，裡面包的就是元素、特徵跟值， 要注意的是起始標籤和結束標籤的格式是不同的，起始是 <元素> ，結束是 。 而特徵跟值是只能寫在起始標籤中的，以上例來說， 在此所用到的特徵的名稱叫做 class ，也就是類別的意思， 而後面接的 example ，就是說這個 p 元素是屬於 example 這個 class 。 至於被起始和結束標籤包起來的，就是該元素所要表達的內容部分。 到此你已經學會了一個很有用的基本觀念了，不過這只是為了幫助各位理解 HTML ， 所做的一個基本說明，接下來我才正要進主題，來說明寫一份正確 HTML 的觀念。 接下來我要說明的，就是「巢狀階層架構」這個觀念， 實際上我並不清楚這名詞的正確名稱和原文怎麼寫， 總之就先這麼稱呼它吧，巢狀階層架構。 我上面有舉了一個範例，這個其實就是種巢狀階層架構。 起始標籤中宣告了元素名稱，還包了個特徵，特徵後接個等號 = ， 後面再用引號 " 把值給包起來，然後起始跟結束標籤又把內容包起來。 這只是寫一個做為段落的內容而已，就已經是整個 HTML 的基本觀念了。 所以以後各位在寫 HTML 時，也只是遵守這個規則在做應用而已。 然後再來是要應用這個概念，來看看有兩個以上的元素時要怎麼做， 這兒就來舉製作表格資料常會用到的表格(table)元素吧。 行首我會多加上數字作為行數的辨別以方便閱讀，共有八行，範例如下: 01 03 04 05 06 07 08
標題文字標題文字
標題文字表格內容
在上面，各位可以學到四件事。 1. 巢狀階層架構一定是對稱的，所以 table 的結束標籤， 是不會跑到 tr th td 裡面的，否則該元素所包含的範圍會亂掉。 2. HTML 中，只要元素、特徵跟值不要被從中裁斷， 比如說 table 被割成 ta 跟 ble 兩行這樣， 那麼你想全寫在一行中，或是想分多行寫都可以。 3. 該有空格的地方就要有空格，比如說 table 的起始標籤中， table 的元素名稱，跟它的 id 特徵名稱間，就一定要有空格， 而且這空格一定要是半形空格。至於其它地方想怎麼放空格，基本上都沒影響。 不過起始標籤的 < 後一定緊接元素名稱，結束標籤的 < 後一定接 / ， 其它也有些地方會有不可加空格的限制，網頁寫久了自然就會學會了。 4. 用 包起來的，是 HTML 中的註解文字(comment)， 在註解文字的範圍中，可以隨意換行跟寫東西進去， 但不可以再放 這點要注意一下。 在適當的地方寫上註解，在閱讀文件時比較不會感到混亂。 到了這兒，你已經學會了巢狀階層架構的基本跟應用了。 接下來，要告訴你巢狀階層架構中的元素因為層級差別而受到的限制。 元素的層級，基本上就是分為區塊(block)跟行內(inline)兩者。 這是以它們在一份 HTML 的成品中，所顯示的方式來分類的。 一個元素顯示出來會佔掉一行的空間，就被分類至區塊層級； 一個元素顯示出來不會佔掉一行的空間，也就是不會把前後的元素， 給擠到上面跟下面兩行，那就被分類至行內層級。 要注意的是，行內一定是被包在區塊裡面，不該有行內包區塊的情況在， 即使以前這樣子也能正常顯示，但我必須告訴各位，這樣的邏輯觀念不好。 區塊層級的元素，上面所舉的 p 跟 table 等的都是。 而行內層級的元素，通常是用在文字跟圖片上。比如說圖片:

文字範例文字

上例中，一個段落中，文字跟文字之間，夾了一張圖片， 該圖片並不會把前後的文字給擠到上一行跟下一行， 所以該圖片便是行內層級的元素。 而後面的文字被包在強調文字的 em 元素中，這也是行內元素。 在此順便提一下，像上述的圖片標籤，因為並不會再含圖以外的內容， 也就是說就算有起始結束標籤，裡面也不會放任何內容， 所以一般來說只會寫起始標籤，但是為了讓它符合巢狀對稱的規則， 所以我會在其起始標籤最後的 > 前，放置前方有一個空格隔開的斜線 / ， 來告訴瀏覽器，該圖片已經結束了。事實上你也可以寫成 啦。 好的回到正題，現在各位知道了行內一定是在區塊內，那同層級的元素呢？ 基本上區塊內可以放區塊跟行內，行內內可以放行內，也是遵守巢狀對稱的規則。 但是要注意，有些區塊元素不該放在某些區塊元素內。 比如說一個段落中不會再放入一個段落，表格的一橫列中不會放表格元素， 即使在瀏覽器的容錯模式(Quirk, 即怪癖)中會看來正常， 但那並不是正確的觀念，這會讓該元素原本的用途被扭曲掉。 關於這點，要另外再寫一份辭典式的文件做說明各元素，所以先不談。 另外，元素跟特徵名稱盡量寫小寫英文字母為佳， 至於 id 跟 class 則會於 CSS 相關的文件中做說明。 好的，說到這兒，想必也花了超出十分鐘的時間了， 而且重點是我完全沒說明到寫一份完整的 HTML 文件的方法， 不過別著急，我現在就要開始說明了，前面只是觀念， 你根本還沒正式在寫 HTML 文件，所以不必算在十分鐘內。 要寫好一份 HTML 文件的概念，上面已經說明了，現在就是實踐它了。 以下我寫一份符合 W3C 的 XHTML 1.0 嚴謹定義的範例文件給各位看。 總共有四十一行，可能會視情況再增減， 不過建議範例先隨便看過去一下就好，這份文件不看說明會看得很頭痛。 這邊還是要再說一遍，行首的數字跟其後接著的半形空格， 只是為了說明方便而加的行數資訊，實際在寫時是不該寫上去的。 01 03 04 05 06 07 08 首頁 - 網頁新手 me 的家 | 歌詞 | 電腦文件 09 10 12 13 14 15 16 17 18 19 20 21 22

最明顯也最大的標題文字 header

哈哈哈，這就是我的站呀。

23

比 h1 還小一點的標題文字，另外標題文字共有七級，最小為 h7 。

24

這兒要放一個目錄選單，採用的是無序列表 ul ，有序的則為 ol 。

25 32 33

前言：如何寫個還算不錯的網頁

34

基本上寫網頁是很自由的，所以並不會規定一定要照本範例的格式寫。 35
你可以整份文件不用標題 header 也行， 31 想全都只寫在一個段落中，中間全用 br 換行也可以，想用表格排版， 32 而不用較為靈活的 CSS 技巧也可以，全都看你的編寫需求。

33 34

第一章：網頁的編寫要點

35

基本上除了 body ，其它的部分都是直接抓別人的來複製貼上修改就好。 36 如果你文件開頭有用了 DOCTYPE 宣告那更好， 37 直接丟給 W3C 的 HTML Validator ，它就會給你建議了， 38 不過當然是要懂一些些的英文比較好啦，總之多看個幾次試試吧。
39 當然了，如果對自己的能力有自信的話，不丟去檢查也行，只是這樣進步有限。

40 41 天哪，我們只是想學寫個簡單的網頁，怎麼會給這麼複雜的範例呢！ 各位，這就是我滿滿的愛呀，請利用之前教的觀念仔細分析一下吧。 基本上我要說明的就只有幾項: 1. 說明該文件採 XHTML 1.0 嚴謹定義來繪製的宣告，就是 01 02 這兩行。 2. 大多數的伺服器，都是預設把 index.html 當索引用的首頁， 所以你打了一個 www.me.com 的網址，通常就是跑出該目錄下的 index.html 檔。 3. html 中含有 head 跟 body 兩大項元素， head 是給瀏覽器看的一些頁面資訊， body 才是呈現出來的主要內容。 但是 head 沒寫好， body 也遭殃的情況也會有。 不過 head 這部分，基本上全都是複製貼上就好的，所以我其實也沒去研究太多。 4. head 中要注意的，就是 06 08 10 11 這四行。 行 06 的字元編碼，這要依你寫的文件本身以何者格式儲存而定， 寫的是台灣區的繁體中文，文件用 ANSI 格式存，就用 big5 相關的編碼。 寫的是含中日韓法德等多國語言，文件用 UTF-8 格式存，就用 UTF-8 。 行 08 是你這一個網頁的標題，各位瀏覽到一份網頁，一定會先看到這個的， 基本上要怎麼寫很自由，但是不要給些「這是一份網頁的標題」這種無意義文字， 或是完全不寫 title ，不寫的話會變成用網址表示這樣。 行 10 11 這個，是給像 Google 和 Yahoo 跟 Openfind 這些搜尋服務網站， 他們在搜尋結果中列出你的網頁時，也會一併提供的說明，不要寫也無妨。 在此順便提一下，超連結 a 元素中的 href 特徵會用到的觀念， 那就是絕對路徑與相對路徑。 絕對路徑就是像 http://www.google.com/firefox/ 這種， 前面有寫通訊協定(在此是 http )，然後又接了個網域名稱(在此為 google.com)， 後面則是接了個 firefox 目錄名稱的。 而相對路徑，則是要看你現在的目錄在哪，才會知道目的地在哪， 比如說位在 me.com/a/ 路徑時， 要到底下的 haha 資料夾，就是打 haha ， 若是要到 haha 下的 me.txt ，就打 haha/me.txt ， 而若是要到位於上一層的 me.com 路徑，就打 ../ 這樣， 要到 me.com/b/ 路徑，就打 ../b ， 至於 ./ 則是表示同一層目錄用的，這種的不寫時也會當成同目錄。 用地址來說明的話，你可以把絕對路徑想成完整的地址， 而相對路徑則是你家右邊的房子的這種表示法。 而你可能會看到有用到 # 後接英數字或中文的， 那種的是指向頁面內的書籤(bookmark)用的， 比如說 ， 就會指向該頁中，唯一一個 id="test" 的元素的位置。 以下是關於本流程的參考網頁。 可利用的網頁編輯器: 1. SuperEdi http://www.wolosoft.com/en/superedi/ 2. DreamWeaver http://www.macromedia.com/go/gnavtray_dwmx_home 3. Nvu http://moztw.org/nvu/ HTML 和網頁編輯器的參考討論串跟文件: http://wiki.moztw.org/index.php/HTML_Guide_%E9%A6%96%E9%A0%81 http://forum.moztw.org/viewtopic.php?t=3925 W3C ( World Wide Web Consortium ) 的網站: 首頁 http://www.w3.org/ HTML 檢錯工具 http://validator.w3.org/ 流程 3. - 後續的維護 看完了上面的編寫法，然後再嘗試寫了幾份網頁的話， 各位一定會覺得，除了幾處地方要修外，好像都是煩人的複製貼上而已。 我以前在寫到擁有幾十份網頁時，也因為這些重複的地方， 有個小地方要修，而得開啟所有文件來修而感到困擾， 不過現在交給程式，把那些固定的地方製作成模版，去進行合併， 那麼就只需要修那些模版，再執行程式來合併，就可以一次變更好了。 而這些程式，你可以選擇用 MS-DOS 批次檔， PHP ， JavaScript ，或是其它更多的東西都行。 而模版的部分，基本上除了網頁標題跟頁面描述還有網頁內容是變動的， 其它的都是固定的模版了。總之我是用笨笨的批次檔處理的， 因為實在有點笨，而且我也還沒寫好相關文件，所以就先不談了。 再來一個很重要的事，就是你的網頁如果是用自己的空間， 那麼帳號密碼一定要避免流出給別人知道， 然後密碼要用八個以上的英數混合字來設定，想加特殊符號也行， 最好還能隔個一段時間就換個新密碼。 總之這一點請自行決定。 最後，大概就是文件的授權方式了，用保留部分權利的創意公用授權雖然也不錯， 但用有點死板的保留全部權利的著作權條款也是可以，全都是個人自由， 但是使用前抽點小時間看看該法條相關內容比較好。 總之有著作就會有作者，有人看就會有人想和作者交流， 至少留個作者資料和聯絡方式是比較推薦的做法。 流程 4. - 其它尚需要的文件 目前還需要的就是中文的 HTML 元素辭典，還有 CSS 的簡單講義。如: http://wiki.moztw.org/index.php/HTML_Guide_%E9%A6%96%E9%A0%81 http://www.andcycle.idv.tw/~wini/html/note/html_css_example.html 另外也需要個講解搜尋引擎跟 robots.txt 文件的文件。 最後我必須說明一件事，我並沒有在看 W3C 的規格書， 如果真的想學最正確的概念和使用法，請自行去找 W3C 的各規格書看。 至於是不是一定要照 W3C 的永續開放文件的想法走， 或是只寫網頁中絕對必要的元素就好，請自行決定。 還有，發現別人網頁有什麼問題時，建議私下寄信說一聲就好。 ---- 本文件以創意公用 Creative Commons 授權條款的 姓名標示-非商業性-相同方式分享 2.5 來發布，歡迎各位在遵行上述條款的情況下自由散布或修改使用。 該授權條款的說明網頁如下。 http://creativecommons.org/licenses/by-nc-sa/2.5/deed.zh_TW -- ※ 來源:‧淡江蝙蝠BBS資訊總站 bbs.batol.net‧[FROM: 61-223-176-231.dynam]