HTML园地·HOME page制作初步 -- 追寻梦想＞编程乐园

您的位置：寻梦网首页＞编程乐园＞HTML园地＞HOME page制作初步

HOME page制作初步

第二章 HTML简介

HOMEPAGE（主页）是可以通过WWW查询的Internet上WWW站点首页。从某种角度来说可以说是电子广告板、信息板, 它包含了大量的信息。由于Internet以异乎寻常的速度发展, WWW在信息交换查询中的地位得到了很大提高, 这就使HOMEPAGE的编写变得十分重要。

HOMEPAGE是以HTML格式写成的, HTML不是WYSIWYG(所见即所得)的, 不过HTML非常易学易用, 它以标签（TAG）标示及排列各对象。而标签本身则以"<"和">"号标识, 标签内的内容称为(ELEMENT),元素代表了标签的意义。一般格式为：

<ELEMENT>OBJECT</ELEMENT>

<ELEMENT ATTRIBUTE=ARGUMENT>OBJECT</ELEMENT>, 或者

<ELEMENT>

元素是与大小写无关的。它很类似与工业标准的SGML（标准广义标置语言）, 它的结构可以归为SGML文档类型定义（DTD）。目前的版本是HTML2.0或3.0。支持HTML3.0的Web浏览器有Netscape Navigator,Mosaic2.5b等。下面就简单介绍一下用HTML写HOME PAGE的方法。

2.1名词解释

Web presentation Web表述, Web表述是包含许多连接在一起的用于表达某一目的的网页的总称。它是一个体系结构。

Web pages 网页就是可以被浏览器访问的单个HTML文件。

Home Page 主页是Web站点的首页。即被访问站点的第一个网页。

WWW-- World Wide Web 全球资讯网

SGML -- Standard Generalized Marked Language 标准广义标记语言。

DTD-- Document Type Definition 文件类型定义。 DTD和SGML的关系, 就象C++和计算机语言的关系。

HTML -- HyperText Markup Language 超文本标记语言。

HTML is a SGML DTD.

超文本标记语言是一种标准标记文件的定义。而在全球资讯网中所阅读的文章, 正是依照种标准。

2.2 网页的组织与安排

在我们要在网上发布信息、建立网页之前首先注意以下几个原则和建议可能会有助与今后网页的制作。

2.2.1首先要明确你想在网页上作些什么

在写HomePage之前最好要明确写HomePage的目的是什么, 是个人信息、公司介绍、在线文档、购物目录还是别的什么。有一个明确的目的对于Web presentation的组织很有好处。当然这并不是说没有一个明确的目的就不能写主页。也可以在制作中建立目的。只是那样工作量会比较大。会有一些重复的工作。

2.2.2设定你的目标

有了一个明确的目的后还需要确定一下Web的目标, 比如写公司的HomePage有人关心招聘方面的信息有人关心公司的产品还会有人想知道公司的技术发展状况。作为Web的制作者就要先确定写Web要满足哪部分人的需求。确立目标可以有助于在重多的信息中保证主要目标的实现。使信息不会被淹没在过多的额外信息中

。

2.2.3将要表述的内容分成各个主题

在确立了目标之后就需要把要表述的内容分成各个主题来别论述。尽量使信息组织的条理化。这就象写书要先写目录。一个好的组织结构会大大方便读者的浏览。应该注意的是每个主题不要太笼统、范围太大, 这样会使浏览者不知看哪个主题好。要尽量保证主题与内容的一致性。

2.2.4几种组织和浏览结构

建立Web 出版有点象出书, 但它的结构比书要复杂, 一个Web出版常用的结构有线性结构、层次结构、线性交换结构以及线性和层次相结合的结构。应该尽量避免形成复杂的网状结构。在信息不断增多后日益复杂的网状结构会使维护工作非常困难

。

2.2.5几点参考意见

· 短小紧凑

短小紧凑可以快速下载, 不要让用户等待的时间过长。一些小图标会比较有用。

· 信息要经常更新

前面讲过, Web是经常更新的。在主页上注明更新日期及URL对于经常访问的用户非常有用。

· 主页上要有文字显示

并不是所有的浏览器都有图形浏览功能, 有时为了节省时间用户会关闭浏览器中下载图形的功能。所以在主页上最好有文字显示。

2.3初步尝试

现在, 我们开始制作第一个HTML文件。

超文本标记语言(HTML)其实只是很平常, 很普通的文本文件。你可以用你所熟悉的文字编辑器来编辑它, 例如EDIT、VI、WS、Word等, (但一定要以纯文本方式保存, 浏览器只识别纯文本格式的文件)不一定要用其它的新颖编辑器。只要通过一些简单的标注, 就可以让文章生动、活泼起来, 这就是HTML的特色。下面是个简单的例子, 其文件名为test.html。

<HTML>

<BODY BGCOLOR="#ffffff" TEXT="660000">

<TITLE>简单的HTML文件</TITLE>

<H1>这里放个标题</H1>

欢迎进入全球资讯网 !

这是第一段落的结束。 <P>

<H2>这里是H2字体!!</H2>

<H3>这里是H3字体!!</H3>

<H4>这里是H4字体!!</H4>

另一段落的结束在这儿<P>

<H5>这里是H5字体!!</H5>

<H6>这里是H6字体!!</H6>

</BODY>

</HTML>

在Netscape Navigate 中调用test.html结果如如图一所示：

图一

<HTML> 是标记HTML文档的开始, 在文件结束处要有对应的符号</HTML><BODY>是标记文件体的开始, 对应结束符是</BODY>。<BODY>。 ;还有一些属性可以设定背景色, 背景图形等。 HTML语言的一大禁忌是标记交叉, 这一点在写HTML时一定要牢记。下面就各部分开始分别介绍。

2.3.1基本属性的确定

在<BODY>元素可以确定整个文件的背景色、前景色等基本属性。

语法：

OBJECTS

</BODY>

BGCOLOR: HTML的背景色

TEXT: 指定HTML文件中文字色彩属性

LINK: 指定H TML文件中待连接超连接对象色彩属性

ALINK: 指定HTML文件中连接中超连接对象色彩属性

VLINK: 指定HTML文件中已连接超连接对象色彩属性

BAKGROUND: 指定HTML背景图形。

例子：

<HTML>

<BODY BGCOLOR="FFFFFF" TEXT="#000000" LINK="0000FF" BACKGROUND="TEST.GIF">

</BODY>

</HTML>

各属性的参数值可以是用英文描述的颜色如 'RED'、'BLUE'、'YELLOW'等, 也可以是RGB值,共6位, 每种颜色两位从00到FF。如红色可以表示为“ff0000", 蓝色可以表示为"0000ff"等。某些HTML编辑器允许客户直接从颜色表中选取。类似的软件有WebEdit,NetscapeGold、HTMLEDIT等

。

2.3.2表头

<TITLE>和</TITLE>记号中间所包住的文字, 就是这一篇文章的主题, 它一定在文章的最前面, 它会显示在Web浏览器最上面的Title栏的位置。用户可以把它加入BOOKMARK中（Netscape中）, 以便能迅速返回该文档。 <TITLE>可以提供加入HOSTLIST或BOOKMARK列表的文本, 所以一定要使<TITLE>文本有明确的意义, 不要过于模糊和笼统。

2.3.3标题

HTML中的标题是通过<H>标记实现的。被<H1>和</H1>所夹在中间的文字, 是文章里的标题。它可以标注出六个层级的标题, 从<H1>、<H2> 、、、、、到<H6>, 也可以说<H3>是<H2>的子标题。差别在於标题的文字会比子标题大些、粗些、更显眼。在前面的例子里可以看见他们之间的差别。每遇到一个标题时, 当前段落就会被终止, 标题前后会各留出一定的空白。文本从下一行开始。 <H>的属性有COLOR、ALIGN。分别标识标题的颜色和位置。

2.2.4段落

<P>是HTML格式中特有的段落元素。在HTML格式里我们不需要在意文章每行的宽度, 不必担心文字是不是太长了而被截掉；它会根据窗口的宽度做自动转折到下一行的工作。因此, 在原始文件中的<P>, 就是指出了这儿告一段落, 下面的文字换行从头再开始。如果没有遇到<P>这个符号, 它就会把所有之前的文字都挤在一个段落里, 不遇到窗口的边界是不会换行的。我们在原文件中的换行动作, 若不设标记, 是会被视而不见的.

2.4连结其他文件

2.4.1跳转至另一篇文章

HTML文章的另一个特色, 就是在文章段落间任意地跳转。可以跳到另外一台机器上的文件, 也可以跳到文章的另一个段落或本机的另一片文章。下面是它标注的格式。基本上, 它会是这一个样子：

<A href="filename.html" >Link to filename </a>

这表示我们将看到"Link to filename"会变色并加下底线出现在Netscape中, 当游标移到上面时, 会从箭头转成手指, 这表示你可以在这儿用鼠标按一下：会跳转到filename.html的文章里。这很简单, 我们只要把目的地赋给href就可以了。 href的参数就是后面要提到的URL。当它要跳转到别外一台主机时, " "中的格式是这样子的。

"Scheme://host.domain[:port]/path/filename"

scheme可以是file、http、gopher、WAIS, 这要视该主机提供ftp节点。 http代表著另一台WWW伺服器。 gopher代表目地的是gopher主机上的档案；WAIS亦同。这些都是URL(Uniform Resource Locator) 有关URL的概念见后面的描述。

例如：想连结HTML的英文简介, 可以写成下面那样：

<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">

NCSA's HTML Primer </A>

2.4.2跳转至另一个段落

除了跳到另一个HTML文件, 也可以在一篇文章内随心所欲地跳转。首先看看它在" "引号中的表示方式

<A HREF="#clients">Jump to Clients </A>

「Jump to Clients」会变色加上底线并连接到一篇文章中有标注<A NAME= "clients"> Clinets </A>的地方。如果这两个标注是在不同的文件内, 则表示方法有点儿改变。若Jump to Clients 在A文章, 而Clients 在B文章中, 则要改成

<A HREF="filenameB#clients"> Jump to Clients </A>

这样一来, 当我们在A文章中点Jump to Clients 时就会跳到B文章的Clients这个字的位置, 而不是B文章中的其它地方。

2.5另一些标注(tags)

下面我们一一列出另外的一些比较有用的标注。

2.5.1列表

a(a.未标序的列表(Unnumbered Lists )

先说明列表的种类<UL>, 然後在每一行文字前加上<LI>, 最后加上列表结束符</UL>例如：

<UL>

<LI> apples

<LI> bananas

</UL>

输出如下:

apples

bananas

要注意若使用不同的浏览器(Mosaic,Cello,Windeb)就可能会有不同的效果。在每一行的起始也许是圆形标记, 或是一'□'标记。

a(b.标序列表(Numbered Lists 或Ordered Lists)

方法跟前者相似, 先说明种类<OL>, 再加上<LI>於各项之首, 最后加上列表结束符</OL>, 如下例：

<OL>

<LI> oranges

<LI> peaches

<LI> grapes

</OL>

输出效果如下:

1. oranges

2. peaches

3. grapes

a(c.陈述式列表(Descricptive Lists)

陈述式的列表包括了个别的主题和其叙述主题比叙述的部份凸前, 为独立的一行。叙述的部分被视为一长串文字会自动折行。先标记<DL>, 主题放在<DL>的后面, 叙述放在<DD>后面, 最后以</DL>结尾。在<DT>和<DD>间, 可以包含其它的标注元素, 如下例：

<HTML>

<BODY>

<DL>

<DT> National Center for Supercomputing Applications

<DD> NCSA is located on the campus of the University

of Illinois at Urbana-Champaign. NCSA is a one of

four member institutions in the National Metacenter for

Computational Science and Engineering.

<DT> Cornell Theory Center

<DD> CTC is located on the campus of Cornell

University in Ithaca, New York. CTC is another member

of the National Metacenter for Computational Science

and Engineering.

</DL>

</BODY>

</HTML>

输出效果如下:

National Center for Supercomputing Applications

NCSA is located on the campus of the University of Illinois at

Urbana-Champaign. NCSA is a one of four member institutions in the

National Metacenter for Computational Science and Engineering.

Cornell Theory Center

CTC is located on the campus of Cornell University in Ithaca, New York.

CTC is another member of the National Metacenter for Computational

Science and Engineering.

a(d.综合列表

列表的里面, 还可以包含列表；效果是有层次的列表表示方法。要说明的是, 因浏览器的不同, 而会有不同的显示效果, 可能不是你想要的。如NCSA Mosaic会把第二层的列表加上。如下例：

<UL>

<LI> A few New England states:

<UL>

<LI> Vermont

<LI> New Hampshire

</UL>

<li> One Midwestern state:

<UL>

<LI> Michigan

</UL>

显示效果如下：

A few New England states:

Vermont

New Hampshire

One Midwestern state:

Michigan

NetScape显示:

图二

2.5.2预设文字格式(Preformated text)

HTML在一般无标注的情况下会吃掉过多的空白字符和换行字符, 但我们可以用<PRE>和</PRE>让空白、换行字符保存下来。在<PRE>.</PRE>之间的文字间隔、换行、空白照原始键入的情形, 一五一十、忠实地再显现出来。这常用於计算机程序的表达, （在Home Page文字描述中, PRE格式不太美观, 建议尽量少用)其它标注(tags)是允许存在<pre>里,但浏览器并不解释这些标注元素。例如：

<PRE>

#!/bin/csh

cd $SCR

cfs get mysrc.f:mycfsdir/mysrc.f

cfs get myinfile:mycfsdir/myinfile

fc -02 -o mya.out mysrc.f

mya.out

cfs save myoutfile:mycfsdir/myoutfile

rm *

</PRE>

显示如下

#!/bin/csh

cd $SCR

cfs get mysrc.f:mycfsdir/mysrc.f

cfs get myinfile:mycfsdir/myinfile

fc -02 -o mya.out mysrc.f

mya.out

cfs save myoutfile:mycfsdir/myoutfile

rm * 　　　

2.5.3换行标记

<BR>这个标记用来标识一个换行动作。在HTML文件中可以用它来调整行间距。另外一个类似的标记元素是<HR>.它是画一条水平线。线的宽度和高度是可调的。这个标记对于美化页面是比较有帮助的。它的属性是ALIGN、WIDTH、SIZE分别用于调整线的位置和宽度。 ALIGN的参数和前面提到的类似有RIGHT、CENTER、LEFT。 WIDTH可以用百分数表示也可以用绝对值指明。

2.5.4地址 Address

这个标注通常用来告知大家本篇文件的作者。经常是一个Email Address 放在文件的最後面。范例如下：

<ADDRESS>

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu

</ADDRESS>

结果如下:

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu

2.5.5字符格式化标记

个别的字或句子可以使用不同的字型, 这取决於你使用的浏览器。譬如说, <CITE>在你的浏览器中定义为斜体字, 那每次你输入<CITE>, 字型就会自动变为斜体,在NetScape中斜体用的是<I>.黑体用的是<B>,下划线用<U>, 打字机字体（Curier)用<TT>.

范例如下：

Italic

<I>text</i> puts text in italics (HTML Primer)

<em>text</em> also italicizes text (only one viewer)

<cite>text</cite> is used for citations of names of manuals,

sections, or books (HTML Primer)

<var>text</var> indicates a variable (filename)

Bold

<b>text</b> puts text in bold (Important)

<strong>text</strong> also emphasizes text (Note:)

Fixed width font

<tt>text</tt> puts text in a fixed-width font (1 SU = 1 CPU

hour)

<code>text</code> also puts text in a fixed-width font (1 SU

= 1 CPU hour)

<samp>text</samp> formats text for samples (-la)

<kbd>text</kbd> displays the names of keys on the keyboard ( HELP)

输出结果：

图三

更多的格式标记：

<CODE> 用于HTML指令

<DFN> 定义

<EN> 强调

<KBD> 键盘字符

<SAMP> 某个命令的例子

<VAR> 程序变量

<STRONG> 着重强调（黑体）

2.5.6特殊字符

在ASCII码中, 有三个字符：大於(>)、小於(<)、(&)被当作HTML格式中的控制码, 所以要在屏幕上显示出这三个字符, 必需配合其它表示法。

&lt 在屏幕上会是 <

&gt 在屏幕上会是 >

&amp 在屏幕上会是 &

尚有其他特殊字符(ISO 8859-1)

如 &ouml ->

　　 &ntilde -> ±

&Egrave -> 《

这些可以从CERN的列表中得知。

2.6图形功能(Graphics Function)

2.6.1显示图形

NCSA Mosaic、NetScape 可以直接在文件上显示 JPG、BMP或GIF格式的图形。每个图形都需要时间来显现而挈长了整个文件显现的时间。同一个图在文件内使用多次会比只使用一次情况好些。注意：<img>是NCSA Mosaic 首先采用的标注, 并非所有的浏览器能解译。表示方法如下：

<IMG SRC="filename.GIF">

若未加特别注解,此段的文字会被置於图形的下面。若想要文字置於图形的上面,就得加上align=top的参数:<IMG ALIGN=top SRC="filename.GIF">如果图很大, 几乎塞满整个窗口,你应该在图形插入前加上<P>的标注。

IMG元素有两个重要属性：Align 和Alt

对于客户方不能看image的或把浏览器的自动调入image功能关闭的客户, 可通过ALT属性显示一些TEXT给客户而不至于屏幕上一片空白或替代的碎图片。 Align的参数有TOP、MIDDLE、BOTTOM、LEFT和RIGHT.表示图形在屏幕的位置。

2.6.2调用图形

当你的图形很大,或是让读者选择性的看图时,你可以做一个联结(link),从一段文字或一个小图跳转到另一个新的图形窗口(另一个文件)。不用花费漫长的时间在主文件中读图, 可以用小的图片或文字, 引导读者自己决定要不要看这个图片。表示方法如下：

<A HREF="filename.GIF">link anchor</A>

图档的格式可以是GIF.TIEF.JPEG.RGB 或HDF格式。

2.6.3图形处理

在Home Page里加入图形无疑会使屏幕丰富多彩, 一般来说在描好的图形在放到Home Page上之前需要进行一些加工, 常用的软件有PhotoShop、PaintBrush、PhotoPublish、Liew等。图形的格式是十分丰富的。一般JPE压缩比较好颜色饱满。而GIF图有很多特殊属性如透明图形（gif89a）和动态图形(gif87)。一般的小型图形处理软件在匿名FTP站上都可以找到。国内的如清华BBS站的FTP及北京大学的FTP站、北邮FTP站上都有不少。国外的站点可以通过ARCHI查询得到。

2.7音频和视频

在Web中加入音频信息之前要先了解一下音频文件的格式。常见的音频文件的格式有AU、WAV、AIFF和SND。音频文件的采集可以是从CD上下载也可以通过软件转录。一般音频文件都很大, 如改用8位单声道的会大大减小音频文件的大小。在Web中加入音频文件的方法非常简单,只要把HREF指定的URL写上相应的音频文件名就可以了。例子如下

<A HREF=“olivier_h.au">Test of Sound </A>

视频的加入和音频类似,

exp:

<A HREF="TEST.MPEG">TEST OF VIDEO </A>

无论音频信息还是视频信息都要求用户端有相应的应用程序可以播放这些信息。这些程序或是嵌入浏览器或是独立存在。现在用java在支持java的浏览器中也可以实现音频和视频信息的播放而不需要更多的附加软件。

2.8表格制作

Netscap1.1以后的版本加入了对表格的支持。表格的表示如下：

<TABLE>OBJECT</TABLE>

定义表格标题：

<CAPTION...> OBJECTS </CAPTION>

定义表格列：

<TR ..> OBJECTS </TR>