2024/7/24,#,第,16,课,探秘网页与代码,第四单元校园活动线上展,义务教育信息科技课程资源七年级,第,16,课,学习目标,学习目标,1,2,3,了解网页与代码之间的对应关系,初步认识HTML语言，知道常用标签的作用验证网页内容的保存形式第,16,课,课堂导入,学校,每年,科技节都会有许多科技体验项目，也有制作,“,科技节体验项目,”,网站的传统，今年轮到本班承担网站制作的任务同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码很多同学对此,感到好奇：,我们看到的,网页与这些代码之间有什么关系？如何调整代码改变网页的显示效果？,问题情境,第,16,课,学习内容,学习内容,三,HTML,代码与网页文件,二,显示网页的过程,一,网页与,HTML,代码,上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源通过网页中的超链接，可以方便地在网页和资源之间跳转这一切到底是怎样完成的呢？,图文并茂的网页，背后对应着一堆代码这堆代码对应着描述网页的语言,HTML,（,hypertext markup language,，超文本标记语言）。
一、网页与,HTML,代码,第,16,课,学习内容,浏览一个网页，然后调出浏览器的“开发人员,”,工具，观察页面代码第,16,课,学习内容,一、网页与,HTML,代码,HTML,语言中用于标记内容、格式或超链接的代码符号叫标签成对出现的双标签，如,和,单标签，如,第,16,课,学习内容,一、网页与,HTML,代码,标签,作用,设置文档头部,设置网页标题,设置文档主体,设置内容的一级标题,设置新一行,设置图像,设置超链接,第,16,课,学习内容,一、网页与,HTML,代码,HTML,代码,科技节,人工智能绘画,飞,驰的火车,更多,AI,绘画,作品,浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果第,16,课,学习内容,二、显示网页的过程,1,用记事本软件打开网页文件，根据下表的修改要求，尝试修改网页中的代码修改要求,修改记录,修改网页标题,更换图像,增加图像说明,第,16,课,学习内容,二、显示网页的过程,浏览器可以把,HTML,代码转换成浏览时看到的图文并茂的网页修改要求,修改记录,修改网页标题,更换图像,增加图像说明,修改之间的内容,修改标签的src属性,在标签后面增加标签,第,16,课,学习内容,二、显示网页的过程,2,参照以下方法进行操作，让网页显示一张笑脸图。
方法一：修改网页，让它显示计算机中的图像文件,001,.png浏览网页，观察显示效果方法二：运行配套资源中的,图像编码转换器,软件，选择图像文件,001.png,后进行编码转换，然后用运行结果替换网页中的标签确保网页所在文件夹中没有图像文件,001,.png 后，浏览网页，观察显示效果第,16,课,学习内容,二、显示网页的过程,第,16,课,学习内容,单击“选择图像”按钮，选择,图像文件,，就可以看到转换后的代码二、显示网页的过程,在网页中显示图像的不同方法：,显示方法,任务记录,使用文件,路径,需要图像文件,不需要图像文件,使用图像数据编码,需要图像文件,不需要图像文件,第,16,课,学习内容,二、显示网页的过程,三、,HTML,代码与网页文件,浏览器需要的是,HTML,代码，实际浏览过程中，浏览器只要能得到相应的,HTML,代码就可以了，并,不要求必须以网页文件形式保存,第,16,课,学习内容,网页文件是常用的保存HTML代码的容器index.htm,index.html,HTML代码一定要以网页文件形式保存吗？,1,运行,Web,服务器,软件2,修改编码、内容等参数后,3,根据提示访问这个网站，看看显示效果。
4,修改内容后再次访问，看看显示效果第,16,课,学习内容,三、,HTML,代码与网页文件,第,16,课,学习内容,启动服务后，把最下方的地址,复制到浏览器的地址栏中，即可访问网站三、,HTML,代码与网页文件,第,16,课课堂总结,1,HTML,是一种可用于描述网页的语言2,HTML,语言中用于标记内容、格式或超链接的代码符号叫标签3,修改标签及内容，可以改变网页的显示效果4,HTML,代码不,一定,保存在网页文件中网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请想办法验证你的猜想第,16,课拓展与提升,同学们可以尝试在网页中设置一个指向其他网站的图像，然后看看显示效果。