资源简介

中小学教育资源及组卷应用平台
信息科技 第2课 网页中的信息编码教学设计
课题 网页中的信息编码 单元 第一单元 学科 信息科技 年级 七年级下
教材分析 网页中的信息编码选自《信息科技》（电子工业版）的第一章第二节的内容，教材由“查看网页源代码”、“认识网页源代码”二部分内容组成，主要内容包括：浏览器的作用和网页的组成、如何在浏览器中查看网页源代码、网页信息的编码和解码、HTML文件结构与标签的功能以及编辑HTML网页几个部分。学生通过对本教材的学习逐步掌握信息科技的相关知识，具备一定的科学精神和科技伦理，提高创新能力，夯实信息社会责任，发挥信息科技课程的独特育人价值，为数字强国培养优秀接班人和建设者。
教学目标 1、信息意识：根据学习与生活需要,有意识地选用信息技术工具处理与加工信息。2、计算思维：在实践应用中，熟悉网络平台中的技术工具、软件系统的功能与应用。3、数字化学习与创新：根据任务要求，借助在线平台，与伙伴协作设计和创作作品。4、信息社会责任：遵循信息科技领域的伦理道德规范，明确科技活动中应遵循的价值观念、道德责任和行为准则。
重点 1、了解浏览器的作用和网页的组成；2、了解网页源代码的概念；3、了解网页信息的编码和解码；4、了解HTML文件结构与标签的功能。
难点 1、掌握如何在浏览器中查看网页源代码；2、掌握HTML在线编辑器制作网页。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计对于提升企业的互联网品牌形象至关重要。观看视频引出今天的教学内容网页中的信息编码。 学生听教师引导生活中的案例 激发学生对网页设计的学习兴趣并快速进入学习状态
讲授新课 一、查看网页源代码1、浏览器的作用（1）最基础的就是用来浏览网页；（2）打开网页看新闻、看视频、玩网页游戏、看书、网购；（3）还可以添加扩展程序、插件等；（4）可以用来下载需要的文件、软件；（5）内容操作，比如打印、查找。2、浏览器中网页的组成：（1）网页标题；（2）网页文本；（3）网页图片；（4）网页多媒体；（5）网页状态栏。3、网页源代码是使用HTML语言编写的文件，也称为HTML文件，实际上是纯文本文件。4、在网页空白处右击，在弹出的快捷菜单里选择查看网页源代码，也可以按快捷键Ctrl+U。5、观看视频如何在浏览器中查看源代码。6、“<>” 就是HTML语言的标签，用来对网页上的标题、图片、声音等元素进行标识。二、认识网页源代码1、HTML在线编辑器是可以即时编译HTML代码的软件，访问地址（ https://c./front-end/61/ ）。2、网页信息的编码和解码总结：（1）网页的全部内容需在··· 标签中。（2）浏览器标题栏中的网页标题等信息主要放在··· 标签中。 （3）网页展示的内容需要嵌套在··· 标签中。3、HTML标签是HTML语言中最基本的单位，都是成对出现，标签对的第一个是开始标签，第二个是结束标签。4、常用的HTML标签及功能。5、网页字符编码格式。（1）UTF-8编码；（2）GB2312编码。练一练（1）利用HTML模板功能制作一个网页，感受网页信息的编码和解码过程。（编辑器地址：https://c./front-end/61/）（2）将“科技创新 自主可控”网页源代码中所用到标签填入下表，并简述这些标签的功能。 通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。 通过小组合作，加强学生组内团结、共同完成任务引导学生掌握什么是网页源代码，以及学习如何制作一个网页。培养学生独立思考和动手实践能力
布置作业 1、把HTML标签与其对应的功能连起来。2、编制“清平乐·六盘山.html”为文件名，在浏览器中浏览网页效果。 完成作业 培养学生查阅资料的能力，分析解决问题的能力
课堂小结 本节课首先了解浏览器的作用和网页的组成，网页源代码的概念，掌握如何在浏览器中查看网页源代码，接着了解网页信息的编码和解码，了解HTML文件结构与标签的功能，最后重点讲授了HTML在线编辑器制作网页的方法。 分组总结归纳 锻炼学生的总结能力，逻辑思维、语言表达能力。
板书 一、查看网页源代码1、浏览器的作用和网页的组成2、网页源代码的概念3、如何在浏览器中查看网页源代码二、认识网页源代码1、HTML在线编辑器简介2、网页信息的编码和解码3、HTML文件结构与标签的功能4、编辑HTML网页 学习、记忆及勾画知识点 明确教学内容及重点和难点
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共37张PPT)
1.2 网页中的信息编码
电子工业版七年级下册
新知导入
教学目标
1、了解浏览器的作用和网页的组成；
2、了解网页源代码的概念；
3、掌握如何在浏览器中查看网页源代码；
4、了解网页信息的编码和解码；
5、了解HTML文件结构与标签的功能；
6、掌握HTML在线编辑器制作网页。
1.2.1 查看网页源代码
新知讲解
浏览器的作用：
（1）最基础的就是用来浏览网页；
（2）打开网页看新闻、看视频、玩网页游戏、看书、网购；
（3）还可以添加扩展程序、插件等；
（4）可以用来下载需要的文件、软件；
（5）内容操作，比如打印、查找。
新知讲解
浏览器中网页的组成：
（1）网页标题；
（2）网页文本；
（3）网页图片；
（4）网页多媒体；
（5）网页状态栏。
新知讲解
网页源代码是使用HTML语言编写的文件，也称为HTML文件，实际上是纯文本文件。
新知讲解
在网页空白处右击，在弹出的快捷菜单里选择查看网页源代码，也可以按快捷键Ctrl+U。
新知讲解
观看视频如何在浏览器中查看源代码。
新知讲解
网页源代码
网页标题
文档标题
网页文本
嵌入图片
练一练
浏览器查看网页的源代码，并说明源代码中标签“<>”的作用。
“<>” 就是HTML语言的标签，用来对网页上的标题、图片、声音等元素进行标识。
1.2.2 认识网页源代码
新知讲解
HTML在线编辑器是可以即时编译HTML代码的软件，访问地址（ https://c./front-end/61/ ）。
点击HTML模板
勾选自动执行
新知讲解
网页源代码
网页执行结果
新知讲解
网页信息的编码和解码。
修改HTML页面正文的标题
修改浏览器标题
新知讲解
网页信息的编码和解码。
HTML信息的编码
HTML信息的解码
新知讲解
网页信息的编码和解码总结：
（1）网页的全部内容需在··· 标签中。
（2）浏览器标题栏中的网页标题等信息主要放在··· 标签中。
（3）网页展示的内容需要嵌套在··· 标签中。
新知讲解
HTML文件结构图。

我的HTML页面

我的第一个段落。

定义HTML文件
提供网页标题、标注及编码信息的内容，在网页中不显示
定义网页标题
网页中显示的内容，即在这个区域写入的任何内容，都会显示在网页中
网页采用utf-8字符编码格式
新知讲解
HTML标签是HTML语言中最基本的单位，都是成对出现，标签对的第一个是开始标签，第二个是结束标签。
HTML开始标签
HTML结束标签
新知讲解
常用的HTML标签。
标签 显示效果
··· 定义标题的字体大小，其中的n是标题大小的级别，取值范围为1—6，h1最大，h6最小。
为文档定义一个标题。
··· 文字以粗体形式显示。
··· 文字以斜体形式显示。
··· 文字以加删除线的形式显示。
新知讲解
常用的HTML标签。
标签 显示效果
··· 文字以加下划线的形式显示

···

划分段落
插入图像
··· 定义超链接