网站制作初步第二部分学习HTML语言

这是系列教程的第二套，html是网络web语言的基础，是制作网页的基础，而文本、图片的处理是编辑网页最初级的招数，学会了它，你可以无往而不胜。无论是制作个人网页，还是应聘网络公司的编辑制作，你都可以从中受益。

第一课：什么是HTML？

第一节：介绍

当你想把网页制作成某种模样时，需要使用一种编码向网络浏览器来进行解释，这种编码就被称为HTML代码。

一个HTML文件是一页文字信息，就象一封电子邮件或一个word字处理文档，而且实际上你完全可以使用Word字处理软件来编写一个HTML网页。你也可以通过其它字处理软件编写文本文件，网络浏览器只能处理文本信息。

一个HTML文件中包含了所有将显示在网页上的文字信息，其中也包括对浏览器的一些指示，如哪些文字应放置在何处，显示模式是什么样的等。如果你还有一些图片、动画、声音或是任何其它形式的资源，HTML文件也会告诉浏览器到哪里去查找这些资源，以及这些资源将放置在网页的什么位置。HTML文件通过标志符(tag)来实现这一功能。
　

第二节：标志符在哪里？

标志符是一些字母或单词，并被放在尖括号内，例如。HTML文件可支持很多种标志符，而我们常讲的学习HTML语言实际上就是学习这些各种各样的标志符。

每种标志符的作用均不同，例如，如果有的控制将文字放大，有的控制将文字居中显示，有的则负责与其它信息进行链接。当你需要对某处进行修改时，就把标志符放置在该处前面，这时浏览器就会知道你希望下面的内容应如何显示了。

例如，你想把“订书机”这三个字用粗体显示，从而在网页中突出这三个字，因为既然你的网页是关于订书机的知识，自然订书机是网页中最重要的词汇。这时你就需要告诉浏览器你想将“订书机”三个字用粗体显示，方法是使用粗体标志符： "B"是英文"bold"的首字母，意即“粗体”，实际上很多标志符都是使用的英文缩写，这也能够方便使用者记住它们。当你使用这个标志符后，就会告诉浏览器说：“我希望在此之后的所有内容均以粗体显示。”而浏览器自然会按照你的指令将这个标志符后所有的内容均以粗体显示。

第三节：结尾标志符
　

当你使用了标志符时会出现一个问题，即在此之后的所有内容都会根据此标志符的要求改变显示模式，也就是说浏览器不知道何时何处停止这种变化，而实际上你可能只是希望一页中某个部分的内容改变显示。为了防止这种情况的发生，你就需要告诉浏览器在何处终止这种变化，这时你就可以使用结尾标志符。结尾标志符和普通的标志符（有时称为起始标志符）非常相似，只是在字母之前有一个斜线，例如粗体显示的结尾标志符就是下面这个样子：

这个结尾标志符的作用就是告诉浏览器在此之后就不要再用粗体显示了。因此如果你希望将“订书机”这三个字用粗体显示，就应该将一个粗体起始标志符放置在“订书机”三个字前面，而将一个粗体结尾标志符放置在这三个字后面：

这个结尾标志符的作用就是告诉浏览器在此之后就不要再用粗体显示了。因此如果你希望将“订书机”这三个字用粗体显示，就应该将一个粗体起始标志符放置在“订书机”三个字前面，而将一个粗体结尾标志符放置在这三个字后面：staplers

第四节：使用标志符

你可以把标志符放置在网页中的任意部位，浏览器不会把这些标志符也显示出来，而只是读取它们的信息，并按照标志符的要求对其下面的内容进行特殊显示。例如你写好了一篇关于订书机的文章，希望使一些文字用粗体显示，那么你可以这样做：

世界上没有比
我漂亮的订书机
更让我喜爱的东西了
我从杂货店买到了它
但任何优美的语言
都无法描述订书机的优点

当网络浏览器看到上面这段编码后，就会以下面的样式显示这段文字：

世界上没有比
我漂亮的 订书机
更让我喜爱的东西了
我从杂货店买到了它
但任何优美的语言
都无法描述 订书机的优点

这就是一段HTML代码，而如果你能够理解本节所讲的起始标志符和结尾标志符的含义，那么你就能够学会其它一些标志符所代表的意义。也许读过本文后，你就能够成为一名网页设计师了。

第五节：开始编写网页

好了，下面让我们把前面介绍的一些知识投入到正式的工作应用中。你在编写一个HTML文件时需要使用一个文字编辑器，如果你使用的是Macintosh系统，你的文字编辑器可能叫做SimpleText，这个软件完全能够满足我们当前的要求。而如果你使用的是windows系统，你的文字编辑器应该叫做Notepad。请将任何一种文字编辑器打开，并建立一个新的空白文件，然后向其中输入一些HTML代码。所有的HTML文件都必须以相同的标志符起始和结束，例如当你使用标志符来告诉浏览器将后面的内容以粗体显示之前，你还需要使用一些标志符来告诉浏览器它下面即将读取的是一份HTML文件，因此一般情况下HTML网页的第一个标志符应该是<html>，而与之对应，在该页的结尾处，你应该用</html>做为全文的结束。

<html>标志符内是<body>标志符,标志符是告诉浏览器这里面的内容是网页的实际内容。对于一个最简单的网页来说，<html>和<body> 这两个标志符是你唯一必须使用的标志符。虽然你可以使用更多的标志符使你的网页功能更丰富，但在目前我们完全可以只利用这两个标志符。也就是说，只要你在<body>标志符内输入一些文字信息，你就制作出了一个最简单的网页。

第六节：制作第一个网页

请将下列内容输入至你的文本编辑器中(如SimpleText, Notepad，或任何一种编辑器)：

〈html>

<body>

这是我制作的关于订书机的网页，我觉得我的网页很不错，我想我已经是一位HTML主页制作大师了，所有人都应该崇拜我!

</body>

〈/html>

好了，保存这页文件，给它随便起一个名字，但别忘了在文件名后一定要加上.html这个扩展名，这样网络浏览器才能够识别出这个文件，正确读取它。在这里我们把该页命名为“订书机.html”。

这样你就制作出了自己第一个网页，你现在应该感到很高兴吧。虽然你现在只学习了网页制作非常少的知识，但至少你已经能够制作网页了。那么接下来让我们看一看你制作的网页到底是什么样子。

第七节：修改第一个网页

打开你的浏览器(如Netscape Navigator, Internet Explorer或任何其它的浏览器)，从中打开你编辑的网页文件，方法是打开"File"(文件)菜单，根据不同的浏览器请选择"Open Page"(打开网页)或"Open File"(打开文件)，寻找到你的“订书机.html”文件并选中，这样浏览器就会打开这个文件了。文件打开后，该页应该在左上角有几行文字，其余是一片空白。

如果不是这样的话，那么你可能忘记输入某个标志符或丢掉了斜线或是尖括号或是其它什么重要信息。这种情况经常会发生，即使那些网页制作大师们有时也会犯一些简单的错误，因为忘掉一个符号太容易发生了。当你发现自己的网页存在问题时，下面就需要进行修改。

浏览器自己可不知道在哪添加个标志符使网页正确显示出来。如果你希望象我们前面讲到的把“订书机”这三个字变为粗体，就需要返回文本编辑器中添加标志符并重新保存该文件。这时你在浏览器中点击刷新按钮后就会显示出正确的文字了。这个刷新的操作告诉浏览器重新寻找同一个文件(本例中即“订书机.html”文件)并重新显示，这时你就会发现“订书机”三个字已经用粗体显示了。

上面就是人们编辑网页所采用的基本方法，他们创建一个基础的HTML文档，然后不断向里面添加新信息，从而使一个网页变得更加丰富起来，最后他们会在浏览器中检查自己编辑的网页显示是否正确。

第二课：处理文本

第一节：段落

开始一个新段落

段落标志符是HTML标志符中最常见的一种符号，它位于各段落起始部位，使用该标志符后，每块文本段落之间都会空出一行。另外对于标志符来说，不必使用来做结尾。

下面是由两段文本文件组成的HTML网页，源代码如下：

你是否曾经考虑过这样一种情况，那就是如果学校中所有学生在某一天都不去上学，那么学校就拿大家没办法了。

我的意思是说，如果所有人都呆在家里，校方就无法专门严厉地惩罚某一个学生，实际上也许学校要花费整整一天的时间给每位学生的家长打电话通报这件事。

根据这段代码，你的网页将会显示为下面这个样子：

你是否曾经考虑过这样一种情况，那就是如果学校中所有学生在某一天都不去上学，那么学校就拿大家没办法了。

我的意思是说，如果所有人都呆在家里，校方就无法专门严厉地惩罚某一个学生，实际上也许学校要花费整整一天的时间给每位学生的家长打电话通报这件事。

第二节：排列文本

〈p align=left> 将文字居左

〈p align=right> 将文字居右

〈p align=center> 将文字居中

你是否还记得上一节我会讲到的〈p>标志符？有一件事我忘记告诉你了，那就是〈p>标志符不但可以使文本空出一行，还可以在该标志符后面增加一些信息，从而让其后面的文字信息的位置有所变化。因此如果你把下列信息写入HTML文件中：

〈p align=left> 我喜欢看蜘蛛织网，蜘蛛织出的网太漂亮了!

〈p align=center> 但从另外一个角度来说，如果我看到家中的地板上有一只蜘蛛，我又会把它踩死。

〈p align=right>但有时我也会很担心，不知这样踩死蜘蛛是否会遭到报应，因为它们并没有招惹你。

这个网页在浏览器中就会显示成下面这个样子：

我喜欢看蜘蛛织网，蜘蛛织出的网太漂亮了!

但从另外一个角度来说，如果我看到家中的地板上有一只蜘蛛，我又会把它踩死。

但有时我也会很担心，不知这样踩死蜘蛛是否会遭到报应，因为它们并没有招惹你。

第三节：字体加粗

创建粗体文字

结束粗体文字显示

请将这段文字放置在和两个标志符内。

例如你如果想显示下面这段话：

救命呀!有一只网狐在我家里!

这时这段话的实际显示效果是下面这个样子：

救命呀! 有一只网狐在我家里!

第四节：斜体文字

创建斜体字

结束斜体字

为了将一段文字以斜体形式出现，请将这段文字放置在和两个标志符内。

例如，你如果想显示下面这段话：

〈b>救命呀有一只〈b>网狐在我家里，我真的喜欢它!

这时这段话的实际显示效果是下面这个样子：

救命呀! 有一只网狐在我家里，我真的不喜欢它!

第五节：分行

插入新分行

大多数情况下，段落标志符是分隔文本的最佳符号，但有时你可能会希望重起一行，但在新行与上一行之间并不空出一行间距，在这种情况下，你最好使用分行标志符 。

使用分行标志符编写的一段话是下面这个样子：

我非常喜欢互联网

在这里我可以足足冲浪一天也不觉得累!

幸好我的老板还没有抓到我,

但如果真被他抓到，恐怕我的工资就要泡汤了!

这时网页显示成下面这个样子：

我非常喜欢互联网。
在这里我可以足足冲浪一天也不觉得累!
幸好我的老板还没有抓到我,
但如果真被他抓到，恐怕我的工资就要泡汤了!

第六节：注释文本

〈！-- --〉

注释标志符在HTML文档中留出一些空间，这里面的文字信息不会显示在网页上，这是因为凡是在注释标志符内的文字都是隐性的，你可以利用这个空间做为备忘录。但有一点要注意，那就是如果别人查看你的源代码，那么你的这些注释信息就会一览无余了。所以如果你想把自己一些最保密的事保存在这里，恐怕要换个地方了。

注释标志符的格式如下：

把下面这段文字做为注释

〈！--把下面这段文字做为注释--〉我很想把这段HTML编码用网页显示给你，但既然它是隐藏的，因此谁也看不到它了。

第七节：链接

〈a herf="?">创建链接

</a>结束链接

如果一个网页没有一个链接那确实就没什么意义了，因为正是方便的各种链接才将各个独立的网页构建成一个庞大的网络，你就可以利用链接标志符来创建链接，让你的网页与其它网站相连。

在你创建链接之前，你需要清楚想要链接的网页的URL地址，这个URL地址就是类似"http://www.whatever.com"这样的网络地址。

接着你要决定把网页中哪段文字做为链接，访问者将通过这个链接访问其它地方。另外，一般情况下，凡是链接的地方都会有下划线，并显示出与普通网页文字不同的颜色加以区分(多数默认情况下链接显示为蓝色，除非你对此进行了特殊的设置。)

为了创建一个链接，你需要选择一段文字，并将其置于标志符〈a herf="?">和</a>之间，并把"?"替换为正确的链接地址。

例如一个网页链接的源代码可能是下面这个样子：

〈a herf="http://www.hits.org/">欢迎访问Hits.org网站</a>!

而在浏览器中的显示效果为：

欢迎访问Hits.org网站 !

第八节：发送邮件

〈a herf="mailto:?">创建链接

</a>结束发送邮件

并不是网页中所有的链接都会带你前往一个新的网页，有时这种链接可能会让你发送一封电子邮件，这就是发送邮件链接标志符，在网页中建立发送邮件的功能与创建一个普通的链接一样，都非常简单。

你还记得上一节我们讲到的如何在标志符〈a herf="?">和</a>之间创建链接吗？一个发送邮件链接与此是非常相似的，只是你需要把"?"替换为"mailto:"，然后在后面插入一个电子邮件地址，而不是什么网页URL链接地址。

例如，如果你想给下面这个地址[email protected]发送电子邮件，那么你的网页HTML代码就应该按下面的格式编写：

〈a herf="mailto:[email protected]">给我发邮件!〈/a〉

这时用浏览器观察网页的实际效果是这样的：

第三课：处理图片

第一节：介绍

〈img src="?">放置一幅图片

<img align="?">排列一幅图片

在你将一幅图片放置在网页中之前，你需要知道该文件的名称以及文件存储在服务器上的哪个目录下，这样你就可以告诉浏览器到哪里去查找该幅图片了。

储存图片的最方便的方法是将图片保存在与HTML网页文件同一个目录中，这样浏览器就可以自动寻找到图片。

假设我们有一幅名为monkey.gif的图片，而该图片保存于"stuff"这个子目录中，并与你制作的HTML文档处于同一目录下，这时你应该输入下列代码：

这样你在浏览器中就可以看到一幅图片，就是下面这个样子：

第二节：排列图片

使用排列图片标志符，我可以选择将图片放置在何处，例如，如果我想把图片居右，相应的代码是：

〈img align=right src="/webmonkey/kids/lessons/stuff/monkey.gif"〉

这样这幅图片就会神奇般地显示在网页的右侧，就象下面这个样子：

将图片放置在网页的正中则略显复杂，因为〈img align=center>标志符并不能在所有浏览器中产生正确的效果，因此如果你想将图片居中，首先需要把该段内容全部居中，方法是使用标志符，然后再添加图片连接。

因此想把这只可爱的小猴放置在网页中间，你需要这样编写代码：

〈img src="/webmonkey/kids/lessons/stuff/monkey.gif"〉

这样图片就会永远位于网页中央了，如下图：

第三节：图片边界

<img border=#>设置图片的边界大小

对图片的边界大小控制也就是控制一个网页中图片的边缘显示有多宽，一般图片的边界只有当你把它做为一个链接时才会显示出来。不过你可以利用<img border=#>这个标志符来任意设置图片的边界，只需把"#"中的内容替换为从0至99的数字即可。

另外，一般最常用的是你可以把图片边界的宽度设为0，即<img border=0>这样图片就不会显示边界了。点击在新窗口查看全图

例如，如果你想为网狐图片设置一个边界，可以这样做：

也就是这样：

第四节：图文混排

<img align=left>将图片放置在网页左侧

<img align=middle>将图片放置在网页中间

<img align=right>将图片放置在网页右侧

虽然网页中提供各种图片可以使网页显得更加漂亮，但有时你也需要在图片旁边添加一些文字说明。图文混排一般有几种方法，通过<img align>标志符来实现。对于初学者而言，你可以将图片放置在网页的左侧或右侧，然后将文字内容放置在图片旁边。

下面是一个图文混排的例子：<img align=right src="/webmonkey/kids/lessons/stuff/monkey.gif">这是一只小猴子，它是不是显得很高兴，而且洋洋自得？他想拿这个扳手做什么呢？

文字信息会与图片并排从右侧开始，具体显示的效果是下面这样：

这是一只小猴子，它是不是显得很高兴，而且洋洋自得？他想拿这个扳手做什么呢？

第五节：更多范例

也许有时你希望文字内容从图片上方开始，并包围整幅图片，这时你可以在HTML网页中编写下列代码：

〈P>这是一只小猴子，它是不是显得很高兴，<img align=left src="/webmonkey/kids/lessons/stuff/monkey.gif">而且洋洋自得？他想拿这个扳手做什么呢？

这样，图片就会在网页左侧，具体显示效果如下：

这是一只小猴子，它是不是显得很高兴，而且洋洋自得？他想拿这个扳手做什么呢？

第四课：修改网页

第一节：背景颜色

〈body bgcolor="?"〉

既然世界上有各种各样漂亮的颜色，那么为什么还把你的网页搞得只是枯燥的白色呢？你可以在〈body>标志符内对网页背景颜色进行设置，该标志符在全页的顶端。例如，如果你在网页中输入下列编码：

<body bgcolor=yellow>那么你的网页就会显示为黄色。

当然，并不是现在人们知道的所有关于颜色的名称都能够在电脑中存在一个对应的颜色，如果你想了解更多关于颜色的信息，请查阅“颜色编码”章节。

第二节：背景图片

〈body background="imagename.gif"〉设置背景图片

这个标志符可以让你在网页的背景粘贴一幅图片，如果这幅图片较大，那么也许它只会在浏览器窗口中显示一次(根据浏览器窗口的实际大小)，而如果图片较小，那么浏览器窗口内就会显示如多幅该图片，以便填充整个窗口，这被称为“层叠”。下面是一个在Hits.org网站中图片层叠的范例，请注意背景中真正图片只有一朵小花，但实际观察的效果则是鲜花铺满了网页。不要光看到这个网页非常漂亮，如果把握不好，使用层叠效果时经常会把网页搞得很乱很难看。

如果你把下列代码写入HTML文档中：〈body background="imagename.gif"〉

那么小猴的图片就会层叠重复显示，真到布满你浏览器的整个窗口。

第三节：字体颜色

〈body text=?〉设置字体颜色

〈body link="?"〉设置链接颜色

〈body vlink="?"〉设置你已经访问过的链接的颜色

〈body alink="?"〉设置你正点击的链接的颜色

更改字体颜色

重新恢复原字体颜色(在<ont color="?">标志符之前的文字颜色)

字体指的是在网页中可以使用的文字的样式，在计算机系统中，你可能曾经遇到过象"Helvetica"和"Times New Roman"这样的字体名称。

为了给网页中的文字染出颜色，就要将字体颜色的信息放在<body>标志符内，例如当你输入下列代码后：

你的网页因为颜色的问题会让人读起来很不舒服，但我不得不说这是一个五颜六色的网页，文字是绿色的，链接是红色的，而且当你点击链接时还会变为黑色，点击之后又会变为紫色。

如果你只想把一段文字中的某个字改变颜色，则可以使用 标志符，例如你输入下列代码：

绿色多么让人羡慕呀!

那么显示出来的效果就是：

绿色多么让人羡慕呀!

虽然并不是所有的颜色名称均有效，但大多数情况下是可以的，如果你希望了解关于颜色的更多信息，请查阅“颜色编码”章节。

第四节：字体大小

〈font size=#〉调整字体大小

〈/font〉恢复字体大小默认值

你想把文字变得很大或很小吗？〈font size〉标志符可以帮助你实现这一点。

重新恢复原字体颜色(在<ont color="?">标志符之前的文字颜色)

字体指的是在网页中可以使用的文字的样式，在计算机系统中，你可能曾经遇到过象"Helvetica"和"Times New Roman"这样的字体名称。

为了给网页中的文字染出颜色，就要将字体颜色的信息放在<body>标志符内，例如当你输入下列代码后：

如果你只想把一段文字中的某个字改变颜色，则可以使用 标志符，例如你输入下列代码：

绿色多么让人羡慕呀!

那么显示出来的效果就是：绿色多么让人羡慕呀!

虽然并不是所有的颜色名称均有效，但大多数情况下是可以的，如果你希望了解关于颜色的更多信息，请查阅“颜色编码”章节。

第五节：标题大小

〈h1> 使用大标题

〈/h1> 结束大标题

〈h3> 使用中标题

〈/h3> 结束中标题

〈h6> 使用小标题

</h6> 结束小标题

你知道如何使网页的标题比其它文字更大些以便突出这段标题吗？使用标题标志符就可以帮助你实现这一点，你可以采用大标题、中标题或小标题，使用大标题可以用<h1>标志符开始，结束时用</h1>志符。

如果你输入下列代码：

〈h1>号外!外星人来了，大家快逃吧!〈/h1>

这时网页就会显示成：

网站制作初步第一部分基础知识

号外!外星人来了，大家快逃吧!

你可能感兴趣的:(职场,基础知识,休闲,网站制作)

网站制作初步 第一部分 基础知识

号外!外星人来了，大家快逃吧!

你可能感兴趣的:(职场,基础知识,休闲,网站制作)

网站制作初步第一部分基础知识