第五节 认识标记语言HTML+教案+视频

课件31张PPT。信息技术粤教版 九年级上第五节 认识标记语言HTML新知导入HTML语言简介新知讲解 HTML是用来描述网页的一种超文本标记语言(Hyper Text Markup Language)，这些英文单词在计算机专业英文解释的意思分别是：Hyper：超，Text：文本，Markup：标记，Language：语言。然后把他们连起来就是：超文本标记语言。新知讲解


网页显示的内容

新知讲解 一、网页的庐山真面目新知讲解新知讲解 新知讲解 二、认识HTML文档结构用FrontPage打开“插入文字.htm”，并检查对应源代码。新知讲解新知讲解

祝贺李肖同学获校形象大赛一等奖！

对应的源代码英汉对照提示头部head标题litie身体、主要部分body新知讲解 通过观察这段源代码，你发现了什么？

祝贺李肖同学获校形象大赛一等奖！

新知讲解 在源代码中，我们看到有一些由“<>”括起来的字符串，如、、等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。 HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。如

和

是段落标记，用于区分段落。单标记只有开始标记，没有结束标记。如
是换行标记新知讲解 用FrontPage打开“插入图像.htm”，并检查对应源代码。新知讲解插入图像信息的网页新知讲解

对应的源代码新知讲解 在源代码中可以看到，网页标题放在标记之间新知讲解 用FrontPage打开“插入表格.htm”，并检查对应源代码。新知讲解插入表格信息的网页新知讲解

班级相册	width=“50%”才艺展示

对应的源代码网页标题，放在之间标记用来定义表格标记用来定义表格的行和是行标记，表示某一行；是列标记，表示某一列，是行标记，表示某一行；是列标记，表示某一列，

标记用来定义表格的列新知讲解通过源代码可以看到：
和	标记内的属性意为单元格宽度（width）为浏览器窗口宽度50%（width=“50%”) 。表格属性为：表格边框（border）宽度为1个像素，表格的宽度（width）为浏览器窗口宽度（width=“100%”）新知讲解 比较“插入文字.html、插入图像.html、插入表格.html”相应的HTML代码，说说相同点和不同点？相同点不同点 开头、结尾；标题在之间 在和之间的HTML代码不同新知讲解 试说说你所理解的HTML文档的基本结构？ 页面内容 网页的主要内容放于和之间新知讲解新知讲解 网页特效就是网页的特殊效果，例如滚动字幕。 启动FrontPage，打开好书伴我成长网站，编辑首页中的横向滚动字幕。 课堂练习1、（ ）是用来描述网页的一种超文本标记语言。 2、HTML标记分（ ）和（ ）两种。 3、网页标题，放在（ ）和（ ）之间 4、网页显示的内容，放在（ ）和（ ）之间 HTML单标记双标记课堂小结总结本节课所学内容板书设计一、网页的庐山真面目 二、认识HTML文档结构 运行FrontPage，试一试用HTML语言编写网页。要求图文并茂，并添加设置表格。作业布置谢谢21世纪教育网（www.21cnjy.com) 中小学教育资源网站 有大把高质量资料？一线教师？一线教研员？ 欢迎加入21世纪教育网教师合作团队！！月薪过万不是梦！！ 详情请看： https://www.21cnjy.com/help/help_extract.php 粤教版信息技术九年级上第五节 认识标记语言HTML教学设计 课题 认识标记语言HTML 单元 第二单元 学科 信息技术 年级 九年级 学习 目标 知识目标：知道HTML语言的概念，；理解HTML语言的结构。 技能目标：掌握利用HTML语言设置网页。 情感目标：正确认识自己，学会展示自己真实的一面，善于取长补短。 重点 理解HTML语言的结构 难点 掌握利用HTML语言设置网页。 教学过程 教学环节 教师活动 学生活动 设计意图 导入新课 前面我们学习了利用FrontPage来建立网站，为了建好丰富多彩的网页，下载了许多有关编写网页的资料，有的资料说可通过插入HTML代码来实现网页要呈现的效果。但是把这些资料里提供的代码像编辑文字一样输入网页中，可什么变化也没有？今天我们就来解决这样的问题 思考 激发学生学习兴趣并快速进入学习状态 讲授新课 视频：HTML语言简介 问题：1、通过观看视频想一想什么是HTML? HTML是用来描述网页的一种超文本标记语言(Hyper Text Markup Language)，这些英文单词在计算机专业英文解释的意思分别是：Hyper：超，Text：文本，Markup：标记，Language：语言。然后把他们连起来就是：超文本标记语言。 2、HTML的基本结构是什么? html> 网页显示的内容 一、网页的庐山真面目 我们看到的网页是浏览器对HTML解释显示的结果。HTML标记语言的超文本功能，把网页连接起来形成多姿多彩的互联网世界。 实践： 启动FrontPage，打开好书伴我成长网站的首页，在网页视图模式下，单击编辑区左下角的标签按钮“HTML”，你看到了什么？ 用户可以通过图形界面直接设置网页，而相应的HTML代码由网页编辑工具在幕后自动生成。 二、认识HTML文档结构 任务：用FrontPage打开“插入文字.htm”，并检查对应源代码。 1、启动FrontPage，打开“插入文字.htm” 2、单击标签按钮“HTML，查看对应源代码 祝贺李肖同学获校形象大赛一等奖！ 英汉对照提示 Head 头部 Litie 标题 Body 身体、主要部分 交流：通过观察这段源代码，你发现了什么？ 祝贺李肖同学获校形象大赛一等奖！ 在源代码中，我们看到有一些由“<>”括起来的字符串，如、、等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。 HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。如 和 是段落标记，用于区分段落。单标记只有开始标记，没有结束标记。如 是换行标记 任务：用FrontPage打开“插入图像.htm”，并检查对应源代码。 1、启动FrontPage，打开“插入图像.htm” 2、单击编辑区左下角的标签按钮“HTML”，查看对应源代码 在源代码中可以看到，网页标题放在标记之间 网页显示的内容放在和之间 在HTML文档中插入图像是通过标记来实现的，是单标记，img后面是页面显示的图像属性。 任务：用FrontPage打开“插入表格.htm”，并检查对应源代码。 1、启动FrontPage，打开“插入表格.htm” 2、单击编辑区左下角的标签按钮“HTML”，查看对应源代码 班级相册 width=“50%”才艺展示 页面标题放在标记之间表格标记，和之间定义了一个表格 表格属性为：表格边框（border）宽度为1个像素，表格的宽度（width）为浏览器窗口宽度（width=“100%”） tr>和
和	标记内的属性意为单元格宽度（width）为浏览器窗口宽度50%（width=“50%”) 。 交流： 比较“插入文字.html、插入图像.html、插入表格.html”相应的HTML代码，说说相同点和不同点？ 相同点：开头、结尾；标题在之间 不同点：在和之间的HTML代码不同 交流：试说说你所理解的HTML文档的基本结构？ 表示HTML文件的开头 页面标题放于之间 页面内容 网页的主要内容放于和之间 表示HTML文件的结束 实践： 在浏览器中打开任意一个网页，选择“查看”菜单中的“源文件”命令（或者在窗口中空白位置单击鼠标右键，选择“查看源文件”命令），系统会启动“记事本”，显示相应的HTML代码 探究： 网页特效就是网页的特殊效果，例如滚动字幕。 启动FrontPage，打开好书伴我成长网站，编辑首页中的横向滚动字幕。 课堂练习 1、（ ）是用来描述网页的一种超文本标记语言。 2、HTML标记分（ ）和（ ）两种。 3、网页标题，放在（ ）和（ ）之间 4、网页显示的内容，放在（ ）和（ ）之间 通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。 学生动手实践操作，学生小组间讨论，共同完成任务。 通过老师演示学生动手操作，提高动手能力。小组交流、分享 通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。 学生小组间讨论，共同完成任务，并分组汇报。 通过小组合作，加强学生组内团结、共同完成任务， 培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。 加强学生组内团结、共同完成任务， 培养学生组间合作能力，并且炼动手能力 培养学生独立完成练习的能力。 课堂小结 分小组总结归纳，教师补充。 各组汇报总结，其他小组成员做补充。 锻炼学生的总结能力，逻辑思维、语言表达能力。 布置作业 运行FrontPage，试一试用HTML语言编写网页。要求图文并茂，并添加设置表格。 板书 一、网页的庐山真面目 二、认识HTML文档结构 点击下载 同课章节目录 第一章 探索计算机网络世界 第一节 认识计算机网络 第二节 探究互联网的奥秘 第二章 动手创建自己的网站 第一节 筹划班级网站 第二节 创建网站站点 第三节 制作网站页面 第四节 认识标记语言HTML 第五节 搭建简易动态网站 第三章 走近物联网 第一节 认识物联网 第二节 物联网在生活中的应用 点击下载 VIP下载 © 21世纪教育网 友情链接：21课件 21教件 排课软件 21组卷网 21书城 刷题宝