初學者必修篇

第十篇
網頁設計中 HTML 常犯的幾個錯誤

適合程度： 初學者 一般程度 以上均宜
壹、前言：
在我學習超過十年的 HTML 標籤歲月裡，不論是網頁製作或教學中，經常看到一些不應該發生的 HTML 錯誤。
這些錯誤在初學者過程中，很容易被引用，偶爾也會出現在老手中，特別為大家整理出八個最常見的錯誤觀念。
有些在我過去三期的電子報導中，曾經深入討論發表過，希望藉由這篇舊話重提，能帶給初學者避免重滔覆轍。
如果您有興趣瞭解更多頁製作學習技巧與需要注意事項，請回頭看看我的各期電子報或持續訂閱與購買完整取得。
網頁研習室 - 電子報是針對初學者或想徹底學會 HTML 標籤朋友而設，有心學習網頁製作者，請不要錯誤這個機會。

貳、未加入 charset=big5 標籤：
這是剛學會做網頁的人，過於依賴編輯工具，又忽略這個重要問題時才會犯的嚴重錯誤。
問題：如果您沒以在 <HEAD> 與 </HEAD> 之間，加入這段中文編碼(參考註解)，網頁可能會顯示亂碼。
結果：當訪客是來自外國語系或變更過瀏覽器編碼設定時，當轉到您的網頁文字時，就會出現一團外星文字。
建議：請務必養成在每一個網頁 <HEAD> 與 </HEAD> 之間，都加入 charset=big5 標籤(參考註解)。
註解：打開瀏覽器設定檢視編碼查看自動選取是否已打勾。
註解：charset=big5 完整標籤 - <meta http-equiv="content-type" content="text/html; charset=big5">

參、網頁背景色與的背景圖設定：
如果您沒有指定網頁背景顏色，瀏覽器的內定值底色是白色的 BgColor="#FFFFFF"。
如果您同時指定網頁背景顏色加上網頁背景圖，網頁背景圖 BackGround="URL" 會優先於網頁背景顏色。
問題：如果有訪客將網頁圖片顯示功能關閉(參考註解)，或圖檔不見等因素也會造成底圖圖片無法顯示。
結果：當您設定的文字顏色是淺系列時，訪客就有可能看不清楚這些文字了。
建議：網頁背景色與的背景圖應該同時設定，選用背景色一定要考慮到您設定的文字顏色。
註解：關閉瀏覽器網頁圖片顯示功能工具選項進階多媒體顯示圖片沒打勾。

肆、網頁或圖檔使用中文檔名：
在自己電腦看一切正常，路徑也正確，但上傳檔案到主機後確顯示找不到這個檔案，到底出現甚麼問題。
可能是您使用中文當網頁檔名，如：中文.htm；或使用英文大寫當網頁檔名，如：ABC.htm。
問題：如果您使用的主機是採用 Apache Server 或 linux 主機或英文主機(參考註解)，這個問題就會發生。
結果：有些 linux 系統的虛擬主機，對檔案或目錄名稱，甚至會區分英文字母大小寫字體。
建議：為了有效避免發生這個情況，建議您所有網頁或圖檔命名，全部使用英文小寫或數字做為檔案名稱。
註解：如果一定非使用中文檔名或路徑不可，建議去找 windows 主機試試。
注意：不管是使用那種主機，網頁命名應把握以下三點：
01.一律以英文小寫命名(包括路徑、圖檔、程式等)。
02.檔案命名中間或最後都不可有空格，會被視同非英文小寫檔名。
03.檔案名稱之間也不可有標點符號或任何其他非數字符號。

伍、重複使用置中標籤與屬性：
在修改別人網頁或指導學生作品中，經常看到重複使用置中標籤： <center>置中</center> 或 Align=center 屬性。
問題：重複使用置中標籤與屬性不會影響網頁排版，但在以後的維護與修改網頁時，會有點麻煩。
結果：檔案變的比較大些，修改時很浪費時間，原始碼看起來不夠清爽。
建議：表格中已有 <td align="center"> 用來使資料置中功能，您就不要重覆使用以下籤與屬性。
<center>置中</center> 或 <P align="center">置中</P> 或 <div align="center">置中</div> 來重複包覆。

陸、未指定圖檔寬度與高度：
圖檔最簡單的標籤寫法就是：<Img Src="檔案名稱.副檔名">，其實這樣就能顯示圖片了，看起來非常簡單。
問題：如果未於圖檔標籤內加入圖片寬度 (Width="Pixel") 與高度 (Height="Pixel") 時，會產生下面這個問題。
結果：訪客一進入該網頁時，瀏覽器不會將圖檔預先定位好，藉時您會發現圖檔重新排列所產生的推擠現象(參考註解)。
建議：建議在每個圖檔標籤內，加上寬度 (Width="Pixel") 與高度 (Height="Pixel") 屬性，甚至 Alt="代替圖示文字"。
註解：由於現在的連線速度很快，您可能無法立即查覺，如果您這頁的圖檔很大或很多，就會很明顯看出來這個問題。

柒、網頁使用 Mailto 內設郵件標籤：
保證半年之內，您設定的這個信箱會有接不完的廣告信出現，而且會越接越多，直到您放棄不用。
如果您用的是免費信箱，大不了再換一個；如果是您花前買的或是很重要的信箱，痛苦指數 100 %。
問題：這是不肖人士運用專門蒐集信箱 (@) 的蜘蛛程式，24 小時在指定區域不斷找尋出來的。
結果：當您的電子信箱被網路蟑螂抓走後，您只能生氣、抱怨、抗議、反擊或放棄這個信箱了。
建議：請參考本站電子報 - HTML 進階網路運用 - 第一篇如何保護信箱不遭受廣告信侵擾(參考網址)。
網址： Go 。

捌、濫用禁止右鍵或複製功能：
很多人喜歡將網頁設定禁止右鍵或複製功能，有的還使用加密功能，深怕他的原始碼或照片被人偷走。
諸不知任何禁止右鍵或複製功能，及亂碼加密，都不可能防止網頁被複製或擷取，那何不大方一點呢。
問題：網站就是要提供資訊給大家使用，禁止右鍵或複製功能，造成來訪的使用者非常不方便。
結果：訪客會抱怨，下次就不來您家了，做這些禁止右鍵或複製功能的事，您認為值得嗎。
建議：如果您發現有甚麼新功能或好技巧，不如就大大方方的告訴訪客，歡迎擷取使用。

玖、開啟過多的新視窗：
標籤最神奇的功能之一，就是可以這一頁連到那一頁，網網相連到天涯，這就是超鍊結 (Hyper Link) 標籤。
除此之外，他還能指定位置 (Target=name)，開啟新視窗 (Target=_New) 或，開啟更多新視窗 (Target=_Blank)。
問題：如果您未能妥善運用這個標籤屬性，任何連結都採開啟新的視窗以供瀏覽，看起來很簡單、很方便。
結果：您會讓訪客有關不完的新視窗，這就失去超鍊結 (Hyper Link) 標籤的真正用意了。
建議：如果您不喜歡使用退回或指定連結標籤，建議您可以採用分割視窗來處理過多的網頁問題。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。