Head First深入淺出HTML、CSS與XHTML_學習筆記#2

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

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

主要學習內容:

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

 

1. <a>元素

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

<a> 元素最重要的屬性是「href」,它用來指定連結的目的地。

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

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

 

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

原始程式碼:
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

加入 <a> 元素:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

瀏覽器顯示結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

2. 了解屬性

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

例如:

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

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

統一寫法:

「屬性名」+「等號」+「用雙引號括起來的屬性質」,如:<a href="top10.html">Great Movies</a>。

 

3. 組織

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

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

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

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

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

如果你在寫過程式碼之後,才重新組織所有的文本,將會出現下面的狀況:(問題來了~)

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

出現兩個問題:

  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">。

 

查看練習結果:

Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML
Head First深入淺出HTML、CSS與XHTML

 

結論:

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

 

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

You may also like

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *