电子工业版信息技术七下1.2 网页中的信息编码 课件.pptx

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代码的软件，访问地址（///front-end/61/）。点击HTML模板勾选自动执行

新知讲解网页源代码网页执行结果

新知讲解网页信息的编码和解码。修改HTML页面正文的标题修改浏览器标题

新知讲解网页信息的编码和解码。HTML信息的编码HTML信息的解码

新知讲解网页信息的编码和解码总结：（1）网页的全部内容需在html···/html标签中。（2）浏览器标题栏中的网页标题等信息主要放在head···/head标签中。（3）网页展示的内容需要嵌套在body···/body标签中。

新知讲解HTML文件结构图。!DOCTYPEhtmlhtmlheadmetacharset=utf-8title文档标题/title/headbody h1我的HTML页面/h1 p我的第一个段落。/p/body/html定义HTML文件提供网页标题、标注及编码信息的内容，在网页中不显示定义网页标题网页中显示的内容，即在这个区域写入的任何内容，都会显示在网页中网页采用utf-8字符编码格式

新知讲解HTML标签是HTML语言中最基本的单位，都是成对出现，标签对的第一个是开始标签，第二个是结束标签。HTML开始标签HTML结束标签

新知讲解常用的HTML标签。标签显示效果hn···/hn定义标题的字体大小，其中的n是标题大小的级别，取值范围为1—6，h1最大，h6最小。title···/title为文档定义一个标题。b···/b文字以粗体形式显示。i···/i文字以斜体形式显示。s···/s文字以加删除线的形式显示。

新知讲解常用的HTML标签。标签显示效果u···/u文字以加下划线的形式显示p···/p划分段落img插入图像a···/a定义超链接audio插入音频video插入视频

新知讲解网页字符编码格式。编码格式类型编码格式特点UTF-8编码又称为万国码，可以通过屏蔽位和移位操作快速读写，是网页应用中优先采用的编码格式，适用于各种语言。GB2312编码是第一个汉字编码国家标准，适用于简体汉语。

练一练利用HTML模板功能制作一个网页，感受网页信息的编码和解码过程。（编辑器地址：///front-end/61/）

练一练将“科技创新自主可控”网页源代码中所用到标签填入下表，并简述这些标签的功能。标签功能

练一练将“科技创新自主可控”网页源代码中所用到标签填入下表，并简述这些标签的功能。标签功能html···/html定义HTML文件，网页的全部内容需在此标签中。head···/head主要放浏览器标题栏中的网页标题等信息。body···/body网页展示的内容需要嵌套在此标签中。title···/title为欢迎页、第一页、第二页、第三页、第四页文档设置标题。b···/b设置欢迎页“科技创新自主可控”文字以粗体形式显示。img插入中国空间站、中国天眼、自控芯片的图像。

课堂总结本节课首先了解浏览器的作用和网页的组成，网页源代码的概念，掌握如何在浏览器中查看网页源代码，接着了解网页信息的编码和解码，了解HTML文件结构与标签的功能，最后重点讲授了HTML在线编辑器制作网页的方法。

课堂练习1、简述浏览器的作用。2、简述浏览器中网页的组成元素。3、简述html···/html、head···/head、body···/body标签的功能。

课堂练习1、简述浏览器的作用。答：（1）最基础的就是用