2012年7月16日 星期一

Html 基本說明(10)-如何在網頁中新增連結


在設計網頁時,經常須要連結到內部及外部的網頁,所以網頁中就必須要設定連結路徑,使網頁能夠連結到指定的位置,所以,今天要說的就是"連結"
連結的標籤為<a></a>,而如果要加上路徑的話,則要改成<a href="xxxx.html">test</a>的表示方式
先來寫一段html吧
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚橙的結合</title>


</head>

<body>
<div id="content">
    
    <p> i am a 魚橙的結合</p>

</div>
</body>
</html>
 如果我要把"魚橙的結合"上面加入一段連結,則在"魚橙的結合"左右加入<a>標籤
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚橙的結合</title>


</head>

<body>
<div id="content">
    
    <p> i am a <a href="test.html">魚橙的結合</a></p>

</div>
</body>
</html>
 上述中,我將"魚橙的結合"連結到內部網頁"test.html",連結到內部網頁的時候,須注意你要連結的路徑,如果要連結的網頁並非同個目錄裡面,你就必須加入../ 或/ 等,標示路徑的位置,以下如果例子是表 test.html 是在另外個目錄product中,可如此表示

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚與橙的結合</title>


</head>

<body>
<divid="content">
    
    <p> i am a <a href="product/test.html">魚橙的結合</a></p>

</div>
</body>
</html>
 以上是內部連結的部份,再來說明外部連結的部份,其實和內部連結一樣,只是要加入"http://www.xxx.com.tw"的網址即可!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚橙的結合</title>


</head>

<body>
<div id="content">
    
    <p> i am a <a href="http://www.google.com.tw">魚橙的結合</a></p>

</div>
</body>
</html>
 例子中,我將之改成http://www.google.com.tw,執行後,就可從這個連結,連結到google的首頁了!
2012-07-16_142344  
以上,是連結的基本說明,可以試試看

沒有留言:

張貼留言