教案

序号：1

授课日期

课时数

4

章节名称

任务1搭建开发环境、任务2文字与段落排版

教学内容

重点

网页开发环境的搭建；站点的创建和管理；文本标签、分隔标签、序列标签的使用。

难点

序列标签的嵌套。

教学目的与要求

1.掌握Web的工作原理。

2.了解Web的类型。

3.掌握网页开发环境的搭建方法。

4.掌握站点的创建和管理方法。

5.掌握网页文件的创建和保存方法。

6.掌握HTML5的页面结构。

7.掌握HTML5语言中的标签的使用方法。

8.掌握标签中的属性的使用方法。

9.掌握HTML5页面文档的编写方法。

教学方法

与手段

教师采用任务驱动法，使用教学PPT辅助授课。

教师操作演示，学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

通过回帖的方式回答课上留下的思考题，并预习下一节内容。

讲授内容

课堂组织

第一学时

（任务1搭建开发环境）

一、知识准备

1、Web与Internet

Internet是一个全球性的计算机互联网络，中文名称有“因特网”“国际互联网”“网际网”“交互网络”等，它是目前世界上规模最大的计算机网络。Web是Internet中较热门的服务之一，也是我们登录Internet后经常使用的互联网功能。

2、Web的工作原理

Web是基于Internet的一个多媒体信息服务系统，基于浏览器/服务器（B/S）工作模式，由Web服务器、浏览器（Browser）和通信协议三部分组成。Web服务器监听客户端连接请求、接收请求，返回响应内容；浏览器是客户端用于访问网页的主要软件；通信协议主要采用超文本传输协议（HTTP，HyperTextTransferProtocol），定义Web服务器和客户端的通信细节。

3、Web的类型

根据技术特点划分：静态网页和动态网页。

根据网页位置划分：内页和主页。

4、HTML5概述

HTML5是超文本标记语言（HyperTextMarkupLanguage）的第5代版本。在HTML5诞生前，由于各浏览器之间的标准不统一，给网站开发人员带来了很大的困扰。HTML5的目标就是将Web带入一个成熟的应用平台。HTML5既新增了许多新特性，还解决了跨浏览器问题，这项改进工作至关重要。在HTML5诞生前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且没有统一的标准。用户使用不同的浏览器，经常会遇到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的旧版本IE浏览器，只需简单地增加JavaScript代码就可以使用新的元素。

二、实战演练——搭建开发环境

1、网页编辑软件的安装

2、浏览器的安装

三、强化训练——创建第一个HTML5页面

1、创建和管理站点

2、创建和保存HTML5文档

四、课后作业

1、完成线上的作业，并做好预习。

2、完成书本“1.4课后实训”练习。

第二学时

（任务2文字与段落排版、2.1知识准备）

1、HTML5文档格式

1).!doctype标签

!doctype标签位于文档的起始位置，用于向浏览器说明当前文档使用哪种HTML标准规范，浏览器以doctype声明判断该网页是否有效，并按照指定的文档类型进行解析。在HTML5文档中，doctype声明显得非常简单。

2).html标签

html标签位于!doctype标签之后，html标签不仅告知浏览器，自己是一个HTML文档，它还标志着HTML文档的开始，而/html标签标志着HTML文档的结束，在html…/html之间的是文档的头部和主体内容。

3).head标签

一个完整的网页包含两大部分：头部（head）和主体（body），也就是网页架构中的head标签和body标签。head标签一般用于描述浏览器所需的信息，包含了所有的头部元素。在head…/head标签中可以插入脚本（scripts）、样式文件（CSS）及各种meta信息。可以添加到头部区域的标签有：title、style、meta、link、script、noscript、base等。使用meta标签展示HTML文档的描述、关键词、作者、字符集等。

4).title标签

在head…/head标签中，嵌套着另一组title…/title标签。在title…/title之间的文字内容将会出现在浏览器视窗顶部的标题栏中，该标签定义HTML文档的标题。

5).body标签

body标签用于定义网页显示的主体内容。在浏览器中要显示的内容应该写在body…/body标签之间。

2、标签的属性

利用body标签的属性设置网页效