教你 HTML I 目录

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

插有 HTML 码的文件称为 HTML document,副档名是 htmhtml
,要制造一个 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

    附注:

    1)它们是可以一起用的啊
    2)切记加上关闭码。

    跳到下一行
    在结出一段
    文字後,若想跳到下一行,可以加上 <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

    附注:
    1)必须加上
    </a>,否则浏览器会把 <a href="http://www.nba.com"> 後的所有东西连结到 http://www.nba.com
    2)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> 关闭连结

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

    1)给目标地一个名称,而这个目标地是在按下连结时会跳去的。如下:
    <a name="目标的名称">目标地点</a>

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

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

    附注:
    1)在连结的标签内,必须加上 # 在目标的名称前。
    2)目标名称是由你自己改的。

    插入图像
    在网页内插入图像,只要加入 <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 看看吧。