网站创建

下一步是确定您想要在网站上放置的内容。确定了内容后，您需要确定最佳的展示方式。在确定信息展示方式时，您需要决定如何开发网页。所有网页的基础都是 HTML。

如果您想学习 HTML 代码，可以使用像记事本一样简单的程序编写一个基本的网页。大多数微软应用程序（如 Word、Publisher、Powerpoint）都可以生成 HTML 网页，尽管它们往往会生成代码量很大的页面。这意味着它们通常使用的代码量远远超过必要，这会导致页面加载速度变慢。

有一些商业软件包用于生成页面。此外，大多数人应该熟悉大多数家谱程序都可以生成 HTML 页面来显示您的信息。

“重复和耐心是良好设计的两个关键要素。”
Bob 和 Lisa，2006 年

个人偏好

我擅长使用记事本设计网页，用 HTML 编写简单的代码。它非常容易，我将在本节中更深入地讨论这个主题。

有一些商业软件包（如 Dreamweaver）可以开发 WYSIWYG（所见即所得）网页。我将不探讨这些选项。

确定内容

暂时不要担心内容。让我们先研究一些核心部分和一些代码，这些代码将使您更容易规划如何呈现信息。这可能会给你一些想法，可能会略微改变一些东西。

HTML 代码入门

HTML 是一种编程语言；但只是最简单的意义上。如果你对旧的文字处理器有任何经验，你可能还记得以前必须打开和关闭粗体（能够在标志集和可怕的颜色编码方案之间切换）。HTML 很像这样。

要使某项内容变为粗体，我们将使用所谓的标签。在 HTML 中，我们通常有开始标签和结束标签。

粗体文本的开始标签：<b>

粗体文本的结束标签：</b>

注意正斜杠“/”表示结束标签。

示例

<b>这是粗体。</b> 生成...

这是粗体。

HTML 文件

.htm 与 .html

希望每个人都见过带有这两种扩展名之一的文件。唯一真正的区别是其中一个有“L”，而另一个没有。实际上所有服务器都将它们视为相同类型的文件。

请记住，无论您使用哪一个，都要保持一致，因为在文件名用于链接时，使用哪一个确实很重要。如果文件名是bob.htm，我输入bob.html，它将不起作用，因为bob.html 不存在。

index.htm（或 index.html）

无论您对扩展名使用哪种方法，index 文件都是我们目的中最重要的文件。如果没有指定其他文件，该文件是默认打开的文件。

示例

http://bob.fornal.org/Genealogy/实际上打开...

http://bob.fornal.org/Genealogy/index.html

如果您必须反复输入路径，那么您可能想使用第一个地址，因为它更短。

基本 HTML 结构

好的，这是几乎所有 HTML 文件的基本结构

<HTML>

<HEAD>

</HEAD>

<BODY>

示例文本放在这里。

</BODY>

</HTML>

请注意，打开/关闭标签是嵌套的；也就是说，打开/关闭 TITLE 标签嵌套在打开/关闭 HEAD 标签中，而打开/关闭 HEAD 标签又嵌套在 HTML 标签中。

此外，标签中的文本全部是大写。HTML 标签不区分大小写；也就是说，您可以全部大写或全部小写输入。这只是个人偏好；选择一个并坚持下去。

这种结构有一些细微的变化，但几乎所有时候，这将是您创建的网页的基本结构。

练习：Index.html

在开始之前，创建一个文件夹来存储我们将要创建和开发的网页。我建议在桌面上创建一个名为Internet Files的文件夹（在将来我会提到这个文件夹）。

现在，让我们复制以下内容并将其粘贴到记事本文档中

<HTML>

<HEAD>

<TITLE>您的姓名在这里</TITLE>

</HEAD>

<BODY>

<b>您的姓名在这里</b> <br>

这是我的第一个索引文件。

</BODY>

</HTML>

请注意代码中列出的新标签<br>。这是一个换行标签，它告诉 HTML 在此位置放置一个换行符（与在文字处理器中按 Enter 键相同）。

在执行此过程之前，请完整阅读以下内容

将此文件粘贴到记事本中后，使用以下过程保存文件

单击File，然后单击Save As ...
将Save As Type更改为All Files
将文件名更改为Index.html（是的，文件名区分大小写）
确保编码为ANSI
确保你保存到正确的文件夹
点击保存按钮完成此过程。

现在你已经保存了文件，关闭记事本...打开Internet Files文件夹...双击Index.html文件查看你创建的内容。

注意: 你创建的Index.html文件，当你双击它时，将会在你的浏览器（例如Internet Explorer）中显示。你只是创建了一个基本的网页；它还没有被放到互联网上。

练习：修改Index.html文件

让我们用记事本重新打开这个文件，做一些修改。右键点击文件，选择用记事本打开，然后选择记事本。这应该会打开文件，你应该可以看到之前输入的代码。

找到<BODY>标签，并将接下来的几行更改为...

<b>您的姓名在这里</b> <br>

这是我的第一个索引文件。

</FONT>

</BODY>

好的，我们添加了一些内容。在<BODY>标签中，有一个修改器，它将背景颜色（BGCOLOR）更改为浅灰色。

另外，注意<FONT>标签和设置字体为 Arial（如果系统中不存在 Arial，则为 Tahoma）以及字体颜色为蓝色的修改器。

现在，点击文件，然后点击保存，以保存你刚刚做的更改（注意，在第一次执行“另存为”过程后，保存要容易得多）。

最后，双击该文件以查看这些更改对Index.html文件的影响。

练习：添加图片

将图片放置在网页上很容易，但请记住一些事项。通常，图片会导致页面加载速度变慢 - 图片越小越好，但在尺寸和清晰度之间保持平衡 - 图片越小越好，直到你无法分辨图片最初是什么。

允许使用三种基本类型的图片（还有其他类型，但这些是最常见的）

BMP - Windows 位图，非常清晰，而且通常非常大。
JPG - JPEG，通常很清晰，对于复杂的图片来说尺寸也很好，但有时会像素化（奇怪的模糊效果）。
GIF - Compuserve GIF，文件尺寸很小，并允许使用简单的动画类型，但通常会降低清晰度，因为它最多只能使用 256 种颜色，这非常有限。

在你熟悉之前，你可以做的最好的事情是使用像 Paint Shop Pro (PSP) 这样的图形程序，以所有三种格式保存你想使用的图片，然后查看文件尺寸，并在本地页面上查看这些图片，以了解它们的清晰度，并选择最适合当前情况的格式（尺寸或清晰度）。

选择任何一张图片，并将它放到Internet Files文件夹中。

更改以下这行...

这是我的第一个索引文件。

... 改为以下内容...

这是我的第一个索引文件。 <br><br>

好的，现在让我们看看你刚刚添加的内容。

这段语句表示，图片源等于 {文件名}，替代描述等于 {描述}，边框大小=1。

如果图片由于某种原因无法加载，或者对于视力障碍人士来说，替代描述很有用。

Border=0 会关闭边框。

图片位置

在你继续学习链接网页之前，你需要了解，图片文件不需要与使用它的网页位于同一个文件夹中。

通常，你可能想专门创建一个文件夹来存储图片。这样可以减少混乱，并简化文件定位。

此外，你还可以从其他网站引用图片。例如，我这里左侧的图片实际上位于我的域名 (http://bob.fornal.org) 的 images 文件夹中。这对于组织来说可能很好，但许多网站不允许这样做（称为热链接），因为它会影响托管图片的网站的下载速度。

链接网页

链接基础

编码链接只有一种方法；但在概念上，链接类型有几种。目前，有两种简单的类型 - 链接到本地页面和链接到外部页面。

让我们在深入了解细节之前快速看一下 HTML 代码。它看起来像这样

在页面上你会看到类似这样的内容

我的网站

这是一个链接，它会把你带到 bob.fornal.org；请记住，你实际上看到的是 bob.fornal.org/index.html（如果未指定，index.html 是系统将显示的默认文件）。

练习：链接到本地页面

好的，现在让我们设置一个示例，以便我们可以更深入地探索这一点。

在你的Internet Files文件夹中，创建一个名为Genealogy的另一个文件夹（请记住，一旦这些文件在网上，它们将区分大小写）。

将之前创建的Index.html文件复制到新文件夹中。

编辑这个新文件，并更改一些内容

删除<img ... >标签。
更改背景颜色和字体颜色。
更改标题和文本。

保存你的更改.

（基本上，我们这样做是为了让我们能够看到这些页面是不同的）

现在，编辑你的原始Index.html文件，并添加以下代码

HREF 是超文本引用；简单来说，它指的是一个网页地址。这个 HTML 标签放置了一个指向新Index.html文件的链接。

现在，在Genealogy/Index.htm文件中添加以下代码

这个 HTML 标签在Genealogy页面上放置了一个链接，它会返回到你创建的原始Index.html文件。

注意 HREF 地址中的../。这表示我们需要向上移动一级（1）树结构。

练习：链接到外部页面/网站

好的，我们已经讨论过将图片放到页面上。你现在应该理解，图片可以从网页所在的同一个文件夹中引用，也可以从另一个位置（位于同一个域或另一个网站上）引用。

互联网真正的优势是能够引用其他页面...其他人的工作成果。这是通过链接实现的。

正如我们对图片所看到的，链接基本上分为两种类型 - 内部链接和外部链接。

内部链接: 链接到你的网站上的页面；不需要或只需要很少的路径信息。

外部链接: 正如你可能已经猜到的那样，这些是链接到其他网站上的网页。在这种情况下，你需要包含完整的路径信息。

在两种情况下，我们都使用相同的 HTML 标签。以下是一个简单的外部链接示例，供你放置在你练习页面的任意一个页面上

记住: 使用<br>来放置换行符。

... 变成 ...

Bob 的食谱

表格

现在来谈论一个稍微困难一点的话题。表格在您刚开始开发网页时非常重要。在以后，您很可能会了解到样式表（操作并不难，但会给您已掌握的内容增加很多）。在此之前，表格是调整对齐方式（左、中、右）最简单的方法之一。

在谈论标签之前，让我们先了解一下简单部分；对于大多数软件来说，当我们谈论表格时，它有行（横向）和列（纵向）。为了我们的目的，我们将有表格行（横向）和表格数据（行上的单元格）。第一行中的单元格数量决定了表格其余部分的列数。

以下是我们将使用的三个标签

<TABLE> </TABLE> - 表格打开/关闭
<TR> </TR> - 表格行打开/关闭
<TD> </TD> - 表格数据打开/关闭

现在我们需要做的就是单独讨论每个标签及其一些选项，以便在我们看到一些示例时能够更深入地理解。

TABLE 标签

这是我们之前讨论过的<TABLE ... > 标签。

可以将其想象为设置或配置整个表格的外框和背景。

以下列出了三个您最常使用的设置

width="#" - 其中 # 为像素或百分比。

border=# - 其中 # 为边框的厚度（以像素为单位）。

bgcolor=COLOR - 其中 COLOR 为背景色（与我们在 BODY 标签中使用的颜色相同）。

因此，您可以输入类似以下内容（这是一个示例... 不要将其输入您的页面中）

TR 标签

这是三个标签中最无聊的一个... 表格行。

有一些可用的选项，但通常我们不会使用它们。

因此，您最常输入类似以下内容

<TR>

TD 标签

好的，现在您已经看到了无聊的标签，让我们来看看让您忙碌的标签...

这是表格数据标签... 您所有信息（数据）都将放在这些打开/关闭标签内。在信息方面，我们指的是您可以显示的任何内容... 此时，您已经知道如何输入文本和图像（您也可以从这里进行链接）。

有四个您经常看到的选项（前两个您已经遇到过）

WIDTH - 与 TABLE 标签相同
BGCOLOR - 与 TABLE 标签相同
align=NNN - NNN 为水平对齐方式，选项包括（左、中、右）
valign=NNN - NNN 为垂直对齐方式，选项包括（上、中、下）

练习：创建一个表格

让我们从一个简单的示例开始，以下是来自 1930 年美国联邦人口普查记录的信息

姓名：John Fornal

1930 年的住处：康涅狄格州哈特福德县格拉斯顿伯里

年龄：42

估计出生年份：约 1888 年

出生地：波兰

与户主的关系：户主

配偶姓名：Victoria

家庭成员

姓名年龄

John Fornal 42

Victoria Fornal 40

Joseph Fornal 15

Stella Fornal 13

Annie Fornal 10

William Fornal 5

如您所见，每行都分解为两个项目... 容易转换为表格。

将以下代码粘贴到您的其中一个页面中...

<TD>姓名：</TD><TD>John Fornal</TD>

</TR><TR>

<TD>1930 年的住处：</TD><TD>康涅狄格州哈特福德县格拉斯顿伯里</TD>

</TR><TR>

</TR><TR>

<TD>估计出生年份：</TD><TD>约 1888 年</TD>

</TR><TR>

</TR><TR>

<TD>与户主的关系：</TD><TD>户主</TD>

</TR><TR>

<TD>配偶姓名：</TD><TD>Victoria</TD>

</TR></TABLE>

您能看到这些信息是如何组合在一起的，它们是如何嵌套的吗？

复制您刚输入的代码，并在记事本中再复制一份。使用上面提供的家庭成员信息，看看您是否可以自行创建一个包含该信息的表格...

标题

尝试将这些标签用作您之前创建的代码中的标题（或标题）...

<h1>这是一个大型标题</h1>
<h2>这是下一个较小的标题</h2>
<h3>这是下一个较小的标题</h3>
<h4>这是下一个较小的标题</h4>
<h5>这是下一个较小的标题</h5>
<h6>这是下一个较小的标题</h6>
<h7>这是最小的标题</h7>

有七个标题可用，通常五個就足够了...

粗体、斜体、下划线

在这里，您将看不到下划线标签 (<u>) 的使用；它已从标准 HTML 代码中删除（弃用），尽管大多数浏览器仍然支持它，因为它经常与链接项混淆。

<b>这是粗体标签</b>
<i>这是斜体标签</i>
<b><i>这是粗体、斜体标签</i></b>