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

第16课探秘网页与代码网页背后的秘密七年级信息科技课

学习目标了解网页与代码之初步认识HTML语言,验证网页内容的间的对应关系知道常用标签的作用保存形式揭开网页的神秘面纱

本课探究问题???HTML代码是不是浏览器是如何显必须保存在网页文件中?网页与HTML代码示网页的?有什么关系?带着疑问去发现

上网的体验60%40%这一切是怎样完成的呢?网页背后的代码世界现象背后有原因

学习活动1:观察网页代码浏览网页,调出浏览器的开发人员工具,观察页面代码看看网页背后的样子

什么是HTML?HTML超文本标记语言HypertextMarkupLanguage图文并茂的网页,背后对应着一堆代码。HT语言中用于标记内容、格式均超链接的代码符号叫标签h标签是HTML的基本单位

浏览器如何显示网页步骤1步骤2步骤3浏览器获得网按照码要求处理页代码显示相应的文字、图像等按照代码要求处理按照代码要求处理Theproprayeddroagntofothechinothecutnicspocboldouthichoagoodtodohedetonnd代码指挥浏览器工作dwecokyandlooetsforthebynovednighramges

学习活动2:修改网页代码任务1任务2任务3更换图像增加图像说明修改网页标题修改修改在标签后?之间的内容标签的src属性增加动手改一改,效果立刻见

常用HTML标签文档头部文档主体标题网页标题一级标题一级标题新的一行图像超链接大部分标签成对出现

图像的两种显示方式方法一:引用图像文件方法二:Base64编码最常用的方式不需要图像文件数据可以有多种存储方式

什么是Base64编码?原始图像心Base64编码iVBORwOKG..二进制的图像数据可以用字符串的形式表示,浏览器可以识别并显示图像。此时,图像数据保存在字符串中,不再需要图像文件一种数据编码方式

HTML代码与网页文件一般情况下,HTML代码保存在以.htm、.html等为扩展名的网页文件中。但是:浏览器只要能得到相应的网贝HTML代码就可以了,并不要求这些代码必须以网页文件形式保存。代码是核心,文件是载体

学习活动3:Web服务器实验步骤1:运行Web服务器软件步骤2:修改编码、内容等参数步骤3:根据提示访问网站步骤4:修改内容后再次访问,观察变化代码可以实时生成

拓展与提升:资源可以外站存放吗?猜想:网页中的图像、音频、视频等必须保存在网页所在的网站中吗?网站A网站B验证方法:设置标签的src属性,让它指向外站的一张图像B结果:外站的图像正常显示在网页中结论:网页中的图像、音频、视频等可以保存在其他网站中资源可以分布式存储

本课知识总结网页与代码的关系HTML语言与标签浏览器的工作原理代码的存储方式网页由代码构建

实践建议方向1方向2方向3OOOHTML动手修改代码:尝试创建网页:观察更多网页:用记事本打开网页文使用简单的HTML标签访问不同网站,查看件,修改标签内容,制作自己的第一个网页看它们的HTML代码,观察效果变化学习更多标签实践是最好的学习方式

谢谢观看开启网页创作之旅