资源简介 中小学教育资源及组卷应用平台湘电子版七年级下册第三单元第7节认识HTML和HTML5网页教学设计课题 认识HTML和HTML5网页 单元 第三单元 学科 信息技术 年级 七年级学习 目标 认识HTML网页和HTML5网页；了解所见即所得的网页编辑器 理解网站的基本结构和HTML。重点 认识HTML网页和HTML5网页；了解所见即所得的网页编辑器；理解网站的基本结构和HTML。难点 理解网站的基本结构和HTML教学过程教学环节 教师活动 学生活动 设计意图导入新课 当我们在网络上浏览信息时，经常会被一些内容丰富、结构清晰、版面美观、浏览方便的页面所吸引，我们看到的网页是浏览器对HTML解释显示的结果。HTML标记语言的超文本功能，把网页连接起来形成多姿多彩的互联网世界。 听老师讲解 调动学生学习的积极性，为以下的学习打下良好的基础讲授新课 活动任务 本节我们认识HTML和HTML5网页，了解网页背后的知识。 我的问题 (1)什么是网页？ (2)计算机上浏览的网页和手机上收到的网页有什么不同 活动建议 我们对网站并不陌生，可以先通过典型的网站样例，了解网站的基本结构, 从而进一步了解网页，并通过实践操作了解网页背后的超文本标记语言。 从互联网搜索HTML5网页的相关信息，了解它与传统网页的不同之处。 活动过程 一、认识HTML网页 1.网站的基本结构 (1)网页。 网页是网站的基本信息单位，是HTML文件，是一种可以在互联网上传输，并被浏览器认识和翻译成页面显示出来的文件 网页中包括文本、图片、动画、音频、视频、特效、超链接等内容。 (2)网站。 网站是由若干个网页组成，这些网页具有某些相同类型的信息，通过各种超链接互相连接在一起。 网站最基本的功能就是提供各种服务 新浪网提供各类资讯；百度提供了强大的搜索功能 购物网站则提供了各种商品的买卖服务 网站分类 根据网站所用编程语言分类：例如asp网站、php网站、jsp网站、网站等； 根据网站的用途分类：例如门户网站（综合网站）、行业网站、娱乐网站等； 根据网站的功能分类：例如单一网站（企业网站）、多功能网站（网络商城）等等。 根据网站的持有者分类：例如个人网站、商业网站、政府网站、教育网站等。 根据网站的商业目的分类：营利型网站（行业网站、论坛）、非营利性型网站（企业网站、政府网站、教育网） (3)主页。 网站的第一页一般称为主页。主页的文件名一般为“index. Html”。 主页也被称为首页，是用户打开浏览器时默认打开的网页，主要包含个人主页、网站网页、组织或活动主页、公司主页等。 主页一般是用户通过搜索引擎访问一个网站时所看到的首个页面，用于吸引访问者的注意，通常也起到登陆页的作用。 在一般情况下，主页是用户用于访问网站其他模块的媒介，主页会提供网站的重要页面及新文章的链接，并且常常有一个搜索框供用户搜索相关信息 做一做 浏览多个网站，体验网站的基本结构。 2.HTML 在全球范围内发布信息需要一种通用的出版语言，这种语言必须让所有的计算机都能够读懂。 HTML就是在互联网上通用的出版语言，大多数网页都使用它来描述文件。 HTML文档本身是文本格式的文件，可以由任何一种文本编辑软件编辑，只需将文件的扩展名改为“.htm”或 “.html”，就可以使用浏览器浏览。 新建文本文件，复制粘贴以下HTML代码，保存文件名为“test.html”，并通过浏览器查看网页效果 认识 HTML 这是我的第一个网页，在这里 , 快来学习HTML 吧!新知讲解HTML的实质是利用特殊的标记符号，对文本、图片、链接及其格式等网页元素进行标记，供浏览器进行解释并显示结果。新知讲解HTML及其文档的基本结构特点如下。(1)、标记用<>,成对出现。(2)、语句嵌套。(3)、不分大小写。新知讲解有一些由“<>”括起来的字符串，如、、、等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。单标记只有开始标记，没有结束标记。新知讲解 认识 HTML这是我的第一个网页，在这里-1){ window.swanInvoke({ appKey: 'LYaggHHMnhIO7GgfWsVcMKQKoRjCXLqq', path: 'pages/zydown/zydown', query: { id: el.attributes['ownattr'].nodeValue } }); return false; }else{ return true; } }; ;(function(){ var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork'; var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; var isMobile = isDesktop = false; if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile = true; } else { isDesktop = true; } var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1; var isOS = ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Mac') > -1; if (isWeixin) { } if (isAndroid) { } // 标题固定fixed var $fixedTit = $('#J_FixedShowDetailTit'); var fixed_tit = function () { var titIsShow = $(window).scrollTop() > 179; if (titIsShow) { $fixedTit.animate({ top: 0 }, 300); } else { $fixedTit.animate({ top: '-200px' }, 300); } }; $(window).on('scroll', _.debounce(fixed_tit, 50)); fixed_tit(); // 简介固定高度 var $height= $('.assets-intro').height(); if($height == 480) $('.introAll').show(); // 收缩 function toMore(el){ var flag = el == '.introAll' ? 1 : 0; var overflow = flag ? "auto" : "hidden"; var maxHeight = flag ? "inherit" : "480px" ; var className = flag ? ".introAllHide" : ".introAll"; $(el).on('click',function(){ $('.assets-intro').css({ "overflow":overflow, "maxHeight": maxHeight }); $(el).hide(); $(className).show(); }); } toMore('.introAll'); toMore('.introAllHide'); })();