html文档网页制作,使用HTML制作网页.doc

使用HTML制作网页

台州电大工程技术系 钱莹

HTML(Hyper Text Mark-up Language )即超文本标记语言，是 WWW 的描述语言。HTML语言是由 HTML标记组成的描述性文本，HTML 标记可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

通过使用HTML，我们可以制作出精美的页面，同时，它也是设计功能更强大的电子商务网站的基础。

通过本章节的学习，要求同学掌握Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记的使用规则，熟悉标记中各类属性的含义及使用方法。

在本章节的学习中，我们将围绕HTML标记学习，通过一个实际案例制作(台州旅游网主页)，依次学习Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记；在对以上标签进行介绍同时，辅以实际案例制作，使学习过程中能够理论与实际相结合，提高教学效果。

台州旅游网

Tab标签< html>< /html>其间为所有的页面元素代码

< head>< /head> 放置页面的一些属性，如meta等

< title>< /title>设定网页的标题

< body>< /body>整个页面的主体部分，可设定背景色，文本等

例:< body bgcolor="颜色代码" background="图片地址" οnlοad="" text="" link="" vlink="已访问后的颜色" alink="单击时的颜色">

HTML标记示例

台州旅游信息网

台州旅游信息网制作 步骤一：熟悉(HTML,HEAD,TITLE,BODY)标记

步骤一程序

功能：通过示例，使学生对HTML标记功能产生直观印象。

重点：

html标记必须成对使用，譬如

各标记的功能

标记的嵌套关系

2.字标题标签

< h1>< /h1>放标题 1,2……表显示的大小

< h2>< /h2>

·

< h7>< /h7>

此外还有< hr>< /hr>可以插入一个横线，当然，你业可以修改此线的相关属性.

字标题标记示例

要点：

字标题标签的使用方法

…字体的大小排列

3.文本

< p>< /p>定义一行且空出一行 < p align="center/right/left">< /p>

< br>换行

< font size="2" color="#FFFFFF" face="宋体">文本< /font>

< b>加粗 如:< font>< b>文本< /b>< /font>

< I>< /I>使倾斜

< u>< /u>下划线

步骤三示例

要点：

1、

标记的区别

2、标记的使用

3、标记及其各属性使用方法，color属性使用方法

4.链接< a href="地址">文本< /a> 比较常规，其中可以对文字进行修饰

< a href="mailto:vastmaster@163.com">发送邮件< /a>

< a href="" title="文字">< /a> title说明鼠标放到上面时显示的文字

超连接示例

5.图片链接< img src="地址" alt="欢迎访问" width="200" height="200" border="0" align="center">

只需将上面的的加入< a href="">< /a>中就可以了

图片使用示例

6.表格

< th>表格头< /th>常是黑体居中的文字

< table>< /table>

< tr>< /tr>定义行标签

< td>< /td>

< tbody>< /tbody>

cellspacing为相邻单元表格间距，celladding为边框同内容间距

< tr align="">水平对齐方式

< tr vlign="">竖直对齐方式

表格使用示例

重点：

1、

等标记使用方法 2、表格高度，宽度，边框等属性设置方法 3、灵活使用表格进行网页排版。 7.使用以上各类标记，设计出“台州旅游网”页面 通过灵活使用以上各类标记，我们就能够建立一张类似于“台州旅游网”的精美网页。