湘电子版信息技术七下第7节 认识HTML和HTML5网页教案

湘电子版七年级下册第三单元第7节认识HTML和HTML5网页教学设计课题认识HTML和HTML5网页单元第三单元学科信息技术年级七年级学习目标

1、认识HTML网页和HTML5网页；了解所见即所得的网页编辑器

2、理解网站的基本结构和HTML重点认识HTML网页和HTML5网页;了解所见即所得的网页编辑器；理解网站的基本结构和HTML.难点理解网站的基本结构和HTML教学过程教学环节教师活动学生活动设计意图导入新课当我们在网络上浏览信息时，经常会被一些内容丰富、结构清晰、版面美观、浏览方便的页面所吸引，我们看到的网页是浏览器对HTML解释显示的结果HTML标记语言的超文本功能，把网页连接起来形成多姿多彩的互联网世界听老师讲解调动学生学习的积极性，为以下的学习打下良好的基础讲授新课活动任务本节我们认识HTML和HTML5网页，了解网页背后的知识我的问题1什么是网页？2计算机上浏览的网页和手机上收到的网页有什么不同？活动建议我们对网站并不陌生，可以先通过典型的网站样例，了解网站的基本结构，从而进一步了解网页，并通过实践操作了解网页背后的超文本标记语言从互联网搜索HTML5网页的相关信息，了解它与传统网页的不同之处活动过程

一、认识HTML网页了解本节课的问题带着问题可更好的去解决问题

1.网站的基本结构

（1）网页网页是网站的基本信息单位，是HTML文件，是一种可以在互联网上传输，并被浏览器认识和翻译成页面显示出来的文件网页中包括文本、图片、动画、音频、视频、特效、超链接等内容

（2）网站网站是由若干个网页组成，这些网页具有某些相同类型的信息，通过各种超链接互相连接在一起网站最基本的功能就是提供各种服务新浪网提供各类资讯；百度提供了强大的搜索功能购物网站则提供了各种商品的买卖服务网站分类根据网站所用编程语言分类例如asp网站、php网站、jsp网站、Asp.net网站等；根据网站的用途分类例如门户网站（综合网站）、行业网站、娱乐网站等；根据网站的功能分类例如单一网站（企业网站）、多功能网站（网络商城）等等根据网站的持有者分类例如个人网站、商业网站、政府网站、教育网站等根据网站的商业目的分类营利型网站（行业网站、论坛）、非营利性型网站（企业网站、政府网站、教育网）

（3）主页网站的第一页一般称为主页主页的文件名一般为“index.Html”主页也被称为首页，是用户打开浏览器时默认通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务了解网站分类通过教师的讲解，以小组合作的方式，开展探讨交流，通过小组合作，加强学生组内团结、共同完成任务拓展思维，培养团结合作的精神通过小组合作，加强学生组内团结、共同完成任务打开的网页，主要包含个人主页、网站网页、组织完成任务或活动主页、公司主页等主页一般是用户通过搜索引擎访问一个网站时所看到的首个页面，用于吸引访问者的注意，通常也起到登陆页的作用在一般情况下，主页是用户用于访问网站其他模块的媒介，主页会提供网站的重要页面及新文章的链接，并且常常有一个搜索框供用户搜索相关信息做一做学生小组间讨培养学生组间合浏览多个网站，体验网站的基本结构论，共同完成作能力，并且炼

2.HTML在全球范围内发布信息需要一种通用的出版语言，这种语言必须让所有的计算机都能够读懂HTML就是在互联网上通用的出版语言，大多数网页都使用它来描述文件任务动手能力HTML文档本身是文本格式的文件，可以由任何通过教师的讲通过小组合作，一种文本编辑软件编辑，只需将文件的扩展名改为解，以小组合加强学生组内团“.htm”或“.html”，就可以使用浏览器浏览作的方式，开结、共同完成任新建文本文件，复制粘贴以下HTML代码，保展探讨交流，务存文件名为“test.html”，并通过浏览器查看网页效果htmlheadtitle认识HTML/title/headbodyp这是我的第一个网页，在这里/ptablewidth二80%border=T”cellpadding=，0n完成任务tr了解HTML拓展思维，培养TDnbsp;/TDTDnbsp;/TD/tr/tableahref=“http:〃www.drcamdu.com/xhtml/w〉快来学习HTML吧！/a/body/htmlHTML的实质是利用特殊的标记符号，对文本、图片、链接及其格式等网页元素进行标记，供浏览器进行解释并显示结果HTML及其文档的基本结构特点如下

1、标记用◊，成对出现

2、语句嵌套

3、不分大小写有一些由“”括起来的字符串，如〈title、〈/title、〈body〉、〈/body》等，这些就是HTML标记每个HTML标记代表着一些特定的含义HTML标记分单标记和双标记两种双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠单标记只有开始标记，没有结束标记HTML文件结构如下html:标记网页的开始Vhead标记头部的开始Vtitle〉显示在浏览器左上方的标题/titleV/head标记头部的结束body标记页面正文开始V/body标记页面正文结束通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务团结合作的精神通过小组合作，加强学生组内团结、共同完成任务V/hlml标记网页的结束HTML标签是由尖括号包围的关键词，通常成对出现°说一说试说说你所理解的HTML文档的基本结构？学生小组间讨论，共同完成培养学生组间合作能力html表示HTML文件的开头head〈title页面标题〈/title/head页面标题放于〈title和〈/title之间body页面内容/body网页的主要内容放于1丫和儿01丫之间html表示HTML文件的结束

3.所见即所得的网页编辑器直接使用HTML编写网页的方法被称为手工编写方法在互联网出现的最初几年里，人们都是使用这种方法编辑网页的但随着万维网在全世界的普及，人们发现了手任务工编写网页的缺点一一编写速度慢、结果不直观通过教师的讲通过小组合作，在这种情况卜，所见即所得的网页编辑器，即网页解，以小组合加强学生组内团制作软件出现了作的方式，开结、共同完成任常见的网页制作软件有Frontpage、Dreamweaver等FrontPage功能强大、简单易用，具有站点管理、发布等功能，适合初学网页制作的人员；Dreamweaver功能齐全、兼容性强，更适合专展探讨交流，完成任务务业的网页制作人员使用网页制作软件，制作人员不用了解HTML的基本语法，也可以制作出丰富的网页这是因为在制作网页时HTML代码会自动生成利用网页制作软件编辑网页网页的HTML代码浏览器下预览的网页

二、认识HTML5网页HTML5（以下简称H5）是一种高级网页技术，它是HT迎最新的修订版本，是目前互联网前端开发的主流语言通过教师的讲解，以小组合通过小组合作，与传统的网页界面相比，H5网页能适配不同尺作的方式，开加强学生组内团寸的终端设备，兼容市场上的各种浏览器展探讨交流，完成任务结、共同完成任由于每种设备的屏幕比例不一样，很容易出现网页变形等问题，影响浏览效果H5会根据设备的屏幕比例，自动调整网页的比例，很好地避免了网页变形等问题，给用户良好的体验H5网页还具有页面绚丽多彩，能实现多种冲击力强的网站视觉效果的优势HTML5的优点

1、提高可用性和改进用户的友好体验；

2、有几个新的标签，这将有助于开发人员定义重要的内容；

3、可以给站点带来更多的多媒体元素（视频和音频）；

4、可以很好的替代FLASH和Silverlight；

5、当涉及到网站的抓取和索引的时候，对于SEO很友好;

6、将被大量应用于移动应用程序和游戏；

7、可移植性好务试一试学生小组间讨培养学生组间合在网络中搜索“40年大美时光”H5的案例，体验H5网页课堂练习上网搜索如何查看网页的html代码第一种方法

1、打开一个网页；

2、点击浏览器上的菜单“查看”；

3、选择其中的“源文件”选项，即可以打开一个记事本文件，其中就是这个网页的源代码第二种方法

1、打开一个网页；

2、将鼠标放置到网页上的任何位置（只要位于没有链接、图片处，最好是网页中的空白区域）；

3、点击鼠标右键，选择其中的“查看源文件”即可论，共同完成任务学生小组间讨论，共同完成任务，并分组汇报作能力，并且炼动手能力培养学生独立完成练习的能力课堂小结总结本节课所学内容学生回答梳理本节课的知识点，完成学习目标，培养学生总结概况能力板书设计

一、认识HTML网页

1.网站的基本结构

2.HTML

3.所见即所得的网页编辑器

二、认识HTML5网页。