使用html 语言建立一个简单的网页,实验一“ 做一个简单的html网页”.pdf

肇庆学院肇庆学院 实实 验验 报报 告告 实验一 课程名称 实验一 课程名称用HTML语言制作简单的网页 肇庆学院计算机学院肇庆学院计算机学院 实实 验验 报报 告告 学生姓名 学生姓名 学学 号 号 一 实验室名称 软件大楼一 实验室名称 软件大楼302 二 实验项目名称 二 实验项目名称 用HTML语言制作简单的网页 三 实验原理 三 实验原理 1 网页网页 1 网页就是在浏览器上看到的一页 网页也称为Web页 2 主页通常是进入网站首先浏览的网页 具有引导用户浏览整个网站内 容的作用 3 超链接是网页中的特殊标记 它指向了WWW中的其他资源 如其他 网页 网页的另一个段落 声音文件等 这些资源可以位于自己的计算机上 也可以位于其他计算机上 用作超链接的标记可以是一段文字 一幅图像 也 可以是一幅图像的一部分 在浏览网页时 单击超链接就可以跳转到超链接所 指向的资源 超链接像一根一根的线一样 将各种网页链接在一起 形成一个 庞大的信息网 2 HTML语言语言 1 HTML语言就是超文本标记语言 是网页制作的基础 也是基本的工 具 使用其他任何工具制作的网页 最终都要以HTML方式存储在计算机里 2 HTML的脚本可用任何一种文本编辑器进行编写 如记事本 Microso ft Word等 保存时要将脚本保存成纯文本格式 扩展名必须是 htm 3 HTML脚本的基本结构 HTML脚本总是以标记开头 标记结尾 在和标记之间是HTML的所有内容 一般情况下它分为两部分 头部和主体 头部总是由和标记定义 的 其中包含了HTML脚本的标题和说明信息 头部下面是HTML脚本的主体 部分 它以作为起始标记 作为结束标记 其中所包含的就是在 浏览器中所看到的内容 包括文字 图片 动画等 3 FrontPage dreamwerver notepad 以FrontPage为例 它是一种简单易学的Web管理和网页制作的软件 Front Page2000的窗口 如图1 1所示 在窗口工作区的左下方是网页视图模式的3个状态按钮 普通 HTM L 和 预览 网页视图模式的默认状态是 普通 用于以所见即所得的 方式编辑网页 HTML 网页视图模式用于以HTML语言的方式编辑网页 制作网页过程中 想查看网页的制作效果 切换到 预览 网页视图模式即可 切换网页视图使用鼠标单击相应的状态按钮即可 图1 1 FrontPage 2000的窗口 选用其他网页开发工具也是可以的这里没有限制 四 实验目的 四 实验目的 1 简单了解HTML语言 2 认识网页以及网页的结构 3 掌握用HTML语言制作简单网页的方法 五 实验内容 五 实验内容 用HTML语言制作简单的网页 六 实验器材 设备 元器件 六 实验器材 设备 元器件 1 实验设备 计算机 2 实验软件 IE浏览器 网页制作软件 记事本 七 实验步骤 七 实验步骤 给每个学生分配一台计算机 独立完成简单网页制作的实验内容 并写出 实验报告 具体步骤如下 1 制作第一张网页制作第一张网页 第第1步步 进入如图1 1所示的ForntPage2000 或者Word 2003 2007 窗口 单击 HTML 状态按钮 进入 HTML 网页视图模式 第第2步步 在窗口的工作区中 输入如下内容 我的网站 我的网站 注 可将 我的网站 改为一个人名字命名的 网站 如 张三个人网站 春天时的梦 一首小诗 精美图片 更多内容 欢迎来到阿蒙的家 搜狐网站 163网站 提示提示1 是在页面上插入一条90 页宽的水平线 提示提示2 欢迎来到阿蒙的家中的标记对是使其间的文字水平滚动显 示 第第3步步 单击 浏览 状态按钮 切换到 预览 网页视图模式查看效果 第第4步步 单击工具栏的 保存 按钮 将该网页保存为 index html 第第5步步 进入IE窗口 单击 文件 打开 命令 进入 打开 对话框 单击 浏览 按钮 选择 index html 文件后 单击 确定 按钮 这时IE窗口中显示的就是该网页的内容 如图1 2 所示 图1 2 从IE窗口中浏览到的 index html 文件 2 制作第二张网页制作第二张网页 可以改为其它内容 第二张网页主要是对文字的处理和给网页加背景图片 第第1步步 在FrontPage 2000 或者Word 2003 2007 窗口中 单击工具的 新建 按钮 新建第二张网页 第第2步步 在窗口的工作区中 输入如下内容 一首小诗 游子吟 font face 楷体 gb2312 color ff00ff size 5 孟郊 慈母手中线 游子身上衣 临行密密缝 意恐迟迟归 华文彩云 color c000c0 size 5 请您欣赏 提示 中的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步步 在窗口的工作区中 输入如下内容 水果与蔬菜 第第3步步 单击 预览 状态按钮 切换到 预览 网页视图模式查看效果 第第4步步 单击工具栏的 保存 按钮 将该网页保存为 精美图片 html 第第5步步 在IE窗口中浏览 浏览到的效果 如图1 4所示 可以是个人照片或其他精美 图片 图1 4 从IE窗口中浏览到的 精美图片 html 文件 4 建立超链接建立超链接 超链接标记的使用格式 文字或图像标记 其中URL指明超链接对象的位置 它可以是HTML文件名 图像文件名 也可以是域名 将主页与其他网页及相应网站建立超链接的步骤如下 第第1步步 在ForntPage 2000 或者Word 2003 2007 窗口中 打开 index html 文件 并另存为 我的主页 html 文件 第第2步步 文字 一首小诗 与 一首小诗 htm 网页文件建立超链接 用一首小诗 替换一首小诗 第第3步步 文字 精美图片 与 精美图片 htm 网页文件建立超链接 用精美图片 替换 精美图片 第第4步步 文字 更多肉容 与 西藏礼仪 htm 网页文件 也可以用互联网上下载的其 他网页文件 建立超链接 用更多内容 替换更多内 容 第第5步步 文字 搜狐网站 与搜狐网站建立超链接 用搜狐网站替换 font face 仿宋 gb2312 color 00ff00 size 4 搜狐网站 第第6步步 文字 163网站 与163网站建立超链接 用163网站替换163网站 修改后的 我的主页 htm 文件在IE窗口中浏览到的效果 如图1 5所示 图1 5 修改后的 我的主页 htm 文件效果 第第7步步 给 一首小诗 htm 和 精美图片 htm 网页文件主体部分的最后加上返回 提示提示1 实验中 用到的图片文件可根据实际情况自已选择 提示提示2 本实验中所举例子涉及到的文件都存放在F盘的 我的网站 文件 夹中 具体实验时 要根据实际情况修改相应的内容 5 发布网页发布网页 发布网页就是将网页放在Web服务器上 供用户远程访问 通常需要功能 强大的Web服务软件 比如IIS Apache 等 在本实验中采用功能简单的桌面web服务软件httpsvr exe 第1步 选定一台计算机作为web服务器 在服务器上运行httpsvr exe 提示需要配置 Web页面的根目录 存放主页文件的绝对路径 这里假设服务器的IP地址为1 92 168 1 110 第2部 在本地或者远程计算机上运行浏览器 浏览器的地址栏里输入http 192 168 1 110 我的主页 html 即可浏览设计的个人主页空间 第二种方法 一 先安装IIS 二 然后把做好的网站文件夹存在某一个位置 三 右击我的电脑 管理 服务和应用程序 internet信息服务 网站 属性 主目录 找到你保存的网页文件 确定即可 输入自己的IP地址就可看到自己的网页了 如果想发布的话 你还 需要申请域名 八 实验数据及结果分析 八 实验数据及结果分析 1 如果你将文字在网页中居中 右对齐 左对齐显示 应如何处理 居中align center 左对齐align left 右对齐 align right 2 如果要将相临两行文字间的距离加大 应使用什么标记 两行代码间添加 3 在网页中加背景图片与在网页中显示图片有什么区别 各自如何实 现 加背景使用以下语句 4 一张网页要与另一张网页实现超链接 应如何进行 5 一张网页要超链接到一个网站 应如何进行 九 总结及心得体会 九 总结及心得体会 网页可以正常打开并且显示正常 网页之间以及网页与网站之间的链接可以正 常链接成功 本次实验基本完成了各项任务

展开阅读全文

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！