当前位置:首页 >> 其它课程 >> 网页制作教学案——HTML语言基本应用

网页制作教学案——HTML语言基本应用


吕叔湘中学集体备课教[学]案(高二信息)
教学内容

HTML 语言基本应用
知识目标: 理解并掌握最简单的 HTML 基本结构和语法, 学会结合 frontpage 辅助编写 HTML 代码。 能力目标:培养学生们软件操作的技能、协作学习的能力以及应用所学知识 解决实际问题的能力。 情感目标:引发学生学习制作网页知识的兴趣,发展创新精神,

培养实事求 是,理论与实际相结合的科学态度与科学精神。通过师生、生生互动,增进 增强学生的自主性和合作精神。 (1) 、掌握网页设计制作的基本概念,HTML 超文本标记语言的基本知识。 (2) 、会进行简单的 HTML 代码的编写 (3) 、结合 frontpage 进行网页设计 新授、演示、启发与实验 使用网络教室+相关软件 教 学 过 程

教学目标

教学重点 与难点 教学课型 与方法 电教手段

补充与调整

一、创设情境、导入新课 通过对 HTML 代 (1)、打开 Frontpage,展示“环保”网站的其中一个简单页面, 码的观察,了解代码的 看一看在我们平时用的“普通”和“预览”标签之间还有一个 基本结构。 “HTML”,看看里面的内容,想一想它的作用是什么? 教师讲解:HTML 是一种描述性语言,用来控制浏览器显示网页时 的外观。HTML 是 Hyper Text Markup Language 的缩写,通常译 为“超文本标记语言”,使用 HTML 控制的文件在任何操作系统的 浏览器上读起来都是一样的。 (2)、了解 HTML 的基本结构 HTML 文档通常是由 3 部分组成:起始标记、网页标题和文件主 体。其中文件主体是 HTML 文件的主要部分和核心内容。 案例小结:从本案例可以看到 HTML 文档的基本结构形式为: <html> <head> ? <title>?</title> </head> <body> ? </body> </html> <html> 和 </html> 是 HTML 文档开始和结束的标志, <head> 和 </head> 是 HTML 文档标题信息开始和结束的标志, <body> 和 </body>HTML 文档文体内容开始和结束的标志。

二、任务驱动、自主学习 1、文字 展示“环保”站点的一些网页,引导学生分析文字输 入的方法,得出在 HTML 中文字输入的方法。 任务一:看一看在 HTML 中文字前后的标识符是什 么?然后根据要求输入一段文字。 任务二: 比一比通过格式工具栏修饰后的文字, HTML 发生了什么变化。然后根据要求对 HTML 代码进 行更改。 了解一些常见的文字修饰代码:如:
face="楷体_GB2312" size="6" color=red> <i> 、</i> <b> 、</b>

设计意图: 通过模仿 和对比, 分析代码的 书写要求, 培养学生 的模仿以及创新能 力。

2、图片 观察一下怎样通过一段 HTML 代码进行图片的插入 任务三:先插入一张图片,看看 HTML 代码有什么 变化,然后将图片删除,通过编写 HTML 代码进行图片 的插入。 3、标题和段落 每篇文档都要有自己的标题, 每篇文档的正文都要划 分段落。 案例小结:本案例涉及的内容是 HTML 标题和正文 段落标记,通过本案例的学习,读者应该掌握以下内容: 设计意图: 培养学生 (1)、HTML 标题 知识迁移的能力和 为了突出正文标题的地位和它们之间的层次关系, 动手能力。 HTML 设置了 6 级标题。 用户可使用以下格式定义文档标 题,其中 n 为 1~6,n 越小字号越大,n 越大字号越小。 <Hn>标题文字</Hn> (2)、HTML 段落 HTML 使用 P 标记给网页正文分段,它将使标记后 面的内容在浏览器窗口中另起一段。通过 P 标记中的 Align 属性可对段落的对齐方式进行控制。 Align 属性值通 常有 Center、Right 和 Left,可分别使段落内的文本居中、 居右、居左对齐。用户可使用以下格式定义文档段落。 <P align=”center”>段落内容</P> 使用 P 标记与使用 Br 标记是不同的, Br 标记只能起 到换行的作用,换行仍然是发生在段落内的行为。

4、超链接 网页的诱人之处在于丰富的内容和灵活的链接,在 HTML 代码中是如何书写代码的? 任务四:找出我们曾经的作品“环保“站点,看一看 超链接的代码。 (1)不同页面之间、 (2)网站之间、 (3) 电子邮件、(4)书签,然后根据需要对以上的代码进行 编写 5、网页标题和背景图片 (1) 、 将<head>区的<title>?</title>之间的代码 更改,看一看网站的变化 (2)、将<body>改写成:<body bgcolor=yellow> 任务五:思考如何通过 HTML 代码给网页添加一个背 景图片。

三、课堂小结 (1)、教师引导学生总结本节课学习的内容, (2)、教师展示优秀作品,对存在的问题加以点评

设计意图: 对学 习内容加以总结, 一 方面看看学习了什 么知识, 另一方面看 看还有那些知识没 有掌握, 还需要进一 步学习的。

教学后记


更多相关文档:

网页制作教学案——HTML语言基本应用

网页制作教学案——HTML语言基本应用_其它课程_初中教育_教育专区。吕叔湘中学集体备课教[学]案(高二信息)教学内容 HTML 语言基本应用知识目标: 理解并掌握最简单的...

HTML语言基础教案2

HTML语言基础教案2_其它课程_高中教育_教育专区。HTML 语言基础教学对象:高一学生...网页和有特殊效 果的网页,引导学生对比其中的不 同,激发学生深入学习制作网页效...

网页制作基础知识 教案

网页制作基础知识 教案教学目标: 了解网页的组成元素...在深刻了解概念的基础上把理论转化成实际的应用教学...制作静态网页的工具 用 HTML 语言直接编写(,用 ...

HTML网页设计教案

HTML网页设计教案_工学_高等教育_教育专区。学习HTML语言的详细教案,图文并茂《HTML 网页设计》教案 章节课题 列 1 号共 5 页 第一章 HTML 网页设计入门 2007 ...

网页制作-教学设计

网页制作教学设计阜新市第十八中学 彭勇 一、教材依据 辽宁师范大学出版社 ...难点:1、理解 HTML 标识性语言的结构及应用 HTML 语言编写简单网页; 2、网站...

HTML语言教学设计

HTML 语言教学设计学校 执教 使用教材 教学对象...考证 第五章第二节网页设计技术中的 HTML 基础知识...对所学的标 拓展 签能加以运用 2.思考、实操 3...

FrontPage网页制作教案(18课时)

FrontPage网页制作教案(18课时)_外语学习_教育专区。...学生运用电脑的能力较差 4、部分学生上机行为不够...二、常用的网页制作工具 最初,人们利用 HTML 语言...

《网页设计与制作》教案

网页设计与制作》教案_工学_高等教育_教育专区。...掌握网页语言 html。 知识要点: 网页和网站的基本...应用框架来 进行页面的优化,方便用户的浏览。通过...

网页制作教案电子版

网页制作教案电子版_院校资料_高等教育_教育专区。...了解 HTML 语法的基本构成及几种常用标签。通过具体...Java 是一种 编程语言,通过它可以开发可嵌入 Web ...

网页设计与制作32课时完整教案

教学 了解网页制作和网站建设所需的基本知识,理解HTML语言和CSS样式个属 性以及网页设计工具软件Dreamweaver和Photoshop的使用及应用,掌握网页 重点 制作和网站建设所需...
更多相关标签:
易语言制作网页 | 网页制作语言 | 网页制作用什么语言 | 网页制作的基本步骤 | 易语言制作网页登陆器 | 网页制作基本代码 | 易语言制作网页登陆 | 易语言制作网页登录器 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com