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