链接——把你的网页连成网站
上一次我们了解了CSS的基本用法,之前我们也对HTML做了介绍,其实有了这些我们就已经掌握了开发WEB的基本方法。这次让我们为网页加上链接,让他可以在不同的页面之间跳转,使你的网站不在局限于一个页面之内。听起来是不是像那么回事。
说到链接,他用<a>表示。举个例子,下面是一个完整的链接:
<a href=”www.baidu.com”>Go to Baidu</a>
这就是一个链接,或者说一个<a>元素,他带有一个属性href,即要跳转到的目的地址,他的值可以是一个URL(统一资源定位符),也可以是一个相对位置。典型的URL由一个协议、一个网站名和一个资源的绝对位置组成(也可像上面例子那样)。上面这个链接显示的文本为“Go to Baidu”,点击的话直接跳转到百度首页(www.baidu.com)。一般如果需要跳转到其他网站就使用URL,如果在网站内部进行跳转则使用相对位置。
下面我们来看今天的例子,他是在第二讲的例子基础上扩展的,先看看首页(lounge.html)的代码:
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src="drinks.gif">
<p>
Join us any evening for refreshing <a href="elixir.html">elixirs</a>,
conversation and maybe a game or two of <em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own Web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out
our <a href="directions.html">detailed directions</a>.
Come join us!
</p>
</body>
<html>
与以前的代码相比,我们增加了一部分文本(如第6行,这不重要),还在第9行与第18行加入了两个链接,这两个链接分别指向一个HTML文件,通过他实现了主页到子页面的跳转。
下面讲讲两个子页面的代码。
<html>
<head>
<title>Head First Lounge Elixirs</title>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p>
<img src="green.jpg">
Chock full of vitamins and minerals, this elixir combines
the healthful benefits of green tea with
a twist of chamonile blossoms and ginger root.
</p>
<h2>Raspberry Ice Concentration</h2>
<p>
<img src="lightblue.jpg">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p>
<img src="blue.jpg">
Blueberries and cherry essence mixed into a base of
elderflower herb tea will put you in a relaxed state
of bliss int no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="red.jpg">
Wake up to the flavors of cranberry and hibiscus in
this vitamin C rich elixir.
</p>
<p>
<a href="lounge.html">Back to the Lounge</a>
</p>
</body>
</html>
elixir.html代码
通过代码可以发现这个页面除了含有一个返回主页用的链接,还含有很多图片,以现在的书写方法,网页所含图片需要与html文件存放着同一文件夹下(所需图片及代码素材可通过此处下载http://download.csdn.net/detail/febwaltz/9743889),下次再讲资源定位,重新进行页面资源的组织。
<html>
<head>
<title>Head First Lounge Directions</title>
</head>
<body>
<h1>Directions</h1>
<p>Take the 305 S exit to Webvill - go 0.4 mi</p>
<p>Continue on 305 - go 12 mi</p>
<p>Turn right at Structure Ave N - go 0.6 mi</p>
<p>Turn right and head toward Structure Ave N - go 0.0 mi</p>
<p>Turn right at Structure Ave N - go 0.7 mi</p>
<p>continue on Structure Ave S - go 0.2 mi</p>
<p>Turn right at SW Presentation Way - go 0.0 mi</p>
<p>
<a href="lounge.html">Back to the Lounge</a>
</p>
</body>
</html>
directions.html代码
这个网页就非常平常了,只含有一个返回主页的链接。
把以上HTML及图片资源都保存在一个文件夹下,通过浏览器打开页面点击链接,是不是可以实现网页之间的跳转了。
现在我们需要的功能已经实现了,但还存在一个问题,网站的所有资源都存放在同一个文件夹中。现在只有3个网页就已经有十来个文件了,随着网站规模的扩大,这种扁平化的组织结构会非常混乱。最好可以根据资源的种类分类组织,比如HTML文件放在同一个文件夹,图片放在另一个文件夹,就会显得清楚多了。
下一次我们就将如何解决这个问题——资源的组织和定位
下期:更加清晰的组织你的网站资源