超文本链接指针是html最吸引人们优点之一。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力,这更加符合人类的思维方式。人的思维是跳跃的、交叉的,而每一个链接指针正好代表了作者或者读者的思维跳跃。因而组织得好的链接指针不仅能使读者跳过他不感兴趣的章节(比如一些枯燥的数据),而且有助于更好地理解作者的意图。
一个超文本链接指针由两部分组成。一是被指向的目标,它可以是同一文件的另一部分,也可以是世界另一端的一个文件,还可以是动画或音乐;另一部分是指向目标的链接指针。
§3.1 统一资源定位器URL统一资源定位器(uuiform Resource Locator)是文件名的扩展。在单机系统中,定位一个文件需要路径和文件
名,对于遍布全球的Internet网,显然还需要知道文件存放在哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中,所有的文件都由统一的操作系统管理,因而不必给出访问该文件的方法;而在Internet上,各个网络,各台主机的操作系统都不一样,因此必须指定访问该文件的方法。一个URL包括了以上所有的信息。它的构成为:
protocol:// machine.name[:port]/directory/filename其中protocol是访问该资源所采用的协议,即访问该资源的方法,它可以是:
http 超文本传输协议,该资源是html文件
file 文件传输协议,用ftp访问该资源
ftp 文件传输协议,用ftp访问该资源
gopher gopher协议,该资源是gopher文件
news 表明该资源是网络新闻
madcine.name 是存放该资源主机的IP 地址,通常以字符形式出现,如 sun.ihep.ac.cn port端口号,是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。 只有当服务器所使用的端口号不是缺省的端口号时才指定。
directory和filename是该资源的路径和文件名。
一个典型的URL为http://www.ihep.ac.cn 它表示中科院高能所WWW服务器上的起始html文件。(文件具体存放的路径及文件名取决于该WWW服务器的配置情况)。
与单机系统绝对路径,相对路径的概念类似,统一资源定位器也有绝对URL和相对URL之分。上文所述的是绝对URL。相对URL是相对于你最近访问的URL。比如你正在观看一个URL为http://www.inep.ac.cn/index.html的文件,如果想看同一个目录下的另一个文件china.html,你可以直接使用china.html,这时china.html就是一个相对url,它的绝对url为http://www.ihep.ac.cn/china.html
§3.2 指向一个目标<a>
在html文件中用链接指针指向一个目标。其基本格式为:<a href="url">字符串</a>href属性中的统一资源定位器(url)是被指向的目标,随后的“字符串”在html文件中充当指针的角色, 它一般显示为蓝色。当读者用鼠标点这个字符串时,浏览器就会将url处的资源显示在屏幕上。例如:
<a href="http://www:ihep.ac.cn">IHEP CHINA homepage</a>用户用鼠标点取IHEP china homepage,即可看到高能所编写的关于中国情况的介绍。在这个例子中, 充当指针的是IHEP china homepage,下面我们将看到用图象做为指针的例子。
在编写html文件时,需要知道目标的url。如何才能得到目标的url呢?对于自己主机内的文件,它的url 可以根据该文件的实际情况决定。对于Interner上的资源, 我们在用浏览器观看时,它的url会在浏览器的Location一栏中显示出来,把它抄下来写到你的html文件中即可。
在编写html文件时,对有能确定关系的一组资源(比如在同一个目录中)应采用相对url, 这不仅简化你的html文件,而且便于维护。比如当你需要将某个目录整个搬到另外一个地方或把某一主机的资源移到另一台主机时,用相对url写的html文件用不看更新其中的url(只要它们的相对关系没有改变)。但如果你用绝对url编写html,你就不得不逐字修改每个链接指针中的url,这是一件很乏味也很容易出错的工作。对于各个资源之间没有固定的关系,比如你的html文件是介绍各大学情况的,它所指向的目标分布在全球的主机中,这时你就只能用绝对url了。
在本章的末尾,作者给出一个完整的html文件,该文件使用了前三章介绍的全部元素,以便于读者理解。
§3.3 标记一个目标
上节提到的链接指针可以使读者在整个Interner网上方便地链接。但如果你编写了一个很长的html文件,从头到尾地读很浪费时间,能不能在同一文件的不同部分之间也建立起链接,使用户方便地在上下方之间跳转呢?答案是肯定的。前面曾提到过一个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标。对于一个完整的文件,我们可以用它的url来唯一地标识它, 但对于同一文件的不同部分,我们怎样来标识呢?下面的内容将介绍链接指针元素的另外的一个用途,标识目标。
标识一个目标的方法为:
<a name="name">text</a>
name属性将放置该标记的地方标记为“name”,name是一个全文唯一的标记串,text部分可有可无。这样,我们就把放置标记的地方做了一个叫做“name”的标记。
做好标记后,可以用下列方法来指向它,<a href="url#name">text </a>url是放置标记的html文件的url name是标记名,对于同一个
文件,可以写为<a href="#name">text </a>这时就可以点取text跳转到标记名为name的部分了。
§3.4 目标窗口
如果希望被指向的目标在一个新的窗口中显示,可以使用target属性来修饰链接指针元素。
<a href="url" target="window-name">text </a>将url代表的资源显示在一个新的窗口中,该窗口的名字叫window-name。
注意:仅用于Netscape2.0浏览器。
§3.5 图象链接指针图象也可以做为链接指针。格式为:<a href="url"><img src="url"></a>可以看出,上例中用<img src="url">取代了链接指针中text的位置。
<img src="url">是图象元素,它表明显示url代表的图象文件,参见图象一章。
下面是一个简单的图象链接指针。
<a href="www.ihep.ac.cn">China home page<img src="flag.gif"></a>
§3.6 图象地图(image map)
上一节介绍的图象链接指针每幅图只能指向一个地点,而图象地图可以把图象分成多个区域,每个区域指向不同的地点。你可以用图象地图编出很漂亮的html文件。
使用图象地图稍微复杂一点。图象地图不仅需要在html文件中说明,它还需要一个后缀为.map的文件,用来说明图象分区及其指向的url的信息。 在.map文件中说明分区信息的格式如下:
rect url 左上角坐标,右下角坐标
poly url 各顶点坐标
circle url 直径两端点坐标
default url
rect指定一个矩形区域,该区域的位置由左上角坐标和右下角坐标说明。poly指定一多边形区域,该区域的位置由各顶点坐标说明。circle 指定一圆形区域, 该区域的位置由垂直通过圆心的直径与该圆的交点坐标说明。default 指定图象地图其它部分的url。坐标的写法为:x,y ,各点坐标之间用空格分开。下面是一个完整的说明文件,
default http://www.ihep.ac.cn
rect http://www.ibm.com 140,20 280,60
poly http://www.microsoft.com 180,80 200,140
circle http://www.yahoo.com 80,140 80,100
图象地图需要一个特殊的处理程序 imagemap,imagemap放在/cgi-bin 中。在html 文件中引用图象地图的 格式为:<a href="/cgi-bin/imagemap/mymap.map"><img src="mymap.gif" ismap></a>可以看出这是一个包含图象元素的链接指针元素。图象元素指明用于图象地图的图象的url,并用Ismap属性说明。需要说明的是链接指针中的href属性,它由两部分组成,第一部分是/cgi-bin/imagemap ,它指出用哪个程序来处理图象地图,它必须原样写入,第二部分才是图形地图的说明文件mymap.map。/cgi-bin/imagemap/mymap.map绝不表示
mymap.map在/cgi-bin/imagemap目录中。在netscape扩展中,图象地图可以用一种比较简化的方式来表示,这就是客户端图象地图。用户端地图可以将图象地图的说明文件写在html文件中,而且不需要另外的程序来处理。这就使html作者可以用同别的元素相一致的写法来写图象地图。
客户端图象地图还有一个优点,当鼠标指向图象地图的不同区域时,浏览器能显示出各个区域所指向的url。但目前只有netscape2.0以上版本才支持这一扩展。
用户端图象地图的格式为:<img src="url" usemap="#mymap">src="url" 指定用作图象地图的图象
usemap属性指明这是客户端图象地图"#mymap"是图象文件说明部分的标记名,浏览器寻找名字为mymap的<map>元素并从中得到图象地图的分区信息。客户端图象地图的分区信息用<map name=mapname>元素说明,name属性命名<map>元素。图象地图的各个区域用<area shape="形状" coords="坐标" href="url">说明,形状可以是:rect矩形,用左上角,右下角的坐标表示,各个坐标值之间用逗号分开; poly多边形,用各顶点的坐标值表示;circle圆形,用圆心及半径表示,前两个参数分别为圆心的横、纵坐标, 第三个参数为半径。href="url",表示该区域所指向的 资源的url,也可以是nohref,表示在该区域鼠标点取无效。客户端图象地图各个区域可以重叠,重叠区以先说明的条目为准,下面是一个例子:
源程序:
<img src="mapimg.gif" usemap="#Face>
<map name="Face">
<!Text BOTTON> 此行是注释
<area shape="rect"
href="page.html"
coords="140,20,280,60">
<!Triangle BOTTON>
<area shape="poly"
href="image.html"
coords="100,100,180,80,200,140">
<!FACE>
<area shape="circle"
href="nes.html"
coords="80,100,60>
</map>