资源简介

中小学教育资源及组卷应用平台
初识HTML5 导学单
活动一：了解HTML5
1.上网搜索HTML相关资料，回答一下问题：
HTML的中文全称是 ，该语言使用一套标签或标记来描述网页中的 、 、 、 等。
2.用浏览器浏览网页时，除了“右击”——查看网页源代码外，还可以按下 键，查看网页的源代码。
活动二：体验操作
小组为单位，共同合作，将“网页测试”设置为你们要的效果。
活动三：观看微课《HTML发展史》，完成表格
时间 版本 事件
HTML1.0 （IETF）工作草案发布（非正式标准）
1995年 HTML2.0 于2000年之后被宣布已经过时
1996年 提供了很多新的特性
1999年 HTML4.0 在HTML4.0基础上的微小改进
正式发布，仍在完善
HTML5的优点：
21世纪教育网(www.21cnjy.com)中小学教育资源及组卷应用平台
初识HTML5教学设计
课 题 初识HTML5 单元 第三单元 学科 信息技术 年级 四年级
1.教学目标分析
知识与技能： 1. 了解超文本标记语言的概念。 2. 了解查看网页源代码的基本操作。 3. 理解基于HTML5的应用特点。 过程与方法： 1. 通过讲解与实践操作，了解超文本标记语言的概念，了解查看网页源代码的基本操作，理解基于HTML5的应用特点。 情感态度与价值观：提升价值的判断能力和负责任的行动能力，培养团结协作能力，激发对信息技术课堂的热爱。提升分析问题、解决问题的能力。
2.教学重点、难点分析
【教学重点】 重点：查看网页源代码的基本操作，理解基于HTML5的应用特点。 【教学难点】 难点：理解基于HTML5的应用特点。
3.教学准备 1．一个基于H5页面制作工具制作的作品，网页测试代码，微课视频 2.移动终端 3.PPT课件，导学单
4.教学过程 （教学过程的表述不必详细到将教师、学生的所有对话、活动逐字记录，但是应该把主要教学环节、时间安排、教学方法、教学活动、教学手段、教学资源、设计意图很清楚地再现。）
时间分配 教学设计 设计意图
5分钟 10分钟 15分钟 5分钟 5分钟 一、新课导入 1、疫情反反复复，学校组织了“疫情防控我帮忙”的主题活动，总共分成了两个项目： 项目1“防疫多媒体处理师” 项目2“防控宣传家（演示文稿），现在老师将项目2的作品”带来了，大家来瞧瞧看，思考下他们遇到了什么问题？ 电脑端的作品用微信发给朋友时却出现了问题（视频无法正常显示） 2、出示：电脑演示 VS 手机查看 3、思考：如何制作出移动端的防疫作品，扩大我们的影响力？ 4、回顾制作步骤：（出示） 确定主题——规划内容——选择制作工具（HTML）——设计作品——实践创作——交流完善——完成作品 5、引入新课：HTML 二、深入探究，了解概念 1、自学书本P46-47页，完成导学单中的活动一。 活动一：了解HTML 1.上网搜索HTML相关资料，回答一下问题： HTML的中文全称是 ，该语言使用一套标签或标记来描述网页中的 、 、 、 等。 2.用浏览器浏览网页时，除了“右击”——查看网页源代码外，还可以按下 键，查看网页的源代码。 2、请一位学生演示打开网页（活动一网页测试）师讲解，生操作。 3、思考：如果要修改网页内容“大家好，我是吴老师”改一下”大家好，我是梅城中心小学的学生，需要在哪里修改？ 出示：代码+浏览器=网页 三、体验操作：加深理解 1、介绍HTML文档的常用标签功能及结构。 2、活动二：小组为单位，共同合作，将“网页测试”设置为你们要的效果 1、以小组为单位，合作做修改一段代码效果（3段代码选一） 2、生展示效果 四、自主学习，了解历史 1、活动三：请同学们观看微课《HTML发展史》视频后，补充缺少信息，完成导学单中的活动三表格。 时间 版本 事件 1993年 HTML1.0 （IETF）工作草案发布（非正式标准） 1995年 HTML2.0 于2000年之后被宣布已经过时 1996年 HTML3.2 提供了很多新的特性 1999年 HTML4.01 在HTML4.0基础上的微小改进 2008年 HTML5.0 正式发布，仍在完善 2、对比体验，体会优势 对比老版本HTML和HTML5，感受其不同，并在导学单活动三的划线中填入HTML5的优点。 思考： （1）对比其他版本，HTML5多了哪些功能，和人之间互动更紧密？ （2）哪个版本的动画效果更丰富？ （3）哪个版本可支持手机浏览？ （预设）有对话有互动性，手机查看方便，有音乐有图片，动画效果更优美（板书） 3、老师看HTML5那么有意思，也做了一个课堂的评价表，大家一边体验HTML5的过程中，一边反馈今天的知识，看看大家能不能得一百分哦！ 引导生打开桌面课堂评价表 五、总结评价 这节课我们认识了什么技术？对比了那么多版本，我们选择了？因为它？ 下节课我们继续用HTML5这个技术制作防疫作品，给更多手机端用户感受宣传效果，扩大我们的影响力。 创设趣味的学习情境，更能激发学生的兴趣。 师引导提出驱动性问题：演示文稿转发到移动端（手机，iPad等）效果大打折扣，设计移动端解决弊端。 回顾数字化工具作品实现步骤，引出制作工具HTML。 学生利用自主探究、的方法去解决问题。 师生直观演示更具说服力，加深印象。 学生利用小组合作、实践操作的方法去解决问题加深理解。 借助微课自主学习，了解HTML的发展历史。 师生共同探讨，对比体验，感受HTML5的优势。
4.板书设计
初识HTML5 Ctrl+U 交互性强 (
网页
) 查看更方便 动画效果更精美 (
HTML5
) (
HTML4.01
) (
HTML2.0
) (
HTML3.2
) (
HTML1.0
)
121世纪教育网(www.21cnjy.com)(共13张PPT)
初识HTML5
执教者：XXX
TEXT
HERE
目前移动端用户却是电脑端用户的9倍之多，如何制作出移动端的防疫作品，扩大我们的影响力？
手机查看
电脑演示
VS
制作步骤
HTML5
确定主题
规划内容
选择制作工具
设计作品
实践创作
交流完善
完成作品
选择制作工具
学习任务一:
自学书本P45-47页，完成导学单中的活动一。
思考:
如果要将网页内容“大家好，我是吴老师”改成”大家好，我是梅城中心小学的学生，需要在哪里修改？
代码+浏览器=网页
HTML5文件结构如下：
＜ html:＞标记网页的开始
＜head＞标记头部的开始
＜title＞显示在浏览器左上方的标题＜/ title>
＜/head＞标记头部的结束
学习任务二:
小组为单位，共同合作，将“活动一网页测试”设置为自己想要的效果。
时间 版本 事件
HTML1.0 （IETF）工作草案发布（非正式标准）
1995年 HTML2.0 于2000年之后被宣布已经过时
1996年 提供了很多新的特性
1999年 HTML4.01 在HTML4.0基础上的微小改进
正式发布，仍在完善
学习任务三: 观看微课《HTML发展史》 ，完成表格。
HTML 1.0
HTML 2.0
HTML 3.2
HTML 4.01
HTML 5.0
HTML的发展史
1993年
1995年
1997年
1999年
2008年
学习任务四:
1、对比老版本HTML和HTML5，感受其不同，并在导学单活动三的划线中填入HTML5的优点。
2、打开桌面上课堂表现评价表，并查看源代码。
THANKS

展开更多......

收起↑