用一分鐘製作自己的第一個網頁:
下面我們來試著做一個簡單的網頁,希望您能跟著我們操作,這只會花費您一分鐘時間。現在您也許不知道那些尖括號「」和裡面的字母究竟是些什麼東西,別擔心,我們會在後面的教程中向您介紹。
首先請執行記事本,或在任意位置新建一個文字文檔,在記事本內輸入如下內容:
以下為引用的內容:
我是這個網頁的標題
這是我的第一個網頁。
輸入完畢後將檔案儲存,命名為「index.html」。 (點選「檔案」—>「另存為」。在「檔案名稱」一欄填入「index.html」,在「儲存類型」一欄選擇"所有檔案",然後點選「儲存按鈕」)
儲存之後,雙擊該文件,瀏覽器就會自動開啟這個網頁了。請確認你的網頁是否與該頁面相同,如果相同,那麼你就成功地完成了自己的第一個比較簡陋的網頁。
請注意,這只是一個簡單的頁面,雖然它在語法上符合XHTML的標準,但是如果要作為一個完整的、符合W3C標準的XHTML網頁,它還缺少一些內容。相關內容將在後面的教學中介紹。這個網頁只是用來講解一些基礎的XHTML知識。
基礎知識解說
我們剛剛製作的網頁以
開頭,以結尾,它們分別代表網頁檔案的開始和結束。
英文中head是頭的意思,body是身體的意思。網頁的
和
兩部分就分別代表了網頁的「頭」和「身子」。也許你注意到了,我們網頁的「頭」裡面「有一個
。title一詞是標題的意思,網頁的標題(title)將會顯示在瀏覽器上方的標題列中。而網頁的身子,也就是與
標籤中間的內容將作為正文被顯示在瀏覽器中。
這個網頁很單薄,head和body沒有什麼內容。我們會在往後的教學中逐漸豐富網頁的內容。但現在請您記住一個概念:網頁的頭(head)是為瀏覽器寫的,它將不會顯示在頁面上,而身子(body)是為網站的用戶寫的,是瀏覽器將要顯示的內容。
菜鳥惡搞XHTML之錯誤範例
打開下面這兩個錯誤範例看看。它們的程式碼都有十分嚴重的錯誤,但是瀏覽器卻會準確無誤地顯示這兩個網頁。
例1-身子長在腦袋裡
我是這個網頁的標題
這是我的第一個網頁。
看看上面這個網頁,
和之間的內容正常的顯示在頁面上了。但這是滑稽的錯誤,把身體放在腦袋裡了。
例二-頭長在脖子下
我是這個網頁的標題我是這個網頁的標題我是這個網頁的標題這是我的第一個網頁。
瀏覽器的適應能力實在是令人佩服,即使你將腦袋放在身子裡它也認得出來。看看標題欄,標題完全正常顯示。
好了,在實際應用的時候請不要犯上面這種低級錯誤。這會造成嚴重的後果:搜尋引擎可能不會收錄你的網站;使用手機或其他行動裝置瀏覽你網站的朋友可能遇到未知錯誤。下面就趕快讓我們來進入XHTML的核心內容吧。