跟我学用HTML制作主页
伟生
1997-01-01
使用Ｉｎｔｅｒｎｅｔ的人都见过互联网上众多图文并茂、令人眼花潦乱的超文本主页，很多人也想自己制作这样的主页。下面简单介绍一下超文本的基本知识及主页的简单制作方法。
说起来，“超文本”这个概念已经出现二十多年了，只是近几年随着Ｉｎｔｅｒｎｅｔ的流行而得到了快速发展。与按一维线性排列的普通文档不同，超文本是一种按非线性结构组织在一起的文档。其中的某些元素（如文字、图片等）和与它相关的内容建立了紧密的逻辑关系，并用不同的颜色或特殊的符号来标识，只要用鼠标点击这些标识即可直接定位到相关内容，这样极大地方便了阅读和检索定位。Ｗｉｎｄｏｗｓ操作系统及基于Ｗｉｎｄｏｗｓ环境下的许多软件的帮助系统就是一种典型的超文本结构。
在Ｉｎｔｅｒｎｅｔ上，超文本文件又叫ＷＷＷ页面，它是一种更加规范的结构化文件。符合“超文本标识语言”即ＨＴＭＬ的标准，尽管这个标准内容非常复杂，但超文本文件本身却是比较简单的。它几乎全部由纯文本字符组成，用来描述文本内容本身和它们之间的各种连接关系。考虑到适应Ｉｎｔｅｒｎｅｔ上的不同软硬件系统和环境，超文本采用的这种简单描述方法可以跨越各种平台而通行无碍，所以超文本语言可以说是Ｉｎｔｅｒｎｅｔ互联网上的通用“世界语”，这也是它得以流行的一个重要原因。
使用ＨＴＭＬ语言可以创作出非常精美华丽的页面，但是基本的操作却是极其简单的。只需要一个普通的文本编辑器即可编写，如ＤＯＳ下的Ｅｄｉｔ或Ｗｉｎｄｏｗｓ下的Ｎｏｔｅｐａｄ等。
ＨＴＭＬ主页是由一系列的标识符和正文混和组成。标识符是以“〈〉”分割的语法描述，正文部分则是按一般的明文方式排列其间。一个超文本文件一般以．ｈｔｍ或．ｈｔｍｌ作为文件后缀。
#1 一、超文本文件的组成
下面以一个简单的示例来描述文本文件的组成。
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞
主页示例
＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
超文本主页示例。
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
由示例可以看出，一个超文本文件由以下三部分组成：
第一部分：每个超文本都是以＜ｈｔｍｌ＞开始和＜／ｈｔｍｌ＞结束，这是超文本的声明部分；
第二部分：＜ｈｅａｄ＞和＜／ｈｅａｄ＞之间的内容标识内容提要、制作信息等，这部分是文件的说明，不会出现在浏览器中；其中＜ｔｉｔｌｅ＞＜／ｔｉｔｌｅ＞是标题部分，它的内容（“主页示例”）将来会显示在浏览器的标题栏上，并出现在书签中标识正文内容，但并不在浏览器的正文中出现。
第三部分：＜ｂｏｄｙ＞＜／ｂｏｄｙ＞是超文本文件的主体部分。所有的文件内容和描述及连接全部写在＜ｂｏｄｙ＞和＜／ｂｏｄｙ＞之间，其中的“超文本主页示例。”是正文部分。
下面把几个常用的超文本语法介绍如下：
（１）＜ｈｎ＞：标题的级数，其中ｎ为１－６之间的数字，＜ｈ１＞最大，＜ｈ６＞最小；
（２）＜ｂｒ＞：换行，即文本内容另起一行从头排；
（３）＜ｈｒ＞：划线，此处划一条水平线；
（４）＜ｃｅｎｔｅｒ＞：居中，本行内容居中排列；
（５）＜ｆｏｎｔ ｓｉｚｅ＝ｎ＞＜／ｆｏｎｔ＞定义字号大小，其中ｎ可以为－７到＋７之间。负数表示减小字号，正数表示增大字号；
灵活运用＜ｈｎ＞和＜ｆｏｎｔ ｓｉｚｅ＝＞命令可以制作出布局协调醒目的标题页面。
#1 二、图形的使用
ＷＷＷ主页中可以方便地加入各种图形，使得主页内容丰富多彩。嵌入图形的方法非常简单，如：
＜ｉｍｇ ｓｒｃ＝“ｉｍａｇｅ．ｇｉｆ”＞
即可把当前目录下的一个图形文件ｉｍａｇｅ．ｇｉｆ插入到页面的当前位置。
超文本文件中的图形可以有各种控制参数，如可以定义图形的尺寸、位置及周围文字的排列方法。
#2 （１）定义图形大小：
使用ｗｉｄｔｈ和ｈｅｉｇｈｔ分别限定图形的高度和宽度。如＜ｉｍｇ ｓｒｃ＝“ｉｍａｇｅ．ｇｉｆ” ｗｉｄｔｈ＝２００ ｈｅｉｇｈｔ＝１００＞表示把图形ｉｍａｇｅ．ｇｉｆ排列在２００×１００（单位）的矩形框体内；
#2 （２）外围文字排法：
＜ｉｍｇ ｓｒｃ＝“ｉｍａｇｅｓ．ｇｉｆ” ａｌｉｇｎ＝ｔｏｐ＞表示图形外围的文字从上部开始排列。其它用法如ｂｏｔｔｏｍ、ｃｅｎｔｅｒ等分别表示从底部和中间排列；
#2 （３）边界定义：
ｂｏｒｄｅｒ选项可以定义边界类型，如：ｂｏｒｄｅｒ＝０表示无边界，ｂｏｒｄｅｒ＝１表示图形带有边界；图形是主页中应用广泛的元素之一，灵活运用图形参数，可以极大地丰富页面的内容，使生成的主页生动美观。
#1 三、元素之间的链接
超文本文件最有价值的功能之一是它可以在文本之间方便地建立链接关系，以提供方便的手段进行随意跳转访问。这种链接不仅可以用于同一文件之内，也可以用于各个文件之间，甚至各种不同Ｉｎｔｅｒｎｅｔ资源之间。
用来指示链接的语法是：
＜ａ ｈｒｅｆ＝ａｄｄｒｅｓｓ＞内容＜／ａ＞
例如：
＜ａ ｈｒｅｆ＝“ｉｎｄｅｘ．ｈｔｍ”＞索引＜／ａ＞
在主页上，“索引”一词将会带有下划线而且以不同的颜色显示出来，表示这里指向另一个文件ｉｎｄｅｘ．ｈｔｍ，点击后，就会自动把ｉｎｄｅｘ．ｈｔｍ调入浏览器中。
#2 （１）文件之间的链接：
如果要把一个超文本文件中的一段文字关联到另一个超文本文件上，如：ｗｅｂｋｉｎｇ．ｈｔｍ，按如下格式书写：
＜ａ ｈｒｅｆ＝“ｗｅｂｋｉｎｇ．ｈｔｍ”＞万千网络＜／ａ＞
那么，在用浏览器阅读这段文字时，“万千网络”就会以不同的颜色显示出来，并带有下划线，表示这是一个指向其它文件的链接。只要用鼠标点击一下，就可调出所链接的文件内容。
#2 （２）文件内部的互相链接：
在同一文件内部，如果要把一段文字同其它部分建立链接关系，可以先把被链接的文字定义成一个位置标记，并建立一个链接名。例如，通常在主页的开始部分定义如下标记：
＜ａ ｎａｍｅ＝“Ｈｏｍｅ”＞＜／ａ＞
然后，在正文的其它任何地方可以加入：
＜ａ ｈｒｅｆ＝“＃ｈｏｍｅ”＞Ｈｏｍｅ Ｐａｇｅ＜／ａ＞
那么，在这个地方就会显示一个带有链接特征的节点：“Ｈｏｍｅ Ｐａｇｅ”。用鼠标点一下Ｈｏｍｅ Ｐａｇｅ，即可直接到达文件开始部分。
#2 （３）Ｉｎｔｅｒｎｅｔ各种资源之间的链接：
链接命令可以方便地用于Ｉｎｔｅｒｎｅｔ的各种资源之间。如：
＜ａ ｈｒｅｆ＝“ｈｔｔｐ：∥ｈｏｍｅ．ｎｅｔｓｃａｐｅ．ｃｏｍ”＞Ｎｅｔｓｃａｐｅ Ｈｏｍｅ Ｐａｇｅ＜／ａ＞
是指向一ＷＷＷ资源的链接，即建立一个指向Ｎｅｔｓｃａｐｅ的Ｉｎｔｅｒｎｅｔ主页的链接；
＜ａ ｈｒｅｆ＝“ｍａｉｌｔｏ：ｓｙｓｔｅｍ＠ｍａｉｌ．ｗｅｂｋｉｎｇ．ｃｏｍ”＞写信给系统管理员＜／ａ＞
是一个电子邮件资源的链接，激活后，自动开启一个Ｅ－ｍａｉｌ编写软件，并进入写信给ｓｙｓｔｅｍ＠ｍａｉｌ．ｗｅｂｋｉｎｇ．ｃｏｍ的状态。
类似的用法也可以用于ＦＴＰ、Ｎｅｗｓ等Ｉｎｔｅｒｎｅｔ资源的链接。
#1 四、利用图形建立链接
结合上面讲到的图形和链接的语法，可以建立一个基于图形的链接。如：
＜ａ ｈｒｅｆ＝“ｈｔｔｐ：∥ｗｗｗ．ｗｅｂｋｉｎｇ．ｃｏｍ”＞＜ｉｍｇ ｓｒｃ＝“ｗｅｂｋｉｎｇ．ｊｐｇ”＞＜／ａ＞
将会在页面中显示名为ｗｅｂｋｉｎｇ．ｊｐｇ的图形，并指向ｗｗｗ．ｗｅｂｋｉｎｇ．ｃｏｍ的主页，点击这个图形即可调出ｗｗｗ．ｗｅｂｋｉｎｇ．ｃｏｍ的默认主页。
在Ｉｎｔｅｒｎｅｔ上，这种用法非常普遍，有时到达一个主页后，上面排列着各种大大小小的精致的图标，每个图标都指向一个相关的Ｉｎｔｅｒｎｅｔ地址，点击之后就可方便地进入到关联的主页中去，使用起来极为方便。
#1 五、表格功能
表格是ＨＴＴＰ中一项非常强大的功能。充分利用表格，可以创作出排列有序、搜索方便的页面。
表格是以＜ｔａｂｌｅ＞＜／ｔａｂｌｅ＞标识的，它的语法规则如下：
＜ｔａｂｌｅ＞
＜ｔｒ＞
＜ｔｄ＞文本１＜／ｔｄ＞＜ｔｄ＞文本２＜／ｔｄ＞＜／ｔｒ＞
＜ｔｒ＞
＜ｔｄ＞文本１＜／ｔｄ＞＜ｔｄ＞文本２＜／ｔｄ＞＜／ｔｒ＞
＜／ｔａｂｌｅ＞
其中，＜ｔｒ＞＜／ｔｒ＞表示一行开始和结束，＜ｔｄ＞＜／ｔｄ＞表示一列开始和结束。例如：
＜ｔａｂｌｅ ｂｏｌｄｅｒ＝１＞
＜ｔｒ＞
＜ｔｄ＞编号＜／ｔｄ＞＜ｔｄ＞产品名称＜／ｔｄ＞＜ｔｄ＞价格＜／ｔｄ＞＜ｔｄ＞品牌
＜／ｔｄ＞＜／ｔｒ＞
＜ｔｒ＞
＜ｔｄ＞１＜／ｔｄ＞＜ｔｄ＞服务器＜／ｔｄ＞＜ｔｄ＞５００００＜／ｔｄ＞＜ｔｄ＞惠普＜／ｔｄ＞＜／ｔｒ＞
＜ｔｒ＞
＜ｔｄ＞２＜／ｔｄ＞＜ｔｄ＞笔记本＜／ｔｄ＞＜ｔｄ＞２５０００＜／ｔｄ＞＜ｔｄ＞ＩＢＭ＜／ｔｄ＞＜／ｔｒ＞
＜／ｔａｂｌｅ＞
以上描述将会产生一个非常整齐的三行三列的产品列表。其中的参数ｂｏｌｅｒ＝１定义了表格的边线宽度为１级。
#1 六、说明
以上仅简单介绍了一下超文本页面的一些最基本的语法规则。随着Ｉｎｔｅｒｎｅｔ的快速发展，ＨＴＴＰ标准也从１．０发展到现在的３．０，许多新的功能不断加入。更重要的是，书写超文本的工具已经从纯手工式的繁琐编写进入到借助于越来越强大的工具软件进行创作的阶段。目前，常用的ＨＴＴＰ创作工具有Ｆｒｏｎｔ Ｐａｇｅ（微软公司最新出品）、Ｉｎｔｅｒｎｅｔ Ｃｒｅａｔｏｒ、Ｈｏｔ Ｄｏｇ等。有些工具对中文的支持能力还有待于进一步提高。说到超文本中的中文，目前流行的ＷＷＷ浏览器是Ｎｅｔｓｃａｐｅ Ｂｒｏｗｓｅｒ和ＭＳ Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ，在有些版本中不直接支持中文浏览，如果按默认设置，浏览中文时将会出现不自动换行的问题。解决的方法有两个，对Ｎｅｔｓｃａｐｅ，在Ｏｐｔｉｏｎｓ里设置语言解码方式为Ｓｉｍｐｌｅ Ｃｈｉｎｅｓｅ并保存即可。另一种方法是在超文本文件中的每个汉字后面加一个空格（有些Ｗｉｎｄｏｗｓ下的汉字系统提供自动加入空格的功能）。这样，不管使用什么浏览器阅读，一般都不会出现类似的现象。
主页制作是一种艺术创作，漂亮的主页可以吸引网上人们阅读的兴趣并有助于传达作者的思想。对于ＨＴＴＰ语法描述，一般人只需要有一个基本的认识即可，借助于功能日益强大的创作工具，任何人无须完全掌握这些复杂的语法规则，都可以随心所欲地制作出图文并茂、优美华丽、带有个人风格的页面。利用电脑和网络带来的便利条件，我们可以更方便、更直观地相互交流信息，这是任何其他工具所无可比拟的。
超文本主页制作好之后，如何检查效果是否满意呢？
要预览主页的实际效果，需要使用ＷＷＷ浏览器，如：Ｎｅｔｓｃａｐｅ Ｎａｖｉｇａｔｏｒ或ＭＳ Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ。
例如，在Ｎｅｔｓｃａｐｅ Ｎａｖｉｇａｔｏｒ中，打开：
Ｆｉｌｅ－＞Ｏｐｅｎ Ｆｉｌｅ
输入超文本主页的文件名即可看到显示结果。如果不满意可以反复修改，直到满意为止。
#2 附：用ＨＴＭＬ制作主页的一个范例
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Ｗｅｂｋｉｎｇ万千网络ＨｏｍｅＰａｇｅ＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞
＜ｂｏｂｙ＞＜ｂｏｂｙ ｂａｃｋｇｒｏｕｎｄ＝＂ｂｋｇｒｄ．ｊｐｇ＂＞
＜ＩＭＧ ＳＲＣ＝＂ｗｅｂｋｉｎｇ．ｊｐｇ＂ Ａｌｉｇｎ＝ｌｅｆｔ Ｂｏｒｄｅｒ＝１＞＜ｆｏｎｔ ｓｉｚｅ＝－３＞＜／ｓｉｚｅ＞
＜ｐ＞
＜ｆｏｎｔ ｓｉｚｅ＝３＞＜ｆｏｎｔ ｓｉｚｅ＝＋２＞
＜ｃｅｎｔｅｒ＞
Ｗｅｂｋｉｎｇ（万千网络）＜ｂｒ＞
＜ｆｏｎｔ ｓｉｚｅ＝＞－＜ｆｏｎｔ ｓｉｚｅ＝－１＞普通中国人的Ｉｎｔｅｒｎｅｔ信息交互网＜／ｆｏｎｔ＞
－＜ｆｏｎｔ ｓｉｚｅ＝３＞＜／ａ＞＜ｂｒ＞
＜ｆｏｎｔ ｓｉｚｅ＝＋１＞网络管理中心＜／ｆｏｎｔ＞＜ｂｒ＞
＜ｆｏｎｔ ｓｉｚｅ＞系统管理员－伟生＜ｂｒ＞
联机号码：０５３１－８５４６９２７，ｈｔｔｐ：∥ｗｗｗ．ｗｅｂｋｉｎｇ．ｃｏｍ
＜／ｃｅｎｔｅｒ＞
＜ｈｒ＞＜ａ ｈｒｅｆ＝＂ｈｔｔｐ：∥ｗｗｗ．ｗｅｂｋｉｎｇ．ｃｏｍ：８００＂＞在线交谈室＜／ａ＞
＜ｈｒ＞欢迎进入“万千网络”开放式Ｉｎｔｅｒｎｅｔ示范网的ＷＷＷ系统！＜ｂｒ＞
新手导航：＜ｂｒ＞
这里是第一个全真模拟Ｉｎｔｅｔｎｅｔ网络交流环境。Ｉｎｔｅｒｎｅｔ所具有的强大功能，在这里得到了完美的体现。本网大力推荐使用优秀的Ｉｎｔｅｒｎｅｔ新闻组阅读软件—Ｆｒｅｅ Ａｇｅｎｔ进行离线阅读，就象ＢＢＳ上的Ｂｌｕｅ Ｗａｖｅ一样，可以用最少的联机时间，高效率获取大量信息．
＜ｈｒ＞＜ａ ｈｒｅｆ＝＂ｄｌｍａｎ．ｈｔｍ＂＞下传Ｆｒｅｅ Ａｇｅｎｔ及使用手册＜／ａ＞
＜ｈｒ＞＜ｂｌｉｎｋ＞＜ｆｏｎｔ ｃｏｌｏｒ＝＂＃ｆｆ００００＂＞＜ｃｅｎｔｅｒ＞注意！！！！大文件传输均可置于后台进行。＜／ｃｅｎｔｅｒ＞＜／ｂｌｉｎｋ＞＜／ｆｏｎｔ＞
＜ｈｒ＞＜ａ ｈｒｅｆ＝＂ｎｅｗｓ：∥ｎｅｗｓ．ｗｅｂｋｉｎｇ．ｃｏｍ／ａｇｅｎｔ技巧”＞在线讨论：＜／ａ＞
＜ｈｒ＞Ｃｏｐｙｒｉｇｈｔ Ｗｅｂｋｉｎｇ，１９９６．１２．１４＜ｂｒ＞
＜ｆｏｎｔ ｓｉｚｅ＝－１＞Ｅ－ｍａｉｌ：＜ａ ｈｒｅｆ＝＂ｍａｉｌｔｏ：ｓｙｓｔｅｍ ＠ｍａｉｌ．ｗｅｂｋｉｎｇ．ｃｏｍ＂＞ｓｙｓｔｅｍ＠ｍａｉｌ．ｗｅｂｋｉｎｇ．ｃｏｍ＜／ａ＞
Ｔｅｌ：（０５３１－８９３７９４１－２５１５，ＢＰ：１２６－０１９５７６４）＜／ｆｏｎｔ＞＜／ｆｏｎｔ＞
＜／ｂｏｂｙ＞
＜／ｈｔｍｌ＞
上面是一个比较有代表性的主页，其中用到了常用的几个语法元素。对其中的要点简要说明如下：
（１）＜ｂｏｄｙ ｂａｃｋｇｒｏｕｎｄ＝＂ｂｋｇｒｄ．ｊｐｇ＂＞
这是页面背景设置，以当前的一个图形文件ｂｋｇｒｄ．ｊｐｇ做为整个主页的背景图案，一般应选择色彩比较淡的设置图形文件；
（２）＜ａ ｈｒｅｆ＝＂ｈｔｔｐ：∥ｗｗｗ．ｗｅｂｋｉｎｇ．ｃｏｍ：８０００＂＞在线交谈室＜／ａ＞
这是一个Ｉｎｔｅｒｎｅｔ资源连接，“在线交谈室”将指向一个ＨＴＴＰ资源：ｗｗｗ．ｗｅｂｋｉｎｇ．ｃｏｍ，８０００是一个Ｗｉｎｓｏｃｋ套接字端口号；
（３）＜ｂｌｉｎｋ＞＜／ｂｌｉｎｋ＞之间的内容将具有闪动的属性，并以红色显示，主要用于警告性提示信息的输出；
（４）＜ａ ｈｒｅｆ＝＂ｎｅｗｓ：∥ｎｅｗｓ．ｗｅｂｋｉｎｇ．ｃｏｍ／ａｇｅｎｔ技巧＂＞在线讨论：＜／ａ＞
这是另一个常用的Ｉｎｔｅｒｎｅｔ资源连接，功能强大的Ｕｓｅｎｅｔ新闻组。这个连接将会引导读者直接激活Ｕｓｅｎｅｔ新闻组功能，并自动进入其中的“Ａｇｅｎｔ技巧”专栏。
（５）在本主页的最后，有一行版权声明，并附有主页制作者的电子邮件地址和普通联络方法。如果读者有兴趣与你联系，点击后即可打开Ｅ－ｍａｉｌ软件并进入写信状态。