1、网页制作教程作网页制作教程（转载）第1课：开始学习在这第一课中，我们简要介绍制作网站所需的工具。需要哪些工具？十之八九，你已经拥有所需的全部工具了。“浏览器（browser）”你有了，它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。游览器有很多可供选择，最普及的浏览器当属微软（Microsoft）公司的Internet Explorer（俗称“IE”），其他的一些浏览器包括Opera、Mozilla Firefox（俗称“火狐狸”或“火狐”）等。这些浏览器的基本功能都是浏览网页，因此具体使用哪个浏览器是无所谓的。也许你听说过、甚至用过一些网页制作工具，比如Microsoft Fro
2、ntPage、Macromedia Dreamweaver、Microsoft Word等。现在可以忘掉这些程序了！它们对你学习网页制作没有什么帮助。相反，你需要的是一个简易的文本编辑器。如果你正在使用Windows（微软视窗）操作系统的话，你可以使用它自带的记事本（Notepad）程序。你可以依次点击“开始菜单程序附件”找到该程序。如果你用的是其他操作系统，那么也有类似的简易文本编辑器可以使用，比如Linux上的Pico或Mac（苹果机）上的TextEdit。记事本是一个非常简单的文本编辑程序，用它编写程序非常好，因为它不会干涉你所输入的任何内容，给予你完全的控制权。而许多网页制作工具的问题
3、在于，它们提供了许多标准功能供你选择。这样的缺点是，你只能按照这些标准功能来制作网页。所以，这类工具常常不能创建正合你意的网页。或者，更令人讨厌的是，它们会修改你手工编写的代码。而使用记事本（Notepad）或其他简易文本编辑器的话，全部代码均由你自己编写。浏览器和记事本程序（或类似的简易文本编辑器）便是你所需的全部工具，有了它们，你就可以完成本教程，并制作自己的网站了。 我需要连上因特网么？你无需连上因特网（Internet），浏览本教程和制作网站都可以离线完成。如果你想要离线阅读本教程，你可以将它打印出来，或者在阅读教程期间断开与因特网的连接。你可以先在自己的计算机上制作网站，待网站制作完
4、毕再上传到因特网上。接下来学习什么？下一课将介绍HTML是什么，然后从第三课开始学习有趣的HTML。第2课：HTML是什么？这一课将为你简要介绍你的新朋友HTML。HTML是什么？HTML是浏览器的“母语”。长话短说，HTML是由一名叫Tim Berners-Lee的科学家发明的。他发明HTML的目的，是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。HTML取得了的巨大成功，大大超出了Tim Berners-Lee的原本预计。通过发明HTML，他为我们今天所认识的万维网奠定了基础。HTML是一门语言，它令我们可以在因特网上展示信息（例如科学研究信息）。你所看到的网页，是浏览器对HT
5、ML进行解释的结果。要查看一个网页的HTML代码，只需在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。对于生手来说，HTML代码看似很复杂，不过本教程将帮助你弄清楚它们的含义。HTML能用来做什么？如果你要制作网站的话，学习HTML是不可避免的。即使你用Dreamweaver等工具来制作网站，了解基本的HTML知识也会令你在网站制作过程中倍感轻松，并有利于制作出更好的网站。好在HTML容易被学会和使用。通过下面两课的学习，你将学会如何制作自己的第一个网站。HTML是用来制作网站的。就这么简单！好，明白了，那HTML这四个字母代表什么呢？HTML是“HyperText Mark-up La
6、nguage（超文本标记语言）”的缩写其实目前你不必了解这些，不过，为了迁就学习次序，我们就详细解释一下吧。超（Hyper）是相对于线性（linear）来说的。在很久以前，那时计算机程序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行，这行结束后，继续下移，依次类推。但HTML则不同，你可以在任何时候跳转到任何地方。比方说，你在浏览HTML.net之前，不必先去浏览MSN.com。文本（Text）意味着它是自解释的（self-explanatory）。标记（Markup）指的是你怎么处理文本。对文本作标记的方式，跟你在文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。语言
7、（Language）。HTML就是一种语言，它使用了许多英文单词。在本教程中，你将会学习到XHTML（可扩展超文本标记语言）。简单地说，它是一种新的、更加结构良好的HTML。现在，你知道了HTML（和XHTML）代表什么意思，下面我们将开始有关网站制作的学习。第3课：元素与标签现在你要学习的是HTML的重要成分元素（element）。元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。“标签”是什么？标签（tag）指示元素的起始与结束。所有标签都具有相同的格式：以小于号“”结尾。 一般说来，有
8、两种标签首标签（start tag）（如）和尾标签（end tag）（如）。它们唯一的区别在于，尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。HTML主要就是各种各样的元素，所以，学习HTML，就是学习使用各种元素。可以举些例子么？没问题。比如，b元素的作用是，告诉浏览器介于标签和之间的文本应以粗体显示。（这里的“b”是“粗体（bold）”的意思。）例1： 这句话应显示为粗体。 该例在浏览器中将显示如下：这句话应显示为粗体。 h1、h2、h3、h4、h5及h6元素的作用是显示标题（这里的h是“标题（heading）”的意思）。其中h1是一级标题，字体最大；h2是二级
9、标题，字体比一级标题略小；而h6是六级标题，它是最后一级标题，字体也最小。例2： 这是标题 这是子标题 该例在浏览器中将显示如下：这是标题这是子标题首标签和尾标签总是必须的吗？常言道，凡事均有例外。在HTML中，也有例外的情况，即有些元素没有尾标签。这些没有尾标签的元素被称作空元素（empty element），它们与具体文本内容无关，比如像下面这个换行标签：。标签中的字母应该大写还是小写？大多数浏览器不介意标签是大写还是小写，或者混合大小写。所以、或在浏览器上的显示效果都一样。但是，正确的写法是采用小写字母来书写标签。所以，要养成用小写字母书写标签的习惯。把标签放在哪里？你应该在HTML文档
10、里书写标签。一个网站可能包含多个HTML文档。上网的过程，其实就是打开不同HTML文档的过程。这一课就到这里。如果花10分钟时间继续学习下一课的话，你将能够制作自己的第一个网站。第4课：制作自己的第一个网站有了从前面几课的基础，现在只需再花几分钟时间，你就能学会如何制作自己的第一个网站了。如何做呢？通过第一课，我们知道制作一个网页需要有浏览器和记事本程序（或者类似的文本编辑器）。既然你现在已经在用浏览器阅读本教程了，那么请再打开一个窗口这样你就可以一边阅读本教程，一边欣赏你的新网页了。另外，请打开记事本程序（Notepad）：依次选择“开始菜单程序附件记事本”即可。现在一切就绪了！然后呢？我们
11、先从简单的做起吧。先试着做一个显示如下内容的网页：“哇！这是我的第一个网站。”继续学习，就你就知道这是多么容易了。HTML简单易学。浏览器读HTML就跟你读书一样，也是从上往下，从左到右进行的。所以，HTML文档的开始和结束便对应于网页的头和尾。你首先要做的是告诉浏览器，你们将采用HTML语言来“对话”。这是通过标签来实现的（这是容易理解的）。所以，在做所有其他事之前，先在记事本的第一行敲入“”。也许你记得前面课程中我们说过，这里的是首标签，在HTML文档结尾处必须有相应的尾标签与之对应。好的，为了防止最后忘记写这个尾标签，我们现在就输入“”，然后在和之间留些空行，用于书写其余代码。下面，我们
12、需要为HTML文档写一个“头部（head）”，它提供关于当前文档的信息；然后写一个“主体（body）”，它提供文档的内容。HTML最重要的就是简单在这里，我们只需把头部（和）放到主体(和）的前面就行了。如下所示： 注意我们是如何用换行（用Enter键）与缩进（用Tab键）令代码具有层次感的。理论上，你如何书写HTML文档，这无关紧要。但为了便于阅读代码，和保持良好的概貌，我们强烈建议你采用换行与缩进来层次化HTML代码，就像上面的例子一样。上面这个文档便构成了你的第一个网站它只包含一个网页，而且内容很单调，可能与你的想象相去甚远，但在一定程度上它仍是一个网站。你可以将它用作其他HTML文档的基
13、本模版。不错不错，但我如何添加更多内容？前面我们学到过，HTML文档有两个部分：头部（head）和主体（body）。你在头部（head）提供关于网页的信息，你在主体（body）部分提供网页的具体内容。比如，如果你要指定HTML文档的网页标题（title）（它将显示在浏览器窗口顶部），你就要在头部（head）提供有关信息。用title元素来指定网页标题：即在首标签与尾标签之间写上网页标题： 我的第一个网站 注意，网页标题（title）不是显示在网页里，而是显示在浏览器窗口的标题栏上的。网页里显示的所有内容都必须放在body元素里。比如，我们要在网页里显示“哇！这是我的第一个网站。”这行文字，它属
14、于主体（body）部分，所以我们在body元素里输入： 哇！这是我的第一个网站。 标签里的p是“段落（paragraph）”的意思，也就是一个文本段落。现在，你的HTML文档应该是这样： 我的第一个网站 哇！这是我的第一个网站。 搞定！ 你已经完成了自己第一个真正的网站（尽管它只包含一个网页）！接着，你需要将它保存到你的硬盘上，然后在浏览器中打开它：在记事本的“文件”菜单下选择“另存为.”。这时会弹出一个对话框，在“保存类型”右边的下拉菜单里选择“所有文件”。这一点很重要否则，它将被保存为文本文档，而不是HTML文档。现在将这个文档保存为“page1.htm”（后缀名“htm”表明它是一个HT
15、ML文档。后缀名用“html”也可以，但我比较习惯使用“htm”，你可以根据自己的喜好选用二者中的任一个）。将HTML文档保存在硬盘上的哪个文件夹无关紧要只要你记得保存位置，并能再次找到它就行。现在打开浏览器：在“文件”菜单下选择“打开”。在弹出的对话框中点击“浏览”按钮。现在，请找到你的HTML文档，然后点击“打开”。这时，浏览器中应显示“哇！这是我的第一个网站。”。恭喜！如果你迫切希望自己的杰作能被全世界看到，你可以先去第14课学习一下如何把自己的网页上传到因特网（Internet）上。如果你不着急的话，那么请继续往下学习。乐趣才刚刚开始。第5课：到目前为止学到了些什么？始终以上一课中的基
16、本模版为起点制作新网页： 网页标题（title）写在head（头部）里：网页标题写在这里。注意，网页标题将显示在浏览器窗口的标题栏上：网页标题（title）尤其重要，因为搜索引擎（比如Google）要用它来索引网页，并显示在搜索结果里。网页的实际内容写在body（主体部分）里。你已经掌握一些最重要的元素了： 用于段落 显示粗体文本 标题 子标题 子子标题 记住，学习HTML要反复尝试才行。别担心，即时出错也不会损坏你的计算机或因特网。所以，可以放心继续操练这是获取经验的最好办法。学会这些就可以成为高手了吗？要成为一名网页制作高手，仅学习本教程是不够的。因为本教程只涉及HTML成分的基本用法要成
17、为高手，你必须灵活运用这些成分才行。那么，要独自面对困难，并学会自立了。或许如此，不过也未必。试试看，把已经学过的内容操练一下吧。第6课：学习更多元素你有没有独立完成过一些网页？如果还没有，请看下面的例子： 我的网站 标题 一些文字。 子标题 一些文字。 看完了，然后呢？现在要学习七个新元素。前面学过，你可以通过用和把文本括起来，把文本设为粗体；类似地，你可以通过用和把文本括起来，把文本设为斜体。没错，这里的“i”是“斜体（italic）”的意思。例1： 这句话应显示为斜体 该例在浏览器中将显示如下：这句话应显示为斜体 同样，你可以用small标签把文本设为小字体：例2： 这句话应显示为小字体
18、 该例在浏览器中将显示如下：这句话应显示为小字体 我可以同时应用多个标签吗？你可以同时应用多个标签，只要你能避免标签交错起来。最好通过一个例子来说明：例3：如果你希望一段文本即是粗体又是斜体，你可以这样做： 既是粗体又是斜体 注意不能这样： 既是粗体又是斜体 二者区别在于：在前一个例子中，首先打开的标签最后关闭。这样可以避免混淆。学习更多元素！正如第3课中提到的，有些元素是没有尾标签（end tag）的。这种元素被称作空元素（empty element），它们不与特定文本段落相关。一个例子是，它的作用是插入一个换行符。例4： 写一些文字重起一行再写一些文字 该例在浏览器中将显示如下：写一些文字
19、重起一行再写一些文字 注意上面的空元素：它没有尾标签，并且在首标签名称的后面加了空格和斜杠。 另一个空元素是，它的作用是画一条水平线。这里的“hr”是“水平线（horizontal rule）”的意思。例5： 该例在浏览器中将显示如下：HTML中的空元素还包括ul、ol和li，这三个元素用于制作列表。ul代表“无序列表（unordered list）”，它的作用是为每个列表项显示一个粗点。ol代表“有序列表（ordered list）”，它的作用是显示每个列表项的序号。用元素把多个列表项组织为一个列表，其中的li代表“列表项（list item）。感觉有些迷糊？那么，请看下面的例子：例7： 一
20、个列表项 另一个列表项 该例在浏览器中将显示如下：一个列表项另一个列表项例8： 第一个列表项 第二个列表项 该例在浏览器中将显示如下：第一个列表项第二个列表项哟！就这些啊？嗯，这一课就学这么多。再次重申，请反复实验本课所学的元素，并在制作自己的网页时使用它们。 斜体 小字体 换行 水平线 无序列表 有序列表 列表项 第7课：属性许多元素都可以设置属性。属性是什么？也许你还记得，HTML通过标签告诉浏览器如何展示网页（比如告诉浏览器显示一个换行）。你可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。例1： 我跟HTML的友谊 属性应写在元素的首标签上。具体写法是：属性名称
21、（attribute name）后紧跟一个等号（“=”），后面写上用双引号括起来的属性值（attribute value）。对于style属性的值，可以用分号（“;”）来分隔多个样式指令。这个后面会介绍。这里涉及什么知识点？属性有许多，我们首先学习的是style属性，它用于为网页设定样式，比如设置背景颜色等。例2： 该例将在浏览器中显示一个全是红色的页面自己动手试试看。稍后我们会详细讲解颜色设置的原理。注意，一些元素和属性的名称采用的是美式拼写，比如color（而不是colour）。请留意本教程中元素与属性名称的拼写，千万不要写错否则浏览器将无法理解你的代码。而且，别忘了用双引号把属性值（at
22、tribute value）括起来。为什么上面那个页面全是红的？在上例中，我们将网页的背景颜色设置为“#ff0000”，这个十六进制代码（HEX）代表红色。每个颜色都有其对应的十六进制代码。下面是一些例子：白色： #ffffff黑色： #000000红色： #ff0000兰色： #0000ff绿色： #00ff00黄色： #ffff00十六进制代码由“#”打头，后面跟六位数字或字母。由于这样的十六进制代码太多，不便记住哪个代码对应哪个特定颜色。为此，我们为最常用的216个颜色制作了一张表，供大家参阅：216个网页安全颜色表。除此以外，对于一些最常用的颜色（比如白色、黑色、红色、兰色、绿色及黄色
23、等），你还可以使用它们的英语名称。例3： 关于颜色就讲这么多了。让我们继续学习属性。哪些元素可以使用属性？不同元素使用不同的属性。有些元素（比如body等）被添加属性的机会比较大，而有些元素（比如br等）则较小、甚至不会被添加属性。HTML里有很多元素，同样也有很多属性。有些属性仅用于个别元素，有些属性可用于很多元素。反之亦然：有些元素只能使用个别属性，有些元素可以使用较多的属性。听起来这也许很令人困惑，不过一旦你熟悉了各个属性，就会感到很简单，并觉得它们很有用处。本教程将介绍大多数重要属性。一个元素包括哪些部分？一般来说，一个元素包括一个首标签（start tag）、零或多个属性（attri
24、bute）、一些内容和一个尾标签（end tag）。就这么简单， 参见下图。第8课：链接在这一课，你将学习如何在网页之间做链接。如何做链接？做链接也是通过元素（element）实现的。做链接只需一个元素和一个属性就行了。下面是一个例子，它是一个指向HTML.net的链接：例1： a href= 该例在浏览器中将显示如下：这是一个指向HTML.net的链接 元素a代表“链接（anchor）”；属性href代表“超文本引用（hypertext reference）”，它用于指定链接指向何处通常是一个因特网地址或者一个文件名。在上例中，属性href的值为“”，这是HTML.net网站的完整地址，也被
25、称作URL（统一资源定位符）。注意，在URL里必须包含“http:/”。“这是一个指向HTML.net的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上。如何在同一网站的网页之间添加相互链接？如果你要在同一网站的不同网页间做链接，那就不必拼写出网页的完整URL。举个例子，假如你有两个网页（比如说page1.htm和page2.htm），而且它们被存放在同一个文件夹中，那么你在做链接的时候，只要写出文件名就行了。这样，page1.htm到page2.htm的链接将如下所示：例2： 点击这里转到第2页 如果page2.htm被放在下一级文件夹中（比如“subfolder”），那么链接
26、将是这样：例3： 点击这里转到第2页 反过来，从page2.htm（在下级文件夹中）到page1.htm的链接将是这样：例4： 转到第1页 “./”代表当前位置（即该链接所在文件所处的文件夹）的上一级文件夹。同理，当前位置的上上级文件夹可用“././”表示。明白其中的规则了吗？当然，如果给出完整URL也行。如果要在一个网页内做链接怎么办呢？你也可以在一个网页的内部做链接比如在网页开始处提供一个目录，在其中列出指向下面各章的链接。这可以通过使用id属性和“#”符号来实现。用id属性标出要被指向的元素。例如： 标题1 然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个id属性的值，表明链接指向该id属性被定义的地方。例如： 转到标题1 来看一个例子就明白了：例5： 转到标题1 转到标题2 标题1 一些文字。 标题2 一些文
