第3次课程教案本次课授课章节第2章HTML和JavaScript2学时数本次课教学掌握：①文字段落标记②图像标记目的与要求教学HTML标记的使用重点本次课重点与难点教学表格标记的嵌套使用难点教学方法理论讲授与多媒体演示相结合，案例分析法，比较分析法与手段教学内容课时分配（分钟）10新课导入教学内容30HTML基本语法时间分配30文字段落标记15图像标记5讨论与小结一、新课导入根据学生课前预习情况，提出问题，引发学生的继续学习兴趣。-网页：是利用万维网(WorldWideWeb，简称WWW)展示信息的一种形式，由用户通过IE等浏览器进行访问。网页的分类：--根据网页在网站中的位置分：主页和内页--根据网页的表现形式分：静态网页和动态网页教学过二、 讲授教学内容程设计HTML是一种用来制作超文本文档的简单标记语言，Web浏览器能够自动解释超文本文件并且按照一定的格式显示出来。单纯使用只能实现静态页面的设计。0.HTML简介·HTML文件扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。·HTML语言使用标记编写文件标记(tag)必须用“<"和“>"括起来，一般以“<标记名>"开始，以“</标记名>"结束，即成对的使用标记，也称之为双标记。也有单独一个标记就能表达完整意思的标记，被称为单标记，如<hr>、<br>等·HTML的标记是不区分大小写的。6
6 第 3 次课程教案 授 课 章 节 第 2 章 HTML 和 JavaScript 本次课 学时数 2 本 次 课 教 学 目 的 与 要 求 掌握：① 文字段落标记②图像标记 本次课 重 点 与 难 点 教学 重点 HTML 标记的使用 教学 难点 表格标记的嵌套使用 教 学 方 法 与手段 理论讲授与多媒体演示相结合，案例分析法，比较分析法 教 学 内容 时 间 分 配 教学内容 课时分配（分钟） 新课导入 10 HTML 基本语法 30 文字段落标记 30 图像标记 15 讨论与小结 5 教学过 程设计 一、新课导入 ⚫ 根据学生课前预习情况，提出问题，引发学生的继续学习兴趣。 ⚫ 网页：是利用万维网(World Wide Web，简称 WWW)展示信息的一种形式，由用 户通过 IE 等浏览器进行访问。 ⚫ 网页的分类： -根据网页在网站中的位置分：主页和内页 -根据网页的表现形式分：静态网页和动态网页 二、讲授教学内容 HTML 是一种用来制作超文本文档的简单标记语言，Web 浏览器能够自动解释 超文本文件并且按照一定的格式显示出来。单纯使用只能实现静态页面的设计。 0. HTML 简介 HTML 文件扩展名是.html 或.htm，它们是可供浏览器解释浏览的文件格式。 HTML 语言使用标记编写文件 标记(tag)必须用“<”和“>”括起来，一般以“<标记名>”开始，以“</标记名>”结 束，即成对的使用标记，也称之为双标记。也有单独一个标记就能表达完整意思 的标记，被称为单标记，如<hr>、<br>等 HTML 的标记是不区分大小写的
1.HTML基本语法HTML文件的扩展名为.htm或.html·最基本的语法格式为：<标记>文档内容</标记>或<标记属性1=属性值1...>文档内容</标记>：HTML文档分为文档头和文档体两部分。一个完整的HTML文件的基本格式：+<html><head><title>网页的标题</title></head><body>文档主体，正文部分</body></html>其中：■文档标签<html>...</html>■文档头标签：<head>...</head>用于对文档进行一些必要的定义·<meta>标签√用于说明与Web页面有关的信息，如文件创建时间、文件作者等√常用的属性：name、content、http-equiv、charset■标题标签：<title>..</title>■文档体标签：<body>...</body>用于显示各种文档信息文字段落标记2.（1）各种相关标记介绍-文字样式：<fontsize=数字face字体名color-颜色>文字内容</font>√颜色值设置方式（见课件表格）V字型标记（见课件表格）段落标记：<palign=对齐方式>段落内容</p>换行标记<br>（单标记）-水平线标记<br>（单标记）标题标记<hn>-注释标签<!-注释>(补充)层标签<div>..</div>（补充）-（2）文字段落标记应用举例·HTML转义字符串（补充）3.图像标记<imgSrc=图片文件名alt=简要说明width=图片的宽度height=图片的高度border=边框宽度hspace=水平方向空白vspace=垂直方向空白>三课堂讨论题小结（5分钟）讨论：标记的嵌套问题总结：本章重点讲解了HTML基础语法，要求学生应该熟练掌握。作业：教材65-66页选择题1，2、填空题相关1，2，3课后要求同学们自己预习超星平台上的第二章内容，观看视频：思考题或预习题或作业题观看超星平台上【资料】-【录屏】里面的录屏2.表格标记的使用.mp4并且自己完成2.2的章节测试题。7
7 1. HTML 基本语法 HTML 文件的扩展名为.htm 或.html 最基本的语法格式为： <标记>文档内容</标记> 或<标记 属性 1=属性值 1 . >文档内容</标记> HTML 文档分为文档头和文档体两部分。一个完整的 HTML 文件的基本格式： <html> <head> <title>网页的标题</title> </head> <body> 文档主体，正文部分 </body> </html> 其中： ▪ 文档标签<html>.</html> ▪ 文档头标签：<head>.</head>用于对文档进行一些必要的定义 ▪ <meta>标签 ✓ 用于说明与 Web 页面有关的信息，如文件创建时间、文件作者等 ✓ 常用的属性：name 、content、http-equiv 、charset ▪ 标题标签：<title>.</title> ▪ 文档体标签：<body>.</body>用于显示各种文档信息 2． 文字段落标记 （1）各种相关标记介绍 文字样式：<font size=数字 face=字体名 color=颜色>文字内容</font> ✓ 颜色值设置方式（见课件表格） ✓ 字型标记（见课件表格） 段落标记：<p align=对齐方式> 段落内容</p> 换行标记 <br>（单标记） 水平线标记 <br>（单标记） 标题标记 <hn> 注释标签<!- 注释 ->(补充) 层标签<div>.</div>（补充） （2）文字段落标记应用举例 HTML 转义字符串（补充） 3． 图像标记 <img src=图片文件名 alt=简要说明 width=图片的宽度 height=图片的高度 border=边框宽度 hspace=水平方向空白 vspace=垂直方向空白> 三 课堂讨论题 小结 （5 分钟） 讨论：标记的嵌套问题 总结：本章重点讲解了 HTML 基础语法，要求学生应该熟练掌握。 思考题或预习 题或作业题 作业：教材 65-66 页 选择题 1，2、填空题相关 1，2，3 课后要求同学们自己预习超星平台上的第二章内容，观看视频； 观看超星平台上【资料】-【录屏】里面的录屏 2.表格标记的使用.mp4 并且自己完成 2.2 的章节测试题
《ASP.NET程序设计教程（C#版）》，崔淼，机械工业出版社参考资料《ASP.NET应用开发与实践》，刘乃琪，人民邮电出版社超星平台-《Web程序设计》-2021春课后小结8
8 参 考 资 料 《ASP.NET 程序设计教程（C#版）》，崔淼，机械工业出版社 《ASP.NET 应用开发与实践》，刘乃琪，人民邮电出版社 超星平台-《Web 程序设计》-2021 春 课 后 小 结
第4次课程教案本次课授课章节第2章HTML和JavaScript2学时数本次课教学掌握：①超级链接标记②表格标记③列表标记目的与要求教学HTML表格的使用重点本次课重点与难点教学表格标记的嵌套使用难点教学方法理论讲授与多媒体演示相结合，案例分析法，比较分析法与手段教学内容课时分配（分钟）15复习导入20超级链接标记教学内容时间分配表格标记40列表标记105小结一、复习导入1.课后题讲解2.教师给一段简单的HTML代码，内容包括前一节课介绍的文字段落标记和图像标记，请同学分析，读程序写代码。3.导入：经过上节课的学习，同学们已经可以制作一个简单的静态网页，并可以在网页中添加一些图片和文字，也就是实现了网页的基本功能。但是如果想设计一个网站，只有一个页面，肯定不行。一定会有多个页面，那么这些页面之后如何进行跳转呢？我们今天就从超级链接标记讲起。教学过程二、讲授教学内容设计1.超级链接标记·超链接(hyperlink)是指从一个网页指向一个目标的连接关系。·超链接包含两部分内容：V链接目标V超链接的对象·几种超级链接方式√文字链接：<ahref-=urltarget=打开窗口方式>热点文本</a>打开窗口方式：blank,_self_parent9
9 第 4 次课程教案 授 课 章 节 第 2 章 HTML 和 JavaScript 本次课 学时数 2 本 次 课 教 学 目 的 与 要 求 掌握：①超级链接标记②表格标记③列表标记 本次课 重 点 与 难 点 教学 重点 HTML 表格的使用 教学 难点 表格标记的嵌套使用 教学方 法 与手段 理论讲授与多媒体演示相结合，案例分析法，比较分析法 教 学 内容 时 间 分 配 教学内容 课时分配（分钟） 复习导入 15 超级链接标记 20 表格标记 40 列表标记 10 小结 5 教 学 过 程 设 计 一、复习导入 1.课后题讲解 2.教师给一段简单的 HTML 代码，内容包括前一节课介绍的文字段落标记和图像标 记，请同学分析，读程序写代码。 3.导入：经过上节课的学习，同学们已经可以制作一个简单的静态网页，并可以在网 页中添加一些图片和文字，也就是实现了网页的基本功能。但是如果想设计一个网 站，只有一个页面，肯定不行。一定会有多个页面，那么这些页面之后如何进行跳 转呢？我们今天就从超级链接标记讲起。 二、讲授教学内容 1． 超级链接标记 超链接(hyperlink)是指从一个网页指向一个目标的连接关系。 超链接包含两部分内容： ✓ 链接目标 ✓ 超链接的对象 几种超级链接方式 ✓ 文字链接：<a href=url target=打开窗口方式>热点文本</a> 打开窗口方式：_blank;_self;_parent
V图像链接：<ahref=urltarget=打开窗口方式><imgsre=路径/图片文件名></a>V电子邮件链接：<ahref-"mailto:email">文字</a>v锚点链接：设置锚点：<aname="锚名">文字</a>创建链接：<ahref-"#锚名”>文字</a>2.表格标记<table>...<table>。根据上节课布置的预习作业，同学们已经观看了录屏2.表格标记的使用.mp4，相信大家一定觉得表格标记有点儿太多了吧？记不住怎么办？那么这节课我们就具体地看一看表格有哪些标记，他们应该怎么去使用。（1）相关标记介绍·表格标记的具体格式：<table border=value bordercolor-valuewidth=value height=value cellspacing=valuecellpadding=valuealign=水平对齐方式><captionalign=水平对齐方式valign=垂直对齐方式>标题</caption><tr><th>表头1</th><th>表头2</th><th>表头3</th><th>表头n</th></tr><tr><td>表项1</td><td>表项2</td><td>表项3</td><td>表项n</td></tr><tr><td>表项1</td><td>表项2</td><td>表项3</td><td>表项n</td></tr></table>其中：表格标签：<table>相关属性：border边框：bordercolor边框颜色：width宽度：height高度cellspacing单元格间距；cellpadding单元格边框间距；align对齐■表格标题标签：<caption>相关属性：align对齐；valign垂直对齐；top/bottom标题位置■行标签：<tr>，表头标签：<th>单元格标签：<td>相关属性：rowspan单元格跨行；rowspan单元格跨列（2）表格相关标记举例3.列表标记(补充)·无序列表标记<ul>·有序列表标记<ol>·列表项<li>三课堂讨论题小结讨论：标记的嵌套问题总结：本章重点讲解了HTML基础语法，要求学生应该熟练掌握。作业：教材65-66页选择题3，4、填空4、程序设计题（书面作业）课后要求同学们自已预习超星平台上的2.4的内容；思考题或预习题或作业题观看超星平台上【资料】-【录屏】里面的录屏3.表单与控件操作案例.mp4并且自己完成2.2和2.3的章节测试题。10
10 ✓ 图像链接：<a href=url target=打开窗口方式><img sre=路径/图片文件名></a> ✓ 电子邮件链接：<a href=”mailto:email”>文字</a> ✓ 锚点链接：设置锚点：<a name=”锚名”>文字</a> 创建链接：<a href=”#锚名”>文字</a> 2．表格标记<table>.<table> ⚫ 根据上节课布置的预习作业，同学们已经观看了录屏 2.表格标记的使用.mp4， 相信大家一定觉得表格标记有点儿太多了吧？记不住怎么办？那么这节课我们 就具体地看一看表格有哪些标记，他们应该怎么去使用。 （1）相关标记介绍 表格标记的具体格式： <table border=value bordercolor=value width=value height=value cellspacing=value cellpadding=value align=水平对齐方式> <caption align=水平对齐方式 valign=垂直对齐方式>标题</caption> <tr><th>表头 1</th><th>表头 2</th><th>表头 3</th><th>表头 n</th></tr> <tr><td>表项 1</td><td>表项 2</td><td>表项 3</td><td>表项 n</td></tr> . <tr><td>表项 1</td><td>表项 2</td><td>表项 3</td><td>表项 n</td></tr> </table> 其中： ▪ 表格标签：<table> 相关属性：border 边框；bordercolor 边框颜色；width 宽度；height 高度； cellspacing 单元格间距； cellpadding 单元格边框间距； align 对齐 ▪ 表格标题标签：<caption> 相关属性：align 对齐;valign 垂直对齐;top/bottom 标题位置 ▪ 行标签：<tr> ▪ 表头标签：<th> ▪ 单元格标签：<td> 相关属性：rowspan 单元格跨行;rowspan 单元格跨列 （2）表格相关标记举例 3.列表标记(补充) 无序列表标记<ul> 有序列表标记<ol> 列表项<li> 三 课堂讨论题 小结 讨论：标记的嵌套问题 总结：本章重点讲解了 HTML 基础语法，要求学生应该熟练掌握。 思考题或预习 题或作业题 作业：教材 65-66 页 选择题 3，4、填空 4、 程序设计题 （书面作业） 课后要求同学们自己预习超星平台上的 2.4 的内容； 观看超星平台上【资料】-【录屏】里面的录屏 3.表单与控件操作案例.mp4 并且自己完成 2.2 和 2.3 的章节测试题