用HTML语言制作简单的网页

格式：doc
大小：679.00 KB
文档页数：9

下载文档原格式

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

电子科技大学电子工程学院
标准实验报告
（实验）课程名称用HTML语言制作简单的网页
电子科技大学教务处制表
电子科技大学
实验报告
学生姓名：万羽学号：2902103035 指导教师：伍瑞钦
一、实验室名称：科B457
二、实验项目名称：用HTML语言制作简单的网页
三、实验原理：
1.网页
（1）网页就是在浏览器上看到的一页，网页也称为Web页。

（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。

（3）超链接是网页中的特殊标记。

它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。

这些资源可以位于自己的计算机上，也可以位于其他计算机上。

用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。

在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。

超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。

2.HTML语言
（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。

（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microsoft Word等。

保存时要将脚本保存成纯文本格式，扩展名必须是.htm。

（3）HTML脚本的基本结构。

HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。

头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。

3.FrontPage
FrontPage是一种简单易学的Web管理和网页制作的软件。

FrontPage2000的窗口，如图1.1所示。

在窗口工作区的左下方是网页视图模式的3个状态按钮：“普通”、“HTML”和“预览”。

网页视图模式的默认状态是“普通”，用于以所见即所得的方式编辑网页。

“HTML”网页视图模式用于以HTML语言的方式编辑网页。

制作网页过程中，想查看网页的制作效果，切换到“预览”网页视图模式即可。

切换网页视图使用鼠标单击相应的状态按钮即可。

图1.1 FrontPage 2000的窗口
四、实验目的：
1.简单了解HTML语言。

2.认识网页以及网页的结构。

3.掌握用HTML语言制作简单网页的方法。

五、实验内容：
用HTML语言制作简单的网页。

六、实验器材（设备、元器件）：
1.实验设备
计算机
2.实验软件
IE浏览器、网页制作软件记事本(或者FrontPage2000，Word 2003/2007)。

七、实验步骤：
给每个学生分配一台计算机。

独立完成简单网页制作的实验内容，并写出实验报告。

具体步骤如下。

1.制作第一张网页
第1步进入如图1.1所示的ForntPage2000(或者Word 2003/2007)窗口，单击“HTML”状态按钮，进入“HTML”网页视图模式。

第2步在窗口的工作区中，输入如下内容：
<html>
<head>
<meta http-equiv= "Content - Type" content = "text / html; chaset = gb2312">
<title>我的网站</ title>
</head>
<body>
 

我的网站（注：可将“我的网站”改为一个人名字命名的网站，如“张三个人网站”）
 
—春天时的梦
<hr width = "90%">
一首小诗

精美图片

 更多内容...
<hr width = "90%">
 <marquee> 欢迎来到阿蒙的家</marquee> 

搜狐网站
163网站

</body>
</html>
提示1：<hr width = 90%>是在页面上插入一条90%页宽的水平线。

提示2： <marquee> 欢迎来到阿蒙的家</marquee>中的<marquee></marquee>标记对是使其间的文字水平滚动显示。

第3步单击“浏览”状态按钮，切换到“预览”网页视图模式查看效果。

第4步单击工具栏的“保存”按钮，将该网页保存为“index.html”
第5步进入IE窗口，单击“文件”“打开”命令，进入“打开”对话框；单击“浏览”按钮，选择“index.html”文件后，单击“确定”按钮，这时IE窗口中显示的就是该网页的内容，如图1.2所示。

图1.2 从IE窗口中浏览到的“index.html”文件
2.制作第二张网页（可以改为其它内容）
第二张网页主要是对文字的处理和给网页加背景图片。

第1步在FrontPage 2000(或者Word 2003/2007)窗口中，单击工具的“新建”按钮，新建第二张网页。

第2步在窗口的工作区中，输入如下内容：
<html>
<head>
<meta http- equiv = "content- Type" content = "text / html; charset = gb2312">
<title> 一首小诗</ title>
</ head>
<body background = "file : /// f: /我的网站/ tl. gif">
 
 
 
 游子吟
 

慈母手中线，
游子身上衣。

临行密密缝，
意恐迟迟归。

<hr width = "40%">
<marquee>= "华文彩云"color = "#c000c0" size = "5"请您欣赏！</ marquee>
</body>
</html>
提示：<body background = "file:///f:/我的网站/tl.gif'>"中的background = file:///f:/我的网站/tl.gif就是给网页加上了背景图片，图片的文件名是tl.gif。

（要改为自己最喜欢的图片）
第3步单击“预览”状态按钮，切换到“预览”网页视图模式查看效果。

第4步单击工具栏的“保存”按钮，将该网页保存为“一首小诗.html”。

第5步在IE窗口中浏览，浏览到的效果，如图1.3所示。

图1.3 从IE窗口中浏览到的“一首小诗.html”文件
3.制作第三张网页
第三张网页主要是在网页中显示一张图片
第1步在FrontPage2000(或者Word 2003/2007)窗口中，单击工具栏的“新建”按钮，新建第三张网页。

第2步在窗口的工作区中，输入如下内容：
<html>
<head>
<meta http- equiv = "Content- Type" content = "text / html; charset = gb2312">
<title >水果与蔬菜<title>
</head>
<body>
<ing src ="f: 我的网站/水果与蔬菜.jpg" alt = "水果与蔬菜" width = "880" height = "450">
</ body>
<html>
第3步单击“预览”状态按钮，切换到“预览”网页视图模式查看效果。

第4步单击工具栏的“保存”按钮，将该网页保存为“精美图片.html”。

第5步在IE窗口中浏览，浏览到的效果，如图1.4所示。

（可以是个人照片或其他精美图片）
图1.4 从IE窗口中浏览到的“精美图片.html”文件
4. 建立超链接
超链接标记的使用格式：
<a href = "URL">文字或图像标记</a>
其中URL指明超链接对象的位置，它可以是HTML文件名、图像文件名，也可以是域名。

将主页与其他网页及相应网站建立超链接的步骤如下。

第1步在ForntPage 2000(或者Word 2003/2007)窗口中，打开“index.html”文件，并另存为“我的主页.html”文件
第2步文字“一首小诗”与“一首小诗.htm”网页文件建立超链接。

用<a href = f :/我的网站/一首小诗.htm>一首小诗</a> 替换一首小诗。

第3步文字“精美图片”与“精美图片.htm”网页文件建立超链接。

用<a href = f ：我的网站/精美图片.html>精美图片</a > 替换精美图片
第4步文字“更多肉容...”与“西藏礼仪.htm”网页文件（也可以用互联网上下载的其他网页文件）建立超链接。

用<a href = f"/我的网站/西藏礼仪.htm>更多内容...</a >替换更多内容...
第5步文字“搜狐网站”与搜狐网站建立超链接。

用<a href = http:// >搜狐网站</a >替换.
第6步文字“163网站”与163网站建立超链接。

用<a href = http ://>163网站</a >替换163网站.
修改后的“我的主页.htm:”文件在IE窗口中浏览到的效果，如图1.5所示
图1.5 修改后的“我的主页.htm”文件效果
第7步给“一首小诗.htm”和“精美图片.htm”网页文件主体部分的最后加上<a herf = f :\我的网站\我的主页.htm>返回</a>。

提示1：实验中，用到的图片文件可根据实际情况自已选择。

提示2：本实验中所举例子涉及到的文件都存放在F盘的“我的网站”文件夹中。

具体实验时，要根据实际情况修改相应的内容。

5. 发布网页
发布网页就是将网页放在Web服务器上，供用户远程访问。

通常需要功能强大的Web服务软件，比如IIS，Apache 等。

在本实验中采用功能简单的桌面web服务软件httpsvr.exe。

第1步：选定一台计算机作为web服务器，在服务器上运行httpsvr.exe，提示需要配置Web页面的根目录（存放主页文件的绝对路径）。

这里假设服务器的IP地址为192.168.1.110。

第2部：在本地或者远程计算机上运行浏览器，浏览器的地址栏里输入http://192.168.1.110/我的主页.html即可浏览设计的个人主页空间。

八、实验数据及结果分析：
（1）如果你将文字在网页中居中、右对齐、左对齐显示，应如何处理？
居中align="center"
左对齐align="left"
右对齐align="right"
（2）如果要将相临两行文字间的距离加大，应使用什么标记？
两行代码间添加 
（3）在网页中加背景图片与在网页中显示图片有什么区别？各自如何实现？
加背景使用以下语句
<body background = "图片所在地址">
（4）一张网页要与另一张网页实现超链接，应如何进行？
（5）一张网页要超链接到一个网站，应如何进行？
九、总结及心得体会：
网页可以正常打开并且显示正常，网页之间以及网页与网站之间的链接可以正
常链接成功。

本次实验基本完成了各项任务。

十一、对本实验过程及方法、手段的改进建议：
无
报告评分：
指导教师签字：。

用HTML语言制作简单的网页

合集下载

文档推荐

最新文档