资源描述
HTML(第14-16节课)
一、教学目的
1、初步了解HTML含义
2、掌握基本标志、格式标志、文本标志、图像标志、表格标志、链接标志、帧标志以及表单标志的应用。
二、教学重难点
1、重点:掌握基本标志、格式标志、文本标志、图像标志、表格标志、链接标志、帧标志以及表单标志的应用
2、难点:帧标志以及表单标志的应用
三、教学方法:讲解法、练习法、演示法、案例法、尝试法
四、课时安排:3课时
五、教学环节
(一) 层的应用……………………………………………………………(8分钟)
1、层的含义、作用及其优缺陷
2、层的插入与修改
3、层的属性设立及其层的实际应用
(二)新课导入………………………………………………………………(5分钟)
1、 作品展示
2、 分析作品中涉及哪些内容
(三)讲解新课
1、 HTML的简介……………………………………………………(6分钟)
Html是英文 HyperText Markup Language 的缩写,中文意思是“超文本标志语言”,用它编写的文献(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文献格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文献。Html语言使用标志对的方法编写文献,既简朴又方便,它通常使用<标志名></标志名>来表达标志的开始和结束(例如<html></html>标志对),因此在Html文档中这样的标志对都必须是成对使用的。
注意:<html></html>必须是成对出现的(示范)
2、基本标志……………………………………………………(30分钟)
<html></html>
创建一个HTML文档
<head></head>
设立文档标题和其它在网页中不显示的信息
<body></body>
设立文档的主体部分
<title></title>
将文档的题目放在浏览器的标题栏中
<script></script>
脚本语言
<body bgcolor="">
设立背景颜色。使用名字或RGB的十六进制值
<body text="">
设立文本颜色。使用名字或RGB的十六进制值
<body link="">
设立链接颜色。使用名 字或RGB的十六进制值
<body vlink="">
设立已使用的链接的颜色。使用名字或RGB的十六进制值
<body alink="">
设立正在被击中的链接的颜色。使用名字或RGB的十六进制值
学生练习
3、格式标志……………………………………………………(30分钟)
<p></p>
创建一个段落
<p align="">
将段落按左、中、右对齐
<br>
插入一个回车换行符
<blockquote></blockquote>
从两边缩进文本
<dl></dl>
定义列表
<dt>
放在每个定义术语词前
<dd>
放在每个定义之前
<ol></ol>
创建一个标有数字的列表
<ul></ul>
创建一个标有圆点的列表
<li>
放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,若在<ul></ul>之间则每个列表项加上一个圆点
<div align=""></div>
用来排版大块HTML段落,也用于格式化表
学生练习
4、文本标志……………………………………………………(30分钟)
<pre></pre>
预先格式化文本
<h1></h1>
最大的标题
<h6></h6>
最小的标题
<b></b>
黑体字
<i></i>
斜体字
<tt></tt>
打字机风格的字体
<cite></cite>
引用,通常是斜体
<em></em>
强调文本(通常是斜体加黑体)
<strong></strong>
加重文本(通常是斜体加黑体)
<font size=""></font>
设立字体大小,从1到7
<font color=""></font>
设立字体的颜色,使用名字或RGB的十六进制值
学生练习
5、图象标志……………………………………………………(20分钟)
<img src="name">
在HTML文档中嵌入一个图像
<img src="name" align="">
排列对齐一个图像:左、中、右或上、中、下
<img src="name" border="">
设立图像的边框的大小
<hr>
加入一条水平线
<hr size="">
设立水平线的厚度
<hr width="">
设立水平线的宽度。可以是比例或绝对像素点
<hr noshade>
没有阴影的水平线
学生练习
6、表格标志……………………………………………………(30分钟)
<table></table>
创建一个表格
<tr></tr>
表格中的每一行
<td></td>
表格中一行中的每一个格子
<th></th>
设立表格头:通常是黑体居中文字
<table border="">
设立边框的宽度
<table cellspacing="">
设立表格格子之间空间的大小
<table cellpadding="">
设立表格格子边框与其内部内容之间空间的大小
<table width="">
设立表格的宽度。用绝对像素值或总宽度的比例
<tr align="">
设立表格格子的水平对齐方式(左中右)
<tr valign="">
设立表格格子的垂直对齐方式(上中下)
<td colspan="">
设立一个表格格子跨占的列数(缺省值为1)
<td rowspan="">
设立一个表格格子跨占的行数(缺省值为1)
<td nowrap>
严禁表格格子内的内容自动断行
学生练习
7、链接标志……………………………………………………(15分钟)
<a href="URL"></a>
创建超文本链接
<a href="mailto:EMAIL">
</a>
创建自动发送电子邮件的链接
<a name="name"></a>
创建位于文档内部的书签
<a href="#name"></a>
创建指向位于文档内部书签的链接
学生练习
8、帧标志…………………………………………………………(30分钟)
<frameset></frameset>
放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中
<frameset rows="value,value">
定义一个帧内的行数,可以使用绝对像素值或高度的比例
<frameset cols="value,value">
定义一个帧内的列数,可以使用绝对像素值或宽度的比例
<frame>
定义一个帧内的单一窗或窗区域
<noframes></noframes>
定义在不支持帧的浏览器中显示什么提醒
<frame src="URL">
规定帧内显示的HTML文档
<frame name="name">
命名帧或区域以便别的帧可以指向它
<frame marginwidth="">
定义帧左右边沿的空白大小,必须大于等于1
<frame marginheight="">
定义帧上下边沿的空白大小,必须大于等于1
<frame scrolling="">
设立帧是否有滚动栏,其值可以是"yes","no" 或"auto"
<frame noresize>
严禁用户调整一个帧的大小
学生练习
9、表单标志…………………………………………………………(30分钟)
<form></form>
创建表单
<select multiple name="name" size=""></select>
创建滚动菜单,size设立在需要滚动前可以看到的表单项数目
<option>
设立每个表单项的内容
<select name="name"></select>
创建下拉菜单
<option>
设立每个菜单项的内容
<textarea name="name" cols=40 rows=8></textarea>
创建一个文本框区域,列的数目设立宽度,行的数目设立高度
<input type="checkbox" name="name">
创建一个复选框,文字在标签后面
<input type="radio" name="name" value="">
创建一个单选框,文字在标志后面
<input type=text name="foo" size=20>
创建一个单行文本输入区域,size设立以字符串的宽度
<input type="submit" value="name">
创建提交(submit)按钮
<input type="image" border=0 name="name" src="name.gif">
创建一个使用图象的提交(submit)按钮
<input type="reset">
创建重置(reset)按钮
学生练习
(四)小结……………………………………………………………………(5分钟)
掌握基本标志、格式标志、文本标志、图像标志、表格标志、链接标志、帧标志以及表单标志的应用
展开阅读全文