第16课 探秘网页与代码 教学设计2026-2027学年人教版初中信息科技七年级全一册

第16课 探秘网页与代码 逐字稿 ① 开头结尾就略过啦，因为各位老师肯定有很多别的事情：检查作业啊展示AI作业啊或者做问卷啊等等的~其他部分的逐字稿是非常详细的。 ② 逐字稿与PPT备注是一样的，按照PPT页码划分。 P1 （检查作业） 同学们，大家早上好！在开始今天的课程之前，我想先和大家聊聊一个我们每天生活中几乎都离不开的话题——网页。 P3 【实际情境导入，和学生聊天】 每天当我们打开浏览器，无论是查找学习资料、浏览新闻、观看视频，还是与朋友们在社交媒体上互动，我们都在与各种各样的网页打交道。 那么，我很好奇，大家最常访问的网页是什么呢？ 是百度用来查找知识的，还是抖音、B站来放松娱乐的？或者是微博、朋友圈来分享生活的点滴？ P4 哇，听起来大家都有自己的“心头好”呢！确实，这些网页不仅丰富了我们的信息来源，也为我们提供了无尽的乐趣和便利。 但这些网站是怎么做出来的呢？哎有同学说了，是代码，那么我们也可以靠我们灵巧的双手和智慧的大脑写出这一行一行代码，从而制作出自己的网页。 那大家想不想要自己制作一个网页呢？制作一个属于你们自己的网页！ P5 【定主题】 最近学校也在筹备科技节，刚好借着这个机会，我们可以为学校制作一个校科技节宣传网页！ 大家说好不好？ 由于科技节的主打项目是AI绘画，所以我们就把网页主题定为：“智绘未来科技节“！ P6 【大单元设计统一教学】 我知道大家已经跃跃欲试了，但请大家先别急，我们一节课是无法把网页完全制作出来的，我们需要五个课时的时间来完成这个事情！ 也就是说，整个第四单元，我们都做一件事情：为学校制作科技节宣传网页！ 这五个课时分别是：学习网页基础知识、使用代码编写网页、对网页进行美化、多人协同完成网页制作、使用超链接连接不同的网页形成最终的网站！ 我们今天呢就进行第一步：代码初识，网页揭秘（学习网页基础知识）！大家看这个星星，这就是我们目前所在的课时！ P7 那么对于网页的基础知识，我们所学的新知分为三部分！ P8 【过渡】 很多同学对网页为何能够展现图文声像，为何能够实现跳转，如何制作网页等问题心存好奇。本课将带领大家学习网页与网页代码的相关知识。 P9 （可以让学生自行访问一下网站进行感受） 【学习强国】 比如当大家打开学习强国的页面时，大家发现这个网页里有什么元素呀？ （文字、视频） 那么文字是如何编辑的呢？视频又是如何嵌入到网页里的呢？ P10 【qq音乐】 比如当大家打开qq音乐的页面时，大家发现这个网页里有什么元素呀？ （图片、音频、当然也有文字） 那么图片是如何上传的呢？音频又是如何嵌入到网页里的呢？ P11 刚刚我们说的一切一切，都要归功于我们今天学习的新内容：HTML！ 那么什么是HTML呢？其实它是一种代码，我们接下来就看一看他长什么样子？ P12 首先请大家打开老师下发的文件包中的“3D打印.html”，右键-检查-</>元素（或按下F12），查看网页源代码，与原网页里的元素对比。 （教师自行操作） P13 那么到底怎么修改呢？在代码上该怎么体现呢？ （教师自行操作并讲解标签包围内容） P14 为了验证网页及其对应的代码，我们可否修改右边的代码，然后观察左边原网页的变化。右键某一行代码-编辑为HTML，进行适当修改，点击别处确认修改，观察左侧网页。 （教师自行操作） P15 【类比html和python】 HTML像是我们建一个房子，我们可以修改房子的颜色、布置等等，让他看起来非常温馨！ 但python就像是我们房子里的各种智能电器，它能够帮我们在生活上解决很多问题！ P16 【过渡】 刚刚我们使用了简单临时的方法对文字进行了编辑，那么有没有更加统一的方法来实现这个操作呢？又如何对图像进行添加或替换呢？ P17 从上至下，我们发现： <html></html>代表的是整个网页，所有代码都在他们之间编写 <title></title>：设置网页标题 <body></body>：设置文档主体 <h1></h1>：设置内容的一级标题 <img src='***/***.jpg‘>：设置图像 <a href=‘***’></a>：设置超链接 所以，如果我们更改对应的代码，是不是就能够就该对应的网页呢？ P18 来，让我们尝试一下~首先我们右键“飞驰的火车.html”-在记事本中编辑。或右键“飞驰的火车.html”-打开方式-选择“记事本“，修改代码以改变网页标题和内容标题。 P19 然后修改<img src=‘AI-001.png’>为<img src=‘001.png’>，将图片改为笑脸图。这是第一种更换图像的方法！ P20 当然啦，大家也可以发挥自己的想象力，先使用AI大模型生成自己的图片，然后将图片保存到实验文件夹中，按照步骤二的方式将图片替换为刚刚生成的图片。 P21 比如老师就用AI生成了一个飞驰火车的图片，然后让其显示在网页上。 P22 那么，还有没有别的更换图像的方法呢？让我们运行《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的<img>标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。 P23 这时我们可以把001.png删掉，会发现：为什么删掉了001.png，图片还是会出现在网页中？其实呀是因为这里网页不再读取本地的图片，读取的是图片转换后的编码~ P24 刚刚我们讲了两种更换图片的方法，让我们来对比下吧~方法一最常用，指向了一个图像文件。方法二是把图像文件中的数据按base64编码方案进行了编码。编码后， 二进制的图像数据就可以用字符串的形式表示出来。浏览器可以识别base64编码，并显示图像。此时，图像数据保存在字符串中， 因而不再需要图像文件。 P25 更换完图片后，我们来为图片加一个说明吧，在<img>标签后面增加<p>标签，增加图像说明。 P26 图文声像并茂的网页背后，对应着一串串字符代码，浏览器根据这些代码进行相应的处理，才能呈现出人们看到的网页效果；大部分标签是成对出现的，但也存在不成对的情况。 P27 好！同学们完成得非常棒！下面我们来做个连线题复习下~ P28 【过渡】 互联网中有那么多的网页，难道所有的网页代码都要以html形式保存下来吗？ 还有没有别的保存形式呢？ P29 当然有别的保存形式，同学们请运行《Web服务器》软件。修改编码、内容等参数。修改内容后再次访问，看看显示的变化。 当我们修改内容时，会发现网页上对应的元素也进行了同步修改。 UTF-8指的是万能解码器。 P30 GBK指的是中文解码器。 P31 网页可以保存在网页文件中，可以保存在数据库中， 也可以由软件实时生成。 P32 网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请大家思考下。 我们可以来做个实验验证下 P33 这相当于第三种修改图片的方式：打开某一个含有图片的网页，右键-复制图片链接，将连接粘贴到<img>的src属性中，然后再次打开”飞驰的火车.html”，查看图片是否变化。 图片当然变化了！ 这说明使用图像链接也可修改图片。 P34 通过这个步骤我们学到了什么呢？ 网页中的图像、音频、视频等不一定保存在网页所在的那个网站中，可以保存在其他网站中。 P39 以上就是我们第16课的全部内容啦，网页在我们生活中的方方面面，希望大家能够重视网页这门课，后续的课程将会更加丰富有趣，我们下周见~同学们下课！ 学科网（北京）股份有限公司 $