html语言教程教案,HTML语言与网页制作教案.doc

名师精编优秀教案

HTML语言与网页制作教案

城步职业中学：刘红兰

教学内容： HTML语言与网页制作

教学目的： 1、掌握 输入和运行HTML文件的方法

2、掌握 HTML基本的结构标记

3、掌握 html 在网页特效中的简单运用

教学重点： HTML基本的结构标记

教学难点： html 在网页特效中的简单运用

教学方法：演示法

教学地点：多媒体

教学课时： 1 课时

教学过程 :

一、什么是HTML语言

网页是由一种称为HTML的语言来描述的，网站中的大多数网页都以HTML文件的

形式保存， HTML( HyperTextMark-upLanguage )即 超文本标记语言，是 WWW的描

述语言。下面，让我们来看一看下面这个例子吧！

如果我们要在网页中显示“ 城步职业中专计算机16 班！” 一行文字， 可以用 HTML

语句来描述：

测试页面

城步职业中专计算机16 班！

输入并运行以上文件, 可以看到如下的内容。

二、输入和运行HTML文件的方法

名师精编优秀教案

1.编辑

HTML文件所使用的软件

我们可以使用任何一种文本编辑软件来输入、修改

记事本、写字板、Edit 、 Word等等。专业一点的有

HTML文件。简单一点的有

EditPlus等。

Windows 中的

2 .

输入

HTML文件的方法

逐字键入英文和汉字，每键入一行，击一次回车键。

3 .保存 HTML文件的方法

不管使用那种软件，都要注意将HTML文件另存为 “ 文本文件 ”(即 TXT 文件)，而且

文件后缀 ( 即扩展名 ) ，应该是html或 htm。

运行 HTML文件的方法

双击文件名，即可打开浏览器运行文件。四、 常用的 HTML标记

(一 )基本的结构标记

(1)开始和结束标记

表示 HTML语句开始

.....

表示 HTML语句结束

头部标记

......

头部结束

标题标记

标题开始

.....

标题结束

网页主体标记

......

网页主体结束

［例题 1］HTML文件的结构

这是网页的标题，显示在浏览器的标题栏 此行信息叫做 " 头信息 " (标题和头信息是可有可无的)

名师精编优秀教案

在两个

Body

之间的是网页的主体信息

主体信息可以有

图片、

文字、

表格、

动画等等

运行结果如下：

( 二 )

常用的标记

1.

换行标记

(

单个使用 )

2.

水平线标记

---

(

单个使用 )

段落标记

......< /p>

[例题 2 ]画水平线

COLOR="#cd061f">欢迎您光临！

名师精编优秀教案

运行结果如下

背景色标记

< bodyBGCOLOR=" 颜色代码 " >

5.背景图形标记

< bodyBACKGROUND=" 图形文件名 " >

五、网页特效例题先弹出一个欢迎窗口

在网页 HTML代码的 < BODY >内插入 script指令，使之成为

使别人在打开网页之前先弹出一个欢迎窗口。

六、作业

用 HTML语言编写一个网页，要求网页的背景色为蓝色，字体为楷体红色7 号字，文字内容

为“计算机16 班网页制作课，HTML语言的学习“，并且画一根水平线。