第16课 探秘网页与代码 课件　2024-2025学年人教版（2024）初中信息科技七年级全一册

探秘网页与代码 信息科技七年级第四单元第16课 人教版（2024）第四单元 《校园活动线上展》 Theme template 04 01 班级文化展——我为班级做网页 05 HTML编辑工具——HBuilder X 02 网页背后的奥秘 实践探究——浏览器开发者工具使用 目录 03 新知学习——网页与HTML代码 06 班级网页制作——文字内容的编辑 班级文化展——我为班级做网页 学校“校庆日”即将到来，校庆系列活动陆陆续续展开，为了提升各班级的参与热情进行班级文化评选活动——各班级需要以班级精神、班级精彩图片等元素制作网页并进行线上展览，结果评定以网络投票的票数为准。请各班积极准备，预祝各班在本次活动中取得佳绩！ 3 班级文化展——我为班级做网页 思考：班级网页要制作成什么样的呢？ 示例 4 网页背后的奥秘 思考：我们经常访问不同类型的网页，这些网页之间有没有什么共性？ 5 网页背后的奥秘 文本 图片 声音 视频 不同类型的文件是如何嵌入网页当中的呢？ 超链接 …… 图文声像并茂的网页背后，对应着一串串字符代（HTML），HTML是超文本标记语言的缩写，不是编程语言，通过标识符来标识网页中内容的显示方式，例如图片的显示尺寸、文字的大小、颜色、字体等。 浏览器能够对这些标记进行解释，按照要求显示出文字、图像、动画、媒体等网页内容 6 网页背后的奥秘 知识回顾：如何使用浏览器查看网页的代码？ 7 实践探究——浏览器开发者工具使用 浏览器的开发者工具（通常称作devtools）是一种网页开发者测试 和调试代码的工具，一般内置于网页浏览器或者作为浏览器的附加组件使用。 8 实践探究——浏览器开发者工具使用 实践任务一： 使用谷歌浏览器打开“国家智慧教育公共服务平台”网站，域名地址：https://www.smartedu.cn/，使用谷歌浏览器的开发者工具查询该网站的HTML代码, 请将该网站的开发者工具界面截图粘贴在任务单的任务一对应的位置 新知学习——网页与HTML代码 仔细观察左侧班级的展示网页，请挑选出你认为可以更改的文字部分。 网页标题 一级标题 二级标题 新的段落 三级标题 新知学习——网页与HTML代码 超文本标记语言中用于标记内容、格式或超链接的代码符号叫标签。大部分标签是成对存在的，但也有存在不成对的情况。 请阅读书本87页记录标签的写法及其对应的作用，打开题目连连看html文件，完成三轮游戏。 游戏规则：两次连线错误游戏需重新开始，需要连续三轮全部连线正确方可通关游戏。 HTML编辑工具——HBuilder X 浏览器开发者工具虽支持实时调试与效果预览，但其代码编辑器存在两大局限：默认字体规格不利于长时编码的视觉舒适度，且缺乏可定制的IDE级功能，影响复杂项目的代码维护效率。 12 HTML编辑工具——HBuilder X HBuilderX(简称HX)是一款由DCloud开发的集成开发环境（IDE），专为前端开发者设计。支持跨平台运行，集成了多个工具和插件，包括代码编辑器、项目管理器和调试器等，具有代码智能提示、格式化、语法检查等功能 将后缀名为html的文件拖动至HBuilderX图标上即可查看代码 清晰 13 班级网页制作——文字内容的编辑 网页的标题已成功设置 操作任务 14 班级网页制作——文字内容的编辑 样例 任务要求： 1、设置一级标题显示班号 2、设置二级标题显示班级口号 3、设置三级标题显示全班总人数 4、增加新的一行（段落）显示班级简介 5、保存代码，使用谷歌浏览器运行查看网页效果 15 拓展升级——班级网页制作 会话管理 服务器接收到请求后，处理并返回相应的网页内容，如HTML文档。 网页的文字颜色和字号均为默认状态，自行学习下列代码，总结运用规律并且尝试修改个人班级网页。（下图所示左侧为HTML代码，右侧为运行效果） 16 拓展升级——班级网页制作 设置一级标题的文字颜色为红色 设置段落文字的字号为20px(20像素) 17 谢谢！！！ 变化是常态，一路向前，知识无界 $$