html实验设计.docx

《html实验设计.docx》由会员分享，可在线阅读，更多相关《html实验设计.docx（14页珍藏版）》请在冰豆网上搜索。

html实验设计

《HTML网页制作》

【实验目的】

●掌握HTML语法。

●深入理解标记及属性应用。

●能够使用HTML编写简单网页。

【实验环境与设备】

计算机实验室

要求：

机器上安装有IE浏览器和记事本等。

【实验要求】

●重点练习下列例子，所有例子大家可根据需要自行设计改变。

●独立完成实验部分。

以下例子为练习时重点练习对象

练习一网页基本结构【例1-1】

步骤1：

新建一个文件夹用于存放网页，比如在E盘创建一个文件夹myweb，，以后我们把它作为站点根目录。

步骤2：

用记事本编写以上代码，标题和网页主体内容可以适当修改。

步骤3：

保存文件，在保存时文件名命名为1-1.html或1-1.htm（注意：

其中1-1为自己为文件起的名字，可修改，但扩展名必须为html或者htm），另外将“文件类型”改为“所有文件”，如下图。

步骤4：

保存完毕后，在文件夹myweb中可以看到如右所示IE图表，双击即可查看网页效果，如需要继续编辑，则右键选择以记事本打开。

练习二文字网页【例2-1】

练习三基本图文网页【例3-1】

下边，我们要在网页中加入图像重邮1.jpg。

当然首先我们要将图像置入E:

\myweb\images中。

练习四超链接

1、外部链接【例4-1】

练习五表格

1、插入表格【例5-1】

练习六、表单应用【例6-1】

实验一列表制作

一、实验目的：

1．掌握列表创建的基本操作。

2．掌握列表标记的应用。

3．熟悉嵌套列表的代码实现。

二、实验内容

1、在“记事本”中用HTML语言编写符合以下要求的webpage1.htm

标题为“网页制作练习”；

浏览器窗口用户区内有两行内容：

第一行：

“欢迎来到web世界!

”

第二行：

“网上生活从此开始！

”（换行使用
标记）

2、将webpage1.html复制一份取名为webpage2.html,并为webpage2.html这个网页设置背景色或是背景图片，设置页面文字的颜色为白色，在浏览器中浏览这两个文档。

3、对webpage2.htm添加标题，存为webpage3.htm

第一行以四级标题（

）显示：

“欢迎来到web世界！

”

第二行以一级标题（

）显示：

“网上生活从这里开始！

”

最后插入一条水平线。

（

---

）

4、对webpage3.htm进行如下修改，存为webpage4.htm.在文档最后加入一行：

“欢迎访问我做的第一个网页”，当浏览者单击“第一个网页”时，可打开网页webpage1.htm

5、对webpage1.htm进行如下修改：

在文档最后加入一行：

“返回”二字

当浏览者单击“返回”时，可返回网页webpage4.htm

三、实验要求

1、认真预习，写出操作步骤。

2、遵守机房纪录，填好设备档案。

3、认真写实验总结，实验步骤。

四、实验总结

实验过程中问题记录。

 

实验二表格基本制作

一、实验目的

1、掌握HTML代码创建表格的基本步骤；

2、熟练表格属性的设置

3、掌握Dreamweaver创建表格的方法

二、实验内容

1、新建一个文档，然后在文档中创建表格。

如下图：

三、实验要求

1、记录实验实验步骤，回答提出的问题；

2、实验报告要包括实验步骤，遇到的问题，实验总结。

四、实验总结

1、表格创建的HTML标记有哪几个？

2、实验过程中问题记录。

实验三表单的创建

一、实验目的

1、熟悉表单的类型

2、掌握插入表单的方法

3、掌握插入表单对象的方法

二、实验内容：

1.创建一个新用户注册的表单

制作思路：

制作标题表格，插入表单，向表单中添加内容表格。

效果图如下：

三、实验要求

1、认真预习，写出操作步骤。

2、遵守机房纪录，填好设备档案。

3、认真写实验总结，实验步骤。

四、实验总结实验过程问题记录

附录：

HTML各种命令的代码

1、文本标签（命令）

　　　　　　　　　创建预格式化文本

　　　　　　　　　　　创建黑体字

　　　　　　　　　　　创建斜体字

　　　　　　　　　　创建打字机风格的字体

　　　　　　　　创建一个引用,通常是斜体

　　　　　　　　　　加重一个单词（通常是斜体加黑体）

　　　　　　加重一个单词（通常是斜体加黑体）

>　　　　设置字体大小，从1到7

>　　　　设置字体的颜色,使用名字或十六进制值

2、图形（命令）

　　　　　　添加一个图像

>　　排列对齐一个图像:

左中右或上中下

>　　设置围绕一个图像的边框的大小

>　　　　　　　　　设置水平线的大小（高度）

>　　　　　　　　设置水平线的宽度（百分比或绝对像素点）

　　　　　　　　创建一个没有阴影的水平线

3、链接（命令）

　　　　　创建一个超链接

EMAIL">　创建一个自动发送电子邮件的链接

　　　　　创建一个位于文档内部的靶位

　　　　创建一个指向位于文档内部靶位的链接

4、格式排版（命令）

　　　　　　　　　　　　　创建一个新的段落

>　　　　　　　　　将段落按左、中、右对齐

　　　　　　　　　　　　插入一个回车换行符