【本文章為「Head First深入淺出HTML、CSS與XHTML」的學習心得。若有侵犯或不妥之處請告知。】

#2_〖認識 HTML 中的 HT(hypertext) 〗

主要學習內容：

1.  <a> 元素；
2. 了解屬性；
3. 要很好地組織網站就不能把所有的網站文件放在一個文件夾中，那麼，你可以做些什麼改進呢？

 

1. <a>元素

<a> 標籤定義為「超連結」。

<a> 元素中的內容在網頁中是可以點擊的。

<a href=”elixir.html”>elixirs</a>

 

練習一：使用 <a> 元素，為 elixirs 加入一個超連結至 elixir 頁面，為 detailed directions 加入一個超連結至 directions 頁面。

 

瀏覽器顯示結果：

 

2. 了解屬性

屬性用來指定元素的附加訊息。

例如：

<a href=”irule.html”>，href 屬性告訴我們超文本連結的目的地。

<img src=”sweetphoto.gif”>，src 屬性指定 img 標記顯示的圖片文件名。

統一寫法：

「屬性名」＋「等號」＋「用雙引號括起來的屬性質」，如：<a href=”top10.html”>Great Movies</a>。

 

3. 組織

依照網站架構圖來分類文本到各資料夾。

原本：所有的文本皆放置同一個資料夾。

 

依照目前的網站架構分類，及所有圖片放置一個資料夾。（為了以後強大的網站架構，從小我們就要養成分類的習慣，以免以後問題一堆～）

 

如果你在寫過程式碼之後，才重新組織所有的文本，將會出現下面的狀況：（問題來了～）

 

出現兩個問題：

1. 原本應該出現的圖不見了，取而代之的是損壞的圖示。
2. 兩個連結也無法準確地連到目的地頁面。

我們要告訴瀏覽器這些文本頁面的新位置，這樣，才能順利地連結到目的地頁面。

 

1. 解決「路徑」問題

先確認「路徑」，也就是文本頁面擺放的地方，用「 / 」分隔路徑的各個部分，如：beverages/elixir.html。

所以，當我把 elixir.html 的文本放到「beverages」資料夾底下，新的路徑應該是：<a href=”beverages/elixir.html”>elixirs</a>。另一個 detailed directions 的新路徑應該為：<a href=”about/directions.html”>detailed directions</a>。

接者，在 directions 及 elixir 文本裡，加入 Back to the Lounge 的連結，使其可以回到 lounge 頁面。

 

由於我已經根據網站架構組織了所有文件，整個 lounge 有了「父」與「子」的階層概念，當我要回到上一層的資料夾時，路徑的寫法與前面的寫法有些許不同，用「 .. 」來回溯上一層。

<a href=”../lounge.html”>Back to the Lounge</a>。

 

以此類推，當我想要回到上上一層的話，路徑應該是長這樣：../../index.html。最多回推到「根目錄」（也就是最上一層）。

 

2. 解決「圖片顯示」問題

一樣，「路徑」問題。Lounge.html 的圖片原本路徑為<img src=”drinks.gif”>，但我把所有的圖片放到「 images 」的資料夾裡，所以路徑更改為：<img src=”images/drinks.gif”>。

更改 elixir.html 的圖片路徑，注意路徑走法：

(1) 先回到上層 lounge 資料夾：「 .. 」；

(2) 再往下曾到 images 資料夾：「 /images 」；

(3) 找到圖片，「 /red.jpg 」。

 

所以，路徑應該為：<img src=”../images/red.jpg”>。

 

查看練習結果：

 

結論：

1. 需要從一個網頁連接到另一個網頁時，使用 <a> 元素。（也可以是同一網頁）
2. <a> 元素中的 href 屬性說明連結的目的地。
3. 連結的路徑等於「起點」跟「終點」之間的路徑。
4. 「 .. 」表示上一層（就是父目錄）。
5. 「 / 」分隔各個路徑。
6. 最好在一開始就組織好網站架構，這樣才不用修改一堆路徑。

 

【本文章為「Head First深入淺出HTML、CSS與XHTML」的學習心得。若有侵犯或不妥之處請告知。】