一、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-1
3、实例操作步骤
(1)在HTML的编辑页面输入源码。
(2)将此HTML代码以.html或者.htm作为扩展名,保存到相应文
件夹下,例如:保存为例1-2.html在d盘根目录下;
(3)将背景图片tp.jpg放到相对路径为images的文件夹下,如果图
片比页面小,图片会自动重复;
(4)用网页浏览器打开此HTML页面,即可以看到此页的页面效果。
4、实例参考源码
源码1.1
5、实例思考与扩展
(1)页面的汉字“我的第一个HTML页面”在网页中居左或居右怎么设置?
(2)背景如果不用图片,用一种颜色,应怎样修改源码?
二、实例名称:文字的排版
1、实例目标及知识点
综合练习HTML网页的设计。注意代码中对
、
、
、等标签的运用,熟悉并掌握文字排版所涉及的所有标签。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是上标
好好学习,天天向上。这句话缩进表示引用
call getOrders
用code显示计算机代码,code里显示的字符是等宽字符。