当前位置:首页 >> 其它课程 >> 网页制作教学案——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)、教师展示优秀作品,对存在的问题加以点评

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

教学后记


更多相关文档:

网页设计与制作教案_图文

并进行疑难解答 -2- 网页设计与制作课程教案 [章节名称]:html 基础应用 1 ...[重点] Html 语言设置网页的背景音乐,图片,字体 [难点] Html 语言设置网页的...

网页制作教案

07 网络计算机《网页制作教案 授课过程: 1.5 网站设计的编程语言 1.HTML 2....链接, 实现从一个网页跳转到另一个网页, 因此 HTML 在 Web 中被广泛 应用。...

用HTML语言制作简单的网页_图文

HTML语言制作简单的网页_计算机软件及应用_IT/计算机_专业资料。电子科技大学 ...1页 免费 HTML语言网页制作教案 4页 免费 喜欢此文档的还喜欢 网页制作与...

HTML表格制作说课教案

HTML表格制作说课教案_IT/计算机_专业资料。用HTML语言制作网页中的表格Web 程序设计 --第二章 HTML 语言 (§ 2.4 表格的制作) 说课教案 课教 题:§ 2.4 表格...

网页制作之HTML标记语言篇

网页制作HTML标记语言篇_计算机软件及应用_IT/计算机_专业资料。网页初学者的必备教程第八章 HTML 标记语言 李思章老师 QQ:413142184 通过本章的学习,读者可以理解...

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

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

网页及其制作工具——5.2超文本标记语言HTML及ASP网页

网页及其制作工具——5.2超文本标记语言HTML及ASP网页...教育实习课堂试教教案 (注:须于上课前三日写好并...ActiveX 技术以提供动态网站的基于 Web 的分布式应用...

网页制作-教学设计

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

HTML教案

教学过程及内容 新教 C501 备注 利用网页制作引导学生 导入新课 新课讲解 第 1...通过本次课学生基本了解了 html 语言基本标签及框 架,并能应用于实际操作中...

2014高中信息技术 HTML语言教案 新人教版

2014 高中信息技术 HTML 语言教案 新人教版一、简介 HTM L 是 HyperText Markup Language 的缩写,是制作网页基础。虽然现在所见即所 得的网页编辑器很多,不需要...
更多相关标签:
易语言制作网页 | 网页制作语言 | 网页制作的基本步骤 | 网页制作用什么语言 | 网页制作基本代码 | 易语言制作网页登陆器 | 网页制作常用语言 | 易语言制作网页登录器 |
网站地图

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