任务1创建第一个HTML5网页.doc

教案名称

任务1创建第一个HTML5网页

计划学时

2学时

知识目标

了解Web前端开发技术及相关概念

熟悉常用的浏览器

熟悉前端开发常用的工具软件

掌握使用HBilderX软件创建简单的网页

能力目标

了解前端开发技术

能熟练使用HBuilderX软件

素质目标

引导学生做好职业规划，在课程学习中树立职业理想

激发学生爱国热情、为科技强国而努力学习

教学重点

URL、HTTP、HTML、网站、网页、主页等概念

HBuilderX工具操作

教学难点

使用HBuilderX创建HTML5网页

教学模式

教学做一体化

线上+线下混合教学

教学活动及主要环节

思政元素

切入点

第1学时

（认识Web前端开发、Web相关概念）

=1\*ROMANI.导入新课：（5分钟）

1．有无制作过网页？以前学过网页课程吗？

2．你喜欢什么样的网页？学完这门课程，我们也可以做静态网页。

（学生回答，参与互动）

=2\*ROMANII.课程前导：（15分钟）

1.为什么学习这门课？

该门课程对应的职业岗位是WEB前端开发工程师。

2.这门课学什么内容？

HTML5、CSS3、HTML5+CSS3布局网页、制作小型静态网站。

3.怎么学习这门课？

多实践、多利用拓展资源进行学习、从模仿项目或案例中学习逐渐过渡到自己设计网站。

=3\*ROMANIII.考试方法：（5分钟）

过程性考核+终结性考核

过程性考核：出勤+课堂表现+作业+网站作品（60分）

终结性考核：期末网上题库抽题考试（40分）

=4\*ROMANIV.新课内容：（20分钟）

任务描述

启动HBuilderX，创建一个空项目，项目名称为：chapter01,在该项目中新建一个html文件，文件名称为：example01.html，在网页上显示：“只争朝夕，不负韶华。”。网页浏览效果如图1-1所示。

图1-1第一个网页浏览效果

二、认识Web前端开发

Web前端开发：主要包括HTML、CSS和JavaScript等技术。

Web后端开发：通过编写程序代码与后台服务器交互，来动态更新网站的内容。包括PHP、JSP和ASP.NET等技术。

三、相关概念

1、IP地址和域名

2、URL：统一资源定位符

3、HTTP与HTTPS：超文本传输协议，提供一种发布和接收HTML页面的方法。

4、网站、网页与主页：主页通常用index.htm或index.html表示。

5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。

（学生动手操作，任意打开一个网页，查看网页源代码）

6.Web标准：为了使网页在使用不同浏览器浏览时显示相同的效果，在开发应用程序时，浏览器开发商和Web开发商都必须共同遵守W3C与其他标准化组织共同制定的一系列Web标准。

Web标准包括结构标准（HTML）、表现标准(CSS)和行为标准(JavaScript)。

第2学时

（创建第一个HTML5页面）

课前发布任务：

观看学习通平台相关学习视频。

做课前测试题。

=1\*ROMANI.新课内容：（35分钟）

一、HTML5概述

HTML5主要优势：

良好的移植性

更直观的结构

内容和样式分离

新的表单元素

更方便地嵌入音频和视频

矢量图绘制。

二、常用的浏览器

Edge浏览器（美国微软公司）、火狐FireFox（开源基金组织mozilla研发的产品是一家美国公司）、谷歌Chrome（推荐使用，美国公司）、

Safari、Opera浏览器。

三、常用的网页编辑软件

HBuilderX:本课程使用该软件。

VisualStudioCode

AdobeDremweaver

SublimeText

四、任务实现：创建第一个网页

1．创建项目

执行菜单栏的“文件”|“新建”｜“项目”选项，出现新建项目对话框，输入项目名称，选择模板类型为“空项目”，单击“创建”按钮。

2．新建文件

在左侧视图中，右击项目名称，执行“新建”命令，选择“html文件”，出现“新建html文件”对话框，输入文件名，单击“创建”按钮。

在网页文件代码的title与/title之间，输入HTML文档的标题，这里输入：“第一个html5网页”然后在body与/body标记之间写入p只争朝夕，不负韶华。/p

3．保存文件Ctrl+S

4．浏览网页Ctrl+R

（学生一起操作，实现教学做一体化，加强学生对知识难点的理解。）

=2\*ROMANII.课堂小结：（10分钟）

作业1：

课本实训1

作业2：

使用学习通平台的教学视频自学任务2中的HTML5常用文本标记。

随着互联网的飞速