HTML教案第一章HML教案第一章.doc

《HTML》教案 第一章 HTML的基本标签 1. 课程地位和课程目标:[幻灯片2、3] [10分钟] 2 2. 课程知识点讲解： 2 2.1. 本章重点：[幻灯片4] [5分钟] 2 2.2. HTML文件的基本结构：[幻灯片5，6][15分钟] 3 2.3. HTML的基本标记：[幻灯片7到22][50分钟] 3 2.4. HTML的链接：[幻灯片23-28][30分钟] 5 2.5. 滚动MARQUEE标签：[幻灯片29、30][10分钟] 7 3. 本章总结 [10分钟] 7 4. 考核点 7 5. 测试题 7 6. 扩展部分 8 7. 作业 8 课时：3课时 本课程主要目标 能制作界面美观大方、面向企业应用的静态商业网站，不含动态脚本功能。 主要内容包括： 掌握基本标签以及一些常用的属性 表格，链接 表单元素的使用，框架 CSS样式表 使用Dreamweaver制作网页以及布局 本章主要目标 会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 本章重点 本阶段的重点是让学员熟悉HTML的基本结构、HTML中的一些基本标记以及标记的属性，以及HTML中的链接。 本章难点 HTML基本标记及其属性。 课程地位和课程目标:[幻灯片2、3] [10分钟] 在进行本课程之前，需要先介绍本课程在整个课程体系中的地位。 《HTML》课程属于基础课程，主要帮助学员建立网页的基本的概念，并通过学习HTML语言的基本知识，为其他课程的学习奠定扎实的基础。 课程知识点讲解： 本章重点：[幻灯片4] [5分钟] 什么是HTML ？ 超文本标记语言，是英文Hyper Text Markup Language的缩写。 引例讲解： 老师提问： 问题1：请问大家还知道什么网站啊。 答： 什么是超文本？ 超文本主要是以文字的形式表示信息，建立的链接关系主要是文句之间的链接关系。Html文档结构是什么样的？ 用记事本创建网页的步骤 答：1、打开记事本 2、输入HTML代码 3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果 HTML的基本标记：[幻灯片7到22][50分钟] META标签（网页页面中出现乱码）[5分钟] META http-equiv=Content-Type content=text/html; charset=gb2312 讲解gb2312 BODY属性 [5分钟] 文本相关标签 [20分钟] 字体、字号 标题标签H1－H6 FONT标签 特殊符号 行的控制 段落标签P 换行标签BR 演示案例 图像标签[10分钟] 图片的常用格式介绍 老师提问：大家知道的图片常用格式有哪些？ 答：jpg,gif,bmp等等 图像的基本语法： IMG src=images/adv_2.jpg width=300“ height=150“ alt=明星演唱会开幕 图像与文本的对齐方式：IMG align=middle 演示案例 文字布局[10分钟] 内容分隔HR标签 项目列表和编号：有序列表OL，无序列表UL 预格式文本PRE标签 演示案例： HTML的链接：[幻灯片23-28][30分钟] 老师提问： 问题1：在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？ 答：两种方式：相对路径和绝对路径 概念： 相对路径：指定相对于当前文件的文件位置。 绝对路径：指定从根目录到文件的完整路径。 案例讲解： 链接的三种方式： 普通链接，锚链接，邮件链接 锚链接： 链接到本页面，锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 A NAME = “marker”主题名称/A 为达到这种跳转效果，请在 HREF 参数中使用该标记 A HREF= “#marker”主题名称/A 演示案例： 电子邮件链接 要链接电子邮件，可在链接标签中插入“mailto:邮箱地址” 演示案例： 滚动MARQUEE标签：[幻灯片29、30][10分钟] 老师提问： 问题1：如何时网页中的文字或者图像动起来呢？比如水平或者垂直移动。 答：使用MARQUEE标记。 语法：MARQUEE scrolldelay =“100” direction=“up 滚动文字或图