第四节 认识标记语言HTML教学设计
课题
认识标记语言HTML
单元
第二章
学科
信息技术
年级
八年级
学习目标
信息意识：知道HTML语言的概念；理解HTML语言的结构。
计算机思维：掌握利用HTML语言设置网页。
信息社会责任感：正确认识自己，学会展示自己真实的一面，善于取长补短。
重点
理解HTML语言的结构
难点
掌握利用HTML语言设置网页。
    教学过程
教学环节
教师活动
学生活动
设计意图
导入新课
观看两张图片一张为班级图片，一张为代码图片，观看他们有什么发现？
视频：我的网页
问题：1、通过观看视频想一想网页和代码有什么联系？
思考
学生观看视频并回答问题
激发学生学习兴趣并快速进入学习状态，并让学生了解代码与网页的关联。
主要是让学生了解代码和网页存在的联系，激发学生的求知欲望和学习动力。
讲授新课
一、什么是HTML
二、HTML的基本结构是什么
插入文字.htm
Html标记含义
HTML的基本结构
任务一
插入图片.htm
尝试修改源代码
任务二
打开“表格.htm
任务三
课堂小结
课堂练习
拓展
板书设计
1、什么是HTML？
2、提出问题：什么是HTML？
3、通过观看视频得出结论
HTML是用来描述网页的一种超文本标记语言，HTML  是创建网页的基础语言，也是创建网页的标准语言。HTML代码是用来规定文字、图片等信息在网页中的显示方式。
看到的网页是浏览器对HTML解释显示的结果。HTML标记语言的超文本功能，把网页连接起来形成多姿多彩的互联网世界。
图形界面直接设置网页相应的HTML代码由网页编辑工具在幕后自动生成。
二、认识HTML文档结构
用FrontPage打开“插入文字.htm”，并检查对应源代码。
1、启动FrontPage，打开“插入文字.htm”
2、单击标签按钮“代码”，查看对应源代码
3、分析代码所对应的位置
4、学生交流：观察代码，发现了什么？
<html>
<head>
<title>插入文字</title>
</head>
<body>
<p>祝贺李肖同学获校形象大赛一等奖！</p>
</body>
</html>
英汉对照提示
head    头部
Litie    标题
body    身体、主要部分
html    网页的开始标记
在源代码中，我们看到有一些由“<>”括起来的字符串，如<title>、</title>、<body>、</body>等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。
HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。如<p>和</p>是段落标记，用于区分段落。单标记只有开始标记，没有结束标记。如<br>是换行标记
HTML的基本结构是什么
<html>
<head>
<title>网页的标题</title>
<body>网页显示的内容</body>
</head>
</html>
祝贺李肖同学
获校形象
一等奖！ 利用所学知识 熟悉<p><br>的使用
用FrontPage打开“插入图片.htm”，并检查对应源代码。
1、启动FrontPage，打开“插入图片.htm”
2、单击编辑区左下角的标签按钮“HTML”，查看对应源代码
<html>
<head>
<title>插入图像</title>
</head>
<body>
<p><img border="1" src="背景1.jpg" width="500" height="300"></p>
</body>
</html>
修改代码中数值，看是否有变化？
在源代码中可以看到，网页标题放在<title>和</title>标记之间。
网页显示的内容放在<body>和</body>之间
在HTML文档中插入图像是通过<img>标记来实现的，<img>是单标记，img后面是页面显示的图像属性。
边框：border=””
图像存储路径：src=””
图像宽度：width=“”
height=“”
尝试加一张图片
用FrontPage打开“表格.htm”，并检查对应源代码。
1、启动FrontPage，打开“表格.htm”
2、单击编辑区左下角的标签按钮“代码”，查看对应源代码
观看图片讨论分析里面的内容
<html>
<head>
<title>插入表格</title>
</head>
<body>
<table border="1" width="100%">
    <tr>
    <td  width="50%">班级相册</td>
        <td  width="50%">才艺展示</td>
    </tr>
<table>
</body>
</html>
页面标题放在<title>和</title>标记之间<table>表格标记，<table>和</table>之间定义了一个表格
表格属性为：表格边框（border）宽度为1个像素，表格的宽度（width）为浏览器窗口宽度（width=“100%”）
<tr>和</tr>是行标记，表示某一行；<td>和</td>是列标记，表示某一列，<td>标记内的属性意为单元格宽度（width）为浏览器窗口宽度50%（width=“50%”) 。
任务三
一行表格
一行三列
交流：
比较“插入文字.html、插入图像.html、插入表格.html”相应的HTML代码，说说相同点和不同点？
相同点：<html>开头、</html>结尾；标题在<title>和</title>之间
不同点：在<body>和</body>之间的HTML代码不同
交流：试说说你所理解的HTML文档的基本结构？
<html>      表示HTML文件的开头
<head>
<title>页面标题
html网页设计的标题</title>页面标题放于<title>和</title>之间
<body>页面内容 </body>    网页的主要内容放于<body>和</body>之间
<html>  表示HTML文件的结束
实践：
在浏览器中打开任意一个网页，选择“查看”菜单中的“源文件”命令（或者在窗口中空白位置单击鼠标右键，选择“查看源文件”命令），系统会启动“记事本”，显示相应的HTML代码
探究：
网页特效就是网页的特殊效果，例如滚动字幕。
启动FrontPage，打开班级网站，编辑首页中的横向滚动字幕。
HTML的含义
HTML的结构
课堂练习
1、（              ）是用来描述网页的一种超文本标记语言。
2、HTML标记分（            ）和（          ）两种。
3、网页标题，放在（            ）和（            ）之间
4、网页显示的内容，放在（          ）和（            ）之间
5.填写相对于的HTML标记
运行FrontPage，试一试用HTML语言编写网页。要求图文并茂，并添加设置表格如班级课程表。
（1）什么是HTML？
（2）HTML的基本结构是什么？
通过观看视频了解HTML的原理。
学生打开插入文字的网页
观察代码并回答问题
学生听讲
学生回答
学生动手实践操作，
学生操作
学生听讲
学生操作
学生讨论
通过老师演示和讲解学生动手操作，提高动手能力。小组交流、分享
学生操作
学生回答
学生观看和操作
学生回答
学生回答
学生操作
学生回答
让学生清晰地了解到网页与HTML之间的关系，明白HTML标记语言的超文本功能
加强学生对FrontPage的使用印象，回顾上节所学内容，
通过观察代码，一步一步的剖析代码与网页相对的位置，从而了解到HTML的结构内容的组成。
了解到代码每个对应的含义
清晰知道每个HTML标记所呈现的结果
理解html的里面的各个标签所代表的含义。
清楚地知道HTML的结构组成
熟悉<p><br>的使用，清楚知道两者的关系
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
让学生先去分析各个代码所代表的含义，教师在进一步讲解加深学生的印象和增加学生的学习兴趣，增强动手能力和发现问题能力。
培养学生动手操作能力，并且观察的能力。
加强学生的理解和印象。
培养学生动手操作能力，加深学生学习
增加学生之间学习能力，互相谈论，加强对图像的解读，激发学生的兴趣。
培养学生动手操作能力，加深对表格HTML标记的的认识
加强学生组内团结、共同完成任务，
锻炼学生的总结能力，逻辑思维、语言表达能力。
把握学生所学的内容，加深学生的学习印象。
让学生更好的掌握本节课所学的内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。