教你 HTML I 目录

什麽是 HTML?
HTML 的全名是 HyperText Markup Language，是编写网页的基本语言，它不是什麽
程式，只是一些插在普通文件内的码( code )，这些码可以控制我们的浏览器怎样
把文件显示出来，例如字体的大小和颜色等，
也可以插入图像和连结。

插有 HTML 码的文件称为 HTML document，副档名是 htm 或 html
，要制造一个 HTML document ，我们只需用 windows 内的记事本 (notepad) 编写，
然後把它储存成 *.html 或 *.htm 的档案即可。

HTML 一点也不难学，大家可以跟从这个网页，学懂它的结构和那些简单的码，便可
以造出十分美丽的网页了。

若要看一个 HTML document 的卢山真面目，只要在浏览器内选择检视 (view) > 原始档 (source)
即可，但可不要看这个网页的原始档啊，因为这个网页除了 HTML 外，还利用了 DHTML
和 Javascript 来编写的。

HTML 的结构
HTML document 一定要有故定的格式，我们的浏览器才可以把把它认出和分析，它的基本格式是：

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>

文件的主要部份

</BODY>
</HTML>

在这里有两个重点，每一个开启码是被 (<>) 所括住的，而关闭码是被 (</>) 所括住的。

例如：HTML document 的开启码是 <HTML> 和关闭码是 </HTML>。

开启码的作用是控制浏览器开始一个指令，而关闭码的作用是控制浏览器停止一个指令。

颜色
 网页的颜色 , 背景图像和其他特性是由 <BODY> 的标签控制的，利用 <BODY> 的标签，
你可以控制背景颜色, 文字颜色和连结的颜色，要控制这些颜色，便要在 <BODY> 的标签
内加上一些属性， <BODY> 标签便要写成这样：

<BODY BGCOLOR="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">

<body> 标签内的属性
BGCOLOR 控制背景颜色
text 控制文字颜色
link 控制连结颜色
vlink 控制已阅读过的连结颜色
alink 控制现在的连结的颜色

而 xxxxxx 这六个数值代表红／绿／篮的 hexidecimal value，是六个不同的英文字母或数字，
不同的组合便造出不同的颜色，切忌把它们设成相同的颜色啊，否则背景和文字混为
一体，大家便什麽也看不到的了。

以下是一些颜色的例子：

  • 白色 = FFFFFF
  • 黄色 = FFFF66
  • 红色 = FF0000
  • 灰色 = CC9999
  • 篮色 = ccccff
  • 绿色 = 00FF00
  • 黑色 = 000000
  • 紫色 = CC33FF
  • 浅篮 = 00CCFF
    •

    背景图像
     若要加入背景图像来代替背景颜色，那便要在 <BODY> 标签内加上 BACKGROUND
    的属性了。如你想将一个名为 "bg.gif" 的图像设成背景图像，那 <BODY>
    标签便要写成这样：

    <BODY BACKGROUND="bg.gif" text="ccff00" link="#0066CC" vlink="#336600">

    附注：那个图像的档案必须与你的网页在同一个目录内，如果它是在其他的地
    方，你就必须输入完整的路径了，如：http://www.somewhere.com/bg.gif 。

    水平线
    在你的文件内，如你想插入水平线，只要加入一个 <hr> 的码便可：

    在 <hr> 的标签内，你可以控制这水平线的长度 , 宽度 , 和是否有阴影，如：

    <hr size="5" align="left" noshade width="50%">

    上面的码会制造出一条这样的水平线：

    <hr> 标签内的属性
    width=number/percentage 控制线的长度，可以是数字或百份比
    align=left/right/middle 控制线是靠左／靠右／置中
    size=number 控制线宽度
    noshade 使线没有阴影

    附注：大家有时在网页内看到有些很特别的线，这些线只是一些图像，而不是利用
    HTML 造出来的。

    小圆头的清单
    只要加入 <ul> 的码，你便可以制造业一个有小圆头的清单：

    <ul>
    <li>物件一
    <li>物件二
    <li>物件三
    </ul>

    上面的码会造出以下的清单：

    • 物件一
    • 物件二
    • 物件三
    <ul> 开始清单
    <li> 清单中的物件
    </ul> 关闭清单

    数字清单
    只要加入 <ol> 的码便可以造出一个数字清单，如：

    <ol>
    <li>物件一
    <li>物件二
    <li>物件三
    </ol>

    上面的码会造出以下的清单：

    1. 物件一
    2. 物件二
    3. 物件三
    <ol> 开始清单
    <li> 清单内的物件
    </ol> 关闭清单

    定义清单
    定义清单一般是用作解释一样物作，要做一个定义清单便要加入以下的码：


    <dl>
    <dt>Michael Jordan
    <dd>一位十分出色的篮球员，他现正效力公牛队。
    <dt>狗
    <dd>人类最好的朋友。
    </dl>

    上面的码会造出以下的清单

    Michael Jordan
    一位十分出色的篮球员，他现正效力公牛队。
    狗
    人类最好的朋友。
    <dl> 开始清单
    <dt> 要被定义的东西
    <dd> 定义
    </dl> 关闭清单

    Headers
    我们的浏览器可以认出六个不大小的 headers，这六种 headers 的码如下：


    <h1>Level one header</h1>
    <h2>Level two header</h2>
    <h3>Level three header</h3>
    <h4>Level four header</h4>
    <h5>Level five header</h5>
    <h6>Level six header</h6>

    上面的码会造出以下六种 headers：

    Level one header

    Level two header

    Level three header

    Level four header

    Level five header
    Level six header

    附注：
    切记要加上关闭码。

    文字置中
    如你想把文字置中，可以加入 <CENTER> 的码如下：

    <center>文字置中</center>

    上面的码会造出以下的效果：

    文字置中

    附注：
    浏览器会把所有在 <CENTER> 这个码之後的东西（包括图像）置中，直至
    它读到 </CENTER> 这个关闭码为止。

    文字变成 bold, italics或加上底线
    如你想把文字变成 bolded，便要加上 <b> 的码了，如下：

    <b>I am the king of the world</b>

    上面的码会造出以下的效果：

    I am the king of the world

    如你想把文字变成 italics，便要加上 <i> 的码如下：

    <i>I am the king of the world</i>

    上面的码会造出以下的效果：

    I am the king of the world

    如想在文字下加上底线，便要加上 <u> 的码如下：

    <u>I am the king of the world</u>

    上面的码会造出以下的效果：

    I am the king of the world

    附注：

    １）它们是可以一起用的啊。
    ２）切记加上关闭码。

    跳到下一行
    在结出一段    文字後，若想跳到下一行，可以加上 <br> 或 <p> 的码如下：

    段一<br> 段二<p>段三

    上面的码会造出以下效果：

    段一
    段二

    段三

    附注：
    <p> 是比 <br> 跳多一行的。

    在 <p> 的标签内，可以加上 align=left/right/center，这样便可控制 <p> 之後的文字是靠左／靠右或置中了，例：

    殷秀梅<p align="right">成方园</p><p align="center">关贵敏</p>

    上面的码会造出以下效果：

    殷秀梅

    成方园

    关贵敏

    附注：
    切记加上关闭码     </p> 啊！！

    <p align="right/left/middle"> 跳两行，可以控制以後的东西是靠右／靠左／置中
    <br> 跳到下一行
    </p> 关闭<p>内所控制的靠右／靠左／置中的指令

    格式化的文字
    有些时候你想自己写了什麽，在网页内就出现什麽，无论是文字的位置
    , 字体 , 文字间的空位也会一模一样的在出现在网页内，这个时候你便要用到
    <PRE> 这个码了，然後用 </PRE> 来关闭。例：

    我现在身处休斯敦
　　　休斯敦有很多华人　　　　　　一个很繁荣的地方
　　　　　　　　而且有很多东西吃
    <PRE> 开始格式化的文字
    </PRE> 停止

    连结
    连结是一个网页之中不可缺少的东西，要制造一个连结，便要插入
    <a href="URL"> 的码，如下：

    <a href="http://www.nba.com">NBA official site</a>

    上面的码会造出以下的效果：

    NBA official site

    附注：
    １）必须加上     </a>，否则浏览器会把 <a href="http://www.nba.com"> 後的所有东西连结到 http://www.nba.com
    ２）URL 即是网址

    如果要连结在同一系统内的档案，便加上 <a href="相对的路径">

    连结到同一目录内的档案：
    <a href="abc.shtml">Link to abc</a>

    连结到一些子目录的档案：
    <a href="subdirectory/abc.shtml">link to a file in subdirectory</a>

    <a href="URL"> 连结到另一网址
    <a href="相对的路径"> 连结到同一系统内的档案
    </a> 关闭连结

    同一文作内的连结
    相信大家在浏览此页时也发现当按下目录内的连结
    或按下回到目录，便能跳到这页的另一地方吧，要做出这样
    的连结有两个步骤。

    １）给目标地一个名称，而这个目标地是在按下连结时会跳去的。如下：
    <a name="目标的名称">目标地点</a>

    ２）插入一个连结，当按下这个连结时便会跳到去目标位置。如下：
    <a href="#目标的名称">跳到目标</a>

    例：
    <a name="target">目标地点</a>
    <a href="#target">跳到目标</a>
    其中 target 是目标名称。

    附注：
    １）在连结的标签内，必须加上 # 在目标的名称前。
    ２）目标名称是由你自己改的。

    插入图像
    在网页内插入图像，只要加入 <img src="图像档名或URL"> 便可。如下：

    <img src="http://www.zzi.net/images/smbanner/hccbbs.gif">

    上面的码会造出以下的效果：

    在 <img src="http://linlin.hypermart.net/images/smbanner/hccbbs.gif"> 的标签内可以控制图像的长 , 宽 , 靠左／靠右／置中和 border。如下：

    <img src="http://www.zzi.net/images/smbanner/hccbbs.gif" width="176" height="62" align="right" border="2">

    上面的码会造出以下的效果：


    　

    　

    <image> 标签内的属性
    width 长度
    height 宽度
    align="right/left/middle" 靠右／靠左／置中
    border="number" 外框的宽度，如不想要外框便设成 0

    若想学比较深入的 HTML，便到 HTML2 看看吧。