1.3 一个简单的HTML实例
前面简单介绍了HTML文件的概念和基本结构，下面通过一个简单的HTML实例来引导读者学习HTML标记，了解HTML文件的创建和运行方式。
1.3.1 编写HTML代码
HTML文件对编写工具的要求并不高，可以在Dreamweaver中实现，也可以在最简单的文本编辑工具中实现。下面使用记事本编写第一个HTML文件，具体的步骤如下。
（1）单击“开始”|“程序”|“附件”|“记事本”菜单命令，打开记事本，如图1.3所示。
图1.3 空白的记事本
（2）在记事本中直接输入如下内容。
01 <HTML> 02 <HEAD> 03 <TITLE>一个简单的 HTML 实例</TITLE> 04 </HEAD> 05 <BODY> 06 <H2 ALIGN="center">第一个 HTML 文件</H2> 07 <HR WIDTH="70%"> 08 <P> 下面跟我进入 HTML 的领域</P> 09 <P> 来领略这个奇妙而多彩的世界！！</P> 10 </BODY> 11 </HTML>
第6行用<H2>标记设置字号显示文字“第一个HTML文件”并居中；第7行显示一条水平线，宽度为页面宽度的70％；第8行与第9行显示相应的文字。
（3）输入代码以后，单击“文件”|“保存”菜单命令，打开“另存为”对话框，如图1.4所示。
图1.4 保存代码
（4）在“另存为”对话框右侧设置文件保存的位置，这里设置为F:/HTML+CSS/源文件/01目录（读者也可以设置在其他路径）。
（5）在“保存类型”下拉列表中设置文件的类型为“所有文件”，在“文件名”文本框中设置文件的名称为1.1.html，然后单击“保存”按钮保存文件。
（6）关闭记事本程序，回到文件保存的目录下，可以看到保存的文件图标，如图1.5所示。
图1.5 保存的HTML文件
1.3.2 运行HTML文件查看效果
编写好文件的源代码并保存后，就可以通过IE浏览器来查看HTML文件的页面效果了。双击文件的图标打开该文件，其效果如图1.6所示。
图1.6 实例运行结果
在这段代码中包括如下几个元素。
• HTML的基本标记：包括文件类型标记<HTML>、文件头标记<HEAD>和文件主体标记<BODY>。
• HTML的标题：一般通过页面标题来区分不同的页面，这里设置为“一个简单的HTML实例”，需要使用<TITLE>标记。
• HTML的页面内容：在页面中插入了3种HTML元素，分别是一个二级标题、一条水平线以及两段文字。这3种元素使用的标记不同，显示的效果也不同，这在后面的章节中还将详细介绍，这里不再赘述。