第一次实验内容.doc

第三单元 用HTML语言制作网页第4单元 用HTML语言制作网页HTML是制作超文本文档的简单标记语言。HTML语言利用各种标记标识文档的结构和超链接。标记被封装在尖括号内，不区分字母的大小写。HTML标记一般成对使用，分别称为头标记和尾标记，有少数标记单独使用。HTML文档的扩展名是.htm或.html，可以使用任何文本编辑器编辑，需要通过WWW浏览器显示出效果。实验一 用“记事本”建立HTML文件【学习要点】1. HTML文件由文件头部和文件主体两部分组成，分别由以下标记标识：（1）和：把全部html代码括起来。（2）和：把文件头部括起来，包括标题等信息。（3）和：网页标题标记，此对标记要放在和中间，其中的信息出现在网页标题栏中。（4）和：文件主体标记，出现在这一对标记之间的信息为网页文件的正文部分。2. 对网页进行整体控制是通过标记的各个属性实现的，其常用属性有：（1）background属性：定义构成网页背景的图片文件名。（2）bgcolor属性：定义网页背景颜色。（3）text属性：定义文本颜色。（4）topmargin属性：定义信息内容的顶边距。（5）leftmargin属性：定义信息内容的左边距。3. 在页面上插入水平线使用标记，其常用属性有：（1）color属性：定义水平线的颜色。（2）size属性：定义水平线的粗细。（3）width属性：定义水平线的长度。【实验目的】掌握HTML文件的主体框架标记的用法；学会建立HTML文件，并用浏览器打开；会对网页文件进行修改；对标记的属性（bgcolor、text、background等）进行设置。【实验准备】 在D盘上建立一个名为自己“学号姓名”的文件夹，准备一个图片文件和一个音乐文件放在该文件夹里，分别用于作网页的背景图片和背景音乐。【实验步骤】1. 启动“记事本”程序，建立一个简单的HTML文件。（1）打开“记事本”编辑器，输入下列内容：诗词欣赏水调歌头苏轼（2）保存文件：单击窗口的“文件”菜单，选择“保存”命令，弹出“另存为”对话框，选择文件保存的位置，本题选择上面刚建立的以自己学号和姓名命名的文件夹，输入文件名lx4-1.htm，单击“保存”按钮关闭对话框。注意：文件的扩展名不能使用默认的，要手动输入，可以是.htm或.html。2. 用IE浏览器打开并浏览已建立的HTML文件。方法一：打开“我的电脑”或“资源管理器”，找到刚刚保存的HTML文件，本题是lx4-1.htm，双击文件名或其图标，系统会自动启动IE浏览器，并在浏览器窗口中显示网页内容；方法二：打开IE浏览器，在地址栏中输入要浏览的HTML文件的完整路径和文件名，本题应输入D:自己的文件夹名lx4-1.htm，并按回车键，网页的内容就会显示在浏览器窗口中。3. 将网页的背景设置为灰色，将页面的所有文本设置为蓝色，设置页面的上边距为30，左边距为20，保存所做的修改，并在浏览器中浏览修改后的页面。（1）修改标记，改为：单击“文件”菜单的“保存”命令或按Ctrl+S保存所做的修改。提示：若“记事本”窗口已关闭，可在“我的电脑”或“资源管理器”中用鼠标右键单击要修改代码的HTML文件，在快捷菜单中选择“打开方式”中的“记事本”；也可在显示该内容的浏览器窗口中选择“查看”菜单下的“源文件”命令，两种方式都可以打开HTML代码。（2）浏览修改后的页面：在显示原内容的浏览器窗口中单击工具栏的“刷新”按钮或“查看”菜单的“刷新”命令或按下F5，此时浏览器窗口重新加载页面，显示出修改后的Web页面。4. 去掉网页的背景颜色，为网页设置一幅背景图片，保存所做的修改，并在浏览器中浏览修改后的页面。修改标记，去掉bgcolor属性，添加background属性，修改后如下：此处，文件“b01.gif”是事先准备好的图片文件，与当前所编辑的文档lx4-1.htm在同一个目录中。5. 为网页添加一段背景音乐，当页面打开时音乐自动播放。在标记下添加一行代码，输入：。此处，文件“yesterday once more.mp3”是事先准备好的音乐文件，与lx4-1.htm在同一个目录中。保存所做的修改，在浏览器中刷新页面，效果如下图4-1所示，现在你可以戴上耳机听听网页背景音乐的效果了。图4-1 在浏览器中lx4-1.htm的效果实验二 文字控制标记应用【学习要点】控制网页中某些文本的显示格式常使用、等标记，具体使用方法如下：1. 设置标题文字使用标记，n取16。用该标记设置的文本以黑体显示，且在其后自动插入一个空行。该标记的align属性可设置标题文字的对齐方式。2. 设置文本的字体、字号和颜色使用标记，其中设置字体用face属性，设置字号用size属性，设置文字的颜色用color属性。3. 定义一个段落使用标记，其align属性可以设置本段中文本的对齐方式。另外，在设置居中对齐时也可以使用标记对。如果只是强行换行而不分段，只需在文本后面加上单标记。4. 设置文字的字形使用标记、，其中标记用于设置粗体，设置斜体，设置下划线。另外，使用和标记可分别将文本设置为上标和下标。【实验目的】掌握文字控制标记、等的使用方法，能够熟练使用它们设置文本格式。【实验步骤】1. 用“记事本”打开实验一建立的文件lx4-1.htm，在“苏轼”两字后插入光标按回车，输入下列内容：明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆。人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。将文件另存为lx4-2.htm，用浏览器打开浏览其内容。2. 将词的题目“水调歌头”四个字设置为一级标题，将网页的所有文本居中对齐。（1）设置词的题目：水调歌头（2）使用标记的align属性将其它内容居中对齐，“苏轼”两字也可用标记居中。3. 将词的作者“苏轼”两字设置为红色、4号、粗体。苏轼4. 将词的内容设置为楷体、5号、粗体。明月几时有千里共婵娟。5. 将词的内容第一句和最后一句设置为斜体，为词的作者“苏轼”加下划线。（1）第一句设置为：明月几时有，把酒问青天。（2）最后一句的设置同上（3）添加下划线： 苏轼6. 在正文下方插入两个换行标记，分别输入数学公式和化学分子式练习上标和下标标记的应用。代码如下：上标标记应用：a2-b2=(a+b)(a-b)下标标记应用：H2O和CO27. 保存以上所做的各项设置，用浏览器打开网页浏览，其效果如图4-2所示。图4-2 在浏览器中lx4-2.htm的效果实验三 超链接、多媒体标记的应用【学习要点】1. 在网页上插入图片使用单标记，其常用属性有：（1）src属性：定义图片文件的位置，一般采用相对路径。（2）width属性：设置图片在网页上显示的宽度。（3）height属性：设置图片在网页上显示的高度。（4）align属性：设置图片的对齐方式。（5）alt属性：设置图片的说明文字。（6）border属性：设置图片的边框粗细。（7）hspace属性：设置图片离左右文本的距离。（8）vspace属性：设置图片离上下文本的距离。2. 可以为网页中的文本或图片建立超链接，还可以建立电子邮件超链接。超链接标记的应用格式是：链接源。具体分为以下几种情况：（1）文本作链接源：超链接文本（2）图片作链接源：（3）电子邮件超链接：3. 在网页上播放音乐可通过多种方式实现，如点播音乐或作为背景音乐播放。（1）点播音乐：为文本或图片建立超链接，链接目标是音乐文件。（2）自动载入音乐：。（3）背景音乐：。【实验目的】掌握图片标记和超链接标记及其属性的使用方法，会在网页上创建各种形式的超链接，能够以超链接的方式点播音乐，会使用标记在网页上播放音乐和视频。【实验准备】准备若干图片文件、音乐文件、视频文件和flash动画放到名为“html”的文件夹里。【实验步骤】1. 仿照下面的图4-3、图4-4和图4-5，建立类似的网页，网页命名为lx4-3.htm，练习在网页中插入图片，设置图片的基本属性及图片和文本的对齐、间距等属性。图4-3 图片基本属性的设置图4-4 图片和文本的对齐设置图4-5 图片和文本的间距设置此网页的html代码如下：图片标记应用比较下面两幅图，把鼠标移到右面的图上看看怎么使下面两幅图一个靠左，一个靠右呢看看下面，文字和图片可以有这么多对齐方式啊!文字对齐我头顶!文字对齐我中间!文字对齐我脚底!图片靠文字太近，会有很挤的感觉，看看下面吧离我远点啊!我好害怕啊!我在上面等你呢!我在下面等你呢!2. 仿照下面的图4-6，建立类似的网页，网页命名为lx4-4.htm，练习在网页中创建文本超链接、图片超链接和电子邮件超链接。图4-6 超链接的应用此网页的html代码如下：超链接标记应用点击下面的链接，看看你都能打开什么欢迎访问济南大学校园网欢迎进入济南大学图书馆想知道明后几天各地的天气吗，上问天网看看吧!点击下面的两幅图片,可以打开常用的两个搜索引擎,用它们找更多你喜欢的图片吧!记得给我写信和我联系啊!3. 仿照下面的图4-7和图4-8，建立类似的网页，网页命名为lx4-5.htm，练习在网页中播放音乐、动画和视频。图4-7 在网页