HTML语言与网页制作教案.docVIP

HTML语言与网页制作教案 城步职业中学：刘红兰 教学内容：HTML语言与网页制作 教学目的：1、掌握输入和运行HTML文件的方法HTML基本的结构标记网页特效HTML基本的结构标记网页特效HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。如果我们要在网页中显示“！”一行文字，可以用HTML 语句来描述：html????? title测试页面/title????? body ???????? 城步职业中专计算机16班！????? /body ?? /html 输入并运行以上文件,可以看到如下的内容。 二、 输入和运行HTML文件的方法 ?? 1. 编辑HTML文件所使用的软件我们可以使用任何一种文本编辑软件来输入、修改HTML文件 。简单一点的有Windows中的记事本、写字板、Edit、Word等等。专业一点的有EditPlus等。? 2 .输入HTML文件的方法?? 逐字键入英文和汉字，每键入一行，击一次回车键。? 3 .保存HTML文件的方法?? 不管使用那种软件，都要注意将HTML文件另存为“文本文件”（即TXT文件），而且文件后缀(即扩展名)，应该是html 或 htm 。? 4. 运行HTML文件的方法双击文件名，即可打开浏览器运行文件。四、 常用的HTML标记 ( 一 )? 基本的结构标记开始和结束标记????? html 表示HTML语句开始??????? ..... ????? /html 表示HTML语句结束(2) 头部标记????? head 头部开始?????? ...... ????? /head 头部结束(3) 标题标记????? title 标题开始??????? ..... ????? /title 标题结束(4) 网页主体标记???? body? 网页主体开始????? ...... ???? /body 网页主体结束［例题1］HTML文件的结构 HTML? HEAD TITLE 这是网页的标题，显示在浏览器的标题栏 /TITLE 此行信息叫做头信息（标题和头信息是可有可无的）br /HEAD BODY 在两个 Body 之间的是网页的主体信息br?? 主体信息可以有??????????????????? br?? 图片、??????????????????????????? br?? 文字、??????????????????????????? br?? 表格、??????????????????????????? br?? 动画等等????????????????????????? br/BODY /HTML 运行结果如下： ( 二 )? 常用的标记? 1. 换行标记?? br??? ( 单个使用 )? 2.?水平线标记? hr??? ( 单个使用 ) ? 3. 段落标记 p ...... /p?[ 例题2 ]? 画水平线HTML ? BODY ? hr size=6 width=60% align=center noshade br ? h1 align=centerfont=7 face=楷体_GB2312?COLOR=#cd061f欢迎您光临！/font/h1? hr size=6 width=100% align =center br ? /BODY /HTML 运行结果如下 4. 背景色标记 body BGCOLOR=颜色代码5. 背景图形标记 body BACKGROUND=图形文件名 网页特效例题 ? 先弹出一个欢迎窗口 ? 在网页HTML代码的 BODY 内插入script指令，使之成为 ? BODY onload=window.alert(欢迎您访问本站！) ?使别人在打开网页之前先弹出一个欢迎窗口。 背景色