初中信息技术人教版（2024）七年级全一册探秘网页与代码课堂教学ppt课件

这是一份初中信息技术人教版（2024）七年级全一册探秘网页与代码课堂教学ppt课件，共32页。PPT课件主要包含了学习目标，网页与HTML代码，PART，如何编辑，如何嵌入，如何上传，HTML构建网页，Python编写程序，显示网页的过程，显示网页过程等内容，欢迎下载使用。
了解网页与代码之间的对应关系。初步认识HTML语言，知道常用标签的作用。验证网页内容的保存形式。
一提到网页大家应该都不会陌生
制作一个属于我们自己的网站！
七年级信息科技 - - - - - - - - - - - - - - - - - -
上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？
查看网页源代码，与原网页里的元素对比。
点开三角箭头可以展开内容。
尝试修改右边的代码，然后观察左边原网页的变化。右键某一行代码-编辑为HTML，进行适当修改，点击别处确认修改，观察左侧网页。①选择“3D打印”文字②右键--编辑为HTML③将文字改为“3D打印AI绘图”
左边原网页的元素和右边的源代码是____________的。右边的代码我们称为_______；代码中使用的部分我们称为_______。
校园科技节
……
……
……
通过前面的活动不难发现，图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语言—HTML（hypertext markup language，超文本标记语言）。HTML语言中用于标记内容、格式或超链接的代码符号叫标签。
浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果（下图）。
科技节——人工智能绘画 飞驰的火车更多AI绘画作品
双标签：成对出现如和单标签：只有一个如
大部分标签是成对出现的，但也存在不成对的情况。
常用的网页标签如下表。
参考左边表格认识以下代码作用
动手试一试（学习活动2）
一、修改网页标题/内容标题二、更换图像三、增加图像说明
任务一：修改网页标题/内容标题
操作步骤：①单击选择“飞驰的火车.html”②再单击右键-打开方式-选择其他应用---更多应用---找到记事本③修改代码以改变网页标题和内容标题。
操作步骤：①选中代码②右键--编辑为HTML③将图片文件名称改为，将图片改为笑脸图。
运行《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。
任务二：更改网页图像（方法二）
对比两种更换图像的方法,你的哪种更好？
方法一表示：
HTML代码与网页文件
一般情况下，HTML代码保存在以“.htm”“.html”等为扩展名的网页文件中。但实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求这些代码必须以网页文件形式保存。
运行《Web服务器》软件。修改编码、内容等参数。修改内容后再次访问，看看显示的变化。
Q：网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。
验证思路：可设置标签的src属性，让它指向外站的一张图像，然后浏览网页时可以看到，外站的图像正常显示在网页中。由此可知，网页中的图像、音频、视频等可以保存在其他网站中。
①打开某一个含有图片的网页，右键-复制图片链接②将连接粘贴到的src属性中，然后再次打开”飞驰的火车.html”，查看图片是否变化。
网页中的图像、音频、视频等________（一定/不一定）保存在网页所在的那个网站中，________（可以/不可以）保存在其他网站中。
Q：网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？