HTML基础实例教程.doc

南雄市中等职业学校计算机学科校本教材 一、HTML部分一、实例名称：认识HTML的基本标签和属性1、 实例目标及知识点通过制作简单的HTML页面，对HTML的标签和属性有个宏观的认识，激发学生对HTML语言的兴趣。运用了body的属性：text、background、alink 、 leftmargin、 topmargin熟悉这些属性的用途和设置方法。2、 实例功能说明做出符合以下要求的网页：(1) 将网页标题设置为：欢迎来到我的个人网页；(2) 将网页背景设置为指定图片：(3) 将网页的文本颜色设置为：#660033(4) 将网页的左边距设置为：10px ,上边距设置为：400px ;(5) 将网页以文件名为：例1-2.html保存。 实验结果参照页面美化效果，如下图：图1-13、实例操作步骤(1) 在HTML的编辑页面输入源码。(2) 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例1-2.html在d盘根目录下；(3) 将背景图片tp.jpg放到相对路径为images的文件夹下，如果图片比页面小，图片会自动重复；(4) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、实例参考源码源码1.1 欢迎来到我的个人网页我的第一个HTML页面 5、实例思考与扩展 （1）页面的汉字“我的第一个HTML页面”在网页中居左或居右怎么设置？（2）背景如果不用图片，用一种颜色，应怎样修改源码？二、实例名称：文字的排版1、 实例目标及知识点综合练习HTML网页的设计。注意代码中对、等标签的运用，熟悉并掌握文字排版所涉及的所有标签。2、实例功能说明 做出符合要求的静态HTML网页，实验结果参照如下图：图1-23、实例操作步骤(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-33、实例操作步骤(1) 在HTML的编辑页面输入代码，注意此段代码中对、等标签的运用。(2) 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-2.html在d盘根目录下；(3) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、实例参考源码源码1.3字体设置标题一具体内容一/具体内容二/芙蓉姐姐这个词当中划线表示删除。想唱就唱这个词下划线插入。X2其中的2是下标X2其中的2是上标好好学习，天天向上。这句话缩进表示引用call getOrders用code显示计算机代码，code里显示的字符是等宽字符。 5、实例思考与扩展 （1）页面的背景设置成图片应该如何做？ （2）还有哪些标签可以实现文字美化的功能，总结并综合运用它们在网页设计中。四、实例名称：HTML列表(list)实例1、 实例目标及知识点分别实现嵌套的列表和用多种类型排序的列表。利用文字美化的有关列表的标签，例如：、等标签。练习HTML网页的设计。熟悉并掌握文字美化列表所涉及的标签。2、实例功能说明 做出符合要求的静态HTML网页，实验结果参照如下图：图1-43、实例操作步骤(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-53、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-4.html在d盘根目录下；(2) 将此网页所要插入的图片CAI.jpg放到相对路径为images的文件夹下；(3) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、实例参考源码源码1.5插入图像CAI是什么？CAI是计算机辅助教学(Computer Assisted Instructing)的英文名称首字母缩写/其含义就是把自己的教学想法，包括教学目的，内容，实现教学活动的策略，教学的顺序，控制方法等，用计算机程序进行描述，并存入计算机，经过调试成为可以运行的程序由于计算机有着存储信息，处理信息，工作自动化等功能因此，CAI课件可以将大容量的信息非顺序地呈现，可以选择学习内容和掌握学习进度，实现因人施教的原则和及时反馈信息原则等特点集于一身，并因之区别于其他媒体教学 5、实例思考与扩展 （1）页面的背景设置成图片应该如何做？六、实例名称：几种超链接的综合应用1、 实例目标及知识点综合运用本章所讲到的关于链接的知识，进一步熟悉多种关于链接的概念。能在今后的html页面开发中熟练使用链接。涉及到的标签包括：2、 实例功能说明在同一个html页面中，做多个链接，分别符合以下要求：（1）用相对路径和绝对路径两种方法建立超链接网页；（2）运用超链接的title属性：（3）将图片作为一个超链接；（4）在新窗口打开一个链接;（5）链接到一个邮箱地址。 实验结果参照如下图：图1-6注意此实验中关于设定title属性的结果，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。点击写信给新浪的链接后，结果如图：图1-73、实例操作步骤(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的内容：写信给新浪注:空格请用%20表示。 5、实例思考与扩展 （1）对相对路径和绝对路径有清晰的认识，举例说明什么是相对路径，什么是绝对路径。（2）思考超链接的字体在点击前，点击后的颜色如何设置？七、实例名称：在HTML文件里跳转1、 实例目标及知识点在同一个html页面中，使用name属性，可以跳转到此页面的指定部位。掌握关于在同一个HTML页面里实现跳转的超链接处理方法2、实例功能说明 实验结果如下图：图1-8 点击参见第六章链接后，网页跳转的页面如下图所示： 图1-93、实例操作步骤(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-03、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例4-1.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码源码1.8运用border属性对表格进行修饰缺省情况下，表格没有边界。 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-13、实例操作步骤(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）设置表格为3行3列；（2）表格宽度为：300像素；高度为：100像素；（3）设置表格的三个表头：表头一，表头二，表头三；表头一跨三列，顶端对齐；（4）设置表格边距为：0；间距为：0;（5）设置表格边框为：红色。实验结果如下图：图2-23、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例4-4.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，点击相应链接，即可以看到此页的页面效果。4、实例参考源码源码2.1表格 表头一 表头二 表头三         5、实例思考与扩展（1）如何用表格对网页布局？可以表格中嵌套表格吗？什么情况需要这么做？这种布局格式有什么优缺点呢？十一、实例名称：嵌套分割框架1、 实例目标及知识点熟练掌握框架的基本结构和分割方式，为以后网页的制作打下良好的基础。掌握框架的标签、等2、 实例功能说明运用本章所讲到的框架的知识按照以下要求制作html页面：（1）窗口水平方向上分割成两部分，分别占：30%和70%；（2）右边框架垂直方向上分别占：20%和80%；（3）左边框架的内容是嵌入的，是left.htm网页的内容；（4）在left.htm中分别插入图片1.jpg、2.jpg和3.jpg，并且要图片居中显示;（5）右边上部分框架内容嵌入的是right1.htm网页的内容；（6）right1.htm网页中“阳光总在风雨后”的文字大小为“7号”，颜色为“蓝色”，字体为“华文新魏”，加粗显示；（7）右边下部分框架内容嵌入的是right2.htm的内容；（8）right2.htm网页中文字大小为“4号”，颜色为“蓝色”，字体为“楷体”。实验结果如下图：图2-33、实例操作步骤(1) 在HTML的编辑页面输入代码,将此HTML代码以left.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(2) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以right1.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(3) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以right2.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(4) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以“例5-1.htm”命名，保存到相应文件夹下，例如：保存在d盘根目录下；(5) 用网页浏览器打开“例5-1.htm”页面，即可以看到此页的页面效果。4、实例参考源码源码2.2.1 left.htmlsmile 源码2.2.2 right1.html阳光总在风雨后 阳光总在风雨后 源码2.2.3 right2.html歌词人生路上甜苦和喜忧愿意与你分担所有难免曾经跌到和等候要勇敢的抬头谁愿藏躲在避风的港口宁有波涛汹涌的自由愿是你心中灯塔的守候在迷雾中让你看透阳光总在风雨后乌云上有晴空珍惜所有的感动每一份希望在你手中阳光总在风雨后请相信有彩虹风风雨雨都接受我一直会在你的左右 源码2.2.4 例5-1.htm嵌套框架 5、实例思考与扩展 （1）对比用框架对网页布局，和用表格对网页布局有什么不同。 （2）可以实现点击一个框架里的链接，对另一个框架里的页面影响吗？怎么实现？十二、实例名称：用框架导航1、 实例目标及知识点熟练掌握框架的基本结构和分割方式，能够运用框架实现导航的功能。2、 实例功能说明运用框架的知识按照以下要求制作含有框架的html页面：（1）窗口水平方向上分割成两部分，分别占：20%和80%；（2）上部分框架的内容是嵌入的是top.htm网页的内容；（3）top.htm网页中“精彩呈现”文字的大小为7，字体为“华文行楷”，颜色为“绿色”；（4）下部分框架在垂直方向分割成两部分，分别占30%和70%，其中右边部分框架的名称命名为right;（5）下部分框架的左边部分嵌入的是left.htm网页的内容；（6）left.htm网页中文字的字体为“华文新魏”，大小为5，颜色为“绿色”；并且这些文字均要分别进行超链接；其中“走进科学”超级链接到right2-1.htm，“音乐赏析”超级链接到right2-2.htm,它们链接后的内容均显示在下部分框架的右边部分框架中。（7）right2-1.htm和right2-2.htm网页中标题文字居中显示，字体为“楷体”，大小为，颜色为“绿色”，加粗显示；正文字体也为“楷体”，大小为，颜色为“绿色”；实验结果如下图：图2-4点击框架左边的链接可以使框架右边变换相应内容。3、实例操作步骤(1) 在HTML的编辑页面输入代码,将此HTML代码以top.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(2) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以left_5-2.htm命名，保存到相应文件夹下，例如：保存在d盘根目录下；(3) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以right_5-2-1.html命名，保存到相应文件夹下，例如：保存在d盘根目录下；(4) 依照文件right_5-2-1.html的标准，做多个文件分别为文件left_5-2.html文件中目录所对应的链接。(5) 新建HTML页，在HTML的编辑页面输入代码,将此HTML代码以“例5-2.html”命名，保存到相应文件夹下，例如：保存在d盘根目录下；(6) 用网页浏览器打开“例5-2.html”页面，即可以看到此页的页面效果。4、实例参考源码源码2.3.1 top.htm精彩呈现 精彩呈现 源码2.3.2 left_5-2.htm目录 走进科学 音乐赏析 电脑天地 健康指南 体育世界 心情有约 源码2.3.3 right_5-2-1.html走进科学走进科学主持人：现在我们看到的，这是一条体长超过四米的一条网蟒，它是所有蟒类当中体型最大的，在野外甚至能与鳄鱼、鹿等大动物搏斗，并且把它们顺利给吞下去变成自己的腹中大餐。但是，我们看如此凶猛的一个动物，过一会，一场灭顶之灾就在等着它了.宁环是武汉动物园的蟒蛇饲养员，这天她像往常一样打开熟悉的两栖馆蟒蛇展厅的大门，开始一天的工作。她忽然