探秘网页与代码课件 2024-2025学年人教版（2024）初中信息科技七年级全一册_第1页
探秘网页与代码课件 2024-2025学年人教版（2024）初中信息科技七年级全一册_第2页
探秘网页与代码课件 2024-2025学年人教版（2024）初中信息科技七年级全一册_第3页
探秘网页与代码课件 2024-2025学年人教版（2024）初中信息科技七年级全一册_第4页
探秘网页与代码课件 2024-2025学年人教版（2024）初中信息科技七年级全一册_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第16课探秘网页与代码第四单元校园活动线上展义务教育信息科技课程资源七年级

第16课学习目标学习目标123了解网页与代码之间的对应关系。初步认识HTML语言，知道常用标签的作用。验证网页内容的保存形式。第16课课堂导入学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统，今年轮到本班承担网站制作的任务。同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。很多同学对此感到好奇：我们看到的网页与这些代码之间有什么关系？如何调整代码改变网页的显示效果？问题情境第16课学习内容学习内容三

HTML代码与网页文件二

显示网页的过程一

网页与HTML代码上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？图文并茂的网页，背后对应着一堆代码。这堆代码对应着描述网页的语言——HTML（hypertextmarkuplanguage，超文本标记语言）。一、网页与HTML代码第16课学习内容浏览一个网页，然后调出浏览器的“开发人员”工具，观察页面代码。第16课学习内容一、网页与HTML代码HTML语言中用于标记内容、格式或超链接的代码符号叫标签。成对出现的双标签，如<HTML>和</HTML>。单标签，如<img>。第16课学习内容一、网页与HTML代码标签作用<head></head>设置文档头部<title></title>设置网页标题<body></body>设置文档主体<h1></h1>设置内容的一级标题<p></p>设置新一行<imgsrc='***/***.jpg'>设置图像<ahref='xxxx'></a>设置超链接第16课学习内容一、网页与HTML代码HTML代码<html><title>科技节——人工智能绘画</title><body><h1>飞驰的火车</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI绘画作品</a></body></html>浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。第16课学习内容二、显示网页的过程1．用《记事本》软件打开网页文件，根据下表的修改要求，尝试修改网页中的代码。修改要求修改记录修改网页标题更换图像增加图像说明第16课学习内容二、显示网页的过程浏览器可以把HTML代码转换成浏览时看到的图文并茂的网页。修改要求修改记录修改网页标题更换图像增加图像说明修改<title></title>之间的内容修改<img>标签的src属性在<img>标签后面增加<p>标签第16课学习内容二、显示网页的过程2．参照以下方法进行操作，让网页显示一张笑脸图。方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。方法二：运行配套资源中的《图像编码转换器》软件，选择图像文件001.png后进行编码转换，然后用运行结果替换网页中的<img>标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。第16课学习内容二、显示网页的过程第16课学习内容单击“选择图像”按钮，选择图像文件，就可以看到转换后的代码。二、显示网页的过程在网页中显示图像的不同方法：显示方法任务记录使用文件路径

需要图像文件

不需要图像文件使用图像数据编码

需要图像文件

不需要图像文件<imgsrc="data:image/jpeg;base64,iVBORw0K……

alt="Image"/><imgsrc='***/001.png'>第16课学习内容√√二、显示网页的过程三、HTML代码与网页文件浏览器需要的是HTML代码，实际浏览过程中，浏览器只要能得到相应的HTML代码就可以了，并不要求必须以网页文件形式保存。第16课学习内容网页文件是常用的保存HTML代码的容器。index.htmindex.htmlHTML代码一定要以网页文件形式保存吗？1．运行《Web服务器》软件。2．修改编码、内容等参数后。3．根据提示访问这个网站，看看显示效果。4．修改内容后再次访问，看看显示效果。第16课学习内容三、HTML代码与网页文件第16课学习内容启动服务后，把最下方的地址复制到浏览器的地址栏中，即可访问网站。三、HTML代码与网页文件第16课课堂总结

1．HTML是一种可用于描述网页的语言。2．HTML语言中用于标记内容、格式或超链接的代码符号叫标签。3．修改标签及内容，可以改变网页的显示效果。

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论