《网站前端技术》教案第2课HTML与HTML5（一）.docx
-
资源ID：899634
资源大小：296.12KB
全文页数：16页
- 资源格式： DOCX
下载积分：5金币
快捷下载
账号登录下载
微信登录下载
三方登录下载：
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
《网站前端技术》教案第2课HTML与HTML5（一）.docx
课题第2课HTML与HTML5(一)课时2课时(90min)教学目标知识技能目标：(1)了解HTML的主要功能、标签的语法、结构、标签分类及常用编辑工具(2)了解HTML5的优势及语法变化(3)掌握HTML的头部标签素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML的功能、标签的语法、结构、标签分类和常用编辑工具，HTML5的语法变化教学难点：HTML头部标签教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)一传授新知(33min)一头脑风暴(5min)第2节课：问题导入(3min)一传授新知(27min)一上机操作(IOmin)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML的概念、功能、标签的语法、结构、分类等相关内容，以及HTML常用的编辑工具。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入(5min)【教师】提出以下问题什么是HTML?它由哪些元素组成？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知(33min)2.1 HTML基础2.1.1 什么是HTML【教师】讲解HTML的概念HTML指的是超文本标记语言(hypertextmarkuplanguage),是用于编写网页的主要语言。它基于标准通用标记语言(standardgeneralizedmarkuplanguage,SGML)定义，也是一通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML的概念、功能、HTML标签的>»语法、结构、分类的相关内容，以及熟种规范，一种标准。HTML主要用于定义网页结构，它决定网页上显示的内容，即解决"网页上有什么"的问题，是网页文件制作的基础。悉HTML常用的编 辑工具，为后边的 学习打好基础HTML是一种用标记标签（简称标签）描述网页的标记语言。网页中的文本、图像、表格、超链接等内容，都是由HTML中的标签定义和组织的。用HTML编写的超文本文档称为HTML文档，扩展名为.Mml或hm,也就是网页。【课堂互动】十【教师】提问HTML与文本文件有何不同？十【学生】聆听、思考、回答网页文件本身是一种文本文件，它本质上是通过在文本文件中添加标签，来告诉浏览器如何显示其中的内容，如文字如何处理、画面如何安排、图像如何显示等。浏览器按JI顶序阅读网页文件,并根据标签解释和显示内容。对书写有误的标签，浏览器不报错,且不停止解释执行过程,用户只能通过显示效果来分析出错原因和出错位置。【高手点拨】对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。【学生】聆听、记录、理解2.1.2HTML的主要功能【教师】讲解HTML的主要功能【课堂互动】十【教师】提问HTML的主要功能有哪些?十【学生】聆听、思考、回答定义（或设置）文本：定义文本的标题、段落等。此外，还可以设置文字的字体、字号、颜色等样式。但是现在一般不用HTML设置样式，而是用CSSe插入图像：在网页中插入图像，使网页图文并茂.建立超链接：通过超链接实现不同网站的学桀。创建列表：彳各信息用一种易读的方式表现出来。创建表单：通过表单实现人机交互,使网站的功能更加完善。建立表格：以表格的形式显示页面信息,为浏览者查找信息提供便利。插入多媒体：通过网页共享音频、视频、动画等，并设置播放的时间和次数。【学生】聆听、记录、理解【教师】讲解HTML标金的基本诺法÷【多媒体】组织学生扫码播放"HTML标签的基本语法”视频（详见教材），让学生对这部分内容有一介大致地了解HTML标签是由尖括号""括起来的关键词，每个标签都有名称、可选择的属性和标签内容。HTML中，成对出现的标签称为双标签，单独出现的标签称为单标签。1 .双标签格式】：标签名标签内容（文本或超文本）/标签名例如，定义一个标题的标签，代码如下：h1这是一号标题小1格式2：标签名属性名1="属性值1"属性名2二"属性值2"标签内容文本或超文本）/标签名属性都是可选择的，如果标签中有属性，则标签名和属性名之间要用空格隔开，各属性值用双引号括起来。例如，实现超链接的代码如下：ahref="webindex.html"Iarget="_blank"点击我吧a其中，a为超链接标签名称；href="webindexhm和Iarget="_blank"两个属性，分别定义了超链接目标文档的路径和打开方式；"点击我吧"为标签内容（超链接文本）【提示】代码中的标点符号均为英文标点符号。2 .单标签格式】：标签名A此种标签称为单标签,如恻亍标签br/,它仅仅通知浏览器在此处换行，因而不需要界定作用范围，所以它没有尾标签。【提示】从长远来看，应该养成正确关闭单标签的习惯，因此，在右尖括号前须加上一个空格和斜杠。格式2：V标签名属性名1="属性值1"属性名2="属性值2"/例如，控制图像的代码如下：imgsrc="imgjpO2.jpg"width="400"height="3OO"/其中jmg是标签名表示图像MC是标签属性名用于将指定图像引入网页jmgjpO2.jpg是属性值，表示图像的地址；Width、height也是标签属性名称，分别用于定义图像的宽度和高度，单位为px（像素，可省略）。当一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签称为一元素。由于在HTML语法中，每个由HTML标签与文字形成的元素内，还可以包含另7三,因此，整个HTML文件就像一个大元素，其中包含了许多小元素。HTML文档中一行可以写多个不同的标签，也可将一对标签写在不同的行中，但每对标签必须嵌套使用，不能交叉使用。【教师】PPt展示”标签的正确用法和错误用法”的表格（详见教材），让学生通过对比了解标签的正确用法【高手点拨】上述列表中，Vld>vtd>标签包含在<lr><lr>标签中，<tr><lr>标签又包含在<iablextable>标签中，形成父子关系，后面章节会详细讲解。【课堂互动】十【教师】提问简述单标签与双标签的区别.中【学生】思考、讨论、回答【学生】聆听、记录、理解2.1.4HTML的基本结构【教师】讲解HTML的基本结构÷【多媒体】组织学生扫码播放“HTML的基本结构“视频（详见教材），让学生对这部分内容有一个大致地了解HTML文档由起始标签<html>、头部标签<head>和主体标签<body>三部分组成。下面这段代码展示了一个基本的HTML文档结构。<himl><head>文档头部<head><body>文档主体<7body><html>【课堂互动】十【教师】提问以上三个标签各有什么作用？【学生】聆听、思考、回答<html>.<html>：表示HTML文档的开始标签和结束标签，用于告诉浏览器HTML文档的开始和结束位置。<head>.<head>:表示HTML文档的头部开始标签和结束标签，一般用于存放网页的元信息，如网页描述、关键字、作者信息等。头部标签和文件标题标签都成对使用。<body>.<body>：表示HTML文档的主体开始标签和结束标签，网页中要显示的所有内容均嵌套在这一对标签内，也可理解为该标签中的内容在浏览器中是可见的。【示例2-1-1】打开应用程序"记事本"，创建文件并以"index.himl"命名，注意".html”为该文件的扩展名，然后在该文档中输入以下代码，并保存在合理的位置。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评，并讲解【学生】聆听、上机操作、演示<html><head><titlc>我的第一个网页<tile><head><body><p>我的段落<p><body><html>【教师】PPt展示“记事本创建网页的效果”图片（详见教材），并讲解效果：在浏览器中打开网页，网页标题显示"我的第一个网页"，网页内容显示"我的段落"。【提示】标签<tiUe><i加>之间的部分是HTML文件的标题，在后面的章节中会详细讲解。【学生】聆听、记录、理解2.1.5HTML标签的分类【教师】讲解HTML标签的分类根据是否独占一行，可以将HTML标签分为块标签和行标签。块标签：独占一行，可以设置宽度和高度属性，而且元素在页面中遵循从上到下的顺序排列，如段落标签<p><p>=行标签：也称内联标签、行内标签等，不能独自占据一行，设置宽度和高度属性无效，而且元素在页面中遵循从左到右的顺序排列，如超链接标签<a><a>°【课堂互动】十【教师】提问块元素和行元素有哪些区别？）【学生】聆听、思考、回答【示例2-1-2编辑HTML文档<body>标签的内容，代码如下：<p>美文赞赏<p><p>动画欣赏<p><ahref="http:">百度一_F<a><ahref="http:”>新浪<a>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“块元素和行元素的区别”图片（详见教材），并讲解效果：网页中两个段落从上到下各占一行排列，两个超链接从左到右在同一行排列。【学生】聆听、记录、理解2.1.6 HTML注释【教师】讲解HTML注释为增强代码可读性，开发者常使用注释解释HTML文档中的代码。在HTML文档中，注释由“<!，开始，由结束，使用方法如下：这里是HTML文档的注释-><!-注释内容不在浏览器中显示哦->HTML注释一般放在要注释内容的上面，不能显示在浏览器中，仅显示在文档中。【学生】聆听、记录、理解2.1.7 HTML的常用编辑工具【教师】讲解HTML的常用编辑工具1 .记事本在WindoWS操作系统中，记事本是一个小的应用程序，采用一个简单的文本编辑器进行文字信息的记录和存储。同样，它也是一个代码编辑工具，可用于编写网页文件。2 .AdobeDreamwcavcrAdobeDreamweaver是一款集网页制作和网站管理于一身的所见即所得网页代码编辑器。它不仅能够编辑网页，还可以有效地创建、管理网站，同时提供上传网站的便捷方法。3 .SublimeTextSUblimeTeXl是文本编辑器，同时也是先进的、轻量级的网页编辑器，能够编辑网页中涉及的各种类型的文件，如html、css、js、asp、jsp等。该编辑器对于不同的文件类型会提
