網页设计实验报告实验一.docVIP

昆明理工大学信息工程与自动化学院学生实验报告 （ 201 —201 学年第 一 学期 ） 课程名称：Web设计技术 开课实验室： 年 月 日 年级、专业、班 学号 姓名 成绩 实验项目名称 网页设计简介、HTML基础介绍、文字与段落、列表 指导教师 教师评语 教师签名： 年 月 日 注：报告内容按实验须知中七点要求进行。 一.打开记事本，编写第一个页面。 （1）打开记事本：单击“开始”→“程序”→“附件”→“记事本”。 （2）输入下面代码： html head title欢迎你! 我的朋友./title style type=“text/css”hl{font-family：幼圆；font-size：x-large；color：red} /style /head body hl当你进入HTML编程世界的时候，你的br感觉是全新的！/hl script language=JavaScript alert( welcome! 朋友们 ) /script /body /html (3)单击“文件”→“选择”→“保存”菜单项，选择文件类型为“所有文件”，文件名输入“index.html”并选择文件保存地址（记住一定要把文件的后缀存为.html或.htm，否则网页无法显示）。 （4）用浏览器打开这个文件，看看效果吧！ 二．用HTML语言编写符合以下要求的文档：标题为“班级主页”，在浏览器窗口用户区显示“欢迎来到我们的班级主页”，完成后效果如图： 代码： html head title班级主页/title /head body p欢迎来到我们的班级主页/p /body /html 三．采用本章介绍的HTML标记完成如图所示的文字内容。 代码： html head title文字实例/title /head body h3 align=left3.1.2 标题字/h3 nbsp;nbsp; 标题字，就是以几种固定的字号去显示文字。在HTML中，定义了六级标题，从一级 br到六级，每级标题的字体大小依次递减。 h5 align=left基本语法：/h5 nbsp;nbsp; lt;h# align=left|center|rightgt;标题文字lt;/h#gt; h5 align=left语法说明：/h5 nbsp;nbsp; 标题标记本身具有换行的作用，标题总是从新的一行开始；#用来指定标题文字的大小，br #取1~6的整数值，取1时文字最大，取6时文字最小。 /body /html 四．根据本章所讲知识，采用有序列表技术编写出具有如图所示的运行效果页面的程序。 代码： /head body table width=574 height=452 border=0 tr td width=194p align=center数字列表：/p p align=center 1.苹果/p p align=center2.香蕉/p p align=center3.柠檬/p p align=center4.橘子/p/td td width=370p align=center大写罗马字母列表:/p p align=centerI.苹果/p p align=centerII.香蕉/p p align=centerIII.柠檬/p p align=centerIV.橘子/p/td /tr tr tdp align=center大写字母列表：/p p align=center A. 苹果/p p align=centerB.香蕉/p p align=centerC.柠檬/p p align=centerD.橘子/p/td tdp align=center小写罗马字母列表：/p p align=centeri.苹果 /p p align=centerii.香蕉/p p align=centeriii.柠檬/p p align=centeriv.橘子/p/td /tr tr td height=152p align=center小写字母列表：/p p