HTML实训大纲.pdf

《HTML》实验大纲 实验一、HTML 的基本结构 一、实训目的：让学生熟练掌握HTML 的基本结构。 二、实训内容：HTML 的基本结构。 三、实训步骤： 1．启动记事本、Dreamweaver 或frontpage。 2．输入代码如下： html head ……….. /head body ………… /body /html 其中HTML在最外层，表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略HTML标记， 因为.html 或.htm 文件被Web浏览器默认为是HTML文档。HEAD 之间包括文档的头部信息，如文档总标 题等，若不需头部信息则可省略此标记。BODY 标记一般不省略， 表示正文内容的开始。 下面是一个最基本的超文本文档的源代码： HTML HEAD TITLE一个简单的HTML 示例/TITLE /HEAD BODY CENTER H3欢迎光临我的主页/H3 BR HR FONT SIZE 2 这是我第一次做主页，无论怎么样，我都会努力做好！ /FONT /CENTER /BODY /HTML 1 实验二、元信息标记META的使用 一、实训目的：让学生掌握HTML 中META标记的使用。 二、实训内容：请使用META语句为自己的页面添加作者、关键字、页面字符集、描述语 句等信息。 三、实训步骤： 1.启动记事本、Dreamweaver 或frontpage。 2.输入代码如下： html head titleMETA标记/title META name ”author” content ”王丽” META name ”keywords” content ”mp3,mtv” META http-equiv ”content-type” content ”text/html;charset GB2312” META name ”discription” content ”这是我的第一个网页” /head body /body /html 实验三、字体标记font的使用 一、实训目的：让学生掌握HTML 中font标记的使用。 二、实训内容：制作如下图所示的页面效果： 2 三、实训步骤： 1.启动记事本、Dreamweaver 或frontpage。 2.输入代码如下： html head title字体综合应用/title /head body h1代数方程式/h1 9xsup2/sup+2x+3 7br 3xsub1/sub+2xsub2/sub 10 /body /html 实验四、换行标记的使用 一、实训目的：让学生掌握HTML 中换行标记的使用。 二、实训内容：用换行标记制作网页页面。 三、实训步骤： 1. 启动记事本、Dreamweaver 或frontpage 。 2. 下面编两种代码 （换行和不换行）来进行比较。 不换行的代码如下： html head title无换行示例/title /head body 登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 /body /html 换行的代码如下： html head title换行示例/title /head 3 body 登鹳雀楼br白日依山尽，br黄河入海流。br欲穷千里目，br更上一层楼。 /body /html 实验五、水平线标记的使用 一、实训目的：让学生掌握HTML 中水平线标记的使用。 二、实训内容：在网页页面中添加水平线 三、实训步骤： 1．启动记事本、Dreamweaver 或frontpage。 2．代码如下： 线段粗细的设定： HTML HEAD TITLE