资源简介

(共20张PPT)
探秘网页与代码
第四单元 校园活动线上展
目录
CONTENTS
1
2
3
行业PPT模板http:///hangye/
了解网页与代码之间的对应关系。
初步认识 HTML 语言，知道常用标签的作用。
验证网页内容的保存形式。
导 入 新 课
学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统，今年轮到我们班承担网站制作的任务。同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。很多同学对此感到好奇。
导 入 新 课
1. 网页与 HTML 代码有什么关系？
2. 浏览器是如何显示网页的？
3. HTML 代码是不是必须保存在网页文件中？
网页与HTML代码
P
ART01
讲 授 新 课
上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？
讲 授 新 课
网页代码，就是指在网页制作过程中需要用到的一些特殊的"语言"，设计人员通过对这些"语言"进行组织编排制作出网页，然后由浏览器对代码进行"翻译"后才是我们最终看到的效果。
制作网页时常用的代码有HTML，JavaScript，ASP，PHP，CGI等，其中超文本标记语言(标准通用标记语言下的一个应用、外语简称：HTML)是最基础的网页代码。
讲 授 新 课
学习活动1
浏览网页，调出浏览器的“开发人员”工具，观察页面代码
讲 授 新 课
超文本标记语言（HyperText Markup Language），简称HTML，是用于创建网页的标准标记语言。
HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markup tag）。HTML使用标记标签来描述网页。HTML文档包含了HTML标签及文本内容。HTML文档也叫做web页面，包含很多因素，音乐、文字、链接、图片等。
显示网页的过程
P
ART02
讲 授 新 课
浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。
讲 授 新 课
讲 授 新 课
学习活动2
1. 用《记事本》软件打开网页文件，尝试通过改代码的方式完成修改网页标题、更换图像、增加图像说明等任务。
2. 参照以下方法进行操作，在网页中显示一张笑脸图。
讲 授 新 课
方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。
提示:
方法二：运行《图像编码转换器》软件，选择图像文件 001.png后进行编码转换，然后用运行结果替换网页中的标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。
提示:
HTML代码与网页文件
P
ART03
讲 授 新 课
一般情况下，HTML 代码保存在以“.htm”“.html”等为扩展名的网页文件中。但实际浏览过程中，浏览器只要能得到相应的 HTML 代码就可以了，并不要求这些代码必须以网页文件形式保存。
讲 授 新 课
学习活动3
1. 运行《Web 服务器》软件。
2. 修改编码、内容等参数。
3. 根据提示访问这个网站。
4. 修改内容后再次访问，看看
显示的变化。
讲 授 新 课
拓
展
与
提
升
网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。
讲 授 新 课
拓
展
与
提
升
网页中包含的图像、音频、视频等可以保存在任意可访问的服务器上，只需在网页代码中正确引用这些资源的URL即可。这些资源可以存储在与网页相同的服务器上，也可以存储在不同的服务器上。当用户访问网页时，浏览器会根据提供的URL从相应的服务器下载这些资源，并将其与网页内容一起呈现给用户。
感谢您的观看

展开更多......

收起↑