網頁製作 網頁製作

網站規劃與設計上課補充教材

網站規劃與設計 > 課程內容 > 第 01 堂課 - 製作第一組簡單網頁

第 01 堂課 - 製作第一組簡單網頁

整個瀏覽器就是一個網頁,這個瀏覽器的可視範圍被稱為 body。而在瀏覽器的不是網頁呈現的位置,會有相關的表頭資料,或者是關於網頁的內涵, 那就是在網頁中的 head 項目,這些都需要先了解,才能夠製作出第一個可以用的網頁。 本堂課會介紹如何登入伺服器去設計你的網頁,直接做線上編輯,同時理解 html 裡面的標記 (tag) 功能,當然,單一網頁的版面編排也是很重要的。 最終,連結怎麼處理,也是需要理解的項目。
  • 1.1: HTML 網頁的基本結構
  • 1.2: 編寫網頁的重要注意事項
  • 1.3: HTML 基礎標記使用
  • 1.4: 首頁與首頁檔名、區塊與非區塊標記
  • 1.5: 課後練習

1.1: HTML 網頁的基本結構

所謂的網頁,一般來說,就是指瀏覽器可以解析的檔案之意。常見的瀏覽器可以解析的檔案類型有:

  • HTML 網頁檔 (副檔名通常為 .html)
  • 純文字檔 (副檔名通常為 .txt)
  • 可攜式文件格式 (副檔名通常為 .pdf)
  • 圖片格式檔案 (副檔名通常為 .jpg, .png, .gif 等)
  • 影像格式檔案 (副檔名通常為 .mp4, .ogg 等,最好支援 H264 格式較佳)
  • 聲音格式檔案 (副檔名通常為 .mp3, .ogg, .wav, .webm 等)
  • PS. 除了 html 文字檔案之外,其餘的檔案當中,大多是獨立的存在。

除了上述的副檔名之外,其餘的檔案格式通常不被瀏覽器所理解與解析,因此當瀏覽器接觸到無法解析的檔案類型時,就會以類似『下載』的模式,提供使用者下載該檔案了。 因此網頁伺服器通常也可以作為檔案伺服器的下載之用。

html 格式檔案,可以透過一些所謂的『標記 (tag)』來將多媒體檔案嵌入到瀏覽器的畫面中, 你可以將 html 檔案想成是一個空白的畫布,而文字、色彩、影片、圖片等多媒體,則是可以放置在這個畫布上面的染料,而這些染料如何在畫布上面呈現, 那就得透過 html 的標記以及 CSS 的樣式表元素了。

換句話說,當你要製作網頁時,就得要先將這些需要的染料 (圖片、影片、文字等等媒體資料) 先準備好,然後再透過 HTML 的標記或 CSS 的元素, 將這些元件放置到你想要讓它出現在網頁的位置上,並改變或加上某些特效,這就是整個網頁囉。

  • A. 由瀏覽器看網頁-分辨 head 與 body 的差異

因為網頁都是由瀏覽器來呈現的,因此,我們先由觀察瀏覽器如何呈現網頁來理解,當你要製作設計一個網頁時,應該要注意哪些項目。 先以本網頁的首頁為例,參考一下瀏覽器的呈現如下示意圖:

瀏覽器觀察網頁示意圖

你會發現到,瀏覽器主要分為 (1)上半部的功能畫面與 (2)實際可以看到的網頁部份。而在上半部你可以發現到頁面標籤會出現『網站規劃與設計』的項目, 至於下半部則是實際網頁作者想要讓大家查閱的部份了。讀者們應該會注意到,我們繁體中文不是有所謂的文字編碼的問題嘛?中文編碼主要有大五碼 (Big5) 以及萬國碼 (unicode),這一頁主要是用什麼編碼格式呢?以 firefox 為例,我們就來瞧一瞧:

瀏覽器觀察網頁示意圖

結果就會看到這個網頁的預設編碼為萬國碼。要注意喔,這個是網頁設計者自行宣告的~而這個宣告並不會出現在網頁內容中。

現在,再讓我們來瞧一瞧,這一個網頁的『原始碼』項目內容到底是怎樣?

瀏覽器觀察網頁示意圖

基本上,整個網頁一開始會宣告網頁的版本 (<!doctype html>),然後全部的內文都會被 <html> ... </html> 所涵蓋, 而在這裡面主要分為兩大區塊,一塊是頭部宣告 (<head> ... </head> ),一部分則是實際顯示於瀏覽器內部的身體區塊 (<body> ... </body>)。 整個網頁的項目可以變成這樣:

<!doctype html>
<html lang="zh-Hant-TW">
<head>
	這裡是一些宣告的部份,包括標籤頁抬頭宣告、語系編碼宣告、樣式表外部呼叫、腳本外部呼叫等
</head>
<body>
	這裡就是一大堆的內容!
	看你要呈現任何資料,都是貼在這裡!
	你也會發現這裡涵蓋一大堆標記 (<tag>) !這就是本站介紹的重點!
</body>
</html>
  • B. 一般網頁的製作方式

網頁製作通常會使用幾種方式來處理:

  • 客戶端單獨處理:客戶端電腦上面完成後,批次上傳到伺服器。例如透過所見即所得的軟體編輯、文字編輯器等方式。至於上傳方法,通常透過 FTP 等功能
  • 客戶端/伺服端同步處理:直接透過某些通訊協定,如網芳 (Samba)、FTP、SSH等方式,直接在客戶端以上述的軟體來編輯。此時無須上傳,因為編輯的就是 Server 上面的文件
  • 直接伺服器端處理:直接連線到 Server 去編輯網頁 (較難,需較高超的技術)。

本教材預計使用 notepad++ 來實做網頁,且搭配客戶端/伺服端同步處理的方式來處置。

例題 1.1.A:安裝 notepad++ 文書編輯器
  1. 下載與安裝:
    請由 google 找到 notepad++ 官網,並下載 32 位元版的 windows 版本安裝 (因為很多外掛只支援 32 位元版本), 同時使用安裝版,暫時不要使用免安裝版本 (安裝版本可以自動升級某些主元件)。同時請注意, 7.5 以後的版本會取消掉 FTP 的功能, 所以請務必下載 7.4.2 以前的版本,並且不要隨意升級到 7.5 以後的版本即可
  2. 語系設定:
    安裝完畢之後請啟動 notepad++,若語系挑選錯誤,請於功能表選擇『 Settings 』--> 『 Preferences 』 --> 挑選左側的『General』頁面 --> 『 Localization 』選擇『中文繁體』即可。
  3. 安裝/管理外掛:
    選擇『外掛』 --> 『 Pluggin Manager 』 --> 『 Show Pluggin Manager 』在出現的視窗中,預設的『 Available 』標籤底下, 找到『 NppFTP 』的項目,句選後,按下『 Install 』即可安裝 FTP 的外掛。若找不到該項目,很可能已經是安裝了,請點選『 Updates 』標籤, 看看能否升級 (update) 。再點選『Installed』看看安裝的外掛有哪些。

要使用客戶端/伺服端同步處理的方式時,使用者一定要取得伺服器端的操作權,亦即是你需要取得一組可以登入伺服器的帳號與密碼。 這組帳號與密碼需要使用整學期,因此請自行紀錄在自己的筆記上,不要忘記。

例題 1.1.B:登入系統取得認證帳密
  1. 抄寫下老師於白板上撰寫的伺服器『主機名稱』與你的帳號 (注意,伺服器的帳號通常為英數,且英文為小寫字元)
  2. 請使用 pietty (若找不到,請 google 下載) 依據老師的說明,登入系統。第一次登入系統時,帳號會被強迫重新修改密碼, 整個變更密碼的畫面有點像這樣:
    變更密碼示意圖
    • 看到 (current) 代表要輸入的是『舊密碼』,亦即是老師提供給你預設的密碼
    • 看到 New password: 代表『要猜一個新密碼,輸入一個新密碼』的意思,這個密碼長度需要超過 8 個字元,且含有英數,不可以太簡單, 也盡量不要包含自己的一些特徵號碼 (如身份證、手機、生日等等,盡量少用)
    • 看到 Retype new password: 代表你剛剛輸入的新密碼可以通過系統驗證,請再輸入一次即可。
    上述流程如果超過 3 次(猜三次新密碼都無法通過系統的驗證),那你就會被強迫踢出系統,請整個流程重新再來一次。
  3. 最終你就會取得 (1)伺服器主機名稱或 IP (2)使用者帳號 (3)使用者密碼

本教材提供了 FTP 協定,讓使用者可以登入系統,並可以直接以 notepad++ 來直接連上伺服器操作網頁設計。從例題 1.1.A 我們安裝了 notepad++ 的 NppFTP 外掛,這個外掛的小圖示會顯示在 notepad++ 的功能表上,你可以按下該圖示來使用這個外掛模組,如下圖所示:

notepad++的 FTP 外掛示意圖

當你按下畫面中的小齒輪之後,會出現兩個選項,分別是『 General settins (一般設定) 』以及『 Profile settings (用戶帳密設定) 』, 請選擇『 Profile settings 』來進入設定畫面。請記得你剛剛由伺服器取得的帳號與密碼相關資訊,準備來填寫設定值了。

notepad++的 FTP 外掛示意圖

一開始出現的 Profile settings 視窗會一片空白,按下『 Add new 』之後,會讓你輸入一個設定代表名稱,這個名稱隨便你指定沒關係! 如上圖,鳥哥就寫自己喜歡的網頁設定名稱。當然,你也可以輸入中文沒啥問題。按下『OK』之後,就會出現如下的畫面, 在該畫面就得要填寫正確的資訊!

notepad++的 FTP 外掛示意圖

幾個項目的設定需要注意:

  • Hostname: 老師提供給你的伺服器主機名稱(不能錯)
  • Connection type: 如上圖,共有四種方式,鳥哥的伺服器提供的是純 FTP 未加密方式,所以使用預設的 FTP。 如果你的上課環境所提供的連線協定不一樣,請詢問你的授課教師來改變這個設定值。
  • Port: 鳥哥使用 FTP 預設的 21 號埠口,同樣的,請詢問你的伺服器管理員,這裡的相關設定值。
  • Username: 就是你的帳號名稱
  • Password: 就是你剛剛建立/修改的新密碼。(請注意,如果你是在多人共用的主機上面做此設定,可以句選『Ask for password』項目, 這樣每次用這組設定登入時,才需要輸入密碼,而不是將密碼紀錄在設定檔中,可以避免密碼被盜用。)

最終設定完畢後,請按下『Close』即可。回到原本的 notepad++ 的視窗,會發現右邊的 NppFTP 多了一個可以點選的按鈕,好像是連線的小圖示, 按下它,就會出現剛剛設定時的項目名稱,如下圖所示,那就直接點選吧!如果一切順利,就會發現系統已經用你的帳號連上了伺服器!

notepad++的 FTP 外掛示意圖

若一切順利連上伺服器,你就可以準備開始製作網頁了!最終再來熟悉一下 notepad++ 的視窗頁面內容。

notepad++的 FTP 外掛示意圖
  • C. 以 Server/client 同步方式撰寫第一個網頁

假設你已經用 notepad++ 連線上伺服器,透過客戶端/伺服端同步的方法來設計網頁,此時你就可以開始編輯網頁了。 請先將滑鼠移動到 www 上面,然後按下『右鍵』在出現的項目中,選擇『Create new directory (建立新目錄)』。

notepad++的 FTP 外掛示意圖

上述圖示中,每個項目的意義為:

  • Create new directory: 建立新目錄
  • Create new file: 建立新檔案
  • Rename Directory: 修改檔名
  • Delete directory: 刪除目錄
  • Upload current file here: 將目前的檔案上傳到此目錄中
  • Upload other file here: 將其他檔案上傳到此目錄中
  • Refresh: 重新整理檔案畫面

在出現的畫面中,請填入 web1 這個檔名,按下『 OK 』後,你就會發現到 www 底下又多出一個 web1 的目錄小圖示了。 現在,請在 web1 這個目錄上,再次的新增一個檔案,檔名設定為 unit01-1-1.html,整個畫面如下所示:

第一個在 notepad 上面製作的網頁 --> 第一個在 notepad 上面製作的網頁

此時雙擊 unit01-1-1.html 兩下,該檔案就會被顯示在左側的編輯畫面裡頭了!接下來你就可以開始直接編輯該檔案! 每次新的檔案要撰寫時,你都應該要先加上這些資料:

  • 先在『編碼』功能列,選擇『編譯成 UTF-8 碼』,這點相當相當重要喔! 第一個在 notepad 上面製作的網頁
  • 第一行先撰寫 html 版本宣告 (<!doctype html>)
  • 加入 html, head, body 這三個成對標記

在 body 的部份,先寫入兩段文字,分別是『My first web page』跟『我的第一個網頁』,最後按下儲存小圖示, notepad++ 就會將檔案上傳道伺服器了。最終檔案內容會有點像這樣:

第一個在 notepad 上面製作的網頁
  • D. 以瀏覽器查閱上傳的網頁

在本教材所提供的伺服器上面,每個用戶都有自己的個人首頁。個人首頁的目錄務必放置到 www 目錄內!也就是說,所有不在 www 目錄內的資料, 瀏覽器通通無法瀏覽的。而在 www 目錄的內容,通通需要交給 http://servername/~yourid/ 來瀏覽。也就是說,檔案與網址的相關性是這樣的:

/www                       http://server/~yourid/
/www/web1                  http://server/~yourid/web1/
/www/web1/unit01-1-1.html  http://server/~yourid/web1/unit01-1-1.html

其中,server 是老師提供給你的伺服器主機名,yourid 則是帳號名稱。因此,請立刻以瀏覽器觀察這個網頁的顯示結果!(就是上面特殊字體的那一行字!) 執行結果會有點像底下的圖示:

第一個在 notepad 上面製作的網頁

你應該會發現幾個小問題:

  1. 網頁最上方的標籤頁,並沒有相關的標題內容
  2. 文字內明明是兩行,但是卻僅有一行將兩個中英文部份整合了,中間似乎有一個空格
例題 1.1.C:加入頁面標籤抬頭以及編碼特性
  1. 在 html 的項目內,加上 lang="zh-Hant-TW",宣告語言使用地區為台灣繁體中文區!
  2. 在 head 的項目加入 <title>...</title>,並且在 title 中間加入『我的第一個網頁』字樣
  3. 在 head 的項目內,加入 <meta charset='utf-8' /> ,宣告語系為 utf-8
  4. 在 head 的項目內,加入 <meta name="author" content="Your Name" /> ,宣告網頁作者
  5. 處理完畢之後,請到網頁刷新頁面,看看標題頁是否順利顯示出來了?
  • notepad++ 的自動字詞補齊功能

notepad++ 可以依據編輯的檔案副檔名來提供程式碼 (原始碼) 的檢驗之外,也可以提供字詞補齊的功能!例如當你輸入 title 時,可能輸入 ti 就會跑出 title 的提示視窗給你選擇相關的可用字詞。不過這需要做一點設定。你可以在功能列的『設定』裡面找到『使用者自訂』,點下之後會出現如下的視窗, 點選『字詞自動完成功能』,然後句選啟動 (建議可以取消數字的自動完成),未來在打字的時候,就可以從提示視窗裡面找到很多有用的字詞了!

第一個在 notepad 上面製作的網頁

底下則是故意重新編輯 unit01-1-1.html 的結果,重新在 < 後面加上 ti 看看會出現什麼!

第一個在 notepad 上面製作的網頁

1.2: 編寫網頁的重要注意事項

本教材使用 notepad++ 做網頁編輯,這個 notepad++ 主要是透過副檔名來分析文字內容的語法,因此你必須要使用伺服器能讀取的副檔名來編輯, 否則 notepad++ 的優勢就看不出來了。另外,要編輯網頁之前,許多重要的項目還是歸納一下比較好:

  • 網頁檔名請務必僅使用英文、數字、底線、減號的方式來建立,其他的符號與中文都不要使用!
  • 副檔名只能是 .html 或 .php,不要使用其他的副檔名來處理網頁檔案
  • 盡量取有意義的目錄或檔名,例如作業放在 homework 目錄、多媒體放在 images 目錄等等進行規劃
  • 在網頁中有很多的標記 <tag>,正常情況下,當你將游標放入 <tag> 內時,notepad++ 應該會有顏色變化的顯示, 若無顏色變化,請查閱是否忽略了成對標記或獨立標記結尾忘記加 / 了?
  • 編輯網頁時,連續的空格、[enter],最終都會被解析為單一一個空格而已。
  • 標記與標記的屬性名、屬性值請務必使用小寫英文,不要使用大寫(先養成好習慣)
  • 整體網站根目錄最好不要有太多網頁檔,網頁檔案請分門別類放置於不同的子目錄中
  • 成對標記與獨立標記

HTML 的標記格式基本上有兩種,一種是成對標記,在兩個標記內加入受影響的元件,例如

  • <title>標籤頁面抬頭</title> (受影響項目僅此內部文字)

即為成對標記,這種標記不可單獨存在~否則無法規範出受影響的元件範圍。另一種標記則是獨立標記,例如前一個例題 1.1.C 裡面的語系編碼設定,那個 <meta ...> 就是獨立標記,這種標記並沒有 </meta> 的設定,而為了方便我們做編輯,可以在這種標記的結尾加上斜線,亦即底下的樣式即可:

  • <meta ... />
  • HTML 標記內的屬性名 (attribute name) 與屬性值 (attribute value)

HTML 提供了很多的標記來達成許多的目的,例如 <title> 標記用來設定網頁標題抬頭,而 meta 可以用來指定語系編碼資訊等。不過,每種標記內部還有某些特別的屬性 (attribute) 可以利用~例如 meta 內加上的 charset 就是用來指定語系的『屬性名』,這個屬性名可以使用等號來提供屬性值,例如 charset="utf-8" 這樣的格式。 一般來說,等號兩邊不要加空格,等號右邊最好用雙引號 (或單引號) 來將屬性值包起來,例如:

  • <meta 屬性名="屬性值" />

每一個標記都有特別的屬性名,所有的屬性名不是可以互相亂混用的。舉例來說 charset 可以用在 <meta ..> 內,但是當然不可以用在 <title> 內!

  • 多重標記撰寫的巢狀標記方式

某些時刻我們會發現到標記內還有標記,例如段落標記裡面有加粗標記,此時的寫法應該是要如下才對:

  • <p><strong>被影響的文字</strong></p>

基本上,就是外層包內層的包餃子狀況,千萬不要寫成『<p><strong>被影響的文字</p></strong>』,這樣就變成互夾,看不出外層與內層! 在某些特別的處理上,可能會出現莫名的錯誤喔!千萬要注意!

  • body 內文的縮排

所有寫過程式的朋友大概都知道,撰寫程式時,相同的函式應該放置到同一個縮排的環境中,同樣的,撰寫網頁時,也建議您務必要使用縮排的方式來編寫, 這樣未來檢查起來會比較有效率 (當語法出錯時,這是個好習慣!)。同樣以本教材的網頁版為例,查看原始碼的結果有點像這樣:

瀏覽器觀察網頁示意圖

一開始就養成縮排的習慣,未來編寫網頁、進一步編寫網頁程式,都會有好處的!

例題 1.2.A:回答如下的問題:
  • 我要建立第一個網頁的檔名,上文說使用中文不好,因此想用『 my 1st web page 』字樣來說明。這個檔名可以怎麼取?
  • 有個標記的寫法是這樣:『 <   meta   charset=utf-8   > 』你覺得那邊有問題而需要修改?

1.3: HTML 基礎標記使用

先來處理一些常見的標記,先將常見的標記說明如下:

  • 文字排版的標記

製作文書經常需要標題、內文段落以及斷行的使用,HTML 針對這些功能的標記有:

  • 標題:使用 <h1> ... <h6> 作為從大到小的標題之用;
  • 段落:使用 <p>...</p> 作為一個段落之用;
  • 斷行:使用 <br /> 作為斷行之用,斷行只是類似按下 [enter] 的功能,所以為獨立標記
  • 字體加粗:使用 <strong>被加粗的文字內容</strong> 影響當中的文字
  • 文字變化:使用 <font>...</font> 來處理,其中 font 的屬性名有幾個:
    • face='字體',字體如 'Times New Roman', '細明體', '標楷體' 等等字體
    • color='顏色',顏色可以用文字如 red,或用色碼,如 #252525
    • size='大小',大小可以使用 1~6 的幅度,預設是 3 。
    • 注意,font 已經不被支援了,所以這些屬性名你稍微知道即可,未來不要用 font 喔!
例題 1.3.A:請以上述的各項標記,並利用 這個檔案 的內容,完成檔名為 /www/web1/unit01-3-1.html 的網頁,完成的內容應該要有點類似如下的畫面。
例題的完成示意圖

透過上面的練習,你會發現到幾件事情:

  • 透過 p 的段落標記,在這個段落的上、下方都會預留一行空白,以使段落清晰
  • 使用 h1...h6 也會與段落有相同的功能,上下方都會預留一行空白,此外,字體也會自動加粗

另外,你也會發現到許多事情很麻煩,就是 strong 可能經常需要與 font 搭配,而連 h1 裡面也需要使用 font 才夠更改字型。 這些都可以透過後幾堂課的 CSS 來處理掉,目前我們還是暫時用原始的 html 來處理,未來這些 strong, font 等等,都可以不要再使用了。

  • 清單項目

某些時刻我們可能會需要條列示的將一些資料彙整起來,此時就需要使用到清單與清單項目了。

  • 無須編號的清單:使用 <ul><li>項目資料</li></ul> 包起來,至於 ul 比較重要的屬性有:
    • type="disc|circle|square":預設顯示為實心圓形(disc),也可以修改成為空心圓(circle)或實心方塊(square)
  • 自動編號的清單:使用 <ol><li>項目資料</li></ol>,至於 ol 比較重要的屬性有:
    • type="1|A|a|i|I":使用數字、字母、羅馬符號做編號的功能
    • start="數字":從第幾號開始編號
  • 在 ul 或 ol 裡面,所有的文字、圖示或/和其他元件,都需要被 <li>...</li> 包起來才是正確的

例如,單純的項目清單不需要編號時,可以使用如下的原始碼來達成:

<ul>
        <li>第 1 個項目</li>
        <li>第 2 個項目</li>
        <li>第 3 個項目</li>
</ul>

可以看見所有的文字都會被 <li> 包起來才對。

例題 1.3.B:請以上述的各項標記,並利用 這個檔案 的內容,完成檔名為 /www/web1/unit01-3-2.html 的網頁,完成的內容應該要有點類似如下的畫面。
例題的完成示意圖

項目清單是很常使用的 HTML 標記,尤其是用在導覽列 (就是一般引導你前往某些頁面的按鈕列) 上面。因此,你一定要了解到項目清單的應用才行! 此外,你也會發現到:

  • 項目清單 (ul, ol) 整個區塊的上、下方會預留一行空白,以示區隔;
  • 清單開頭基本上都會往右縮排大約 10~30 個像素之間
  • 所有的資料通通要放在 li 與 /li 之間才行!
  • 清單項目的巢狀使用與圖片的嵌入方式

如果清單內還有清單時,應該要使用所謂的巢狀清單,這種清單格式需要特別注意結束點,以下列方式來處理:

<ul>
        <li>第 1 個項目
        <ul>
              <li>第 1 個項目內的第 1 個清單</li>
              <li>第 1 個項目內的第 2 個清單</li>
              <li>第 1 個項目內的第 3 個清單</li>
        </ul></li>
        <li>第 2 個項目</li>
        <li>第 3 個項目</li>
</ul>

要注意,第二個 ul 是被整個相對的 li 所包含的~不要將 </li> 放置到錯誤的地方了!這裡是最常見的錯誤喔! 再者,如果想要在頁面中加入圖片的話,就得要使用 img 這個標記了:

  • 嵌入圖片:使用 img 這個標記,裡面有幾個重要的屬性名:
    • src='圖檔位置':src 是 source 的意思,意思是這個圖檔的檔名 (或網址) 之意;
    • alt='圖片說名':當圖片檔案太大時,暫時出現的圖片解說
    • width="數字":要不要更改寬度的意思 (單位為像素)
    • height="數字":要不要更改高度的意思 (單位為像素)
    • align="top|bottom|middle|left|right":文繞圖的格式
    • border="數字":要不要有框線的意思
    • 基本上,只要有 src 與 alt 就好,其他的通通使用 CSS 來取代處理~不要用傳統的標記屬性名
例題 1.3.C:請以上述的各項標記,並利用 這個檔案 的內容搭配 這個圖檔,圖檔請不要修改檔名,並將圖檔放置在 /www/web1/images/ 目錄下。完成檔名為 /www/web1/unit01-3-3.html 的網頁,完成的內容應該要有點類似如下的畫面。(先將圖檔下載,再以拖曳的方式將圖檔放置到 images 目錄上, 才可以透過 notepad++ 上傳圖檔喔!)
例題的完成示意圖

基本上,在 li 裡面應該不要使用大區塊的標記,例如 p 之類的標記就盡量不要用。因此,若需要斷行,就得要使用 br 囉! 此外,還是請記得,獨立標記的使用上,結尾要加上 / 來結束喔,亦即 <img ... /> 的模樣!

  • 超連結的使用

1980 年代的 Internet 會火紅,是因為電子郵件的關係,而在之後,由於 Web 的發展,讓整個 Internet 更加火熱!那為什麼 Web 網頁會紅呢? 就是因為『你只需要點擊滑鼠,不需要鍵盤輸入』的關係,這樣就可以使用滑鼠在不同的頁面之間連來連去,甚至還可以連結到外部網站, 於是就將整個 Internet 的網頁串連起來了。這就是超連結!

  • 超連結:使用 a 標記,這個標記的屬性名有底下幾個比較重要的項目:
    • href='網址':href 後面接 URL 或者是檔名,當然,需要考慮絕對、相對路徑喔!
    • title='顯示在滑鼠上面的文字':就是滑鼠移動到超連結上,就會出現的文字
    • target="_blank|_parent|_self|_top|somename":連結到新頁面時,要使用哪個視窗開啟的意思。 一般不建議使用,但若要使用時,常用的是 _blank 喔。
例題 1.3.D:請使用 ul 清單項目,將上面的例題 1.3.A~1.3.C 最上方通通加上三個超連結,讓三個頁面可以直接按下超連結來顯示, 而不用持續在網址列輸入。因此得要重複編輯 unit01-3-1, unit01-3-2, unit01-3-3 這三個檔案的內容。完成的內容應該要有點類似如下的畫面。
例題的完成示意圖

要注意, a 是成對標記,而 <a ...>被顯示的文字</a> 這樣的語法,在 a 中間的,才會顯示到瀏覽器內。 a 裡面也不要包含太多資訊,通常是一小段文字、一張圖等等,當然不太可能是一整個段落~在使用上要留意才行!

1.4: 首頁與首頁檔名、區塊與非區塊標記

前面的範例當中,當我們編寫完網頁之後,要線上查看時,通常的網址列 (URL) 寫法為:

  • http://your.host.name/somedir/filename.html

這樣才能讓瀏覽器順利的瀏覽到正確的『網頁檔名』,進一步解析成為網頁。問題來了,你手動輸入網址時,例如 google 的網址, 通常輸入的是 https://www.google.com 而已,並沒有寫出目錄與檔名啊?這是怎麼回事?這是因為伺服器通常會提供一個『在目錄底下預設讀取的檔案檔名』, 這就是每個目錄都會有的首頁檔。

  • 入口首頁與首頁檔名的使用

以本教材上傳作業的網站來說,其主首頁位於 http://class.vbird.tw,亦即在該目錄下應該會有一個名為 index.html 或 index.php 的檔案, 因此當你瀏覽到該首頁目錄時,伺服器就會主動提供該檔案 (index.html or index.php) 給瀏覽器解析了。每種伺服器的首頁檔名可能都不太一樣, 本教材的首頁檔名可以是:

  1. 先找 index.php
  2. 再找 index.html
  3. 若兩者都沒有,就顯示找不到檔案

至於學生們的個人首頁/其實是位於 http://class.vbird.tw/~student_id/ 底下,這個首頁目錄就是位於你用 FTP 登入時的 /www/ 目錄下的資料! 所以你應該要在 /www 底下新增一個名為 index.html 的檔案才對,這樣才是你的個人首頁喔!

另外,每個目錄底下都可以擁有 index.html/index.php 的首頁檔,如此一來,當使用者瀏覽到該目錄時,就能夠直接看到首頁的內容, 而無須繼續手動輸入檔名了。

例題 1.4.A:請在 /www/web1/ 底下新增名為 index.html 的首頁檔案,這個首頁檔案內容中,請用 ul 規範兩個清單, 分別是您的大名與學號。之後在『上課連結』的段落後,再以 ul 或 ol 搭配 a 列出今天上課的所有內容連結。 當完成之後,讀者可以 http://your.host.name/~student_id/web1 的方式來瀏覽到該網頁, 完成的內容應該要有點類似如下的畫面:
例題的完成示意圖
  • 絕對路徑與相對路徑

我們在超連結 a 的標記說明當中,曾經提過一次檔名要以絕對路徑或相對路徑來取得。以我們目前完成的幾個檔案來說明,檔名如下:

/www/index.html			http://your.host.name/~student_id/
/www/web1/index.html		http://your.host.name/~student_id/web1/
/www/web1/unit01-1-1.html	http://your.host.name/~student_id/web1/unit01-1-1.html
/www/web1/unit01-3-1.html	http://your.host.name/~student_id/web1/unit01-3-1.html
/www/web1/unit01-3-2.html	http://your.host.name/~student_id/web1/unit01-3-2.html
/www/web1/unit01-3-3.html	http://your.host.name/~student_id/web1/unit01-3-3.html
/www/web1/images/dic.jpg	http://your.host.name/~student_id/web1/images/dic.jpg

在超連結的思考上面,你務必要使用右側的網址列來思考,不要使用左側的檔案結構來思考,雖然兩者差不多,但是 /www 代表的是 /~student_id/ , 這一點經常會讓大家誤解,而將某些網頁資料放置在 /images 底下,那就傷腦筋了!因為伺服器讀不到脫離 /www 之外的檔案!因此, 最好還是使用右側的 URL 網址來思考較佳。

當 unit01-3-2.html 要呼叫 dic.jpg 時,還記得我們是怎麼呼叫的嘛?

  • <img src='images/dic.jpg' ../>

因為 images 與 unit01-3-2.html 都在同一個目錄中,我們稱為同一層,因此可以直接呼叫!所謂的直接呼叫指的是檔名直接從檔名開始寫, 檔名前面沒有加上任何的特殊目錄名稱之故,這種方式就稱為相對路徑的寫法之一。而如果我們想要使用獨一無二的檔名,亦即是從網址列寫的檔名時, 可以寫成如下模樣來呼叫 dic.jpg 喔!

  • <img src='/~student_id/web1/images/dic.jpg' ../>

你會發現到檔名是由斜線 (/) 開始寫,這種檔名非常特別,因為這代表的是此伺服器上獨一無二的檔名,所以稱為絕對路徑檔名! 而且請注意,斜線稱為根目錄 (root directory),這個根代表伺服器的最頂層,亦即 / 代表的是 http://your.host.name/ 最結尾的那個斜線! 剛剛接觸網頁設計的朋友對於這一點很容易不清楚,所以要花點時間去理解一下。

另外,經常使用於檔名或 URL 撰寫的目錄還有底下這幾個:(範例為以 unit01-3-2.html 的角度來看)

  • /   :代表根目錄的意思,亦即整個網頁的最頂層
  • ./  :代表本目錄的意思,所以 images/dic.jpg 也能寫成 ./images/dic.jpg
  • ../ :代表上層目錄的意思,所以 images/dic.jpg 也能寫成 ../web1/images/dic.jpg
例題 1.4.B:請設計你的個人首頁,這個首頁需要有:
  • 頁面標籤抬頭寫『這是...的個人首頁』
  • 實際檔案編碼與網頁編碼宣告均用 utf-8
  • 內容第一個項目請使用 ul 搭配 li 寫下你的姓名與學號
  • 加上段落『底下為各階段網頁學習所建立的個別首頁』
  • 使用 ul 搭配 li 建立連結到 /www/web1/ 的超連結,連結的文字說明『純粹 HTML 練習過程』
同時在 /www/web1/index.html 這個檔案底下,在你的學號底下新增一個 li 項目,連結回剛剛建立的個人首頁, 且連結文字說明『回我的個人首頁』。完成的內容應該要有點類似如下的畫面:
例題的完成示意圖

了解相對路徑與絕對路徑的寫法是很重要的,未來談到一些程式處理時,就一定要使用絕對路徑來避免不同路徑情況下產生的問題! 這個部份我們未來再來談,這裡先知道怎麼用 .. 與 . 與 / 即可。

  • 區塊標記與非區塊標記

從上面談到的許多標記之後,我們也可以發現到,每種標記的影響範圍是不一樣的。舉例來說,段落標記的 p ,無論這一段文字有多長, 只要看到 p ,就會在這段文字上、下方各保留一行空白,而且,即使這個段落的文字不到 10 個字,因此不滿一行,右邊的空白範圍依舊是留白保留給 p 的, 這就是所謂的區塊標記 (block)。而另外 br, a, img, font, strong 等標記,則是僅影響內容文字而已,並不會讓整個橫的切面空間全部佔滿, 這種就是非區塊或者是內部元件區塊 (inline-block) 標記。

  • 區塊標記:會將整個橫切面的空間全部佔用 (即時沒有用到,整個橫切面都會被留白保留),常見的標記有:
    • 段落: p
    • 項目清單: ul, ol, li
    • 標題: h1~h6
  • 非區塊標記:只影響範圍內的文字或元件,並不會佔滿整個橫切面的空間,常見的標記有:
    • 文字: strong, font
    • 斷行: br
    • 圖示: img
    • 超連結: a

區塊標記與非區塊標記的使用差異相當大,未來在學到新的 HTML 標記或 CSS 元素時,記得要特別留意這些資料是否為區塊標記, 因為區塊標記還有留白 (margin 與 padding) 還有定位可以使用,非區塊標記就不能這麼亂玩了!要注意!要注意!

1.5: 課後練習

  1. (20%)完成今天所有的課堂上面的實做,並且依據課堂上所說的,全部的例題都需要在 index.html 加上超連結。
  2. (20%)項目清單的練習:使用 這個檔案 的內容來達成底下的需求:
    1. 檔名必須是 /www/web1/homeworks/ex01.5.2.html
    2. 中文編碼請用 utf-8,頁面標籤抬頭請用『unit01 的 1.5.2 作業』
    3. 必須要使用的標籤,包括 h1, p, ul, ol, li 及 font 等
    4. 請務必保持本教材提到的編輯網頁注意事項,包括縮排、成對標記的注意事項等等。
    5. 完成的圖示會有點像底下這樣:
      習題的完成示意圖
  3. (20%)超連結搭配圖示表示的的練習:假設你常去的網站有四個,分別是:
    • http://www.google.com
    • http://linux.vbird.org
    • http://tw.yahoo.com
    • http://dic.vbird.tw/webdesign
    請先進行素材的取得:
    1. 先到上述的四個網站去,無論是使用截圖或者是使用該網站的小圖示 (icon 或 logo),截圖大約為 100x30 像素的大小即可 (圖示大約是寬、高比為 100:30 即可,可以使用 width 調整寬度)
    2. 每個圖檔都不應該超過 100k 喔!小小的就可以!並且將該檔案取名為 ex01-5-3a.jpg, ex01-5-3b.jpg, ex01-5-3c.jpg, ex01-5-3d.jpg, 請先上傳到 server 的 /www/web1/images/ 底下
    接下來建立檔名 ex01.5.3.html 的檔案:
    • 裡面的 body 內部網頁說明先顯示『經常要去的網站』
    • 使用清單,每個清單裡面放置一個上面抓下來的圖,圖的寬度請指定為 100 像素,且加上 1 個像素的框 (border)
    • 對應的圖給予超連結,點選圖示就可以跑到下一個網站去
    • 當跑去下一個圖示時,請開啟名稱為 readme 的瀏覽器視窗名稱 (hint: target 的使用)
    最後完成的檔案有點像底下這樣:
    習題的完成示意圖
  4. (20%)超連結定位 (id 功能) 的同一頁面書籤設計:使用 這個檔案 的內容來達成底下的需求:
    1. 檔名就取為 /www/web1/homeworks/ex01.5.4.html
    2. 在網頁的最上方建立一個名為 top 的錨點 (id="top")
    3. 在每個 h1 的標籤上方,根據位置,給予 a1, a3, a3 這三個錨點 (共有 3 站)
    4. 每個『點我回去 Top』的項目變成超連結,點了會回到最上方的錨點
    5. 『按我去到第 1 站』超連結到 a1 錨點,依此類推
    最後完成的圖示會有點像這樣:
    習題的完成示意圖
  5. (20%)在 /www/web1/index.html 最底下新增一個『Home Works』的 h1 標記,底下使用 ul 增加上面三個頁面的連結, 同時,上述三個頁面的連結最上方要多一個 p 的段落,內容就是『回首頁』,會回到 /www/web1/ 當中。完成的圖示有點像這樣:
    習題的完成示意圖