1 / 12
文档名称:

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

格式:doc   大小:575KB   页数:12页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

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

上传人:mh900965 2017/4/6 文件大小:575 KB

下载得到文件列表

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

文档介绍

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