《HTML基础`实例教学课件》由会员分享，可在线阅读，更多相关《HTML基础`实例教学课件（93页珍藏版）》请在金锄头文库上搜索。
1、-_一、HTML部分一、实例名称：认识HTML的基本标签和属性1、 实例目标及知识点通过制作简单的HTML页面，对HTML的标签和属性有个宏观的认识，激发学生对HTML语言的兴趣。运用了body的属性：text、background、alink 、 leftmargin、 topmargin熟悉这些属性的用途和设置方法。2、 实例功能说明做出符合以下要求的网页：(1) 将网页标题设置为：欢迎来到我的个人网页；(2) 将网页背景设置为指定图片：(3) 将网页的文本颜色设置为：#660033(4) 将网页的左边距设置为：10px ,上边距设置为：400px ;(5) 将网页以文件名为：例1-2.h
2、tml保存。 实验结果参照页面美化效果，如下图：图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）背景如果不用图片，用一种颜色
3、，应怎样修改源码？二、实例名称：文字的排版1、 实例目标及知识点综合练习HTML网页的设计。注意代码中对、等标签的运用，熟悉并掌握文字排版所涉及的所有标签。2、实例功能说明 做出符合要求的静态HTML网页，实验结果参照如下图：图1-23、实例操作步骤(1) 在HTML的编辑页面输入代码。(2) 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-1.html在d盘根目录下；(3) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。3、 实例参考源码源码1.2 欢迎来到我的个人网页要在一段里换行请使用br这个Tag。这是预设(preformatted
4、)文本.在pre这个tag里的文本 保留空格和分行。用hr这个Tag可以在HTML文件里加一条横线。用hr这个Tag可以在HTML文件里加一条横线。代码注释是不会显示在网页里的。北京 <<网页设计基础>> 路1000号& 老师 ©邮编:100000 5、实例思考与扩展 （1）页面的背景设置成图片应该如何做？（2）字体的大小、颜色等属性如何更改？三、实例名称：文字的美化1、 实例目标及知识点利用文字美化所讲到的标签，综合练习HTML网页的设计。熟悉并掌握文字美化所涉及的标签。如：、等。2、 实例功能说明按照以下要求
5、完成HTML页面效果的制作。(1) 将网页标题设置为：“字体设置”。(2) 将文字“标题一”样式设置为：标题一，居中对齐。(3) 将文字“具体内容一”设置为：隶书，18px，颜色为红色。(4) 将文字“具体内容二”设置为：16px，粗体，斜体。(5) 利用字体美化的标签实现删除、下划线、上标、下标等功能。 实验结果参照如下图：图1-33、实例操作步骤(1) 在HTML的编辑页面输入代码，注意此段代码中对、等标签的运用。(2) 将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-2.html在d盘根目录下；(3) 用网页浏览器打开此HTML页面，即可以看到此
6、页的页面效果。4、实例参考源码源码1.3字体设置标题一具体内容一/具体内容二/芙蓉姐姐这个词当中划线表示删除。想唱就唱这个词下划线插入。X2其中的2是下标X2其中的2是上标好好学习，天天向上。这句话缩进表示引用call getOrders用code显示计算机代码，code里显示的字符是等宽字符。 5、实例思考与扩展 （1）页面的背景设置成图片应该如何做？ （2）还有哪些标签可以实现文字美化的功能，总结并综合运用它们在网页设计中。四、实例名称：HTML列表(list)实例1、 实例目标及知识点分别实现嵌套的列表和用多种类型排序的列表。利用文字美化的有关列表的标签，例如：、等标签。练习HTML网页
7、的设计。熟悉并掌握文字美化列表所涉及的标签。2、实例功能说明 做出符合要求的静态HTML网页，实验结果参照如下图：图1-43、实例操作步骤(1) 在HTML的编辑页面输入代码，将此HTML代码以.html或者.htm作为扩展名，保存到相应文件夹下，例如：保存为例2-3.html在d盘根目录下；(2) 用网页浏览器打开此HTML页面，即可以看到此页的页面效果。4、 实例参考源码源码1.4字体设置嵌套2层的列表： 动物 两栖动物 哺乳动物 人 猩猩 鱼类 植物排序列表，不设Type属性： 网页课程 网页代码 魔兽世界 排序列表，Type属性设为A： 网页课程 网页代码 魔兽世界 排序列表，Type
8、属性设为a： 网页课程 网页代码 魔兽世界 排序列表，Type属性设为I： 网页课程 网页代码 魔兽世界 排序列表，Type属性设为i： 网页课程 网页代码 魔兽世界 5、实例思考与扩展（1）思考列表的标签在什么时候需要用到？如果改成抽屉下拉的话需要用到什么标签？要怎么做？五、实例名称：插入图像1、 实例目标及知识点综合练习HTML网页的设计。熟悉并掌握插入图片所涉及的标签，例如：src、 alt 、 border、align等。2、 实例功能说明按照以下要求完成HTML页面效果的制作。（1）将网页标题设置为：“CAI是什么？”。（2）将网页标题格式设置为：下划线。（3）将网页第一段文字格式设
9、置为：斜体，颜色为红色。（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)的英文名称首字母缩写/其含义就是把自己的教学想法，包括教学目的，内容，实现教学活动的策略，教学的顺序，控制方法等，用计算机程序进行描述，并存入计算机，经过调试成为可以运行的程序由于计算机有着存储信息，处
