资源简介

(共22张PPT)
第三单元 第2节
编辑网页分享学习成果
（贵州版）七年级
上册
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
信息意识
计算思维
数字化学习与创新
信息社会责任
在网页编辑与发布过程中，遵守网络道德规范，尊重他人知识产权，提高信息安全意识，负责任地发布和分享有价值的学习资源。
能利用在线网页编辑工具，编辑展示黄金分割学习成果的HTML网页，通过添加图片和超链接丰富网页内容，提升数字化创作与表达能力。
能够理解HTML标签的基本结构和功能，掌握编辑网页的基本方法（文字、图片、超链接），理解网页解析和呈现的过程，形成结构化思维。
认识到网页是分享学习成果的重要载体，了解HTML是网页的基础语言，形成通过代码编辑网页展示信息的意识。
02
新知导入
上节课我们学习了用H5网页制作工具制作网页，非常方便快捷。但是，你知道网页背后的代码是什么样的吗？网页是如何被浏览器解析并呈现出来的？今天我们就来学习HTML的基本知识，亲手编辑网页代码，更深层次地理解网页的工作原理。
什么是HTML？
网页的基本结构是什么？
如何编辑网页代码？
让我们走进HTML的世界，学习编辑网页，分享学习成果！
同学们，你们见过网页的源代码吗？知道HTML是什么吗？
本节课我们将学习HTML的基本结构，掌握编辑网页的基本方法，了解网页发布的途径。
02
新知导入
编辑网页分享学习成果
主题：HTML基础 → 编辑网页 → 添加图片和链接 → 挑战时刻
通过编辑HTML网页展示“黄金分割”探究成果
03
新知讲解
1. 了解网页中的编码
浏览网页时，人们所看到的文字、图片、音频甚至视频等内容，都是通过HTML来设计、组织的。当用户使用浏览器访问网页时，浏览器会从服务器获取用HTML编写的网页文件，随后对其内容进行解析，最终呈现出丰富多彩且组织有序的网页画面。
网页发布的三个途径：
一是使用免费个人主页空间（如博客）发布；
二是使用专用服务器发布网站；
三是使用虚拟主机服务器发布网站。
小贴士！
HTML（Hypertext Markup Language，超文本标记语言）是编写网页的标准语言。如今HTML已经发展到第5代，简称H5。
03
新知讲解
科学园地：HTML网页文件
HTML网页文件是一个纯文本文件，它是用超文本标记语言编写的，由浏览器读取、解析后显示网页效果。
在HTML网页文件中，各式各样的标签对网页元素的属性（如文字字体、颜色、字号等）作出描述，标签还标记了图片、音频、视频等元素的链接位置。
HTML文件的结构：
表头：用于对文件作一些必要的定义，如文件标题、CSS样式定义等。
文档主体：主要是网页中将显示的内容，如文本、图片、表格等。
整个文件：包裹所有内容。
03
新知讲解
步骤1：打开在线网页编辑工具，输入HTML代码，预览效果。
- 基础结构：...
步骤2：修改网页内容。
-

标签：设置网页标题
-

标签：设置正文段落
修改好后，点击“预览”按钮，查看效果
步骤3：使用标签添加图片。
- src属性：图片链接地址
- width/height属性：图片尺寸
步骤4：使用标签添加超链接。
- href属性：链接目标地址
- 链接文字：用户点击的文字
2. 活动3.2.3 编辑网页
图3-2-13 输入代码并查看效果
03
新知讲解
步骤3：使用标签添加图片。在属性src中添加图片链接，在width和height中设置图片的尺寸。修改好后，点击预览按钮，查看图片是否已添加成功。
步骤4：使用标签添加超链接，将小组其他成员编辑的网页通过超链接链入你的网页。设置文字为超链接，链接到新网页。
2. 活动3.2.3 编辑网页（续）
图3-2-15 为网页添加图片
图3-2-16 用超链接链入新网页
03
新知讲解
活动3.2.3 编辑网页
打开在线网页编辑工具，完成以下操作并记录结果：
1.输入基础HTML代码，预览效果
2.修改

和

标签中的文字内容
3.用标签添加一张黄金分割相关图片
4.用标签添加一个超链接
将每一步的操作和效果记录在下表中。
操作步骤 预览效果
输入基础 HTML 代码，预览效果 页面显示大标题 “标题”，下方显示一段普通文字 “一段文字”，无图片、无链接
修改

和

标签中的文字内容 页面大标题变为黄金分割，段落文字更新为黄金分割介绍，文字样式不变
用标签添加一张黄金分割相关图片 页面展示黄金分割示意图，图片显示在段落文字下方
用标签添加一个超链接 页面出现蓝色可点击文字，点击后跳转至黄金分割百科页面
03
新知讲解
万维网（World Wide Web，WWW），简称Web，是互联网重要的应用之一，是互联网中所有网站和网页的集合，它如同一个大规模的“信息储藏所”，人们可以在万维网中方便地浏览网页、获取数据与资源。
万维网的诞生为计算机的操作带来了革命性的变化，它简化了用户与互联网的互动方式。用户不必再输入复杂而难记的指令，只需要点击屏幕上的链接，便可轻松访问互联网上丰富的资源。这一创新极大地降低了互联网的使用门槛，使得互联网用户从计算机专家迅速扩展到普通民众。
你知道吗？
05
拓展延伸
网页不仅可以从服务器获取信息，还可以向服务器反馈信息。表单是实现用户与网页之间信息交互的方式之一，通过在网页中添加表单可以实现问卷调查、用户登录、提交资料等交互功能。
表单的标签是，用户根据表单的文字提示，可以在表单中输入相关信息，提交表单后，填写的信息会反馈给服务器。
任务：1.制作简单的用户登录页面。
2.思考：用get方法提交的表单信息安全吗？若不安全，该如何解决？
挑 战 时 刻
提示！
表单有get和post两种提交方式。get方式参数会显示在地址栏中，post方式参数不会显示。
05
拓展延伸
参考答案：
1.用户登录页面的HTML代码结构：使用标签包裹表单内容，包含用户名输入框（type=“text”）、密码输入框（type=“password”）和提交按钮（type=“submit”）。
2.用get方法提交的表单信息不安全，因为提交的参数会出现在地址栏中，其他人可以看到输入的信息（如用户名和密码），容易造成信息泄露。
解决方法：使用post方法提交表单（method=“post”），这样表单数据不会显示在地址栏中，相对更安全。对于重要信息（如密码），还应该加密传输，使用HTTPS协议。
此外，网站还应采取验证码、防止SQL注入等安全措施。
参 考 答 案
04
课堂练习
案 例
如何编辑网页展示黄金分割学习成果？
某同学学习了HTML后，想要编辑一个网页来展示“黄金分割”的学习成果。他打开在线网页编辑工具，开始编写代码。
思考：如果是你，你会如何设计这个网页？需要用到哪些HTML标签？
参考答案：1.用

标签设置网页标题“黄金分割学习与探索”；2.用

标签添加正文内容，介绍植物中的黄金分割；3.用标签添加向日葵花盘的图片；4.用标签添加超链接，链接到其他同学的网页；5.整体结构包括、、标签，在中设置charset为UTF-8以正确显示中文。
图3-2-14 修改网页中的文字
04
课堂练习
做一做
完成以下任务：
1.打开在线网页编辑工具，输入基础HTML代码并预览。
2.修改

标签内容为“我的黄金分割学习网页”，修改

标签内容为你收集的黄金分割知识。
3.用标签添加一张相关图片。
4.用标签添加一个超链接，链接到你喜欢的网站。
参考：1.基础结构包括...；2.

写标题，

写段落，注意标签成对出现；3.设置图片；4.链接文字设置超链接。
04
课堂练习
说一说编辑HTML网页和使用可视化工具制作网页各有什么优缺点？
说 一 说
HTML代码更灵活，想怎么改就怎么改！
可视化工具更简单，不用记标签。
学会HTML后能更深入地理解网页的工作原理！
05
拓展延伸
活动：了解更多HTML标签
上网了解常用的HTML标签，完成以下任务：
1.查阅资料，了解以下标签的作用：
（粗体）、（斜体）、（下划线）
（音频）、（视频）

（表格）、

（列表）
2.选择2-3个标签，在你的网页中尝试使用它们。
3.记录你的发现和使用体会，与同学交流。
提示：学习HTML标签时要勤动手练习，在实践中掌握。
06
课堂总结
1
HTML —— 超文本标记语言，编写网页的标准语言
探究要点
2
网页结构 —— 包裹，表头，主体
3
常用标签 ——

标题

段落 图片 超链接
4
活动3.2.3 —— 编辑网页：输入代码→改文字→加图片→加超链接
5
挑战时刻 —— 表单实现交互，get/post方法，信息安全
1
2
3
4
5
07
板书设计
主题：编辑网页分享学习成果
核心：HTML基础 → 编辑网页 → 添加元素 → 表单与安全
板书设计：编辑网页分享学习成果
概念：HTML是超文本标记语言，网页由浏览器解析呈现
核心：HTML结构 ｜ 常用标签 ｜ 图片链接 ｜ 表单交互 ｜ 网页发布
示例：

标题

段落 图片 超链接 表单
流程：了解HTML → 编写基础代码 → 修改文字 → 添加图片 → 添加链接 → 表单挑战
08
课后作业
思考：HTML网页文件的基本结构是什么？标签和标签分别有什么作用？
实践：使用在线网页编辑工具，制作一个完整的个人主页，包含标题、文字介绍、图片和超链接。
观察与发现
调查与记录
在浏览器中查看任意网页的源代码（右键→查看源代码），观察有哪些HTML标签。
调查3种常用的网页制作工具，比较优缺点。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑