網頁設計第4課:製作自己的第一個網站
有了從前面幾課的基礎,現在只需再花幾分鐘時間,你就能學會如何製作自己的第一個網站了。
如何做呢?
通過第一課,我們知道製作一個網頁需要有瀏覽器和記事本程序(或者類似的文本編輯器)。既然你現在已經在用瀏覽器閱讀本教程了,那麼請再打開一個窗口——這樣你就可以一邊閱讀本教程,一邊欣賞你的新網頁了。
另外,請打開記事本程序(Notepad):依次選擇“開始菜單→程序→附件→記事本”即可。
現在一切就緒了!
然後呢?
我們先從簡單的做起吧。先試著做一個顯示如下內容的網頁:“哇!這是我的第一個網站。”繼續學習,就你就知道這是多麼容易了。
HTML簡單易學。瀏覽器讀HTML就跟你讀書一樣,也是從上往下,從左到右進行的。所以,Web DesignHTML文檔的開始和結束便對應於網頁的頭和尾。
你首先要做的是告訴瀏覽器,你們將採用HTML語言來“對話”。這是通過<html>標籤來實現的(這是容易理解的)。所以,在做所有其他事之前,先在記事本的第一行敲入“<html>”。
也許你記得前面課程中我們說過,這裡的<html>是首標籤,在網站設計HTML文檔結尾處必須有相應的尾標籤與之對應。好的,為了防止最後忘記寫這個尾標籤,我們現在就輸入“</html>”,然後在<html>和</html>之間留些空行,用於書寫其餘代碼。
下面,我們需要為HTML文檔寫一個“頭部(head)”,它提供關於當前文檔的信息;然後寫一個“主體(body)”,它提供文檔的內容。HTML最重要的就是簡單——在這裡,我們只需把頭部(<head>和</head>)放到主體(<body>和< /body>)的前面就行了。
如下所示:</html> <head> </head> <body> </body></html>
注意我們是如何用換行(用Enter鍵)與縮進(用Tab鍵)令代碼具有層次感的。理論上,你如何書寫HTML文檔,這無關緊要。但為了便於閱讀代碼,和保持良好的概貌,我們強烈建議你採用換行與縮進來層次化HTML代碼,就像上面的例子一樣。
上面這個文檔便構成了你的第一個網站——它只包含一個網頁,而且內容很單調,可能與你的想像相去甚遠,但在一定程度上它仍是一個網站。你可以將它用作其他HTML文檔的基本模版。
不錯不錯,但我如何添加更多內容?
前面我們學到過,網頁寄存HTML文檔有兩個部分:頭部(head)和主體(body)。你在頭部(head)提供關於網頁的信息,你在主體(body)部分提供網頁的具體內容。
比如,如果你要指定HTML文檔的網頁標題(title)(它將顯示在瀏覽器窗口頂部),你就要在頭部(head)提供有關信息。用title元素來指定網頁標題:即在首標籤<title>與尾標籤</title>之間寫上網頁標題:
<title>我的第一個網站</title>
注意,網頁標題(title)不是顯示在網頁裡,而是顯示在瀏覽器窗口的標題欄上的。網頁裡顯示的所有內容都必須放在body元素裡。
比如,我們要在網頁裡顯示“哇!這是我的第一個網站。”這行文字,它屬於主體(body)部分,所以我們在body元素裡輸入:
<p>哇!這是我的第一個網站。</p>
標籤<p>裡的p是“段落(paragraph)”的意思,也就是一個文本段落。
現在,你的HTML文檔應該是這樣:
</html>
<head>
<title>我的第一個網站</title>
</head>
<body>
<p>哇!這是我的第一個網站。</p>
</body>
</html>
搞定! 你已經完成了自己第一個真正的網站(儘管它只包含一個網頁)!
接著,你需要將它保存到你的硬盤上,然後在瀏覽器中打開它:
在記事本的“文件”菜單下選擇“另存為...”。
這時會彈出一個對話框,在“保存類型”右邊的下拉菜單裡選擇“所有文件”。這一點很重要——否則,它將被保存為文本文檔,而不是HTML文檔。
現在將這個文檔保存為“page1.htm”(後綴名“htm”表明它是一個HTML文檔。後綴名用“html”也可以,但我比較習慣使用“htm”,你可以根據自己的喜好選用二者中的任一個)。將HTML文檔保存在硬盤上的哪個文件夾無關緊要——只要你記得保存位置,並能再次找到它就行。
現在打開瀏覽器:
在“文件”菜單下選擇“打開”。
在彈出的對話框中點擊“瀏覽”按鈕。
現在,請找到你的HTML文檔,然後點擊“打開”。
這時,瀏覽器中應顯示“哇!這是我的第一個網站。”。恭喜!
如果你迫切希望自己的傑作能被全世界看到,你可以先去第14課學習一下如何把自己的網頁上傳到因特網(Internet)上。如果你不著急的話,那麼請繼續往下學習。樂趣才剛剛開始。
留言列表
