第三单元第14课初识HTML5 ppt课件（含教案） -（2020新）浙摄影版四年级下册信息技术.zip

浙江摄影出版社信息技术四年级下第浙江摄影出版社信息技术四年级下第 1414 课初识课初识 HTML5HTML5 教学设计教学设计课题 初识 HTML5单元第三单元学科信息技术年级四年级学习目标1.了解超文本标记语言的概念；了解查看源代码的基本操作。2.理解基于 HTML5 的应用特点。重点查看源代码的基本操作；理解基于 HTML5 的应用特点。难点理解基于 HTML5 的应用特点。教学过程教学环节教师活动学生活动设计意图导入新课 我想制作一份图文并茂、有声有色且易于交流的“数字名片”，可找不着好帮手，怎么办?很多 H5 页面制作工具能帮你实现。别着急，我们先来了解什么是 H5。思考 激发学生学习兴趣并快速进入学习状态讲授新课 H5 是 HTML 5 的简称，是指描述网页的标准语言，“5” 是指它的第 5 个版本。一、认识一、认识 HTMLHTML 是超文本标记语言(HyperText Markup Language) 的英文缩写，该语言使用一套标签或标记来描述网页中的文字、图片、表格、链接等。用浏览器浏览网页时，一般通过单击鼠标右键，选择“查看网页源代码”， 就可以看到当前网页的 HTML 源代码了。为什么有这么多尖括号啊?这就是 HTML 标签， 它们通常是成对出现的，通过老师演示学生动手操作，提高动手能力。小组交流、分培养学生组间合作能力，并且炼动手能力有着特殊的含义。标签就是标记文档的标题。小知识浏览器的作用主要是读取 HTML 文档， 并以网页的形式显示文档中的内容。HTML 文件结构如下 html:标记网页的开始head标记头部的开始title显示在浏览器左上方的标题/ title/head标记头部的结束 body标记页面正文开始/body标记页面正文结束/html标记网页的结束HTML 标签是由尖括号包围的关键词，通常成对出现。试一试打开一个网页，查看该网页的源代码二、从二、从 HTML 到到 HTML 5作为互联网的通用标准语言， HTML 在计算机网络的发展过程 中起着很重要的作用。HTML 在 1993 年发布 1.0 版以后， 随着网络技术的发展，多次改版升级，功能越来越完善，能更好地处理互联网中的应用，如网页中图形的享学生小组间讨论，共同完成任务。培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。绘制，音频、视频的加载等。HTML 5 是随着移动终端的快速普及而得到广泛应用的。这个版本的优点主要是可以跨设备、跨平台使用，页面加载更快，用户体验更好。HTML5 的设计目的是为了在移动设备上支持多媒体。教你一招打开网页， 按下 Ctrl+U 键， 就能快速查看你正在浏览的网页的源代码了。试一试打开一个网页，按下 Ctrl+U 键查看该网页的源代码三、三、 基于基于 HTML 5 的应用特点的应用特点HTML 5 提供了许多新的功能， 实现了更丰富的图形化界面和更友好的人机交互模式，页面内容的交互性更强了。阅读材料HTML 文档的常用标签功能介绍基本标签创建一个 HTML 文档 设置文档头部通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。学生小组间讨论，共同完成任务。通过教师的讲解，以小组合作的方式，开通过小组合作，加强学生组内团结、共同完成任务培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。通过小组合作，加强学生组内团设置文档的可见部分文档整体属性设置背景颜色设置文本文字颜色设置链接颜色标题标签设置标题图形元素添加一幅图像Img src= name格式排版创建一个新的行插入一个回车换行符展探讨交流，完成任务。结、共同完成任务表格创建一个表格开始表格中的每一行开始一行中的每一格文本标签创建预格式化文本创建最大的标题创建最小的标题创建黑体字创建斜体字设置字体大小，从 1 到 7设置字体的颜色课堂练习课堂练习1.打开三个不同网页，并查看各源代码，比较它们的不同。学生小组间讨论，共同完成任务，并分组汇报。培养学生独立完成练习的能力。课堂总结分小组总结归纳，教师补充。各组汇报总结，其他小组成员做补充。锻炼学生的总结能力，逻辑思维、语言表达能力。作业布置 上网搜索关于 Word 文档、TXT 文件、HTML文件格式的说明，比较这三种文件格式的区别，将自己的发现整理成研究报告。板书一、认识 HTML二、从 HTML 到 HTML 5三、 基于 HTML 5 的应用特点第14课 初识HTML5浙摄影版 四年级下新知导入 我想制作一份图文并茂、有声有色且易于交流的“数字名片”，可找不着好帮手，怎么办? 很多H5页面制作工具能帮你实现。别着急，我们先来了解什么是H5。新知讲解 H5是HTML 5的简称，是指描述网页的标准语言，“5” 是指它的第5个版本。新知讲解一、认识HTML HTML是超文本标记语言(HyperText Markup Language) 的英文缩写，该语言使用一套标签或标记来描述网页中的文字、图片、表格、链接等。新知讲解 用浏览器浏览网页时，一般通过单击鼠标右键，选择“查看网页源代码”， 就可以看到当前网页的HTML源代码了。新知讲解新知讲解 为什么有这么多尖括号啊? 这就是HTML标签， 它们通常是成对出现的，有着特殊的含义。新知讲解 标签就是标记文档的标题。新知讲解 浏览器的作用主要是读取HTML文档， 并以网页的形式显示文档中的内容。小知识新知讲解HTML文件结构如下 html:标记网页的开始head标记头部的开始title显示在浏览器左上方的标题/ title/head标记头部的结束新知讲解 body标记页面正文开始/body标记页面正文结束/html标记网页的结束 HTML标签是由尖括号包围的关键词，通常成对出现。合作探究试一试 打开一个网页，查看该网页的源代码新知讲解二、从HTML到HTML 5 作为互联网的通用标准语言， HTML在计算机网络的发展过程 中起着很重要的作用。 HTML在1993年发布1.0版以后， 随着网络技术的发展，多次改版升级，功能越来越完善，能更好地处理互联网中的应用，如网页中图形的绘制，音频、视频的加载等。新知讲解HTML 5是随着移动终端的快速普及而得到广泛应用的。 这个版本的优点主要是可以跨设备、跨平台使用，页面加载更快，用户体验更好。 HTML5的设计目的是为了在移动设备上支持多媒体。新知讲解 打开网页， 按下Ctrl+U键， 就能快速查看你正在浏览的网页的源代码了。教你一招合作探究试一试 打开一个网页，按下Ctrl+U键查看该网页的源代码新知讲解 HTML 5提供了许多新的功能， 实现了更丰富的图形化界面和更友好的人机交互模式，页面内容的交互性更强了。三、 基于HTML 5的应用特点新知讲解阅读材料阅读材料HTML文档的常用标签功能介绍基本标签创建一个HTML文档 设置文档头部设置文档的可见部分新知讲解标题标签设置标题文档整体属性设置背景颜色设置文本文字颜色设置链接颜色新知讲解图形元素添加一幅图像Img src= name格式排版表格创建一个新的行插入一个回车换行符创建一个表格开始表格中的每一行开始一行中的每一格新知讲解文本标签创建预格式化文本创建最大的标题创建最小的标题创建黑体字创建斜体字设置字体大小，从1到7设置字体的颜色课堂练习 1.打开三个不同网页，并查看各源代码，比较它们的不同。课堂总结总结本节课所学内容作业布置 上网搜索关于Word文档、TXT文件、HTML文件格式的说明，比较这三种文件格式的区别，将自己的发现整理成研究报告。板书设计一、认识HTML二、从HTML到HTML 5三、 基于HTML 5的应用特点