(共27张PPT)
第14课
初识HTML5
浙江摄影出版社
四年级下
新知导入
我想制作一份图文并茂、有声有色且易于交流的“数字名片”，可找不着好帮手，怎么办?
很多H5页面制作工具能帮你实现。别着急，我们先来了解什么是H5。
新知讲解
H5是HTML
5的简称，是指描述网页的标准语言，“5”
是指它的第5个版本。
新知讲解
一、认识HTML
HTML是超文本标记语言(HyperText
Markup
Language)
的英文缩写，该语言使用一套标签或标记来描述网页中的文字、图片、表格、链接等。
新知讲解
用浏览器浏览网页时，一般通过单击鼠标右键，选择“查看网页源代码”，
就可以看到当前网页的HTML源代码了。
新知讲解
新知讲解
为什么有这么多尖括号啊?
这就是HTML标签，
它们通常是
成对出现的，有着特殊的含义。
新知讲解
标签就是标记文档的标题。<br>新知讲解<br>浏览器的作用主要是读取HTML文档，<br>并以网页的形式显示文档中的内容。<br>小知识<br>新知讲解<br>HTML文件结构如下<br>＜<br>html:＞标记网页的开始<br>＜head＞标记头部的开始<br>＜title＞显示在浏览器左上方的标题＜/<br>title><br>＜/head＞标记头部的结束<br>新知讲解<br>＜<br>body＞标记页面正文开始<br>＜/body＞标记页面正文结束<br>＜/html＞标记网页的结束<br>HTML标签是由尖括号包围的关键词，通常成对出现。<br>合作探究<br>试一试<br>打开一个网页，查看该网页的源代码<br>新知讲解<br>二、从HTML到HTML<br>5<br>作为互联网的通用标准语言，<br>HTML在计算机网络的发展过程<br>中起着很重要的作用。<br>HTML在1993年发布1.0版以后，<br>随着网络技术的发展，多次改版升级，功能越来越完善，能更好地处理互联网中的应用，如网页中图形的绘制，音频、视频的加载等。<br>新知讲解<br>HTML<br>5是随着移动终端的快速普及而得到广泛应用的。<br>这个版本的优点主要是可以跨设备、跨平台使用，页面加载更快，用户体验更好。<br>HTML5的设计目的是为了在移动设备上支持多媒体。<br>新知讲解<br>打开网页，<br>按下Ctrl+U键，<br>就能快速查看你正在浏览的网页的源代码了。<br>教你一招<br>合作探究<br>试一试<br>打开一个网页，按下Ctrl+U键查看该网页的源代码<br>新知讲解<br>HTML<br>5提供了许多新的功能，<br>实现了更丰富的图形化界面和更友好的人机交互模式，页面内容的交互性更强了。<br>三、<br>基于HTML<br>5的应用特点<br>新知讲解<br>阅读材料<br>HTML文档的常用标签功能介绍<br>基本标签<br>创建一个HTML文档<br><html></html><br>设置文档头部<br><head></head><br>设置文档的可见部分<br><body></body><br>新知讲解<br>标题标签<br>设置标题<br><title>文档整体属性
设置背景颜色
设置文本文字颜色
text=?>
设置链接颜色
link=?>
新知讲解
图形元素
添加一幅图像
src=
name
格式排版
表格
创建一个新的行
>
插入一个回车换行符
创建一个表格
开始表格中的每一行
|
开始一行中的每一格
|
新知讲解
文本标签
创建预格式化文本
创建最大的标题
创建最小的标题
创建黑体字
创建斜体字
设置字体大小，从1到7
设置字体的颜色
课堂练习
1.打开三个不同网页，并查看各源代码，比较它们的不同。
课堂总结
总结本节课所学内容
作业布置
上网搜索关于Word文档、TXT文件、HTML文件格式的说明，比较这三种文件格式的区别，将自己的发现整理成研究报告。
板书设计
一、认识HTML
二、从HTML到HTML
5
三、
基于HTML
5的应用特点
https://www.21cnjy.com/help/help_extract.php中小学教育资源及组卷应用平台
浙江摄影出版社信息技术四年级下第14课初识HTML5教学设计
课题
初识HTML5
单元
第三单元
学科
信息技术
年级
四年级
学习
目标
1.了解超文本标记语言的概念；了解查看源代码的基本操作。
2.理解基于HTML5的应用特点。
重点
查看源代码的基本操作；理解基于HTML5的应用特点。
难点
理解基于HTML5的应用特点。
教学过程
教学环节
教师活动
学生活动
设计意图
导入新课
我想制作一份图文并茂、有声有色且易于交流的“数字名片”，可找不着好帮手，怎么办?
很多H5页面制作工具能帮你实现。别着急，我们先来了解什么是H5。
思考
激发学生学习兴趣并快速进入学习状态
讲授新课
H5是HTML
5的简称，是指描述网页的标准语言，“5”
是指它的第5个版本。
一、认识HTML
HTML是超文本标记语言(HyperText
Markup
Language)
的英文缩写，该语言使用一套标签或标记来描述网页中的文字、图片、表格、链接等。
用浏览器浏览网页时，一般通过单击鼠标右键，选择“查看网页源代码”，
就可以看到当前网页的HTML源代码了。
为什么有这么多尖括号啊?
这就是HTML标签，
它们通常是成对出现的，有着特殊的含义。
标签就是标记文档的标题。<br>小知识<br>浏览器的作用主要是读取HTML文档，<br>并以网页的形式显示文档中的内容。<br>HTML文件结构如下<br>＜<br>html:＞标记网页的开始<br>＜head＞标记头部的开始<br>＜title＞显示在浏览器左上方的标题＜/<br>title><br>＜/head＞标记头部的结束<br>＜<br>body＞标记页面正文开始<br>＜/body＞标记页面正文结束<br>＜/html＞标记网页的结束<br>HTML标签是由尖括号包围的关键词，通常成对出现。<br>试一试<br>打开一个网页，查看该网页的源代码<br>二、从HTML到HTML<br>5<br>作为互联网的通用标准语言，<br>HTML在计算机网络的发展过程<br>中起着很重要的作用。<br>HTML在1993年发布1.0版以后，<br>随着网络技术的发展，多次改版升级，功能越来越完善，能更好地处理互联网中的应用，如网页中图形的绘制，音频、视频的加载等。<br>HTML<br>5是随着移动终端的快速普及而得到广泛应用的。<br>这个版本的优点主要是可以跨设备、跨平台使用，页面加载更快，用户体验更好。<br>HTML5的设计目的是为了在移动设备上支持多媒体。<br>教你一招<br>打开网页，<br>按下Ctrl+U键，<br>就能快速查看你正在浏览的网页的源代码了。<br>试一试<br>打开一个网页，按下Ctrl+U键查看该网页的源代码<br>三、<br>基于HTML<br>5的应用特点<br>HTML<br>5提供了许多新的功能，<br>实现了更丰富的图形化界面和更友好的人机交互模式，页面内容的交互性更强了。<br>阅读材料<br>HTML文档的常用标签功能介绍<br>基本标签<br>创建一个HTML文档<br><html></html><br>设置文档头部<br><head></head><br>设置文档的可见部分<br><body></body><br>文档整体属性<br>设置背景颜色<br><bodybgcolor=?><br>设置文本文字颜色<br><body<br>text=?><br>设置链接颜色<br><body<br>link=?><br>标题标签<br>设置标题<br><title>
图形元素
添加一幅图像
src=
name
格式排版
创建一个新的行
>
插入一个回车换行符
表格
创建一个表格
开始表格中的每一行
|
开始一行中的每一格
|
文本标签
创建预格式化文本
创建最大的标题
创建最小的标题
创建黑体字
创建斜体字
设置字体大小，从1到7
设置字体的颜色
课堂练习
1.打开三个不同网页，并查看各源代码，比较它们的不同。
通过老师演示学生动手操作，提高动手能力。小组交流、分享
学生小组间讨论，共同完成任务。
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生小组间讨论，共同完成任务。
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生小组间讨论，共同完成任务，并分组汇报。
培养学生组间合作能力，并且炼动手能力
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
通过小组合作，加强学生组内团结、共同完成任务
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
通过小组合作，加强学生组内团结、共同完成任务
培养学生独立完成练习的能力。
课堂总结
分小组总结归纳，教师补充。
各组汇报总结，其他小组成员做补充。
锻炼学生的总结能力，逻辑思维、语言表达能力。
作业布置
上网搜索关于Word文档、TXT文件、HTML文件格式的说明，比较这三种文件格式的区别，将自己的发现整理成研究报告。
板书
一、认识HTML
二、从HTML到HTML
5
三、
基于HTML
5的应用特点
21世纪教育网
www.21cnjy.com
精品试卷·第
2
页
（共
2
页）
21世纪教育网(www.21cnjy.com)