资源简介 课件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文件的开头页面标题<br/> 页面标题放于和之间 页面内容 网页的主要内容放于和之间 表示HTML文件的结束实践：在浏览器中打开任意一个网页，选择“查看”菜单中的“源文件”命令（或者在窗口中空白位置单击鼠标右键，选择“查看源文件”命令），系统会启动“记事本”，显示相应的HTML代码探究：网页特效就是网页的特殊效果，例如滚动字幕。启动FrontPage，打开好书伴我成长网站，编辑首页中的横向滚动字幕。 课堂练习1、（ ）是用来描述网页的一种超文本标记语言。2、HTML标记分（ ）和（ ）两种。3、网页标题，放在（ ）和（ ）之间4、网页显示的内容，放在（ ）和（ ）之间通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。学生动手实践操作，学生小组间讨论，共同完成任务。通过老师演示学生动手操作，提高动手能力。小组交流、分享通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。学生小组间讨论，共同完成任务，并分组汇报。通过小组合作，加强学生组内团结、共同完成任务，培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。加强学生组内团结、共同完成任务，培养学生组间合作能力，并且炼动手能力 培养学生独立完成练习的能力。课堂小结分小组总结归纳，教师补充。各组汇报总结，其他小组成员做补充。锻炼学生的总结能力，逻辑思维、语言表达能力。布置作业运行FrontPage，试一试用HTML语言编写网页。要求图文并茂，并添加设置表格。板书一、网页的庐山真面目 二、认识HTML文档结构 展开更多...... 收起↑ 资源列表 HTML语言简介.wmv 第五节 认识标记语言HTML.pptx 第五节 认识标记语言HTML.doc