第四单元 第16课 探秘网页与代码（二） 课件 - 2024—2025学年人教版（2024）初中信息科技七年级全一册
2025-03-31
|
18页
|
765人阅读
|
3人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第16课 探秘网页与代码 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 53.97 MB |
| 发布时间 | 2025-03-31 |
| 更新时间 | 2025-03-31 |
| 作者 | 深耕浅出 |
| 品牌系列 | - |
| 审核时间 | 2025-03-31 |
| 下载链接 | https://m.zxxk.com/soft/51348594.html |
| 价格 | 1.50储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
探秘网页与代码
（二）
信息科技七年级第四单元第16课
人教版（2024）第四单元 《校园活动线上展》
Theme template
04
01
班级网页再升级
05
班级网页再升级——添加超链接
02
新知学习——网页与HTML代码
班级网页再升级——嵌入图片
目录
03
新知学习——网页与HTML代码
06
HTML代码与网页文件
班级网页再升级
增加班级合照
增加图书馆网址链接
升
级
方
向
3
新知学习——网页与HTML代码
<body> 标签是HTML文档中非常重要的部分，它定义了网页的主体内容，即用户在浏览器窗口中可以看到的所有内容。
<body> 标签位于 <html> 标签内部，通常紧跟在 <head> 标签之后。
4
新知学习——网页与HTML代码
浏览器窗口可以看到的内容是什么？
5
新知学习——网页与HTML代码
<img> 标签是HTML中用于插入图像的标签。它是一个自闭合标签，不需要结束标签，但必须包含 src 属性来指定图像的路径
src 属性：指定图像的路径（可以是相对路径或绝对路径）。
alt 属性：提供图像的描述性文字，用于图像无法显示时显示的替代文本
6
新知学习——网页与HTML代码
素材图片丢失？
alt 属性：提供图像的描述性文字，用于图像无法显示时显示的替代文本
7
班级网页再升级——嵌入图片
操作任务要求：使用HBuilderX打开上周个人的html文件，将教师下发的合照.jpg嵌入网页之中。
示
例
8
班级网页再升级——嵌入图片
嵌入图片方法一：
修改网页，让它显示计算机中的图像文件 合照.png。
提示：<img src='***/001.png'>
此方法较为常用
将图像文件（如001.png）放置在你的HTML文件所在的目录中，或者放置在某个子目录中。
例如，如果你的HTML文件和图像文件都在同一个目录中，那么可以直接使用文件名作为路径。
如果图像文件在子目录中（如 images/），则需要使用相对路径。
9
班级网页再升级——嵌入图片
嵌入图片方法二：
运行《图像编码转换器》软件，选择图像文件笑脸.png 后进行编码转换，然后用运行结果替换网页中的 <img> 标签。确保网页所在文件夹中没有图像文件合照后，浏览网页
笑脸.png
把图像文件中的数据按 base64 编码方案进行了编码编码后，二进制的图像数据就可以用字符串的形式表示出来。浏览器可以识别base64 编码，并显示图像。此时，图像数据保存在字符串中，因而不再需要图像文件。
10
新知学习——网页与HTML代码
<a> 标签（锚标签）是HTML中用于创建超链接的标签。它不仅可以链接到其他网页或资源，还可以用于在页面内导航、下载文件等。
基本语法：
<a href="网址">链接显示文字</a>
11
新知学习——网页与HTML代码
点击链接
12
新知学习——网页与HTML代码
13
班级网页再升级——添加超链接
操作任务要求：使用HBuilderX打开已经嵌入合照的班级文化展示.html文件，为网页添加超链接，超链接显示文本为“广州图书馆”，网址为：https://www.gzlib.org.cn/
14
班级网页再升级——添加超链接
15
HTML代码与网页文件
一般情况下，HTML 代码保存在以“.htm”“.html”等为扩展名的网页文件中。但实际浏览过程中，浏览器只要能得到相应的 HTML 代码就可以了，并不要求这些代码必须以网页文件形式保存
16
HTML代码与网页文件
拓展探究任务：
1. 运行《Web 服务器》软件
2. 修改编码、内容等参数。
3. 根据提示访问这个网站。
4. 修改内容后再次访问，看看显示的变化。
改动编码方式
改动内容
谷歌浏览器地址栏粘贴服务器的访问地址如:
http://192.168.10.162:8080
17
谢谢！！！
变化是常态，一路向前，知识无界
EV录屏3.9.7软件录制
Lavf56.38.102
本视频由湖南一唯信息科技开发的EV录屏软件录制，www.ieway.cn
EV录屏3.9.7软件录制
Lavf56.38.102
本视频由湖南一唯信息科技开发的EV录屏软件录制，www.ieway.cn
EV录屏3.9.7软件录制
Lavf56.38.102
本视频由湖南一唯信息科技开发的EV录屏软件录制，www.ieway.cn
$$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。