中小学教育资源及组卷应用平台
粤教版B信息技术九年级上册教学设计
课题
第四节
认识标记语言HTML
单元
第二单元
学科
信息技术
年级
九
学习目标
1知识目标:(1）了解什么是HTML。(2）知道HTML的基本结构。2技能目标:(1）通过学习HTML，学会设计网页。(2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。3.情感态度与价值观(1)提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。(2）通过学习HTML预言，知道网页的形成(3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。
重点
理解HTML语言的结构
难点
掌握利用HTML语言设置网页。
教学过程
教学环节
教师活动
学生活动
设计意图
导入新课
为搭建好班级网站，李鸣搜索并下载了许多有关编写网页的资料，有资料说可通过插入HTML代码来实现网页要呈现的效果。李鸣不明就里，把这些资料里提供的代码像编辑文字一样输入网页中，可什么变化也没有，为何?
学生思考回答
从情境导入，激发学生学习的兴趣，引出问题思考。
提出问题
问题：1、通过观看视频想一想什么是HTML?
2、HTML的基本结构是什么?
观察思考、探究、小组合作交流，回答教师提出的几个问题
引发学生思考
讲授新课
一、网页的庐山真面目早期的网页设计者通常使用HTML
(Hyper
Text
Markup
Language,超文本标记语言)来编写网页，我们看到的页面是浏览器对HTML解释显示的结果。HTML标记语言的超文本功能，把网页链接在一起形成网站，把网站链接在一起形成多姿多彩的互联网世界。认识HTML文档结构
输入文字祝贺李肖同学获校形象大赛一等奖！
英汉对照提示Head
头部Litie
标题Body
身体、主要部分在源代码中，我们看到有一些由“<>”括起来的字符串，如
、、、等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。如
和
是段落标记，用于区分段落。单标记只有开始标记，没有结束标记。如
是换行标记页面标题放在
和标记之间
表格标记，之间定义了一个表格表格属性为：表格边框（border）宽度为1个像素，表格的宽度（width）为浏览器窗口宽度（width=“100%”）tr>和是行标记，表示某一行；| 和 | 是列标记，表示某一列，标记内的属性意为单元格宽度（width）为浏览器窗口宽度50%（width=“50%”)
。
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
过小组交流学习，培养学生自助、协作学习的能力，激发学生探究创新的学习精神。
课堂小结
(1）教师引导学生进行总结，针对本节课的重点知识进行提问，了解学生对相关知识的掌握。
师生共同小结，得出结论，培养学生提炼知识的能力
板书
第四节
制作网站页面网页的庐山真面目认识HTML文档结构
21世纪教育网
www.21cnjy.com
精品试卷·第
2
页
（共
2
页）
HYPERLINK
"http://www.21cnjy.com/"
21世纪教育网(www.21cnjy.com)(共21张PPT)
信
技
息
术
九年级
上
第二章
动手创建自己的网站
第四节
认识标记语言HTML
（粤教版B版）
新知导入
想
想
一
为搭建好班级网站，李鸣搜索并下载了许多有关编写网页的资料，有资料说可通过插入HTML代码来实现网页要呈现的效果。李鸣不明就里，把这些资
料里提供的代码像编辑文字一样输入网页中，可什么变化也没有，为何?
思
考
新知导入
标
学
目
习
（2）HTML的基本结构是什么？
（1）什么是HTML？
新知讲解
栏目首页
一、网页的庐山真面目
内容页
HTML简介
HTML即“超文本标记语言”。
HTML
是创建网页的基础语言，
也是创建网页的标准语言。
HTML代码是用来规定文字、图片等信息在网页中的显示方式。
HTML
打开Frontpage
二、认识HTML文档结构
新知讲解
网页标题
网页主体内容
网
页
开
始
和
结
束
标
记
HTML
1、启动FrontPage，打开“插入文字.htm”
二、认识HTML文档结构
新知讲解
网页标题
网页显示的内容
HTML
2、单击标签按钮“HTML，查看对应源代码
二、认识HTML文档结构
新知讲解
输入文字
祝贺李肖同学获校形象大赛一等奖！
网页标题
网页显示的内容
英汉对照提示
头部
head
标题
litie
身体、主要部分
body
通过观察这段源代码，你发现了什么？
新知讲解
二、认识HTML文档结构
输入文字
祝贺李肖同学获校形象大赛一等奖！
通过观察这段源代码，你发现了什么？
新知讲解
二、认识HTML文档结构
在源代码中，我们看到有一些由“<>”括起来的字符串，如、、、等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。
HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。如和 是段落标记，用于区分段落。单标记只有开始标记，没有结束标记。如
是换行标记
HTML
文本设置
新知讲解
1,网页背景颜色：
bgcolor="chocolate">；
2,字体大小颜色：
style="font-size:50px;color:black;">
.......
3,字体加粗：...........
4,
换行：
......
二、认识HTML文档结构
新知讲解
计算机
用FrontPage打开“插入图像.htm”，并检查对应源代码。
插入图像
border="0"
src="HTML.jpg"
width="431"
height="304">
网页标题，放在和之间
网页显示的内容，放在和之间
二、认识HTML文档结构
新知讲解
计算机
src=“图片名称.jpg"
width="280"
heigh="100"/>
插图开始标记
图片地址
图片宽度
图片高度
二、认识HTML文档结构
新知讲解
计算机
用FrontPage打开“插入表格.htm”，并检查对应源代码。
二、认识HTML文档结构
新知讲解
计算机
二、认识HTML文档结构
插入表格
border="1"
width="47%"
id="table1">
width=“148”>班级相册
width=“50%”才艺展示 |
|
网页标题，放在
和之间
标记用来定义表格
标记用来定义表格的行
标记用来定义表格的列
第一行第一列
第一行第二列
课堂练习
做
做
一
1、（
）是用来描述网页的一种超文本标记语言。
2、HTML标记分（
）和（
）两种。
3、网页标题，放在（
）和（
）之间
4、网页显示的内容，放在（
）和（
）之间
HTML
单标记
双标记
<br>
课堂练习
做
做
一
2、其实网页文件是纯文本格式的文件，我们可以用任何一个能编辑文本的软件打开和编辑网页。那么以下(
)软件不能用来编辑网页文件的HTML代码。
A、Word
B、记事本
C、Dreamweaver
D、画图
D
课堂练习
做
做
一
4、在网页源代码中，HTML标记分为单标记和双标记两种。其中，HTML双标记是由开始标签和结束标签组成的。那么，以下能正确表示一个双标记的选项是(
)
A、(body)和(/body)
B、和
C、[body]和[/body]
D、 |
