网页制作基础知识

到底要怎么样才可以让别人看到我的网页呢？
网页又是怎么样在互联网上传播的呢？
要想别人看到你所做的网页，就必须得有一个空间，来存放你的网页文件。
下面，教大家申请免费空间。(现在网上有好多的免费空间，大体的申请流程都差不多的)

请紧跟着我的步骤：

http:///reg1.asp
打开这个网址填写好资料,如下图:

填好资料后，确认提交，就可以看到你的信息了！如下图:

地址：tammychen. 我申请好了后，就可以用这个来打开我的网页啦，
****. 星号换成你的用户名
如果你的用户名是123，那么你的网址就是：123.

下面看一下FTP服务器，如下图：

我申请了后，我的服务器地址是：ftp://tammychen.
ftp://****. 星号换成你的用户名
如果你的用户名是123，那么你的FTP地址就是：ftp://123.

好了，到了这里，网址有了，FTP地址也有了，我们可以上传我们第一步所做的那个网页了：
打开IE浏览器，在地址栏输入你的FTP地址，如下图：

输入好了后，按回车键(Enter)，再输入你注册时所填的用户名跟密码，如图:

输入完了后，点击登录，看到了下图的界面，就进入了FTP服务器啦，网页里面的所有文件都在这里面，由你来管理

下面，我们第一步所制作的那个网页复制上去，在提示下图对话框时，选择“是”

就这样，我们的网页就传播到互联网上了，现在可以打开我们申请时所得到的网址，
就可以看到自己做的网页啦(在全球任何地方，打开你的网址，都可以看到你所做的网页)
在IE浏览器输入我们所申请得到的那个网址
我的网址是：tammychen.
看下我们所制作的网页吧，

做网页就是这样简单而轻松，我知道现在大家还有好多不明白的，
也许你现在正在想：为什么别人一打开这个网址，就可以看到我做的网页呢？
现在不明白没关系，请看下一步：网页是如何传播的?
看完了就清楚了

注：如果你的网页文件很多的话，用上面的网页上传方法，速度是很慢的，所以我们就要用到FTP上传软件了，下面是FTP下载地址跟使用方法，大家如果有兴趣可以先下载来看下，不看也没关系，在后面的教程里我会讲到FTP软件的使用的。

第三步：网页是如何传播的?

在上一步中,相信大家都按照上面的步骤做了.但是,浏览器是如何识别网页的呢?是通过什么传输给对方看的呢?
你明白了吗?...这一步，我们就讲一下网页是怎么样在互联网上传播的？

先理解几个概念：
一：什么是IP地址？
互联网上，这么多主机在上网，在冲浪，如何来区分这些主机的身份呢？
这个就要用到IP地址了，IP地址在互联网中是很重要的，如某一台主机的IP地址为：219.129.216.188
所谓IP地址就是给每个连接在Internet上的主机分配一个在全世界范围唯一的32bit地址。IP地址的结构使我们可以在Internet上很方便地寻址。IP地址通常用更直观的、以圆点分隔号的4个十进制数字表示，每一个数字对应于8个二进制的比特串

二：什么是域名？
世界上这么多的IP地址，又全是数字什么的，我们怎么记得住啊？？
呵呵，这你就放心吧，还有域名呢.。
比如，这个就是我的域名，它跟219.129.216.188这个IP已经绑定了
Internet 域名是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有重复的域名。域名的形式是以若干个英文字母、数字、中横线“-”组成，由“.”分隔成几部分，如 3j2.net是一个域名。从社会科学的角度看，域名已成为了Internet文化的组成部分。从商界的角度看，域名已被誉为“企业的网上商标”。只要在浏览器软件中键入您的网址，全世界接入Internet网的人都能够准确无误的访问到您主页的内容。

三：什么是URL和HTTP协议？
URL，就是我们常说的网址
当我们在浏览器输入http://www./default.asp这个URL时，就可以看到我的主页了
我们在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator，统一资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址。当你在浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。
浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。因此，在我们认识HTTP之前，有必要先弄清楚URL的组成,例如：http://www./post/2.html。它的含义如下：

　　1.http://：代表超文本传输协议，通知服务器显示Web页，通常不用输入；

　　2.www：代表一个Web(万维网)服务器；

　　3./：这是装有网页的服务器的域名，或站点服务器的名称；

　　4.post/：为该服务器上的子目录，就好像我们的文件夹；

　　5.2.html：index.htm是文件夹中的一个HTML文件(网页)。

HTTP协议(Hypertext　Transfer　Protocol，超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。这就是你为什么在浏览器中看到的网页地址都是以“http://”开头的原因。

看了上面的这些，大家是不是对网页的原理有了基本的了解了？
当我们在浏览器输入http://www.这网址时，因为它跟219.129.216.188这个IP绑定了，所以就会自动解析到219.129.216.188这个IP上，向219.129.216.188这台服务器发送请求读取网页文件的指令，服务器在接受了指令后，利用HTTP协议把文件里的内容传回浏览器，这样我们就可以看到服务器上的HTML文件|（网页）了。。。

现在我们明白了网页的原理！可是，你明白为什么网上的那些网页，有图形、又有动画、又有声音吗？
你想不想做个有图形，有动画，又有声音的漂亮网页，让你的亲朋好友看看呢？
想的话，接着下一步：什么是HTML？

第四步：什么是HTML？

上一步，我们理解了网页的原理，但要真真正正的学会网页制作
我们还要学会网页制作中，最基础的一种语言，它就是HTML语言了
那HTML语言到底是什么呢？（可不是某个国家的语言，不要想歪了哦）
不明白没关系，我们来理解一下！
HTML语言：
HTML语言是英文Hyperlink Text Markup Language的缩写，意为超文本标记语言。它是一种描述文档结构的语言，而不能描述实际的表现形式。HTML语言使用描述性的标记符（称为标签）来指明文档的不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分（或结构），如段落、标题和表格等。标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。

看了上面的这么多术语，也许你头都大了。浏览器向服务器发送请求后，服务器将这些乱七八糟的代码发给浏览器，然后浏览器对这些代码进行解释，这样我们就看到各种各样的图片，动画，听到各种各样的声音了。。。
其实，HTML语言的作用只是在网页制作中，我们用来标记，某些文字，图片，动画，声音，怎么样显示而已！

还记得我们在第一步中所做的实例吗？
下面就对第一步的那段代码进行讲解：

<html>
<head>
<title>这就是网页啦</title>
</head>
<body>
我也会做网页了
</body>
</html>

这是HTML语言中的基本框架，各个标记的作用如下：

html标记：
HTML标记 <html>是网页的第一个标记符，</html>是最后一个标记符。网页的所有内容，标记符都必须得在这两个标记符中间！

head首部标记：
<head>和</head>放在网页的开头，它的作用是提供一些跟网页有关的信息。如：<title>这就是网页啦</title>

title标题标记：
title标记是head首部标记中的一部分
在首部标记符中，最基本、最常用的是标题标记符<title></title>，它的作用是定义网页的标题。
如：<title>这就是网页啦</title>
这个就是把标题定义为：这就是网页啦
打开第一步中的那个网页就可以看到效果了

（在head首部标记中，还有很多像title这样的标记，它们都是放在<head>与</head>之间的，为了避免大家晕头转向，暂时先不讲其它的）

body标记：
body标记在html语言中是很重要的，它是html语言的主体部分，我们打开网页所看到的文字，动画，图像，都必须得放在body标记里面。。。

这一步就讲到这里。。告诉你一个秘密，单单靠这些知识，就想做出漂亮的网页，那是不可能的哦！！！
在第一步的实例中，大家看到的“我也会做网页了”
这几个字，也太普通了吧。得给它变变脸，改个模样才行。。。
怎么变？怎么改呢？
请看下一步：如何改变字体的模样？

第五步：如何改变字体的模样？

上一步中，我们讲解了HTML语言的基本框架。。。知道了文字，动画，图像，这些标记都得放在body标记中
这一步，我们来学习字体的一些标记，使我们的网页中的字体变得更加好看点！
究竟如何使我们网页中的字体变模样呢？看下去就知道了。。。
看下面的代码，在body标记中，
“我也会做网页了”这几个字的两边，是没有标记的，只要在字体的两边，加上我们要使字体变什么模样的标记就可以了
代码一：
<html>
<head>
<title>这就是网页啦</title>
</head>
<body>
我也会做网页了
</body>
</html>

如果要使字体变为粗体，我们可以这样写
代码二：
<html>
<head>
<title>这就是网页啦</title>
</head>
<body>
<b>我也会做网页了</b>
</body>
</html>

看到代码二跟代码一有什么不同吗？
呵呵，代码二里“我也会做网页了”这几个字两边，多了一个粗体标记<b></b>
只要把字体放里这标记中间，都会变成粗体，大家可以试一下```（应该还没有忘记第一步中的，新建记事本，再另存为index.htm吧）
要实现其它的效果也一样。。。请看请仔细看看这个：各种字体效果标记

看完了吧，但那里的只是一种标记的效果，下面我们来把`指定“字体大小”的标记和“指定字体”的标记来组合使用

请注意看语法结构：

<i><font size=5><b>我也</b> 会做<font size=6> 网页了</font></font></i>
我也 会做 网页了

也许你还不明白是怎么回事，没关系，我们来举个更简单的例子
 
<b>这是粗体</b>     这是粗体字，大家应该知道，但我要再加上一种效果要怎么做呢？
其实这也很简单的，把你要加的标记，包含着原来的标记跟字体就可以了，如下：
<i><b>这是粗体跟斜体</b></i>

下面，我们再来个复杂点的分别显示两种不同的模样
<i><b>欢迎</b><h3>光临</h3></i>

看懂了没有，其实很简单的，只要文字，包含在某个标记里，就会显示某种效果，
看“欢迎”这两字，同时包含在<b>跟<i>中，所以就同时显示粗体跟斜体，
再来看看“光临”同时包含在<h3>跟<i>之间，所以同时显示标题3跟斜体效果

字体颜色

指定颜色 <font color=#>我也会做网页了</font>

#可以是rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

如：
<font color=ff0040>我也会做网页了</font> 显示的效果是：我也会做网页了

ffoo40就是一个16进制数，不同的数可以显示不同的颜色，其它的可以看看这个：html颜色代码表

这一步的教程讲完了，大家可能觉得那么多标记要记忆，
其实大家只要记住那些常用的就可以了。。。。
下一步，我们来讲解，如何做文字链接？


第六步：如何给文字做链接？-------转自:xinmo66的空间
唉，最近很忙，趁今天休假，抽出点时间，写第六步！
好了，回顾上一步，我们讲到了文字的一些效果，今天，我们继续来讲：如何给文字做链接？
这一步，我暂时不讲路径的知识，因为那相对于你们来说，太难理解了。。这步只讲如何做链接，路径的知识后面再讲。
按照前几步学习过的知识，我们来建两个文件，一个命名为：index.htm      另一个命名为：index2.htm    
在index.htm文件的BODY标记中输入这段代码：<a href = "index2.htm">链接到index2.htm</a>
在index2.htm文件的BODY标记中输入这段代码：<a href = "index.htm">链接到index.htm</a>

完成了吧，那就打开其中的一个文件，点击那显示的文字，看看是什么效果。。。
呵呵，是不是点击了就链接到其它页面去了
好了，完成实验，我们就来理解一下这是怎么回事，看代码：
<a href = "index2.htm">链接到index2.htm</a>
看得明白吗？呵呵，其实很简单，跟我们上面学习的都差不多的，只是它多了一段代码，知道是多了哪一段吗？
如果把<a href = "index2.htm">里的href = "index2.htm删除了，
那么，代码就成了：<a>链接到index2</a>
呵呵，这段代码跟我们上一步学习的完成一样，只不过是标记换了
链接标记就是<a></a>

但是，单单一个链接标记是不行的呀，还要指定链接到哪个页面呢，所以：href = "index2.htm就出来了
<标记 属性="值">内容</标记>

<a href = "index2.htm">链接到index2.htm</a>

<a></a>就是标记
href就是<a>标记的一个属性了，作用是指定链接到哪里去。这个属性的值就是index2.htm
那么就是链接到index2.htm这个文件了。。
不知道大家有没有注意到，这只是在同一个页面打开的链接，我们平时上网，打开网页时，有的网页是新建一个窗口打开链接的呀，这个又要怎么样才可以实现呢？

其实这个更简单，我先说一下：
<标记 属性="值">内容</标记>

<a href = "index2.htm">链接到index2.htm</a>

这段代码的<a></a>标记只有一个属性href
我要告诉大家的是，一个标记可以有多个属性的，如：
<标记 属性="值" 属性2="值2"    属性3="值3">内容</标记>
结构就是这样了，每个属性之间，用空格分开就可以了。。
如果要新建一个窗口打开网页，我们可以加入target属性，如：
<a href = "index2.htm" target="_blank">链接到index2.htm</a>

大家可以在原来的代码上加上     target="_blank"    这段，再来打开试试
target属性的作用是指定在哪里打开链接，它的值就是_blank     只要指定这个值，就会新建窗口打开了，当然，还有其它的值，看下面：

_blank，在新窗口显示目标网页   (我们用的就是这个)
_self，在当前窗口显示目标网页 

_parent，框架网页中当前整个窗口位置显示目标网页 
_top，框架网页中在上部窗口中显示目标网页
好了，这一步的课程就算完成了。。
但是，一个页面不可能单单只有文字吧，那样也太单调了。。。
呵呵，没关系，看完下一步，你的网页就.......
 
第七步：如何在网页中插入图片？
 
这几天都没有更新文章，让大家久等了。。。
上一步我们讲到了如何给文字做链接，这一步，我们来学习一下：如何在网页中插入图片？
经过上一步的学习，了解到一个标记可以有多个属性，那么，我们来学习这一步就容易多了。

先来看下代码：
<img src="images.jpg" width="300" height="225" />
明白是什么意思吗？呵呵，要在网页中插入图片，这时我们就要用到img标记了。
先来看看第一个属性src，src属性是指定图片的路径的。。。
src="images.jpg"    这个的意思就是：显示images.jpg这个图片
第二个属性width，指定图片的宽度，单位默认为像素
width="300"    这个指定了图片的宽度为300像素
第三个属性height，指定图片的高度，单位默认为像素
height="225" 这个指定了图片的高度为225像素
除了这几个属性外，img标记的属性还有很多，我这就不一一解释了，还是那句老话：要学会搜索。有需要自己上www.google.com或www.baidu.com搜索吧。
这步就这样讲完了，呵呵``是不是很简单。。。下一步，我们来讲一下，如何给图片做链接？
由于我们在上一步中学过如何给文字做链接，所以，在学习下一步如何给图片做链接时，将是易如反掌。。。

因为两者都是大同小异的，想知道两者的区别在哪里，请看下一步：如何给图片做链接？

第八步：如何给图片做链接？

这步来讲讲如何给图片做链接，不知道大家还记不记得第六步的例子，给文字做链接。。。
其实图片链接，可以说是第六步跟第七步的结合，只要把显示文字的换成显示图片的代码就可以了
下面我们来看一下代码：

<a href = "index2.htm">链接到index2.htm</a>

这是第六步的文字链接代码。。。显示的文字是“链接到index2.htm”

我们只要把“链接到index2.htm”这段换成第七步的那段代码，就成了图片链接了，看代码：

也就是说，只要把<img>标记放中<a></a>标记之间，就有了链接的功能。。。

文字链接跟图片链接所不同的只是：
原来显示文字的地方，我们用来显示图片了。。。

就这样简单```

除了文字链接跟图片链接外，还有锚链接，邮件链接等等~~`我就不一一讲了```想了解的可以上网查资料```不明的也可以问我````

学习到这里，不知道大家有没有注意到，所有显示的图片，文字都是不成形不成样的```

呵呵，放心吧，接下来我们会讲到页面的排版标记的````

下步我们来学习一下页面的知识：如何为网页添加背景?

第九步：如何为网页添加背景?

真是不好意思，这么久才更新第九步，呵，不多说了，看正文

这步我们来讲一下如何添加网页背景，几乎所有的网页中，都有背景，这个在网页制作中，是最常用到的！

要添加网页的背景，得用CSS样式来完成了，看代码：

下面对代码进行解释:

body 这是一个标签，body就是定义body标记里面的内容，标签可以有多个属性，属性跟值都必须包含在{ }大括号之间

background-image: url(bj.jpg); 背景图片属性，bj.jpg是图片的路径

background-repeat: no-repeat; 这个标记是用来设置背景图片要怎显示，红色部分是值，值分别为：no-repeat为不重复 repeat为重复 repeat-x为横向重复 repeat-y为纵向重复

background-color: #333333; 这个是设置背景色的，红色部分是颜色代码

最后讲一下,在CSS样式外面加上这个HTML注释的作用是：如果CSS样式不正确，可以防止错误显示

这步就讲到这，单单有了图片还不行，再来点美妙的音乐就太好了，呵呵```，请看下步：如何添加背景音乐？

第十步：如何添加背景音乐？

添加背景音乐，其实很简单，看下面代码：
<bgsound src="背景音乐地址" loop=3>

只要把这段代码，放在head标记之间，就可以播放背景音乐了
用bgsound标记来实现背景音乐的播放
src属性的值就是背景音乐的地址，可以是绝对路径，可以是相对路径

loop属性是设置播放次数的```loop=3 这样播放三次就停止播放了``如果要无限循环播放，可以把loop的值设置为-1

我这里只是讲了两个主要的属性，bgsound标记还有其它属性的，我就不讲了
有兴趣知道的同志们，可以自己上网搜索.....（插入背景的方法不仅仅是这个，这个是最简单的）
好了，要说到排版，下步才是真真正正的排版：什么是表格？

第十一步：什么是表格？

表格，在网页布局中最常用的，制作网页的第一步就是页面布局，所以，我们有必要学习表格的知识！
现在，我们来讲一下表格的结构以及相关的属性！

下面看代码一：
<table>
<tr>
<td>这里输入表格的内容</td>
</tr>
</table>

上面是一个一行一列的表格。。<table>是表格标记，<tr>表示表格中的行，<td>表示表格中的列。。。

那么，要写一个一行三列的表格，又该怎么样呢？
看代码二：
<table>
    <tr>
      <td>这是第1行的第1列</td>
      <td>这是第1行的第2列</td>
      <td>这是第1行的第3列</td>
    </tr>
</table>

表格的结构是这样的，<table>标记包含<tr>标记，<tr>标记包含<td>标记，<td>标记表示列，在上面代码中，<tr>包含着三个<td>标记，那就是一行三列了

现在我们再来看看，三行一列的表格又是什么样的..
代码三：
<table>
    <tr>
      <td>这里是第1行的第1列</td>
    </tr>

不要被这些乱七八糟的标记弄糊涂了，大家仔细看下，上面的代码跟代码一的有什么不同？
代码一的是一行一列，代码三的是三个一行一列

那么，三行三列又是怎么样的呢？
看代码四:
<table>
    <tr>
      <td>第1行第1列</td>
      <td>第1行第2列</td>
      <td>第1行第3列</td>
    </tr>
    <tr>
      <td>第2行第1列</td>
      <td>第2行第2列</td>
      <td>第2行第3列</td>
    </tr>
    <tr>
      <td>第3行第1列</td>
      <td>第3行第2列</td>
      <td>第3行第3列</td>
    </tr>
</table>

把代码二的跟代码三的结合起来，就是三行三列了，大家认真比较一下!

现在了解一下表格的属性：

width="150" 宽度
border="100" 高度
（这两个属性大家应该很熟悉吧）

border="1" 表示边框的粗细为1像素
cellspacing="3" 单元格的间距
cellpadding="2" 单元格的边距

我这里讲的都只是基本的知识，大家想要了解更多，可以看看下面的教程:
http://www./html.html#t9

这步教程就讲到这里，大家可以结合前面所学到的标记，尝试一下，在表格中，插入图片，文字，并进行链接!