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