网页制作教学案——HTML语言基本应用

能力目标：培养学生们软件操作的技能、协作学习的能力以及应用所学知识解决实际问题的能力。

情感目标：引发学生学习制作网页知识的兴趣，发展创新精神，培养实事求是，理论与实际相结合的科学态度与科学精神。通过师生、生生互动，增进增强学生的自主性和合作精神。

与难点

（2）、会进行简单的HTML代码的编写

（3）、结合frontpage进行网页设计

与方法

一、创设情境、导入新课

（1）、打开Frontpage，展示“环保”网站的其中一个简单页面，看一看在我们平时用的“普通”和“预览”标签之间还有一个“HTML”，看看里面的内容，想一想它的作用是什么？

教师讲解：HTML是一种描述性语言，用来控制浏览器显示网页时的外观。HTML是Hyper Text Markup Language的缩写，通常译为“超文本标记语言”，使用HTML控制的文件在任何操作系统的浏览器上读起来都是一样的。

（2）、了解HTML的基本结构

HTML文档通常是由3部分组成：起始标记、网页标题和文件主体。其中文件主体是HTML文件的主要部分和核心内容。

案例小结：从本案例可以看到HTML 文档的基本结构形式为：

…

…

和是HTML文档开始和结束的标志，和是HTML文档标题信息开始和结束的标志，和HTML文档文体内容开始和结束的标志。

1、文字

展示“环保”站点的一些网页，引导学生分析文字输入的方法，得出在HTML中文字输入的方法。

任务一：看一看在HTML中文字前后的标识符是什么？然后根据要求输入一段文字。

任务二： 比一比通过格式工具栏修饰后的文字，HTML发生了什么变化。然后根据要求对HTML代码进行更改。

了解一些常见的文字修饰代码：如： 

face="楷体_GB2312" 

size="6" 

color=red>  

 、  、

2、图片

观察一下怎样通过一段HTML代码进行图片的插入

任务三：先插入一张图片，看看HTML代码有什么变化，然后将图片删除，通过编写HTML代码进行图片的插入。

3、标题和段落

每篇文档都要有自己的标题，每篇文档的正文都要划分段落。

案例小结：本案例涉及的内容是HTML标题和正文段落标记，通过本案例的学习，读者应该掌握以下内容：

（1）、HTML标题

为了突出正文标题的地位和它们之间的层次关系，HTML设置了6级标题。用户可使用以下格式定义文档标题，其中n为1~6，n越小字号越大，n越大字号越小。

标题文字

（2）、HTML段落

HTML使用P标记给网页正文分段，它将使标记后面的内容在浏览器窗口中另起一段。通过P标记中的Align属性可对段落的对齐方式进行控制。Align属性值通常有Center、Right和Left，可分别使段落内的文本居中、居右、居左对齐。用户可使用以下格式定义文档段落。

段落内容

使用P标记与使用Br标记是不同的，Br标记只能起到换行的作用，换行仍然是发生在段落内的行为。

网页的诱人之处在于丰富的内容和灵活的链接，在HTML代码中是如何书写代码的？

任务四：找出我们曾经的作品“环保“站点，看一看超链接的代码。（1）不同页面之间、（2）网站之间、（3）电子邮件、（4）书签，然后根据需要对以上的代码进行编写

5、网页标题和背景图片

（1）、将区的之间的代码更改，看一看网站的变化

（2）、将改写成：

任务五：思考如何通过HTML代码给网页添加一个背景图片。

（1）、教师引导学生总结本节课学习的内容， 

（2）、教师展示优秀作品，对存在的问题加以点评