HTML基础实例教程.docx

、
等标签的运用，熟悉并掌握文字排版所涉及的所有标签。
2、实例功能说明
做出符合要求的静态HTML网页，实验结果参照如下图：
图1-2
3、实例操作步骤
（1）在HTML的编辑页面输入代码。
（2）将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例2-1.html在d盘根目录下；
（3）用网页浏览器打开此HTML页面，即可以看到此页的页面效果。
3、实例参考源码
源码1.2
要
在一段
里
换行
请使用
br这个Tag。
这是
预设（preformatted）文本.
在pre这个tag里的文本保留
空格和
分行。
用hr这个Tag可以在HTML文件里加一条横线。
用hr这个Tag可以在HTML文件里加一条横线。
--这是代码注释-->
代码注释是不会显示在网页里的。
北京 <<网页设计基础>> 路1000号
& 老师 ©
邮编:
100000
5、实例思考与扩展
（1）页面的背景设置成图片应该如何做？
（2）字体的大小、颜色等属性如何更改？
 
三、实例名称：
文字的美化
1、实例目标及知识点
利用文字美化所讲到的标签，综合练习HTML网页的设计。
熟悉并掌握文字美化所涉及的标签。
如：
、、、、、等。
2、实例功能说明
按照以下要求完成HTML页面效果的制作。
（1）将网页标题设置为：
“字体设置”。
（2）将文字“标题一”样式设置为：
标题一，居中对齐。
（3）将文字“具体内容一”设置为：
隶书，18px，颜色为红色。
（4）将文字“具体内容二”设置为：
16px，粗体，斜体。
（5）利用字体美化的标签实现删除、下划线、上标、下标等功能。
实验结果参照如下图：
图1-3
3、实例操作步骤
（1）在HTML的编辑页面输入代码，注意此段代码中对、、、、、等标签的运用。
（2）将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例2-2.html在d盘根目录下；
（3）用网页浏览器打开此HTML页面，即可以看到此页的页面效果。
4、实例参考源码
源码1.3
标题一
具体内容一
具体内容二
芙蓉姐姐这个词当中划线表示删除。
想唱就唱这个词下划线插入。
X2其中的2是下标
X2其中的2是上标
好好学习，天天向上。
这句话缩进表示引用
callgetOrders
用code显示计算机代码，code里显示的字符是等宽字符。
5、实例思考与扩展
（1）页面的背景设置成图片应该如何做？
（2）还有哪些标签可以实现文字美化的功能，总结并综合运用它们在网页设计中。
四、实例名称：
HTML列表（list）实例
1、实例目标及知识点
分别实现嵌套的列表和用多种类型排序的列表。
利用文字美化的有关列表的标签，例如：
、
、
等标签。
练习HTML网页的设计。
熟悉并掌握文字美化列表所涉及的标签。
2、实例功能说明
做出符合要求的静态HTML网页，实验结果参照如下图：
图1-4
3、实例操作步骤
（1）在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例2-3.html在d盘根目录下；
（2）用网页浏览器打开此HTML页面，即可以看到此页的页面效果。
4、实例参考源码
源码1.4
嵌套2层的列表：
动物
两栖动物
哺乳动物
人
猩猩
鱼类
植物
排序列表，不设Type属性：
网页课程
网页代码
魔兽世界
排序列表，Type属性设为A：
网页课程
网页代码
魔兽世界
排序列表，Type属性设为a：
网页课程
网页代码
魔兽世界
排序列表，Type属性设为I：
网页课程
网页代码
魔兽世界
排序列表，Type属性设为i：
网页课程
网页代码
魔兽世界
5、实例思考与扩展
（1）思考列表的标签在什么时候需要用到？
如果改成抽屉下拉的话需要用到什么标签？
要怎么做？
五、实例名称：
插入图像
1、实例目标及知识点
综合练习HTML网页的设计。
熟悉并掌握插入图片所涉及的标签，例如：
src、alt、border、align等。
2、实例功能说明
按照以下要求完成HTML页面效果的制作。
（1）将网页标题设置为：
“CAI是什么？
”。
（2）将网页标题格式设置为：
下划线。
（3）将网页第一段文字格式设置为：
斜体，颜色为红色。
（4）将网页中的图片设置为：
左对齐。
（5）将网页最后一段不要排在图片右边，排在图片的下面。
实验结果参照如下图：
图1-5
3、实例操作步骤
（1）在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例2-4.html在d盘根目录下；
（2）将此网页所要插入的图片CAI.jpg放到相对路径为images的文件夹下；
（3）用网页浏览器打开此HTML页面，即可以看到此页的页面效果。
4、实例参考源码
源码1.5
CAI是什么？
CAI是＂计算机辅助教学＂（ComputerAssistedInstructing）的英文名称首字母缩写
其含义就是把自己的教学想法，包括教学目的，内容，实现教学活动的策略，教学的顺序，控制方法等，用计算机程序进行描述，并存入计算机，经过调试成为可以运行的程序．由于计算机有着存储信息，处理信息，工作自动化等功能．
因此，CAI课件可以将大容量的信息非顺序地呈现，可以选择学习内容和掌握学习进度，实现因人施教的原则和及时反馈信息原则等特点集于一身，并因之区别于其他媒体教学．
5、实例思考与扩展
（1）页面的背景设置成图片应该如何做？
六、实例名称：
几种超链接的综合应用
1、实例目标及知识点
综合运用本章所讲到的关于链接的知识，进一步熟悉多种关于链接的概念。
能在今后的html页面开发中熟练使用链接。
涉及到的标签包括：
2、实例功能说明
在同一个html页面中，做多个链接，分别符合以下要求：
（1）用相对路径和绝对路径两种方法建立超链接网页；
（2）运用超链接的title属性：
（3）将图片作为一个超链接；
（4）在新窗口打开一个链接;
（5）链接到一个邮箱地址。
实验结果参照如下图：
图1-6
注意此实验中关于设定title属性的结果，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
点击写信给新浪的链接后，结果如图：
图1-7
3、实例操作步骤
（1）在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例3-1.html在d盘根目录下；
（2）将图片smile.jpg放到相对路径为images的文件夹下，将html0301.html文件放到相对路径为html的文件夹下；
（3）用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。
4、实例参考源码
源码1.6
这是一个相对路径的链接
网页教程与代码的中文站点">这是一个绝对路径的链接
你可以将一张图片作为一个链接，点击这个图片。
这个邮箱地址链接写了to,cc,bcc,subject,body的内容：
*************?
cc=******************.com&bcc=**************&subject=I%20like%20your%20site&body=真是个好站点！
">写信给新浪
注:
空格请用%20表示。
5、实例思考与扩展
（1）对相对路径和绝对路径有清晰的认识，举例说明什么是相对路径，什么是绝对路径。
（2）思考超链接的字体在点击前，点击后的颜色如何设置？
七、实例名称：
在HTML文件里跳转
1、实例目标及知识点
在同一个html页面中，使用name属性，可以跳转到此页面的指定部位。
掌握关于在同一个HTML页面里实现跳转的超链接处理方法
2、实例功能说明
实验结果如下图：
图1-8
点击参见第六章链接后，网页跳转的页面如下图所示：
图1-9
3、实例操作步骤
（1）在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例3-2.html在d盘根目录下；
（2）用网页浏览器打开此HTML页面，点击链接，即可以看到此页的页面效果。
4、实例参考源码
源码1.7
参见第六章
第1章
这是网页设计基础-网页教程与代码的中文站点。
第2章
这是网页设计基础-网页教程与代码的中文站点。
第3章
这是网页设计基础-网页教程与代码的中文站点。
第4章
这是网页设计基础-网页教程与代码的中文站点。
第5章
这是网页设计基础-网页教程与代码的中文站点。
第6章
这是网页设计基础-网页教程与代码的中文站点。
第7章
这是网页设计基础-网页教程与代码的中文站点。
第8章
这是网页设计基础-网页教程与代码的中文站点。
第9章
这是网页设计基础-网页教程与代码的中文站点。
第10章
这是网页设计基础-网页教程与代码的中文站点。
第11章
这是网页设计基础-网页教程与代码的中文站点。
第12章
这是网页设计基础-网页教程与代码的中文站点。
第13章
这是网页设计基础-网页教程与代码的中文站点。
第14章
这是网页设计基础-网页教程与代码的中文站点。
第15章
这是网页设计基础-网页教程与代码的中文站点。
第16章
这是网页设计基础-网页教程与代码的中文站点。
第17章
这是网页设计基础-网页教程与代码的中文站点。
5、实例思考与扩展
（1）总结在同一页的跳转链接和在不同页的跳转链接的区别。
八、实例名称：
运用border属性对表格进行修饰
1、实例目标及知识点
在同一个html页面中，做多个表格，分别把表格的边框设为0、1、15，
认识border属性对表格的影响，达到能够熟练运用border属性对表格进行修饰。
2、实例功能说明
实验结果如下图：
图2-0
3、实例操作步骤
（1）在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例4-1.html在d盘根目录下；
（2）用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。
4、实例参考源码
源码1.8
缺省情况下，表格没有边界。
100
200
300
400
500
600
表格Border设为0，也不显示边界：
100
200
300
400
500
600
表格的边界值设为1：
第一
行
第二
行
表格的边界值设为15，边界更粗：
第一
行
第二
行
5、实例思考与扩展
（1）对表格进行修饰，做出不同边框的表格效果。
（2）边框可否设成不同的美化效果？
如果可以，如何设置？
九、实例名称：
运用多种属性分别对多个表格进行修饰
1、实例目标及知识点
学会设置表格的标题和表头，认识colpsan属性和rowspan属性对表格的影响，达到能够熟练运用这些属性对表格进行修饰。
2、实例功能说明
在同一个html页面中，做多个表格，分别实现以下要求：
（1）做两个有标题的表格，要求这两个表格的表头分别是水平方向和垂直方向；
（2）设置包含多列的单元格：
（3）设置包含多行的单元格；
实验结果如下图：
图2-1
3、实例操作步骤
（1）在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：
保存为例4-3.html在d盘根目录下；
（2）用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。
4、实例参考源码
源码2.0
联系表
姓名
 
性别
 
出生年月
 
住址
 
籍贯
 
专业
 
联系电话
 
5、实例思考与扩展
（1）思考如何才能对表格的不同格设置颜色或者图片背景？
（2）举例说明在网页设计的何种情况需要用到此种效果。
 
十、实例名称：
运用多种属性对表格进行修饰
1、实例目标及知识点
达到能够灵活熟练运用多种属性对表格进行修饰。
例如：
width、height、border、cellpadding、cellspacing等
2、实例功能说明
在同一个html页面中，做一个表格，分别实现以下要求：
（1）设置表