跟我学超文本编程
超文本这个词已经有一些历史了,但它却是这两年才同WEB这个词一同为人们所熟知的。通过INTERNET访问WWW就是在超文本的海洋里遨游。当你看腻了别人的主页,一定也会跃跃欲试地想把自己的主页呈现在世界人民面前,这就不可避免的要用到超文本编程,不可避免的你需要学习超文本编程。
严格说来,对超文本页面的设计并不能算作是编程,因为它首先不是一种语言,谈不上编程,其次它同其它真正的语言比起来,实在是太过简单了。不过我们在这里的目的不是讨论超文本的编辑到底算不算编程,我们的目的是──跟我学,做自己的主页。
#2 一、超文本中的标签
超文本使用标签来分割和标记文本中的各个元素,例如标题、表格、段落和列表。在超文本中以符号 '<' 表示一个标签的开始,紧跟其后的是标签名和该标签的各种属性值,最后用符号 '>' 表示这个标签的结束。例如:< A HREF="xlhhttp://www.xanet.edu.cn"xlh >就是一个典型的标签。首先用符号 '<' 表示这个标签的开始;字母'A'是这个标签的标签名,在这里,'A'表明这个标签是用来标记一个连接的;‘HREF’是这个标签的属性,表示这个连接的地址;‘http://www.xanet.edu.cn’是‘HREF’这个属性的具体值。标签一般都是成对出现的,并且用符号‘/’表示标签之间的响应,例如<HEAD></HEAD>就是一对相互照应的标签。每一对标签的作用范围在两个标签之间,同时标签允许嵌套,例如:
1:<BODY>
2:The BODY's control begin from here.
3:<A HREF = "xlhhttp://www.xanet.edu.cn"xlh>Here is a link</A>
4:The BODY's control end here.
5:</BODY>
在这个例子中,标签<BODY>的作用范围从第2行到第4行,而<A>的作用范围只是Here is a link这一句话。
在标签中,无论是标签名还是标签的各种属性都对字母的大小写不敏感,也就是说,标签< TITLE >、< title >和< TiTle >是等价的。不过在习惯上通常是使用全部大写来表示标签名和各种属性,用小写表示属性的具体值。但是对于标签的大小写不敏感性来说,也有一些例外需要注意。首先要说明的是符号 '<' 、 '>' 和 '&' 在标签中有其特殊的含义,所以需用特殊的表示方法。符号 '<' 和 '>' 分别表示一个标签的开始和结束,符号 '&' 是转意符,它表示其后跟随的是命令或有特殊含义的字符。以上的这三个特殊符号的表示方法分别如下:
&lt '<'
&rt '>'
&amp '&'
例如,若要显示
if(a>b&&c<d)
则超文本标记为
if(a&rtb&amp&ampc&ltd)
另外,除了这三个符号外还有一些特殊符号需要用转意符才能表示,例如(图1):
&ouml 表示显示一个具有变音符号的小写字母'o'
&ntilde 表示显示一个具有颚化符号的小写字母'n'
&Egrave 表示显示一个具有抑音符号的大写字母'E'
类似的各种特殊符号还有很多,完全的列表可以从http://www.w3.org/hypertext/WWW/MarkUp/html-spec/html-spec13.html#SEC106这个地址获得。
需要注意的是,以上的这些需要转意符表示的各种符号,对字母的大小写是敏感的。也就是说,不能使用&LT来代替&lt。
#2 二、超文本的基本结构
超文本文档分文档头和文档体两部分。在文档头里,对这个文档进行了一些必要的定义,在文档体中才是具体要显示的的各种文档信息,例如段落、列表、表格等。下面是一个最基本的超文本文档的源代码:
<HTML>
<HEAD>
<TITLE>A Simple HTML Example</TITLE>
</HEAD>
<BODY>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.This is the first paragraph. While short it is still a paragraph!</P>
<P>And this is the second paragraph.</P>
</BODY>
</HTML>
在这段代码中,<HTML>、<HEAD>、<TITLE>、<BODY>等都是必须的,浏览器需要它们来做一些初始化和建立模板的工作,如果缺少,可能会引起不可预知的后果。
#2 三、超文本中常用标签的含义和用法
HTML:<HTML></HTML>
这个标签向浏览器表明这个文档中包含超文本文档的成分,同时,文件名的后缀.html
也表明这是个超文本文档(在8.3形式的文件名中后缀为.htm)。
HEAD:<HEAD></HEAD>
这个标签包含的部分属于超文本文档的文档头。它包含的信息类似于编程时的初始化,
很多对这个文档的定义、说明和描述都在这一部分完成。例如JAVASCRIPT程序、TITLE信息、META信息等。
TITLE:<TITLE></TITLE>
这个标签包含的部分并不在实际的浏览器显示中出现,它一般标识在浏览器窗口的标题上(如图2)。另外,它也用在热门节点列表和书签中,以及在WAIS中表示一个主页或一个服务器。
BODY:<BODY></BODY>
这个标签包含的部分是超文本文档中的两个基本部分的后一部分。页面里具体实现的内容都将在这里完成。
Headings:<Hy></Hy>
这个标签标识了超文本的标题。所谓标题,其实只是用较大和/或加黑的字体显示各种字符。超文本的标题共分六级,第一级最大,标签<Hy>中的y就表示标题从1~6的各个级别。在使用中,第一个标题应从<H1>开始,并且以后不要跳级使用标签。六级标签的实际大小效果如图3所示。
Paragraphs:<P></P>
超文本同其他文档格式不同的一点是它不支持自动换行。也就是说在超文本文档源代码中的任何回车都会被忽略。当一行的长度不满屏幕的宽时,下一行会自动接在后面显示,并且当一行或者几行的长度达到屏幕宽时,浏览器自动新起一行进行显示。因为超文本浏览器会忽略大多数回车,所以经常会要求程序员主动使用这个标签进行换行操作。
用<P></P>括起来的内容作为单独的一段,但在实际使用中,一般只用这对标签的前半部分<P>,因为当浏览器遇到<P>时就会理解该另换一行显示。
<P>这个标签还有一个属性ALIGN,它用来指明字符显示时的对齐方式,一般其值有CENTER、LEFT、RIGHT几种。下面,我们用一个例子来从感性上认识一下这个标签的用法(图4)。
1:<BODY>
2:This line does not touch the limit of the screen. 11111111111111
3:This line will follow the last line and return automatically. 22222222<P>
4:444444444444444444444
5:<P>A new paragraph(line) begins here.
6:This line will follow the last line.
7:This paragraph ends here.</P>
8:<P ALIGN = CENTER>This line will display in the middle of the screen.</P>
9:<P ALIGN = LEFT>This line will display by the left of the screen.</P>
10:<P ALIGN = RIGHT>This line will displayby the right of the screen.</P>
11:</BODY>
Unnumbered Lists:<UL></UL>
在超文本中的列表有三种,无序号列表、序号列表和定义性列表。首先介绍无序号列表,它使用的一对标签是<UL></UL>。在这对标签作用的范围内,每个列表项前使用标签<LI>表示,且无须</LI>标签作为照应。下面例子的实际效果见图5。
There is a unnumbered list below.
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
Numbered List:<OL></OL>
序号列表和无序号列表的用法基本相同,只是把<UL></UL>换成<OL></OL>就可以了。其它的列表项前也同样使用<LI>。下面例子的实际效果见图6。
There is a numbered list below.
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
Definition Lists:<DL></DL>
定义性列表可以用来给每一个列表项再加上一段说明性文字,说明文字独立于列表项另起一行显示。在应用中,列表项使用标签<DT>标明,说明性文字使用<DD>表示。在定义性列表中还有一个属性是COMPACT,使用这个属性后,说明文字和列表项将显示在同一行。下面的例子分别展示了这两种用法的异同(图7)。
<DL>
<DT> NCSA
<DD> NCSA, the National Center for Supercomputing Applications, is located o
n the campus of the University of Illinois at Urbana-Champaign.
<DT> Cornell Theory Center
<DD> CTC is located on the campus of Cornell University in Ithaca, New York.
</DL>
<DL COMPACT>
<DT> -i
<DD>invokes NCSA Mosaic for Microsoft Windows using the initialization file
defined in the path
<DT> -k
<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode
</DL>
在各种列表的使用中,还有两点需要说明。其一是在列表项和说明文字中都可以使用<P>进行分段操作;其二是各种列表都可以嵌套使用。嵌套使用的例子如下(图8):
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
Preformatted Text:<PRE></PRE>
前面我们提到过,超文本不支持自动换行,文档中的所有回车都将被忽略。但是,这对标签可以在其作用范围内改变这种状况。也就是说在这对标签包含的范围内,所有包括空格、换行以及Tabs空格对于浏览器来说都是敏感的。在介绍<P></P>时我们所给出的例子,如果包含在<PRE></PRE>这对标签中,其实际显示如图9
这对标签的意义和用途并不在于我们编辑超文本文档时能少写几个<P>,它们的主要用途在于当我们在超文本文档中加入JAVA或JAVASCRIPT程序时,可以方便地允许通过程序对屏幕显示自如地进行控制。
Extended Quotation:<BLOCKQUOTE></BLOCKQUOTE>
这对标签可以说纯粹是为了美观而设立的,它的作用是在这个页面的四周留出一些空白的边缘。
Horizontal Rules:<HR>
这个标签没有与之相对应的尾标签。这个标签可以在屏幕中间显示一条水平线,用以分割页面中的不同部分。例如许多作者喜欢在标题下画一水平线,把标题和页面正文分割开。这个标签有三个属性:SIZE、WIDTH和ALIGN,它们分别用于控制水平线的宽和长以及水平线的对齐方式。水平线的宽用多少点来表示,长用占屏幕宽度的百分比来表示,对齐方式有LEFT、RIGTH、CENTER三种。例如:
<HR SIZE=3 WIDTH=75% ALIGN=CENTER>
Character Formatting:
字体控制除正常体外共有三种,黑体、斜体和印刷体,这三种字体还可以任意进行组合使用。三种字体的标签和实际显示见图10
#2 四、超文本的连接
超文本中的连接是其最重要的特性之一,它使得读者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个连接的构成通常有以下四部分:
1.符号'<'和标签名'A',表示这是一个连接;
2.属性'HREF'及其值,定义了这个连接所指的地方;
3.在超文本中作为连接的文字;
4.尾标签</A>表示这个连接定义结束。
下面是一个包含所有这四部分的实际例子:
<A HREF = "xlhhttp://www.xanet.edu.cn"xlh>CERNET NorthWest Center</A>
连接分为三种:本地连接、URL连接和目录连接。
对同一台机器上的不同文件进行的连接称为本地连接,它使用Unix或Dos系统中文件路径的表示方法,采用绝对路径或相对路径来指示一个文件。例如,某文件有如下绝对路径:
c:\Program File\Netscape\Navigator\program\homepage.html
当前路径是(当前页面所在路径为当前路径):
c:\Program File\Netscape\Navigator\
则对其的连接可以是:
<A HREF = "xlhprogram\homepage.html"xlh>My HomePage</A>
或
<A HREF = "xlh/c:\Program File\Netscape\Navigator\program\homepage.html
应注意使用绝对路径时,最前面的'/'不能少,它表示这是绝对路径,若缺少了,浏览器将解释它为:
c:\Program File\Netscape\Navigator\c:\Program File\Netscape\Navigator\program\homepage.html
这就完全错了。
URL连接是使用了包括协议名在内的URL地址作为连接对象。其形式为:
协议名://主机.域名[:端口号]/路径/文件名
其中协议包括:
file 本地系统文件
ftp 匿名FTP服务器
http WWW服务器
news Usenet新闻组
gopher GOPHER服务器
wais WAIS服务器
telnet 基于TELNET服务的协议
mailto 电子邮件
主机.域名部分,可以使用IP地址,也可以使用domain地址,使用IP地址进行连接比使用domain的速度快一些。
端口号一般都可以省略,因为服务器和客户端的浏览器都有一个默认的缺省值。除非你知道服务器的端口号不是缺省值,才需设置端口号。
目录连接的目的地不是一个文档,而是一个文档中的某一部分。它可以是当前文档的一部分,也可以是其它文档的某一部分。之所以称之为目录连接,是因为这种连接多用在一个大文档的开头部分,当作目录或索引使用,连接到同一个文档的各个部分,以方便读者索引查找。下面是一个这种连接的例子:
<A HREF = "xlhhomepage.html#Joy"xlh>Joy</A>
若是同一个文档中的不同部分,则文件名可以省略。上例中,'#Joy'标明了文档中具有标识名'Joy'的部分。'Joy'部分的标识名定义为:
<A NAME = "xlhJoy"xlh ></A>
这样两部分相互照应,达到了用连接引导页面的不同部分的目的。
#2 内连图象
超文本之所以在很短的时间内如此广泛的受到人们的青睐,很重要的一个原因是它能够支持多媒体的特性。下面,我们先来看一看如何在一个页面中插入图象。
超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG三种,当然,有些浏览器也支持其他一些格式的图象文件,如Portable Network Graphic(PNG)等,还有的浏览器支持plus-in,它的一些附加程序也支持其他不同种类的图象文件格式。但说到底,XBM、GIF、JPEG是三种最基本的格式,在制作页面的时候应首选这三种格式之一使用,以免因客户方浏览器不支持特殊的图象文件格式而造成不必要的麻烦。
插入图象的标签是<IMG>,它有三个必不可少的属性:SRC、HEIGHT、WIDTH。第一个属性指明了所要连接的图象文件,后两个指明了在实际显示中图象的高和宽。下面是一个例子:
<IMG SRC = "xlhbuilding.gif"xlh HEIGHT = 60 WIDTH = 40>
图象的高和宽这两个属性的值,建议使用图象本身的大小。图象本身的大小可以通过一些图象工具软件来获得。虽然在理论上,这两个属性规定了图象实际显示时的大小,也就是说,我们可以简单的通过设置这两个属性值来达到图象放缩的目的,但我们不建议大家这样做。紧挨着图象的文字将显示在图象的旁边,缺省方式下文字和图象的下边缘对齐,但也可通过对属性ALIGN的设置来改变这种对齐方式。具体情况如下:
<IMG SRC = "xlhbuilding.gif"xlh HEIGHT = 60 WIDTH = 40 ALIGN = TOP>
<IMG SRC = "xlhbuilding.gif"xlh HEIGHT = 60 WIDTH = 40 ALIGN = CENTER>
这两种设置分别规定了文字沿图象的上边缘和文字的中间显示。应注意的一点是,无论是缺省方式还是其他两种方式,文字都只能显示一行,从第二行开始文字就将在图象的下面显示。三种对齐方式的显示效果如图11所示。
如果不希望文字在图象的旁边显示,则应将图象用<P></P>这一对标签将它单独规定成为一段。如下例所示:
<P ALIGN = CENTER>
<IMG SRC = "xlhbuilding.gif"xlh HEIGHT = 60 WIDTH = 40>
</P>
显示结果如图12所示。
#2 六、图象的说明文字
对于一些Web的用户来说,有可能看不到图象,例如用户使用的是字符型终端,或虽然用户可以看图象,但为了加快传输速度,主动将图象显示关闭等,为了不因用户看不到图象而影响信息获取和理解页面,有必要在用户看不到图象时对原图象以文字方式作一些解释。这个目的可以通过给出ALT属性值来达到。
<IMG SRC = "xlh"xlh HEIGHT = WIDTH = ALT = >
#2 七、背景色和背景图象
在超文本中可以给页面加上背景色,它用以下方式表达:
<BODY BGCOLOR="xlh#000000"xlh TEXT="xlh#FFFFFF"xlh LINK="xlh#9690CC"xlh>
属性BGCOLOR指明了页面的背景色,TEXT指明了页面的文字的颜色,LINK指明了页面中的连接的颜色。颜色的具体表达采用RGB标准,六位十六进制数,每两位表示一种颜色,其值的范围从00~FF,分别代表红色(red)、绿色(green)和兰色(blue)。例如000000表示黑色,FFFFFF表示白色,FF0000表示红色,00FFFF表示黄色等。
以上介绍的内容都属于超文本编程最基本的也是最常用的部分,仅使用这一部分,就足以编制出一个象模象样的主页来。不过,如果你能耐下心来继续学完超文本编程的提高篇的话,你就会发现入门篇的内容实在是太小儿科了。
#1 ★提高篇★
在这一部分,将主要介绍超文本的表格、框架和超文本的交互性。其实,表格也属于超文本的基本特性,但其编程相对较为复杂,所以放在这一部分介绍。
#2 八、超文本的表格
表格可以使得大量的信息井井有条。在信息设计过程中,表格正好可以和相关菜单一起来组织数据。图13显示了一个不错的表格。现在绝大多数的浏览器都支持表格,所以制作和使用表格的兼容性较好。但如果万一不能或不想使用表格时,可以不妨采用列表、画有表格的图象或使用预格式化的文本替代。
一个表格通常有以下几个概念:标题(Caption)、表头(Table heading)、表格数据(Data)和表元(Cell),这些概念在图13中有所说明。
#3 表格的生成
标签<TABLE></TABLE>包含的范围是一个单独的表格。这对标签有好几个属性都可以通过设置改变,比较常用的一个是BORDER,这个属性表示表格有一个漂亮的边框(图13中的表格及是如此)。在一些超文本的扩展特性里,还可以通过这个标签设置边框的宽度。
表格中的表元共有三种标签定义行和列。
<TR>
<TH>Heading</TH>
<TD>Data1</TD>
<TD>Data2</TD>
<TD>Data3</TD>
</TR>
这个例子中,<TR></TR>定义了一行表格;<TH></TH>定义了一个表元,并且这个表元的内容是一个表头;<TD></TD>定义了一个表元。<TH></TH>和<TD></TD>中间包含的文字就是表元数据,在超文本中,表元的大小是根据表元数据的多少以及毗邻表元的大小自动调整的。下面是一个简单表格的例子及其实际显示效果( 图14):
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 >
<CAPTION>Soup of the Day</CAPTION>
<TR>
<TH>Monday</TH>
<TH>Tuesday</TH>
<TH>Wednesday</TH>
<TH>Thursday</TH>
<TH>Friday</TH>
</TR>
<TR>
<TD>Split Pea</TD>
<TD>NewEngland<BR>Clam Chowder</TD>
<TD>Minestrone</TD>
<TD>Cream of<BR>Broccoli</TD>
<TD>Chowder</TD>
</TR>
</TABLE>
</BODY>
</HTML>
当排列好行和表元时,就可以考虑如何定位数据元素在表元中的位置使这个表格具有良好的效果。HTML表格让你在水平和垂直方向放置数据时有许多选择。
水平定位属性CALIGN决定数据置于表元边框的左边(LEFT)、右边(RIGHT)、中间(CENTER)。
垂直定位属性(VALIGN)决定数据置于表元数据边框的上沿(TOP)、下沿(BOTTOM)或者中间(CENTER)。NETSCAPE还支持VALIGN=BASELINE,它相当于VALIGN=TOP,除了第一行中每个表元中的定位与表元内容有关。数据表元定位的缺省值在水平上是左对齐,在垂直方向上是居中。如果希望表格的一整行都具有相同的对齐属性,可以在<TR>中定义CALIGN和VALIGN。下面的例子中,表格数据是一个图象,其用法不难理解,它们显示了各种对齐方式的组合形式(图15)。
<TABLE BORDER=3 >
<TR>
<TD></TD>
<TH>Left</TH>
<TH>Centered</TH>
<TH>Right</TH>
</TR>
<TR>
<TH><P>Top</P></TH>
<TD ALIGN=LEFT VALIGN=TOP><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=CENTER VALIGN=TOP><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
</TR>
<TR>
<TH><P>Centered</P></TH>
<TD ALIGN=LEFT VALIGN=CENTER><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=RIGHT VALIGN=CENTER><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
</TR>
<TR>
<TH><P>Bottom</P></TH>
<TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
</TR>
</TABLE>
图13的例子向大家展示了一个较为复杂的表格,其中用到了跨越多行和多列的表元。图16是图15的改进,加入了跨越多行和多列的表元。
对于一个实用的表格来说,跨越多行或多列的表格是不可避免的,要创建跨越多行多列的表元,只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性,这两个属性的值,表明了表元要跨越的行或列的个数。图16的源程序如下:
<BODY>
<TABLE BORDER=3 >
<TR>
<TD></TD>
<TD></TD>
<TH COLSPAN="xlh3"xlh>CALIGN        </TH></TR>
<TR>
<TD></TD>
<TD></TD>
<TH>LEFT</TH>
<TH>CENTERED</TH>
<TH>RIGHT</TH>
</TR>
<TR>
<TH ROWSPAN="xlh3"xlh>
<P>Top</P>
</TH>
<TH>TOP</TH>
<TD ALIGN=LEFT VALIGN=TOP><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=CENTER VALIGN=TOP><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=RIGHT VALIGN=TOP><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
</TR>
<TR>
<TH ALIGN=LEFT VALIGN=CENTER>Centered</TH>
<TD ALIGN=LEFT VALIGN=CENTER><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=RIGHT VALIGN=CENTER><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
</TR>
<TR>
<TH>Bottom</TH>
<TD ALIGN=LEFT VALIGN=BOTTOM><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=CENTER VALIGN=BOTTOM><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC="xlhg_blue.gif"xlh HEIGHT=12 WIDTH=12></TD>
</TR>
</TABLE>
</BODY>
#3 表格的Netscape扩展
下面的补充,是Netscape对HTML3表格定义的一些扩展,这些标记和属性将只在Netscape的表格版本中起作用,它们在其他的浏览器中可能不能正常工作。因此,在使用这些标记和属性时应加倍注意。
表格宽度
HTML3建议为<TABLE>标记定义一个WIDTH(宽度)属性,这样能使你指定表格的确切宽度,宽度由UNITS属性定义。
Netscape用了一种稍不同的方法使用WIDTH属性。WIDTH的值既可是表的实际宽度(用像素表示),也可是当前屏宽的百分比率(如30%、50%),并且可以随窗口的大小改变而改变。当WIDTH被指定了,表格内栏宽可根据要求压缩或扩展。例如,图17所示,如不加任何处理,它可能相当的窄,但当用了WIDTH属性时,这张表可扩展到整屏,这就使得Netscape能把所有得栏拉伸到全屏幕。
WIDTH属性还可以用来指定某个表元(<TH>或<TD>)的宽度。WIDTH指可以使用的像素数或全屏幕的百分比。
当你希望几列有同样的宽,而不考虑它们的内容时,使用列宽特性时很有用的。图18是图17的变形,第一列占表宽的10%,其他三列各占30%的宽度,同时Netscape根据各个比率将整个表格调整到全屏幕。
Netscape轻微的改变了<TABLE>标记的BORDER属性。BORDER同上一章一样是用来画边界的。在Netscape中,如果BORDER有一数字表示的值,表周围的边界将用这个数值宽度的像素画出来。缺省值是BORDER=1,BORDER=0则将去除边界。图19给出了边界宽为10的表格。
表元间间隙与表元内填充空间相似,只是影响表之间的距离──分开表元的阴影线的宽度。<TABLE>标记的CELSPACING属性影响表元间的间隙。其缺省值为2。
表元间间隙也包括表边框,这边框刚好在表的边界内(由BORDER属性设置)。亲自试一试,你就会发现区别。例如图20所示为一表元间间隙8、边界宽度4的一个表格。
表元内空间指表元边缘与表元内容间的空间,Netscape中的表元填空空间(Cell Padding)的缺省值为1。你可以通过给<TABLE>标记加上CELLPADDING属性,加上你所希望的填空空间。图21为一填空空间值为10像素的表。
用只有一个表元和一个很宽的边界的表格可以创造出一个有立体感的标题,它可以用在一个主页的开头,当然,表元中的内容可以是大的漂亮的字或是一幅有意义的图。图22就是这样的一个例子。
最后,我们给出例1的全部源程序,供大家参考。
<HTML>
<HEAD>
<TITLE>This is my homepage</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=5 WIDTH="xlh100%"xlh >
<TR ALIGN=CENTER VALIGN=CENTER>
<TD COLSPAN="xlh2"xlh ROWSPAN="xlh2"xlh WIDTH="xlh10%"xlh></TD>
<TH COLSPAN="xlh2"xlh WIDTH="xlh60%"xlh>异同点</TH>
<TD ROWSPAN="xlh2"xlh WIDTH="xlh30%"xlh>适用对象</TD>
</TR>
<TR ALIGN=CENTER VALIGN=CENTER>
<TD WIDTH="xlh30%"xlh>相同点</TD>
<TD>不同点</TD>
</TR>
<TR ALIGN=CENTER VALIGN=CENTER>
<TD ROWSPAN="xlh2"xlh>语言</TD>
<TD>JAVASCRIPT</TD>
<TD ROWSPAN="xlh2"xlh>面向对象</TD>
<TD>以超文本为基础的简易编程语言</TD>
<TD>初学者</TD>
</TR>
<TR ALIGN=CENTER VALIGN=CENTER>
<TD>JAVA</TD>
<TD>功能强大的独立编程语言</TD>
<TD>需要在页面中实现复杂功能的专业人员</TD>
</TR>
<TR ALIGN=CENTER VALIGN=CENTER>
<TD COLSPAN="xlh2"xlh>备注</TD>
<TD>JAVASCRIPT并非完全的面向对象</TD>
<TD><BR></TD>
<TD><BR></TD>
</TR>
</TABLE>
</BODY>
</HTML>
#2 九、框架
所谓框架是指在浏览器的一个窗口中划分出若干区域,以便同时显示多个HTML文件,并且各个文档之间还可以有一定的联系,这也是一个极其常用的技巧。虽然有可能由于某些区域太小,破坏这个文档的可用性,但是它的好处也是显而易见的可以大大的增加一个窗口的信息量。你可以用一个窗口放参考性的连接目录,用一个窗口放一些控制,用另一个大的窗口放主页内容。
HTML代码中有两部分来创造框架,第一部分是在一个新的HTML文件中用来确定如何在一个窗口中加载框架,第二部分需要指出在各个文档中哪些是要包含在框架中的,也就是要决定每一个连接所指的文档要装入哪个框中。这是一个好的设计所必备的。
框架的标签是<FRAMESET></FRAMESET>以及表示框架的每一部分的<FRAME>及其属性SRC。<FRAMESET>用属性COLS或ROWS分别表示将整个文档划分的方式,是纵向划分还是横向划分。COLS和ROWS的参数定义了各个框架的大小。他们可以用像素个数表示,也可以用占屏幕的百分比表示。下面的两个例子分别得到图23和图24的效果:
<FRAMESET COLS="xlh50%,50%"xlh>
<FRAME SRC="xlha.html"xlh>
<FRAME SRC="xlhb.html"xlh>
</FRAMESET>
<FRAMESET ROWS="xlh50%,50%"xlh>
<FRAME SRC="xlha.html"xlh>
<FRAME SRC="xlhb.html"xlh>
</FRAMESET>
除了用像素和百分比来表示一个框架的大小外,还可以用'*'默认的表示一个框架的大小。例如<FRAMESET COLS="xlh20%,*,*"xlh>所定义的三个框架中,第一个占屏幕的20%,剩下的共占80%,并且被缺省的平分为40%和40%。
框架还可以嵌套使用,例如下面的例子(图25):
<FRAMESET ROWS="xlh30%,*,*"xlh>
<FRAME SRC="xlha.html"xlh>
<FRAMESET COLS="xlh50%,50%"xlh>
<FRAME SRC="xlhb.html"xlh>
<FRAME SRC="xlhd.html"xlh>
</FRAMESET>
<FRAME SRC="xlhc.html"xlh>
</FRAMESET>
标签<FRAME>在<FRAMESET></FRAMESET>之内,用以控制如何在框架中显示一个文档,<FRAME>有如下属性:
SRC="xlhxxx.html"xlh:指定文档路径
NAME="xlhxxx"xlh:给框架起个名字
MARGINWIDTH,MARGINHEIGHT:用来指定边线的宽窄
SCROLLING:指明是否需要在框架上加上滚动条,其值为no,yes,auto
TARGET="xlhxxx"xlh:这是使用框架时最重要的部分之一,用来确定把一个框架
中的文档置于何处(自己所在的框架、其它框架、新窗口或者是整个浏览器)。
标签<BASE>一般在文档的开头,当它跟属性TARGET时,用来规定一个默认值,使文档中的每个连接都被载入特定的区域。
对于由<BASE TARGET="xlhxxx"xlh>规定的默认值,如果在文档中有例外,可以在连接的标签中加入TARGET属性,如下:
<A HREF="xlhxxxxxx"xlh TARGET="xlhxxxxx"xlh>xxxxxx</A>
TARGET除了可以指向有NAME命名的框架外,还可以有以下一些值:
TARGET="xlh_blank"xlh 载入一个新框
TARGET="xlh_self"xlh 载入调用者所在框
TARGET="xlh_parent"xlh 载入调用者的母框
TARGET="xlh_top"xlh 载入整个窗口,退出框架模式
使用框架时,必须小心设定TARGET,以免在使用时造成混乱,这是框架设计的关键。
与框架有关的标签还有一对:<NOFRAME></NOFRAME>。这对标签用来在浏览器不显示框架时显示的内容,对于显示框架的浏览器,将忽略这对标签内所包含的内容。
由于框架中的各个文档之间有一定的联系,为了更清楚的理解框架的构造,我们给出一个完整框架的所有三个源程序,图26是这个框架的实际效果。
文件experience.html
<HTML>
<HEAD>
<TITLE>Experiement</TITLE>
</HEAD>
<FRAMESET COLS = "xlh200,*"xlh>
<FRAME SRC = "xlhexperience\exp_catalog.html"xlh>
<FRAME SRC = "xlhexperience\warning.html"xlh NAME = "xlhmain"xlh>
</FRAMESET>
<NOFRAME>
<BODY>
<UL>
<LI><A HREF="xlh#HTML_Begining"xlh>超文本编程</A></LI>
<UL>
<LI><A HREF="xlhexperience.htm#HTML_preface"xlh>超文本简介</A></LI>
<LI><A HREF="xlh#HTML_Tags"xlh>超文本基础编程</A></LI>
<LI>超文本高级编程</LI>
</UL>
<LI>JAVASCRIPT编程基础</LI>
<UL>
<LI>JAVASCRIPT语言简介</LI>
<LI>JAVASCRIPT基础</LI>
<LI>JAVASCRIPT基础编程</LI>
</UL>
<LI>JAVA简介</LI>
<LI>超文本中动画实现的三种途径</LI>
<UL>
<LI>服务器驱动的超文本动画</LI>
<LI>JAVA/JAVASCRIPT编程驱动的超文本动画</LI>
<LI>GIF89A动画</LI>
</UL>
<LI>WEB服务器的组建方法及工具</LI>
<LI>FTP服务器的组建方法及工具</LI>
</UL>
<UL></UL>
</BODY>
</NOFRAME>
</HTML>
文件exp_catalog.html
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY TEXT="xlh#000000"xlh BGCOLOR="xlh#00FFFF"xlh LINK="xlh#0000EE"xlh VLINK="xlh#551A8B"xlh ALINK="xlh#FF0000"xlh>
<P><NOBR></P>
<P><BASE TARGET = "xlhmain"xlh></P>
<P><IMG SRC="xlh../image/g_blue_anim.gif"xlh HEIGHT=12 WIDTH=12><FONT SIZE=-1>超文本编程</FONT></P>
<UL>
<LI><FONT SIZE=-1><A HREF="xlhHTMLPreface.htm"xlh>超文本简介</A></FONT></LI>
<LI><FONT SIZE=-1><A HREF="xlhHTML_Base_Pro.htm"xlh>超文本基础编程</A></FONT></LI>
<LI><FONT SIZE=-1>超文本高级编程</FONT></LI>
</UL>
<P><IMG SRC="xlh../image/g_grey_anim.gif"xlh HEIGHT=12 WIDTH=12><FONT SIZE=-1>JAVASCRIPT编程基础</FONT></P>
<UL>
<LI><FONT SIZE=-1>JAVASCRIPT语言简介</FONT></LI>
<LI><FONT SIZE=-1>JAVASCRIPT基础</FONT></LI>
<LI><FONT SIZE=-1>JAVASCRIPT基础编程</FONT></LI>
</UL>
<P><IMG SRC="xlh../image/g_red_anim.gif"xlh HEIGHT=12 WIDTH=12><FONT SIZE=-1>JAVA简介</FONT></P>
<P><IMG SRC="xlh../image/g_yellow_anim.gif"xlh HEIGHT=12 WIDTH=12><FONT SIZE=-1>超文本中动画实现的三种途径</FONT></P>
<UL>
<LI><FONT SIZE=-1>服务器驱动的超文本动画</FONT></LI>
<LI><FONT SIZE=-1>JAVA/JAVASCRIPT编程驱动的超文本动画</FONT></LI>
<LI><FONT SIZE=-1>GIF89A动画</FONT></LI>
</UL>
<P><IMG SRC="xlh../image/g_blue_anim.gif"xlh HEIGHT=12 WIDTH=12><FONT SIZE=-1>WEB服务器的组建方法及工具</FONT></P>
<P><IMG SRC="xlh../image/g_green_anim.gif"xlh HEIGHT=12 WIDTH=12><FONT SIZE=-1>FTP服务器的组建方法及工具</FONT></P>
</BODY>
</HTML>
文件warning.html
<HTML>
<HEAD>
<TITLE>Warning</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>声明</H1>
<P><B>以下文字,包括了制作主页和建立WEB及FTP服务器的一些基本知识以及本人在制作发布个人主页的过程中的一些得失之谈。本人欢迎参考引用以下内容,但同时保留著作权。因本人水平有限,才识薄浅,文中难免错误与不妥之处,欢迎各位网友来信批评指正。谢谢。</B></P>
</BODY>
</HTML>
#2 十、超文本中的用户交互性构件
为了与用户进行交互式的联系,必须为用户提供一个给服务器反馈信息的方法,这就要用到超文本中的交互性构件。这里的交互性构件在WINDOWS操作系统中也都是为人所熟知的几种,其中包括:文字输入、密码输入、单选框、收音机按钮、图象、提交按钮、清除按钮、隐藏区、下拉式选择、大量文字输入区等。下面将就分别介绍这些构件的用法。
交互性构件在超文本中一般都是集中在超文本页面的一部分,他们通常被定义为一个FORM,其具体形式如下:<FORM NAME=“” ACTION="xlhURL"xlh METHOD=GET|POST>< /FORM>在这对表签之中,包含有以上列举的各种构件。图15是一些交互性构件的例子。属性NAME是给这组构件起的一个名字,用来区别其他构件组,同时在进行编程时也有一些用处。ACTION。METHOD说明的用户输入的信息以什么方式传回服务器,GET和POST的区别,我们不在这里深究。
文字输入:<INPUT TYPE="xlhTEXT"xlh>
密码输入:<INPUT TYPE="xlhPASSWORD"xlh>
与TEXT不同的仅在于在其中输入的文字都用'*'代替。
单选框:<INPUT TYPE="xlhCHECKBOX"xlh>
收音机按钮:<INPUT TYPE="xlhRADIO"xlh>
这类选择是在一组选项中互斥的进行的,因此也需为这组选项起个名字,以共识别互斥在那些选项之中进行。起名字的方法是使用属性NAME进行定义。
图象:<INPUT TYPE="xlhIMAGE"xlh>
下拉菜单选择:<SELECT></SELECT>
菜单中的各个选项前用标签<OPTION>表示。<OPTION>没有对应的尾标签。
多项选择:<SELECT MULTIPLE></SELECT>
给下拉菜单选择中加入属性MULTIPLE就构成了多项选择框。选项前也使用<OPTION>标签表示。
大量文字输入:<TEXTAREA COLS= ROWS= ></TEXTAREA>
此对标签显示一个编辑区,在其中可以输入编辑一些文字。ROWS、COLS分别定义了编辑区的大小,其值用行数和列数表示。
提交按钮:<INPUT TYPE="xlhSUBMIT"xlh>
这个按钮的点选,将把这组构件包含的信息传送回服务器。
清除按钮:<INPUT TYPE="xlhRESET"xlh>
这个按钮的点选,将清除这组构件中所有已经输入的信息。
隐藏区:<INPUT TYPE="xlhHIDDEN"xlh>
下面的例子,用到了几乎所有的交互性构件,可以从感性上认识一下这些构件。图27是这个例子的运行结果。
Top of Form 1
<HTML>
<HEAD>
<TITLE>Alternation Demo</TITLE>
</HEAD>
<BODY>
<FORM NAME="xlhdemo"xlh METHOD=POST>
注册名:
<INPUT TYPE="xlhTEXT"xlh SIZE=20 VALUE="xlh"xlh>
<P>
口令:
<INPUT TYPE="xlhPASSWORD"xlh SIZE=10 VALUE="xlh"xlh MAXLEGTH=8>
<P>
性别:
<INPUT TYPE="xlhRADIO"xlh NAME="xlhsex"xlh VALUE="xlh男"xlh CHECKED>
男
<INPUT TYPE="xlhRADIO"xlh NAME="xlhsex"xlh VALUE="xlh女"xlh>
女<P>
你使用的软件:
<INPUT TYPE="xlhCHECKBOX"xlh NAME="xlh3ds"xlh>3DS
<INPUT TYPE="xlhCHECKBOX"xlh NAME="xlharj"xlh>ARJ
<INPUT TYPE="xlhCHECKBOX"xlh NAME="xlhucdos"xlh>UCDOS
<INPUT TYPE="xlhCHECKBOX"xlh NAME="xlhvc"xlh>VC++
<P>
你安装的多媒体硬件:
<SELECT MULTIPLE>
<OPTION>CD-ROM
<OPTION>SOUND BLASTER
<OPTION>VIDIO BLASTER
<OPTION>TV CARD
</SELECT>
<P>
你使用的操作系统:
<SELECT>
<OPTION>UNIX
<OPTION>WINDOWS95
<OPTION>DOS
</SELECT>
<P>
留言:
<TEXTAREA COLS=40 ROWS=5 NAME="xlhleft"xlh>
</TEXTAREA>
<P>
<INPUT TYPE="xlhSUBMIT"xlh NAME="xlhsend"xlh VALUE="xlh发送"xlh>
<INPUT TYPE="xlhRESET"xlh NAME="xlhclear"xlh VALUE="xlh清除"xlh></FORM></BODY></HTML>
#2 十一、JAVA
无论是使用还是开发INTERNET的人,对于JAVA这个词都不会感到陌生,它是当今网络编程,特别是INTERNET编程被炒的最热的一个话题,众多浏览器厂商纷纷开发出支持JAVA的浏览器,计算机业界的各个大腕也都开发出各种JAVA编译器或在其原有产品上增加对JAVA编译的支持。JAVA语言的编程,并不是本文所讨论的范围,有兴趣的读者可参考专门介绍JAVA编程的书籍。下面我们就来看看超文本文档是如何支持JAVA的。
JAVA在超文本中是以被称为Applet的形式出现的,Applet在许多文献中被称为小应用程序,当然,所谓小应用程序,在实际的应用中并不一定就比单独执行的JAVA程序小多少,它往往要担任起包括动画、视频和声音等多媒体特性在内的各种功能的重任,所以,一个好的具有复杂和完善功能的Applet往往也是相当复杂的。
编制好一个Applet后,经编译生成*.class文件,在超文本中用以下方式定义调用:
<APPLET></APPLET>
它包含的各种参数,对APPLET的各种特性进行了说明:
CODE:编译好的*.class文件的名称
NAME:这个APPLET的名字,以别于本页中的其他APPLET
CODEBASE:这个APPLET的基本网址(URL)
ALT:当浏览器不支持JAVA APPLET时所显示的内容
ALIGN:APPLET的位置,也就是APPLET相对整个浏览器屏幕的对齐方式
WIDTH:APPLET尺寸的高(以pixels为单位)
WEIGHT:APPLET尺寸的宽(以pixels为单位)
HSPACE:APPLET左右留边(以pixels为单位)
VSPACE:APPLET上下留边(以pixels为单位)
下面例子中调用的APPLET显示了一个动画,动画所表现的是一串旋转的字符。
超文本编程的提高篇到此为止,如果你掌握了所有这些内容,那你应该已经成为一个超文本编程的高手了。由于各个浏览器厂商的产品在其对超文本的支持上不尽相同,而且各自还都对其进行了一些扩展,在这些扩展当中,有一些是比较有用也很有趣的,还有一些也似乎在逐渐成为各个浏览器厂商都支持的标准。