第四节 认识标记语言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小时内删除。
发表评论