2017年1月25日 星期三

HTML筆記5:背景圖(Background)與超連結(Link)

介紹完插入圖片之後，接著就來介紹如何設置背景圖(Background)以及引導流量必備的超連結(Link)，設置背景圖與插入圖片一樣簡單，是屬於<body>的屬性，只需在<body>標示內加上background並標明圖片路徑即可。再來就是超連結了，為什麼要特別講"引導流量"呢?當如果網站上的資訊越來越繁雜時，不可能一個頁面上講滿了許多主題內容，網站資訊優化的同時也可以應用超連結來引導瀏覽者到所要主題的網頁去瀏覽，甚至在商業營運下，如何運用超連結來讓瀏覽者去瀏覽這些廣告，這都是特別需要考量的應用。








 那麼，我們就先來介紹背景圖(Background)的部分，其實這個設置再簡單不過了，直接看例子吧!隨便在網路上找個免費背景圖來說明，圖片點我。

 例如:設置背景圖(Background)

 <html>

   <head>
<title>筆記5:背景圖與超連結</title>
  </head>

   <body background="background.jpg">  <!--將圖檔名改成了background-->
        
  </body>
  

 </html>

 結果:


可以發現，儘管圖片大小是小於螢幕解析度，但會自動用連續貼圖的方式將整個頁面填滿。

 接著就是超連結(Link)了，超連結的標示為<a></a>，是屬於雙標示(Double Tag)，用"href"屬性來連結網址，可以在雙標示內打上文字或貼上圖片，即把文字或圖片作為超連結。

 例如:超連結(Link)到Google搜尋平台

 <html>

   <head>
<title>筆記5:背景圖與超連結</title>
  </head>

   <body background="background.jpg">
        
<a href="https://www.google.com.tw/">
<font color="white">
點我到Google大神搜尋平台
</font>
</a>

   </body>
  

 </html>

 結果:

點擊超連結之後:

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)