实验1HTML基本标记的练习.docVIP

实验1 HTML基本标记的练习 【实验目的】 熟练掌握HTML语言中各种基本标记的使用方法。 【实验要求】 ⑴ 利用记事本编写简单的html程序； ⑵ 练习使用各种文档标记及其常用属性； ⑶ 练习使用各种排版标记、文本格式标记及其常用属性； ⑷ 练习使用图像标记及其常用属性。 【实验步骤】 1．编写简单的HTML文档 ⑴ 在D盘或E盘上建立以自己名字命名的文件夹； ⑵ 启动记事本程序，输入下列内容： html head title白居易的诗/title /head body bgcolor=yellow text=rgb(255,0,0) P align=center B钱塘湖春行 /B/PHr p align=center 孤山寺北贾亭西，水面初平云脚低。br 几处早莺争暖树，谁家新燕啄春泥。br 乱花渐欲迷人眼，浅草才能没马蹄。br 最爱西湖行不足，绿扬荫里白沙堤/body /html ⑶ 将上述内容以“Poem.html”为文件名存储在自己的文件夹中； ⑷ 运行上述文件，观察文件执行的结果，体会各种文档标记及排版标记的使用方法； ⑸ 在上述HTML程序中，去掉body中的bgcolor属性，增加background属性，使网页的背景变成一幅风景图片（图片文件自定），然后存盘并刷新页面观察结果； ⑹ 为上述网页增加一个背景音乐，即在文档中再增加一个bgsound src=音乐文件名标记，然后存盘并刷新页面用耳机听听效果。 2、练习使用文本格式标记及其常用属性 在上述实验的基础上，修改文档中文字的显示属性，即在适当的位置增加font/font、B/B、I/I、U/U、SUB/SUB、SUP/SUP等标记，使网页的输出效果如下图所示： 3．练习使用图像标记及其常用属性 在自己的文件夹中新建一个名为“Image.html”的HTML文档，在该文档中主要练习插入图片文件及相关的文字，即练习使用img src=图片路径及文件名 标记，并熟悉该标记中以下属性的使用： (1) Alt ：图像不能下载时用以替代的文字，如：alt=济南大学； (2) Align：对齐方式。取值可以是文本对齐：top、bottom、middle；图形对齐：left、right，任选其一，如：Align= right 或Align=middle； (3) Border：图像的边框。可取≥0的整数，如：Border=3； (4) Width和Height：图像的高和宽；如：Width=300 Height=200； (5) Hspace和Vspace：图片的水平位置和垂直位置，如：Hspace=300 Vspace=100； 注意上述属性除src为必选外，其它属性可全选，可选择其中的几个，也可不选，另外图片文件的扩展名不能省略，如： img src=picture\L4.jpg Align= right Width=300 Height=200 Hspace=300 Vspace=100 同学们可以自己搜集选择图片，仿照下图练习图像标记及其常用属性的使用方法。 【实验报告】 上述实验完成后，要求写出实验报告，可按如下格式书写： 实验名称：HTML基本标记的练习 实验目的：熟练掌握HTML语言中各种基本标记的使用方法。 实验题目： 1、利用记事本编写简单的html程序； 2、练习使用各种文档标记及其常用属性； 3、练习使用各种排版标记、文本格式标记及其常用属性； 4、练习使用图像标记及其常用属性。 预习报告： 写出前两个实验步骤中最终编写的html程序。 调试过程： 根据自己的情况填写。程序不会是一次就能运行成功的，一开始肯定会有错误的（比如漏了标记符号、，或者双引号和 错输成了中文状态的＜＞等等），不断的修改错误然后不断地重新运行的这个过程就叫做“调试过程”，把有关这方面的内容适当写一些即可。 运行结果：简单描述一下你所做网页的最终显示情况。 使用了Width和Height属性 使用了Align属性，并分别采用了五种不同的取值。 使用了Hspace和Vspace属性