《2022年HTML基础设计教案.pdf》由会员分享，可在线阅读，更多相关《2022年HTML基础设计教案.pdf（4页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、教案编写日期：20XX 年 11 月 20 日授课时间： 20XX 年 11 月 21 日-25 日授课班级：高二3-8 班授课地点：高中微机教室第六章HTML代码基础1.1 HTML 语言指导思想与理论依据 ：HTML语言基础广西科学技术出版社信息技术高中第三册第一单元第六章“了解一点HTML ”的入门知识，HTML语言是超文本标记语言的缩写(HyperTextMarkupLanguage) ,它是网页设计中应用最广泛的一种语言，也是网页制作中学生感到最头疼难学的一个内容。掌握html 语言基础会让动态网页制作的学习事半功倍，因而本部分知识显得非常重要，因此在本节课程的教学中，结合新课标及教
2、材的特点，采用多种教学法结合方式（启发式教学法、任务驱动法、演示法等等.） ，激发学生学习兴趣，尤其是注重对学生的引导，采用任务驱动方式教学，引导学生通过自主学习平台自主学习从而提高学生的学习效率，本节内容是在学生已经掌握了利用FRONTPAGE 制作普通网页的基础上，对网页语言的深入学习。学情背景分析 ：本节之前，学生已经学习了如何利用FrontPage进行网页以及网站的制作，但是对于网页的认识还知识停留在页面的直观设计上，缺少对HTML代码的认识。本节课主要对学生讲述HTML的基本概念，为学生培养良好的代码结构意识打下基础。在本节课程的教学中，结合新课改的理念，采用创设情境演示教学的方法，
3、激发学生学习兴趣，采用任务驱动方式教学，引导学生通过自主学习平台自主学习从而提高学习效率。教学目标知识与技能：1、掌握HTML基本概念、格式，理解其与网页的关系；2、掌握基本的HTML标签的作用与用法；过程与方法：通过对简单网页html 代码的观察对和html语言的基本结构进行自我概括，掌握 HTML文件的基本结构，能够明确HTML语言的结构和特点，并能在实验的过程中尝试自我修改。情感态度价值观：本课主要锻炼学生分析能力，语言构成能力。在相应的实验中，还能提升学生自主探究、自我学习的能力。教学重点：HTML标签的基本用法及其意义教学难点：HTML主要标签属性的具体意义及使用教学方法：任务驱动法
4、（引导学生自主学习）、演示法（激发学生学习兴趣）、上机操作实习法（精讲多练） 、联系对比法（化难为易，照葫芦画瓢）教学媒体：教材、多媒体课件、电脑等教学过程：教学内容及知识点教师活动学生活动备注HTML与网页的关系HTML与网页的关系前面的课程中我们都自己动手制作了自己的网站，我们知道网页上所包含的信息 内容 是 丰 富 的 ，有 文字 、 图 片、 动画、音频、视频（和同学一起回顾）下面我们来做个实验。上网查看任意一个网站的源文件。小结：无论是我们做的简单网页，还是包罗万象、功能强大的大型的网站，亦或包含动画、声音、电影等多媒体信息的精美思考：网页的本质是？利 用 “IE” “查看”菜单中“
5、查看源文件”的功能查看各种网页代码。大家认真观察并思考一下：这些代码有什么特点？它与我们的网页有学生在老师的引导下通过老师的演示试验理解网页与HTML 的关系。通过老师的演示试验活动形成自我体验。培养学生的观察与自我探究能力。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 4 页 - - - - - - - - - - 网页，它们的源文件都是HTML 代码。什么是HTML代码呢？是用一种网页编写语言HTML语言编写的代码，那什么是 HTML语言呢？这种语言与网页有什么关系，它有什么特征？如何用
6、HTML语言设计网页代码？什么关系？利用幻灯片展示教学目标：1、掌握HTML概念，及其与网页的关系；HTML基本 结 构 及四 个 基 本标识利用幻灯片展示HTML 的概念。现在让我们一起来看看一个空白的网页是否有 HTML 代码，如果有，它们有些什么规律。（利用 FRONTPAGE 制作一张空白的网页，并查看源代码。 ）一个完整网页的HTML 结构 新建网页 基本结构标签Html 标记： 头部信息： 主体标记： HTML 语言的特点：1、包含在 中的标签语言；2、大多成对出现，以 开始，以结束; 3、书写上不区分大小写，可以在同一行也可不在同行，中间留空不限四大基本标示的功能：一、 指明文件
7、内容是用HTML 语言编写的，html 文件中的所有文本和其他html 标识都应包含在其内 . 二、 html 将文件内容分成head和 body两部分， head部分的内容一般是对网页文件所做的一些说明，如页面标题等学 生 结合刚才的活动和老师一起学习HTML，思考一张空白的网页怎么也会有学多代码呢？利 用FRONTPG自动生成HTML的功能，查看网页代码，为下面的自学铺垫。利用幻灯片展示教学目标：2、掌握HTML特点及其主体结构；3 、 掌 握 常 见HTML TAG（标签）的作用与用法；4、能看懂普通网 页 的 源 代码，并能根据要求在文本编辑器中做适当修改。精品资料 - - - 欢迎下
8、载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 4 页 - - - - - - - - - - 三、 用来指明页面的标题，显示在网页的标题栏中，这个标识必须放在head标识内四、 body 是 html 文件的主体部分，在浏览器中看到的网页内容都放在body标识内 . 学 生分 组活动 ，进 入自主 学习 平台进 行自 我探究学习请同学们进入自主学习平台学习更多的HTML 代码知识，并完成老师的布置的任务请同学们在老师的引导下进入本节新课栏目进行自主学习，然后完成下面的任务任务一：1、将老师传送到桌面的名为“练习”的文件
9、夹改名为你自己的名字2、将桌面上已改为你名字的文件夹导入到 FRONTPAGE 中3、在 Fronptage中双击首页 index.htm 文件并点击右下角“代码”进入HTML 编辑状态：编辑首页 HTML 代码增加如下的页面效果：A、给首页添加背景图片（背景图片素材放在了下发文件夹中的images中，素材文件名为 bj.jpg）B、给首页添加背景音乐（背景音乐素材放在了下发文件夹中的music中，素材文件名为 sound.mp3 ）C、在首页的任意位置添加一个FLASH动画（ FLASH 动画素材放在了下发文件夹中的 FLASH 中，素材文件名为game.swf，宽为 500，高为 500）
10、D、保存并将整个文件夹进行作业提交以刚才老师讲解的四个HTML基 本标示为基础，进入学习平台自 学 更 多 的HTML代 码知识学 生 边 利 用FRONTPAGE学习，边进行组内讨论互助学习通过自主学习平台 进 行 自 主 学习、讨论协作学习、自我小结等多种方式，实施有效学习，分层学习，使每个同学能体会到学习的成就感。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 4 页 - - - - - - - - - - 学有余力的同学可以进行任务二的练习：任务二：编写代码使首页能增加如下左右交替滚动
11、的字幕效果（演示任务完成后的效果）作 品展 示及学 习情 况演示老师对提交的作业作品展示及对出现问题的讲解比较其他同学的作品并自己小结与展示同学作品的异同与优逆在评价中对学习方法与学习成果进行比较升华。小结和学生一起小结HTML的分类、特点与格式。任何HTML标记都是由“”号括住，标记名不区分大小写，语法宽松2、多数的标识是成对出现的例如：3、少数标识单独出现，如：、等4、部分标识拥有属性如颜色，大小等例如：属性格式：网页内容 或学生回顾自身学习成果，在老师的指导下进行再次比较升华。这部分知识概念性 、 理 论 性 较强，而且又是学生首次尝试在计算机中通过写代码的形式来实现设 计 目 的 ， 因此，老师进行适当的小结与讲解是有必要的。在线测试时间允许的情况下进行在线测评，难度与会考题同步学生在线进行约五分钟的测评考核让学生在线测评考核，考题结合会考难度及会考知识点可能出现的题目教学反思精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 4 页 - - - - - - - - - -