L2 :: 網頁結構 Header、Main 及 Footer

由今年(2018)開始,Mentor Jesse會每星期五教一課,但不一定是HTML,可以是CSS、JS、PHP或DATABASE。

上一篇就教了大家認識基本的HTML,今次會教大家將一個網頁優化HTML的結構,習慣由最初生成係好重要。

先再看看上一篇寫了的HTML基本編碼:

index.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.     <h1>Hello HTML!</h1>
  9.     <p>I am learning the HTML now!</p>
  10.   </body>
  11. </html>

上一篇中大家都抄了以上的HTML碼到自己的index.html裡,在這裡我再作一點點的補充。

  • charset="UTF-8" />

在英國及美國網站裡,他們甚至可以不用加設這一句碼在 head 內,但如果要在一個網站內顯示英文以外的字元, charset 這個屬性就要設成 UTF-8 (萬國碼)。

Step 1. 新增 <header>

一個網站就是指每一頁都會有著相同的 <header><footer>,可以給瀏覽者一個統一又齊整的感覺;同時間,Google的小蜘蛛亦會從你的網站結構給你打分數,看看這個是否一個良好的網站。所以在一個好的網站的角度來說,結構也是十分重要的。

現在我們就於<body>的下方加入以下的HTML碼:

  1. <header>
  2.   <h1>KUROSU'S Web Tutorial</h1>
  3. </header>

加了後你到瀏覽器查看時會發現跟之前的無異,因為 <header>其實也是一個普通的透明框框,如果你想變得更有特色就要學會CSS了。

原本已經存在的<h1>Home Page</h1>可以移除。原因是每一個網頁只有一個<h1>會使搜尋器更清晰知道這一頁的主題是甚麼。

Step 2. 新增<main>

<header>完結後的下方加入以下的HTML碼:

  1. <main>
  2.   <p>Hello! 這是我的網站主頁,歡迎你們到來!</p>
  3. </main>

以前會用<div id="main">去標籤中間的內容,但自從HTML5面世後就不用再那麼麻煩。但習慣真係很可怕,因為我用了<div id="wrapper">快超過八年。

Step 3. 新增<footer>

最後就是為網頁加上footer,於main下方加入以下的HTML碼:

  1. <footer>
  2.   <div>2018 © KUROSUS'S.HK 版權所有</div>
  3. </footer>

在以上的HTML碼中,你看見到一個很特別的符號,其實可以透過這類的編碼加入自己所需要的特殊符號,以下有三個常見的符號:

© &copy; Copyright符號
&trade; Trade Mark符號
® &reg; 商標符號


整體預覽全新的HTML結構

綜合一遍本篇所寫的東西,將<header><main><footer>加到原本的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.     </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>

現在,我們已經有一個算是有頭有身有腳的框架存在了,下一篇將會教大家建立多個頁面後再加上Menu(目錄)以及Hyperlink(連結)。

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