HTML语言与网页制作教案

HTML语言与网页制作教案城步职业中学：刘红兰教学内容：HTML语言与网页制作教学目的：1、掌握输入和运行HTML文件的方法2、掌握HTML基本的结构标记3、掌握html在网页特效中的简单运用教学重点：HTML基本的结构标记教学难点：html在网页特效中的简单运用教学方法：演示法教学地点：多媒体教学课时：1课时教学过程:一、什么是HTML语言网页是由一种称为HTML的语言来描述的，网站中的大多数网页都以HTML文件的形式保存，HTML（HyperTextMark-upLanguage）即超文本标记语言，是的描述语言。下面，让我们来看一看下面这个例子吧！如果我们要在网页中显示“城步职业中专计算机16班！”一行文字，可以用HTML语句来描述：htmltitle测试页面/titlebody城步职业中专计算机16班！/body/html输入并运行以上文件,可以看到如下的内容。二、输入和运行HTML文件的方法1.编辑HTML文件所使用的软件我们可以使用任何一种文本编辑软件来输入、修改HTML文件。简单一点的有Windows中的记事本、写字板、Edit、Word等等。专业一点的有EditPlus等。2.输入HTML文件的方法逐字键入英文和汉字，每键入一行，击一次回车键。3.保存HTML文件的方法不管使用那种软件，都要注意将HTML文件另存为“文本文件”（即TXT文件），而且文件后缀(即扩展名)，应该是html或htm。4.运行HTML文件的方法双击文件名，即可打开浏览器运行文件。四、常用的HTML标记(一)基本的结构标记（1）开始和结束标记html表示HTML语句开始...../html表示HTML语句结束(2)头部标记head头部开始....../head头部结束(3)标题标记title标题开始...../title标题结束(4)网页主体标记body网页主体开始....../body网页主体结束［例题1］HTML文件的结构HTMLHEADTITLE这是网页的标题，显示在浏览器的标题栏/TITLE此行信息叫做头信息（标题和头信息是可有可无的）br/HEADBODY在两个Body之间的是网页的主体信息br主体信息可以有br图片、br文字、br表格、br动画等等br/BODY/HTML运行结果如下：(二)常用的标记1.换行标记br(单个使用)2.水平线标记hr(单个使用)3.段落标记p....../p[例题2]画水平线HTMLBODYhrsize=6width=60%align=centernoshadebrh1align=centerfont=7face=楷体_GB2312COLOR=#cd061f欢迎您光临！/font/h1hrsize=6width=100%align=centerbr/BODY/HTML运行结果如下4.背景色标记bodyBGCOLOR=颜色代码5.背景图形标记bodyBACKGROUND=图形文件名五、网页特效例题先弹出一个欢迎窗口在网页HTML代码的BODY内插入script指令，使之成为BODYonload=window.alert('欢迎您访问本站！')使别人在打开网页之前先弹出一个欢迎窗口。六、作业用HTML语言编写一个网页，要求网页的背景色为蓝色，字体为楷体红色7号字，文字内容为“计算机16班网页制作课，HTML语言的学习“，并且画一根水平线。