【实例13】HTML案例教学网页.docVIP

“HTML案例教学”网页 【实例1】第1个HTML网页 制作的第1个HTML网页在浏览器中的显示效果如图1-1-1所示。可以看到，它有一级标题“第1个HTML网页”、二级标题和段落文字，在二级标题文字的左边还有一个学生操作计算机的动画，段落文字是介绍关于HTML基本常识的文字。通过本实例的学习，可以初步了解HTML语言，了解HTML语言中常用标记的书写格式和作用；掌握输入HTML代码、建立HTML文档和显示HTML网页的方法。 1．输入HTML代码 编写HTML语言程序可以在Windows记事本内书写，在存盘输入文件名时，一定要输入HTML语言文件的扩展名：.htm或.html。下面给出一个用记事本编写的简单的HTML网页文档（名字为“【实例1】第1个HTML网页.htm”），如图1-1-2所示。在浏览器IE中观察HTML网页文档，可以看到如图1-1-1所示的网页。 图1-1-1 在浏览器IE中观察网页 图1-1-2 记事本编写的“【实例1】第1个HTML网页.htm”网页文档 注意：HTML文档中的各种英文标记要在英文输入方式下输入，不分大小写。为了便于管理，可在磁盘根目录下建立一个文件夹（例如名字为“TDZYF”的文件夹），用来存储编写的HTML语言程序文档。再在该文件夹下建立名字为“JPG”和“GIF”的两个文件夹，用来保存网页中的图像文件和GIF格式文件。 2．浏览网页 双击HTML文档图标，可以调出浏览器窗口，同时打开该网页。另外还可以采用如下方法来浏览网页。 （1）双击浏览器图标，调出浏览器窗口。然后，单击浏览器窗口内的“文件”→“打开”菜单命令，调出“打开”对话框，如图1-1-3所示（“打开”文本框内还没有内容）。 （2）单击“打开”对话框中的“浏览”按钮，调出“Microsoft Internet Explorer”对话框，选择HTML文件，单击“打开”按钮，退出“Microsoft Internet Explorer”对话框，回到“打开”对话框，此时在其“打开”下拉列表框内已有选中的文件目录与名字，如图1-1-3所示。 （3）单击“打开”对话框中的“确定”按钮，即可在浏览器中打开选择的网页了。 3．修改和保存网页 （1）单击“Microsoft Internet Explorer”浏览器窗口中的“查看”→“源文件”菜单命令，调出Windows记事本窗口，并在该窗口中显示出该网页的HTML代码。此时可以修改网页程序。 （2）修改完程序之后，单击Windows记事本窗口内的“文件”→“保存”菜单命令，即可将修改后的程序保存。然后，将鼠标指针移到图1-1-1所示的网页之上，单击鼠标右键，调出其快捷菜单，再单击该菜单中的“刷新”菜单命令，即可看到修改后的网页。也可以单击“查看”→“刷新”菜单命令来刷新网页。 【实例2】“成语解释”网页 “成语解释”网页在浏览器中显示了几句著名的成语，当鼠标移到成语文字之上时，会显示该成语的解释，如图1-2-6所示。文本属于网页中的基本元素，在【实例1】中已经介绍了部分文本标记。通过本实例的学习，可以进一步了解网页中其他的一些文本标记，合理使用这些标记，可以使网页的显示效果更加出色，可以进一步掌握网页使用文本的方法。该实例的制作方法如下。 打开记事本程序，输入如下HTML代码。 /HEAD BODY BGCOLOR=#FFFF00 H1 ALIGN=CENTERFONT COLOR=#FF000中国诗词佳句-作者/H1 !--下面是正文内容! P下面介绍几句著名的成语，把鼠标移到成语文字之上，可以看到该成语的解释。/P P TITLE=人的思想状况如同人的面貌一样，各不相同。1.人心如面/P P TITLE=事情发生差错以后，如果及时采取措施补救，还为时不晚。2.亡羊补牢/P P TITLE =上天的宠儿，比喻幸运的人。3.天之骄子/P P TITLE =大功告成以后，把曾经出过力的、利过功的人抛弃或杀死。4.鸟尽弓藏/P P TITLE =贪图安逸，厌恶劳动。5.好逸恶劳/P /BODY /HTML 将该HTML文件以名字“【实例2】成语解释网页.htm”保存在“TDZYF”目录下。用浏览器打开该网页，即可看到“成语解释”网页的显示效果，如图1-2-6所示。 图1-2-6 “成语解释”网页的显示效果 【实例3】“蜜蜂和小鱼”网页 “蜜蜂和小鱼”网页在浏览器中的显示效果如图1-2-7所示。网页中的蜜蜂和小鱼图像除了大小不同以外，图像周围边框的粗细程度也不同。通过本实例的学习，可以进一步了解网页中插入GIF动画和图像的方法，给GIF动画和图像添加边框的方法，背景平铺图像的方法。该实例的制作方法如下。 图1-2-7 “蜜蜂和小鱼”网页 在网页所在的文