怎样制作Homepage
上海 顾振宇
HTML By Hayes
注意：您可以自由拷贝本文，但请保留作者的信息。
Homepage是可以被World Wide Web访问的信息页，能把文本、图像、声音、动画、视像等
多种媒体信息集于一体，并能包含对其它信息页的引用。由于Homepage所具有的这种超媒体文档
的性质，不但使信息的显示更加生动，而且使信息的浏览更为方便，因此，WWW服务在近期发展
十分迅猛，几乎每个组织和每个用户都拥有自己单独的Homepage。在这一章里，我们就来动手
制作自己的Homepage。
7.1 HTML语言简介
HTML（Hyper Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标
记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，
WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述
Homepage的格式设计和它与WWW上其它Homepage的连结信息。
HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或
.htm的文件扩展名。生成一个HTML文档主要有以下三种途径：
1.手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。
2.通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。
3.由Web服务器（或称HTTP 服务器）一方实时动态地生成。
HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息
。虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列
，而只是建议Web浏览器（如Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用
户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。这就是为什么
同一文档在不同的浏览器中展示的效果会不一样。
目前HTML语言的版本是2.0，它是基于SGML（Standard Generalized Markup Language，
标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一
个子集演变而来的。虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某
些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释
HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。
7.1.1 标记语法和文档结构
HTML的标记总是封装在由小于号（<）和大于号（>）构成的一对尖括号之中。
1.单标记
某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：
<标记>
最常用的单标记是<P>,它表示一个段落（Paragraph）的结束，并在段落后面加一空行。
2.双标记
另一类标记称为“双标记”，它由“始标记”和“尾标记”两部分构成，必须成对使用
，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web
浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。这类标记的语法是：
<标记>内容</标记>
其中“内容”部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示
，就将此段文字放在一对<EM> </EM>标记中：
<EM>text to emphasize</EM>
3.标记属性
许多单标记和双标记的始标记内可以包含一些属性，其语法是：
<标记 属性1 属性2 属性3 … >
各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当
前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最
右端。在HTML3.0中此标记允许带一些属性：
<HR SIZE=3 ALIGN=LEFT WIDTH="75%">
其中SIZE属性定义线的粗细，属性值取整数，缺省为1；ALIGN属性表示对齐方式，可取
LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH属性定义线
的长度，可取相对值（由一对 " "号括起来的百分数，表示相对于充满整个窗口的百分
比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值
是"100%"。
4.文档结构
除了一些个别的标记外，HTML文档的标记都可嵌套使用。通常由三对标记来构成一个HTML
文档的骨架，它们是：
<HTML>
<HEAD>
头部信息
</HEAD>
<BODY>
文档主体，正文部分
</BODY>
</HTML>
其中<HTML>在最外层，表示这对标记间的内容是HTML文档。<HEAD>之间包括文档的
头部信息，如文档总标题等，若不需头部信息则可省略此标记。我们还会看到一些Hompage
省略<HTML>标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。<BODY>标记
一般不省略，表示正文内容的开始。
7.1.2 一个简单例子的剖析
下面我们来观察一个简单的Homepage源文件：
<HTML>
<HEAD>
<TITLE> Sample HTML Document </TITLE>
<!-- Here is the comments -->
</HEAD>
<BODY>
<H1>A Sample HTML Document</H1>
<EM>To demostrate HTML style</em>
<P>
<HR size=5><P>
This document is written
by HTML. At here to brake line.<BR>Here is <B>bold text</B>.
<P>
Here is the next paragraph...
<HR>
</BODY>
</HTML>
在图7－1中是这一Hompage在Netscape中显示出来的样子：
图7－1 一个简单例子在Netscape中的显示
让我们先来看一下上面出现的新标记 ：
1.<TITLE>标题文本</TITLE>
一对<TITLE>标记表明了一个Homepage文件的总标题，它一般出现在<HEAD>标记中。通常
Web浏览器把总标题显示在一个特殊的区域内（例如Netscape把总标题显示在窗口顶端的
标题栏内）。当用户把这一文件加到他的“热表”（hotlist）或称“书签”（bookmark）的
系统中以备后用时，总标题也就成为热表中标识这一文件的名字。虽然总标题可以
省略，但我们还是建议能给每个HTML文档加一个总标题。
2.<!-- 注释内容 -->
用于书写文档源文件的注释，是一个单标记，注释内容在浏览器中不显示。
3.<H1>文本</H1>
一对<H1>标记表明正文中的第一层标题（Heading）。一共有六层（H1至H6），随着层次数
的增加，正文标题的字体依次减小。一个正文标题就象一个独立段落，其自动与标题前后的
内容进行段落换行。
4.<BR>
<BR>是一个单标记，表示在正文段落的当前位置换行（break line）。在HTML中，段落
是它的一个基本元素，由于Web浏览器总是根据当前窗口的尺寸将一个段落信息象流水
一样，从左至右，从上至下逐个排列（一行排列不下，则自动绕转到下一行）。因此，
当Web浏览器的窗口尺寸改变时，段落中各行文字的换行位置就会相应地改变。若你要
确定在哪个词后换行就必须加上<BR>标记。
对照上述源文件和图7－1，就会发现Web浏览器是完全按照源文件中的标记来安排文档的
显示，而与源文件本身的书写格式无关，Web浏览器忽略源文件中的所有换行符和多余的
空格符。并且HTML标记及其属性的大小写也不区分，如<HR size=3>等同于<hr Size=3>。
7.1.3 字体与颜色
HTML中有不少用于字体的标记，如上例中的<B> </B>表示用粗体（Bold）显示。其它还
有<I> </I>斜体（Italic），<TT> </TT>定长宽度字体（Teletype）。这类标记属于物理意
义上的标记，它们明确指定了用哪一类型的字体。另外还有一类属于逻辑意义上的标记。如
<EM> </EM>突出显示（Emphasize），它并不指明怎样的突出法，而让Web浏览器自行
决定，大多浏览器就把它处理为斜体（等效于<I> </I>）。类似的逻辑型标记还有：
<SRTONG> </STRONG> 重点突出显示（Strong emphasize）
<ADDRESS> </ADDRESS> 按地址类型显示
<CODE> </CODE> 按代码类型显示
等等。
上述标记只是定义字体的形状（粗体或斜体），而并不能改变字体的大小。若想改变字体的
大小可利用正文标题标记<H1>至<H6>，其中<H1>至<H3>比一般正文字体大，而<H4>
至<H6>比一般正文字体小。由于标题标记具有段落属性，这使得一个段落内不能使用两
种Heading标记，请看下例 ：
In one paragraph use <B>bold text</B> and <I>italic text</I> and
<TT>fixed_with text</TT> and also <B><I>bold+italic text</I></B>,
or other <STRONG>strong emphasize text </STRONG> etc.<P>
But <H1>Heading level 1</H1> and <H2><I>italic Heading level 2</I></H2>
can't be in one paragraph.
图7－2是上述源代码在Netscape中 的显示。
图7－2 HTML2.0 的字体样式
为了解决不同大小的字体能在一段内显示，HTML3.0 新推出<FONT> </FONT>标记。它带有
SIZE属性，属性值可取相对值，如：SIZE = "+2" 表示比当前字体大两号，反之 SIZE = "-1"
则比当前字体小一号。另外SIZE也可取绝对值（默认值为3），如：SIZE=4，则代表4号字体
。同时HTML3.0还提供了上标字体标记<SUP> </SUP>等，请看下例 ：
This is HTML+ font:<BR>
<FONT SIZE="+1">Bigger level 1</FONT> and <FONT SIZE="+3">
Bigger level 3</FONT> and <FONT SIZE="－1">Smaller level 1</FONT>
and <FONT SIZE=5>The NO.5 font<SUP><FONT SIZE="-1">(TM)</FONT></SUP>
</FONT>in one paragraph.
其效果如图7－3所示。
另外，HTML3.0还可定义整个文档的背景和字体的颜色。它通过在<BODY>标记中增加属性
BGCOLOR和TEXT来定义，属性值为带#号的十六进制RGB值。如要使背景为白色，文本
为黑色，可这样定义：<BODY BGCOLOR=#ffffff TEXT=#000000> 文档正文部分 </BODY>
如果要将文档正文部分中的某些词组定义为其它颜色，可以在<FONT>标记中加上COLOR
属性，属性值同样为带#号的十六进制RGB值。
图7－3 HTML+的新字体样式
7.1.4 超链和URL
创建一个超链（Hyperlink）是HTML语言中的一个重要部分。一个超链又称作锚（Anchor）
，它唯一地指向另一个Web信息页，超链如同把Gopher中可触发的菜单项融于正文之中，
因此超链更具有上下文的含义。
1.URL格式
我们已经知道，一个Web信息页是用URL（Universal Resource Location，统一资源定位器）
来唯一标识的，URL的一般格式为：
访问方式 : //服务器域名/路径及文件名
其中访问方式可有HTTP、FTP、TELNET、GOPHER、WAIS、NEWS、MAILTO?ǚ⑺蚭mail）、FILE等等。随着访问方式的不同，冒号后面的参数格式也会不同，
下面是一些URL的例子：
http://www.ecnu.edu.cn/coliege/science/computer/computer.htm
ftp://ftp.sjtu.edu.cn/pub/
mailto:[email protected]
file:///c|/html/sample.htm
2.锚（Anchor）标记
HTML中的一个超链由两部分组成：一部分是可被显示在Web浏览器中的超链文本及
图像，当用户在它上面点击鼠标时，就触发了此超链；另一部分就是用以描述当超
链被触发后要链结到何处的URL信息。因而超链标记（即锚标记）的格式为：
< A HREF="URL信息" > 超链文本及图像 </A>
其中超链文本被浏览器用一种特殊颜色并带下划线的字体醒目地显示出来，并且用户
鼠标进入其区域时会变成手的形状，表示此处可以被触发。属性HREF表明了超链被
触发后所指向的URL。例如：
<A HREF="http://www.ecnu.edu.cn/about/page-5.htm">next page</A>
在HTML中还可使用相对URL来代替绝对URL。例如要指向的另一HTML文件在同一目
录下，只需简单地写为：
<A HREF="page-5.htm">next page</A>
如要指向上两级目录下的文件，可以这样写：
<A HREF="../../topic.htm">Return to topic</A>
3.指向文件中的某一处
通常超链只指向一个文件的头部，若要指向一个文件内的某一特定位置，就要用到超链
标记的另一个属性NAME，其格式如下：
<A NAME="超链名"> 超链文本及图像 </A>
这里的超链文本并不被浏览器特殊显示，也不能被触发，它仅仅表示一个被指向的目的
地，而超链名就是这一目的地的名字。当要引用这一目的地时，只需把"#超链名"添加到
HREF中就可以了。例如，在一个文件中有一部分内容是附录，可以先在附录标题上定
义一个超链名：
<H2><A NAME="appendix-A">Appendix A</A></H2>
这样，你就可以在同一文件的其它处创建一个超链来指向附录部分：
Details are in <A HREF="#appendix-A">Appendix A</A>.
如图7－4所示，当用户一旦触发超链，就显示附录部分的内容。当然，如果想在
其它文件里引用此附录，只需加上适当的URL信息就可以了。如：
Details are in <A HREF="html/link.htm#appendix-A">Appendix A</A>.
图7－4 用超链指向文件中的特定位置
7.1.5 图像、声音、视像和动画
HTML文档的另一个重要特性就是能把多种媒体的信息综合在一起，使显示的信息更加
多姿多彩。
1.图像
HTML支持内嵌式的图像显示，一幅图在HTML文档中就如同一个单词，与其它单词一
起在一个段落中如流水般的依次排列。HTML的图标记是一个单标记，它的格式为：
<IMG SRC="URL信息">
其中属性SRC表示图的源（Source）文件，因此这里的URL信息必须对应一个图像
文件。目前有以下几种图像的格式能被Web浏览器直接解释：GIF格式（.GIF文件，
支持256色）；X位图格式（.XBM文件，黑白图像）；JPEG格式（.JPG、.JPEG文件
，支持RGB色）。对于段落中的图像，你还可以利用ALIGN属性定义图与文本行的
对齐方式，其属性值可取TOP（与文本行顶部对齐）、MIDDLE（中间对齐）、
BOTTOM（底部对齐，默认值）、LEFT（将此图显示在窗口左方）、RIGHT（将
此图显示在窗口右方）。例如：
<H2><IMG ALIGN=MIDDLE SRC="http://202.97.224.112/image//boat.gif"> This text line is middle-align.</H2>
如果让图像单独占一块区域，不要忘了在图标记的前后加上<P>或<BR>标记：
<P><IMG SRC="revbar.gif"><P>This image is stand alone with the text.<P>
图像同样也可以作为一个超链，如：
Click the image <A HREF="detail.htm"><IMG SRC="model.gif"></A>
to see the full-size picture and detail of this building.
Web浏览器在超链图的四周画一个边框，以示可被触发。若想去掉这个框只需在<IMG>
中加上属性BORDER=0就可以了。图7－5是上述例子的显示效果。
如果你满意图像的原始尺寸，可以用属性WIDTH和HEIGHT分别重新定义图像的宽度和
高度，属性值为用整数表示的屏幕像素点的个数。
图7－5 Hompage的内嵌式图像
2.声音和视像
Web浏览器自身不能解释声音和视像文件，但它能通过其它辅助工具的帮助来播放声音
和视像文件。一般声音文件带有.WAV、.AU、.SND等文件扩展名，而视像文件带有.AVI、
.MPG等文件扩展名。要播放这些文件，就必须把这些文件作为一个超链中的URL信息。
当用户触发这一超链时，Web浏览器发现自己无法解释这类文件，就在辅助工具表中启动
相应的程序来播放它们。请看下例：
<H2>Here is the <A HREF="demo.wav">audio demo</A>.</H2>
<H2>Here is the <A HREF="demo.avi">video demo</A>.</H2>
图7－6是用户触发video demo的超链后，Web浏览器立即启动mplayer程序来播放demo.avi
视像文件。（若事先未设置好辅助工具表，Web浏览器第一次会询问用户选用哪种辅助
工具来播放此类文件。）
图7－6 Web浏览器调用mplayer来播放.avi视像文件
3.动画
SUN公司开发了一套称为Java的通用程序设计语言，利用它制作的Homepage可支持内嵌式的
动画和内嵌式的声音。你可以用SUN公司的Web浏览器HotJava来观看带有Java标记的
Homepage（Netscape 2.0也能解释部分的Java标记）。对Java感兴趣的读者可将你的Web
浏览器指向：
http://www.sun.com/
7.1.6 列表结构和预编排结构
列表（list）结构和预编排（Preformatted）结构都是一种具有段落性质的独立块状结构，
也就是说，它们象标题（Heading）结构一样，能自成一段，仿佛在这些结构的尾部加上了
一个<P>标记。
1.列表（list）结构
列表（list）结构也是HTML文档中的一个基本结构。一共有三种类型的列表，它们是：
（1）无次序列表（Unordered list）：<UL> 列表项 </UL>
（2）有次序列表（Ordered list）： <UL> 列表项 </UL>
（3）定义表（Definition list）： <DL> 列表项 </DL>
前二种列表的表项（list item）用单标记<LI>表示。Web浏览器会在<UL>型列表的每个表项
前加一个小园点或小方块，在<OL>型列表的每个表项前加一个整数，如下例：
<UL><LI>First UL item
<UL><LI>First sub-UL item
<LI>Second sub-UL item</UL>
<LI>Second UL item</UL>
<OL><LI>First OL item
<LI>Second OL item</OL>
定义表的每一项是由两对标记<DT> </DT>和<DD> </DD>构成的，其中一对<DT>标记
中是被定义项的名称，而一对<DD>标记中是具体定义的内容。定义表常用于文档中的
词汇表，术语表等，例如：
<DL>
<DT>First word</DT>
<DD>Here is the explain of the first word.
<DT>Second word</DT>
<DD>Here is the explain of the second word.
</DL>
上述例子的显示效果如图7－7所示。
图7－7 HTML中的三种列表
2.预编排（Preformatted）结构
除了列表结构以外，HTML还提供了一种非常有用的预编排（Preformatted）结构，利用它可
以使信息完全依照源文件中的编排格式，一模一样地在浏览器中显示出来。它的语法格式为：
<PRE>预编排信息</PRE>
因此，只需要将一对<PRE>标记中的“预编排信息”，按照你所喜欢的格式预先编排好
就可以了，例如：
<PRE>
2.9 <IMG SRC="http://202.97.224.112/image//car.gif">
+ 1.2 The <B><I>car</I></B>
----------
4.1
</PRE>
显示效果如图7－8所示：
图7－8 HTML的预编排结构
看了上图你就会发现，<PRE>结构是完全按照HTML源文件中的书写格式来显示信息，所以，
它的文本字体缺省采用定长宽度字符的字体（<TT>型），但是在<PRE>标记中还支持其
它字体的标记。