资源简介

中小学教育资源及组卷应用平台
3.16《探秘网页与代码》教学设计
核心素养教育目标：
信息意识：学生了解网页与代码之间的对应关系。
计算思维：学生初步认识 HTML 语言，知道常用标签的作用。
数字化学习与创新：引导学生验证网页内容的保存形式，培养学生的创新意识和实践能力。
信息社会责任：通过网络实验，整理所学内容，培养探索精神。
教学重难点：
重点：掌握认识 HTML 语言，知道常用标签的作用。
难点：理解验证网页内容的保存形式。
教学方法：
任务驱动法、分组讨论法、演示法
教学准备：
多媒体网络教室、课件
教学过程：
【复习导入】
学校每年科技节都会有许多科技体验项目，也有制作“科技节体验项目”网站的传统，今年轮到我们班承担网站制作的任务。同学们浏览了往年的科技节网站作品，发现一个网站包含多个网页文件，每个网页文件保存着一堆代码。很多同学对此感到好奇。
今天，我们就来揭开这个秘密，一起探索网页的代码。
【新知探究】
一、网页与HTML代码
1、师：上网浏览时会接触风格各异的网页，里面有文字、图像、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？
网页代码，就是指在网页制作过程中需要用到的一些特殊的"语言"，设计人员通过对这些"语言"进行组织编排制作出网页，然后由浏览器对代码进行"翻译"后才是我们最终看到的效果。
制作网页时常用的代码有HTML，JavaScript，ASP，PHP，CGI等，其中超文本标记语言(标准通用标记语言下的一个应用、外语简称：HTML)是最基础的网页代码。
学生自主学习并认识HTM代码。
2、学习活动1
浏览网页，调出浏览器的“开发人员”工具，观察页面代码
3、学生自主学习：超文本标记语言（HyperText Markup Language），简称HTML，是用于创建网页的标准标记语言。
HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markup tag）。HTML使用标记标签来描述网页。HTML文档包含了HTML标签及文本内容。HTML文档也叫做web页面，包含很多因素，音乐、文字、链接、图片等。
二、显示网页的过程
1、浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。
2、学习活动2
（1）用《记事本》软件打开网页文件，尝试通过改代码的方式
完成修改网页标题、更换图像、增加图像说明等任务。
（2）参照以下方法进行操作，在网页中显示一张笑脸图。
方法一：修改网页，让它显示计算机中的图像文件001.png。浏览网页，观察显示效果。
提示:
方法二：运行《图像编码转换器》软件，选择图像文件 001.png后进行编码转换，然后用运行结果替换网页中的标签。确保网页所在文件夹中没有图像文件001.png后，浏览网页，观察显示效果。
提示:
HTML代码与网页文件
师： 一般情况下，HTML 代码保存在以“.htm”“.html”等为扩展名的网页文件中。但实际浏览过程中，浏览器只要能得到相应的 HTML 代码就可以了，并不要求这些代码必须以网页文件形式保存。
学习活动3
（1） 运行《Web 服务器》软件。
（2）修改编码、内容等参数。
（3）根据提示访问这个网站。
（4）修改内容后再次访问，看看显示的变化。
【拓展与提升】
网页中包含的图像、音频、视频等必须保存在网页所在的那个网站中吗？请验证你的猜想。
【课堂小结】
请同学们对照本章的学习目标进行总结，看看自己掌握了那些知识。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
21世纪教育网(www.21cnjy.com)

展开更多......

收起↑