網站建立

下一步是確定您想要在網站上放置的內容。確定了內容後，您需要確定最佳的展示方式。在確定資訊展示方式時，您需要決定如何開發網頁。所有網頁的基礎都是 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>