L3 :: 建造目錄及多頁連結

上一篇教了大家有個基本結構的網頁,而網站就是多過一頁而構成的東西,好比喻為一頁紙與一份報告。今次我就教大家如何製造一個目錄(MENU)出來。

首先將上一篇的網頁從 ATOM 裡打開,如果你沒有動過裡頭的內容就應該會如下列一樣:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>KUROSU'S Web Tutorial</title>
  6.   </head>
  7.   <body>
  8.     <header>
  9.       <h1>KUROSU'S Web Tutorial</h1>
  10.     </header>
  11.     <main>
  12.       <p>Hello! 這是我的網站主頁,歡迎你們到來!</p>
  13.     </main>
  14.     <footer>
  15.       <div>2018 &copy; KUROSUS'S.HK 版權所有</div>
  16.     </footer>
  17.   </body>
  18. </html>

記得到網址列打:localhost/web/index.html

顯示結果:

溫故知新

還記得 L1 最後部份的貼士嗎?要由第一天就要養成的良好習慣。

  1. /web/ - Project資料夾
  2. /images/ - 放置圖片的資料夾
  3. /css/ - 放置CSS的資料夾
  4. /js/ - 放置JS的資料夾
  5. └ index.html

現在我會於web資料夾內再增加兩個頁面,如下圖所示,放在與index.html同一層的位置。

竟然有了新頁,我們就要將它們連在一起了,但應該怎麼做呢?在開始之前,我們先在index.html裡增添新元素,那就是錄目(Menu)。

<ul><li>的應用

之前我都介紹了 Unorder List 的用途,今日就再進一步學習怎應用,但方間還有很多方法可以使用,而這款只是其中一種。我們現在先在 <header>內著手,於<h1>的下方加入以下的編碼:

  1. <header>
  2.   <h1>KUROSU'S Web Tutorial</h1>
  3.   <ul>
  4.     <li>主頁</li>
  5.     <li>自我介紹</li>
  6.     <li>聯絡本人</li>
  7.   </u1>
  8. </header>

顯示結果:

但大家都明白,現在只是加了幾個字上去,這樣是去不到其他頁面的。接下來應該怎麼做?

使用<a>製作超連結

為了可以使頁面跟頁面有溝通,使用超連結(Hyperlink)是必須的,其實原理很簡單,只要以 <a> 前後包住要連結的文字或圖片就可以了,但當然目標對象是存在,不然最後變了死link就沒意思了。

  1. <header>
  2.   <h1>KUROSU'S Web Tutorial</h1>
  3.   <ul>
  4.     <li><a href="index.html">主頁</a></li>
  5.     <li><a href="about.html">自我介紹</a></li>
  6.     <li><a href="contact.html">聯絡本人</a></li>
  7.   </u1>
  8. </header>

在加了 <a> 後,重新載入面頁會看到甚麼?

顯示結果:

雖然我們建立了兩個新頁面,但別忘記裡頭先空空如也,所以記得將相同的 <header><footer> 也加到入新頁面內。

about.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>KUROSU'S Web Tutorial</title>
  6.   </head>
  7.   <body>
  8.     <header>
  9.       <h1>KUROSU'S Web Tutorial</h1>
  10.       <ul>
  11.         <li><a href="index.html">主頁</a></li>
  12.         <li><a href="about.html">自我介紹</a></li>
  13.         <li><a href="contact.html">聯絡本人</a></li>
  14.       </u1>
  15.     </header>
  16.     <main>
  17.       <p>這是關於我本人的介紹頁。</p>
  18.       <p>大家好,我很喜歡寫網頁!</p>
  19.     </main>
  20.     <footer>
  21.       <div>2018 &copy; KUROSUS'S.HK 版權所有</div>
  22.     </footer>
  23.   </body>
  24. </html>


contact.html

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>KUROSU'S Web Tutorial</title>
  6.   </head>
  7.   <body>
  8.     <header>
  9.       <h1>KUROSU'S Web Tutorial</h1>
  10.       <ul>
  11.         <li><a href="index.html">主頁</a></li>
  12.         <li><a href="about.html">自我介紹</a></li>
  13.         <li><a href="contact.html">聯絡本人</a></li>
  14.       </u1>
  15.     </header>
  16.     <main>
  17.       <p>這是關於我的聯絡方法!</p>
  18.       <p>Facebook 或者 Email 我吧!</p>
  19.     </main>
  20.     <footer>
  21.       <div>2018 &copy; KUROSUS'S.HK 版權所有</div>
  22.     </footer>
  23.   </body>
  24. </html>

將頁面內容建立後,現在我們就可以在三頁中自由穿梭!但大家也許很快就留意到,在 contact.html 中,Facebook及Email這兩個字應該是可以連結到其他地方才是。

對!剛剛我們做的是內部連結,接下來會教大家如何做外部連結、電郵連結、電話連結。

外部連結

  1. <a href="https://www.facebook.com/kurosus.hk" target="_blank">Facebook</a>


Attribute (屬性) Value (值)
href 如果要去外部連結時就記得要加上 http:// 或 https://
否則網頁會連去不存在的位置。
target 這個是決定網頁會否離開現在的面頁內容,如果不設定這個屬性,預設都會是按現在的位置進行跳頁。
反觀加了 _blank 就會開新頁進入外部網頁。
  • _self - 同一個視窗內跳頁,等同預設
  • _blank - 開啟一個新頁面進入連結


電郵連結

  1. <a href="mailto:design@kurosus.hk">Email</a>


Attribute (屬性) Value (值)
href 於最開端使用 mailto: 再加上 example@domain.com 就可以了


電話連結

  1. <a href="tel:+852-2180-0000">Call我</a>


Attribute (屬性) Value (值)
href 與電郵連結的設定相似,於最開端使用 tel: 再加上電話號碼就可以了


今次就簡單介紹目錄及連結功能,下一篇會開始介紹 HTML 的好朋友之一 CSS,教你開始美化你的網站。

如果你睇完有疑問,可以去Facebook專頁Inbox我或者Send Email比我都可以架!