建立簡單網頁

是時候讓我們動手了！（從某種意義上說。）

文字結構

在第一章中，我們闡述了學習本課程的要求，並提供了一個簡單的練習，讓您建立第一個簡單的網頁。如果您還沒有完成該練習，請現在去做。

輸入文字編輯器並儲存到硬碟或其他儲存介質的文字通常稱為“純文字檔案”。純文字檔案通常提供三種簡單的方法來分隔文字。製表符和空格用於分隔單詞，回車用於分隔段落。

人們已經找到了使用這些簡單的標記方法來製作複雜佈局的創造性方法。然而，在網頁中，這種佈局文字的方法行不通。網頁瀏覽器會將所有連續的空格、製表符和回車摺疊成一個空格或軟回車，具體取決於單詞在行上的位置。HTML 採用完全不同的佈局方式，我們將在後面討論。

當您構建文字時，通常是為了使其更容易消化和閱讀。透過使章節和標題更加突出，您允許讀者瀏覽文字，直到找到特別感興趣的部分。透過使用引言和摘要，您可以讓讀者決定是否對該文字感興趣。您可以使用插圖，因為有時人們在看到發生的事情時更容易理解。

HTML（網頁超文字標記語言）及其後繼者 XHTML（可擴充套件超文字標記語言）允許您對純文字文件施加結構。它用自己的方法取代了純文字允許的幾種簡單的標記方法。（注意：XHTML 已被 HTML5 取代。）

HTML 透過允許您將文字的某些部分標記為標題、段落、影像、表格、列表等來實現這一切。HTML 不支援某些結構，因為它是一種相對簡單的標記語言。例如，沒有用於引言或導語的元素。讀者必須從文字中的位置推斷出引言、導語或摘要。

HTML 文件的每個部分稱為元素。元素透過一種稱為標籤的標籤彼此分隔。

一個例子

 <p>This is an <em>important</em> example.</p>

您在上面看到的是一個包含嵌入式強調元素的段落元素。段落元素以<p>標籤開頭，以</p>標籤結尾。強調元素以<em>標籤開頭，以</em>標籤結尾。

網頁的另一個名字...

HTML 標準有幾個版本。最新的版本是 HTML5。但是，網頁瀏覽器也應該支援標準的舊版本，因此像“要求”章節中給出的示例這樣的示例被認為是有效的 HTML 文件。

每個網頁都必須包含一個title元素（在 HTML 的舊版本中，這是唯一必需的元素）

 <title>My webpage</title>

標題是瀏覽器視窗用來命名的文字。它是出現在瀏覽器視窗頂部的文字，也是瀏覽器使用的書籤（或收藏夾）的預設名稱。它也是搜尋引擎用來列出頁面的標題。

找到一個描述性的標題。您頁面的標題通常就可以了。本章的標題是“建立簡單的網頁”，因此它的標題可以是相同的文字。由於此網頁向您解釋如何建立簡單的網頁，因此這是一個絕佳的標題。

網際網路上充斥著糟糕的標題。例如，一家公司可能會將其頁面命名為

 <title>Big Fridge Manufacturer Inc.</title>

如果您幸運，他們甚至會新增一些與您訪問的網頁相關的資料，例如

 <title>Big Fridge Manufacturer Inc. - Manual of the Cool 3000 ice box</title>

對於訪問者來說，更好的是

 <title>Manual of the Cool 3000 ice box - Big Fridge Manufacturer Inc.</title>

畢竟，訪問者更有可能訪問此頁面是為了尋找手冊，而不是尋找公司資料。

因此，教訓是：始終將重要資訊放在首位。通常，您在書籤選單、搜尋引擎列表或視窗標題欄中只有有限的字元可用；請最大限度地利用這些空間。

只有標題元素的 HTML 文件沒什麼用。我們現在將向您介紹一些元素，讓您能夠充分利用網路 90% 的功能。

一個簡單的連結網頁

title: 頁面的名稱。
h1: 頁面上最重要的標題（通常與標題相同）。
h2: 副標題。
p: 段落。
a: 連結。

使用這些元素，我們可以製作以下簡單的網頁

<!DOCTYPE html>
<html>
 <head>
  <title>Friends and family of Clemence Wylie</title>
 </head>
 <body>
  <h1>Friends and family</h1>
  <p>The following are links to the websites of my friends and family</p>
  <h2>Friends</h2>
  <p><a href="http://www.tomsawyer.us">Tom Sawyer</a></p>
  <h2>Family</h2>
  <p><a href="http://www.tantejeanette.ca">Aunt Jeanette</a></p>
 </body>
</html>

練習 2-1

將上面的示例程式碼複製到您的文字編輯器中。將其儲存為 exercise2-1.html。在網頁瀏覽器中開啟它。它顯示得像您預期的那樣嗎？

答案

有關答案，請參閱問題和練習答案.

建立連結

前面示例中的a標籤具有特殊用途。它們建立錨點。（錨點通常被稱為“連結”。）它們包含具有附加值的屬性。屬性是標籤的一部分，它向瀏覽器提供有關元素的附加資訊。每個屬性後面都跟著一個等號（=）和一個用引號（"）括起來的値。

a標籤有幾個可能的屬性。最重要的屬性是href和id。href是定義 URL（統一資源定位符）或 URI（統一資源識別符號）（通常稱為“地址”）的屬性。這是連結指向的目的地：另一個文件，或同一個文件中的某個位置。通常，地址稱為 URL；但是，這種做法已經過時，現在建議您使用更廣泛的術語“URI”，而不是 URL。^[1]

id是連結的唯一名稱，其他連結可以使用它來引用該連結。

（注意：以前的 HTML 版本使用name而不是id。）

URI 通常具有以下形式

protocol://domain/path#named_anchor

例如

https://www.example.com/books.html#section2

網頁的協議通常是http（超文字傳輸協議）或其安全變體https。在本例中，連結將帶您到www.example.com域上的books.html文件的section2部分，使用https。

但是，請注意，這其中的大多數部分是可選的，具體取決於您希望如何使用 URI。URI 可以是相對的，也可以是絕對的。絕對 URI 將包含域作為地址的一部分。（www.example.com部分。）

一個href可以只是一個相對路徑（例如wines/french/red/bordeaux.html）：在這種情況下，地址將根據包含連結的頁面計算得出。

href 也可以只是一個域名：http://www.example.com/ 將連結到該地址的網站；該網站的 Web 伺服器應該弄清楚你想要哪個文件。這通常預設為 index.html 或 default.htm。

元素分解

一個 HTML 文件由元素組成。這些元素的構建方式如下

<tag>;contents</tag>

開始標籤可以包含屬性。屬性通常具有值。

<tag attribute1="value" attribute2="value2" attribute3>

關閉元素的標籤與開始標籤相同，只是在名稱前有一個斜槓，並且不能包含屬性

</tag>

有些元素不能包含其他元素。HTML 標準定義了哪些元素可以被某個元素包含。允許的組合在不同的版本中有所不同。

元素要麼是塊級元素，要麼是內聯元素。對於塊級元素，瀏覽器會在自己的“塊”中設定元素。它在元素前後都放置一個回車符。一些示例包括標題（h1、h2、h3 等）、段落（p）和列表項（li）。內聯元素不會以這種方式處理，因此（例如）它們可以插入到段落中而不會破壞段落的流程。這方面的一些好例子包括錨點（a）、強調（em）和影像（img）。

塊級元素可以包含內聯元素，但內聯元素不能包含塊級元素。

例如，以下 HTML 是有效的

 <h1><a>Valid HTML</a></h1>

但這不行

無效：<a>

無效 HTML

</a>

</syntax>

有效性

術語“有效 HTML”已經提到過幾次。由於網頁是由人編寫的，而人會犯錯，因此 Web 瀏覽器往往對這些錯誤非常寬容。他們甚至會嘗試糾正你的錯誤。

儘管如此，仍然有幾個理由讓你應該嘗試用有效的 HTML 來標記網頁

不同的瀏覽器可能會以不同的方式糾正你的錯誤
未來的瀏覽器可能不會像現在這樣寬容
有效的 HTML 更容易閱讀和維護
在嘗試糾正錯誤的標記時，如果你沒有被其他可能的錯誤所困擾，這將很有幫助

負責維護 HTML 標準的組織是全球資訊網聯盟。它執行著一個驗證服務，你可以用它來檢查你的 HTML 是否有效。你可以在 http://validator.w3.org 找到它。使用此服務驗證你的 HTML 是一個好習慣。

一個常見的錯誤是忘記在每個文件開頭使用 DOCTYPE。沒有 DOCTYPE 的文件會自動失效 (HTML 版本資訊)。注意：許多文字錯誤地指出 DOCTYPE 是可選的。所有主要瀏覽器都會容忍 DOCTYPE 的缺失，但這並不意味著頁面有效。如果省略了 DOCTYPE，頁面的外觀可能會在不同的瀏覽器之間明顯不同，因為每個瀏覽器在渲染此類頁面時都有自己的特殊之處。

練習

是時候玩一玩了。以下練習將讓你製作一些簡單的網頁和網站。目標是教你多種連結方式的力量。

練習 2-2

將上面的示例網頁複製到剪貼簿，然後開啟 http://validator.w3.org。將示例貼上到“透過直接輸入驗證”部分，然後單擊“檢查”。示例有效嗎？

練習 2-3

如果你有一個錨點 <a id="anchor1"></a>，那麼 <a href="#anchor1">link</a> 將連結到它。這意味著當你啟用連結時，網頁將從錨點開始顯示（而不是像往常一樣從頂部開始）。

複製你在練習 2-1 中建立的網頁，並將其儲存為 exercise2-3.html。更改此檔案以在頂部包含一個“選單”錨點，這些錨點連結到不同部分（家庭、朋友）的標題。

練習 2-4

有一種混合了書籍和遊戲的形式，叫做“你自己選擇冒險”（CYOA）。在這類遊戲書中，你會像閱讀普通書籍一樣閱讀一些文字，但過了一會兒，你就可以選擇如何繼續。

例如

你坐在浴缸裡，泡澡放鬆。你的橡膠鴨子高興地喋喋不休，突然一條梭子魚從下面抓住它，把它拖了下去。

- 如果你潛入水中救鴨子，請轉到第 89 頁

- 如果你拔掉塞子排掉浴缸裡的水，請轉到第 24 頁

在這個練習中，你將編寫一個簡短的 CYOA，其中的選擇由錨點表示，這些錨點將引導你到繼續該選擇的文字。每個“章節”都必須是一個單獨的網頁。

保持簡潔，不要花太多時間在這個上面。十到二十個網頁就足夠了。故事不需要很好或完整。

提示：建立一個模板 HTML 檔案，你可以使用它作為所有後續章節的基礎。

練習 2-5

建立一個網頁，並將其儲存為“exercise2-5.html”。該網頁應該包含關於你選擇主題的簡短、資訊豐富的文字。它應該包含至少三個指向有關該主題的外部網站的有效連結。

答案

有關答案，請參閱問題和練習答案.

影像

使用 img 元素在網頁上包含影像。img 屬於一類稱為“自閉合”的元素。自閉合元素沒有結束標籤。相反，它們以 /> 結束。（在 HTML5 中，斜槓是可選的；但是，建議將其包含在內。）

img 元素有兩個必填屬性：src 和 alt。

src 以 URI 作為其值。在這種情況下，URI 將是影像的“地址”（位置）。

由於 URI 可以是相對的，如果影像位於與包含它的網頁相同的資料夾中，則 URI 可以僅包含影像的檔名。更常見的是，影像會與其他影像一起位於名為 img 的目錄中。建議將影像儲存在單獨的目錄中，因為這將使你的網站更有條理。

alt 屬性包含一個文字描述，該描述在無法顯示影像時出現。例如，如果影像是一張帶有城堡的湖泊照片，你可以使用以下程式碼

<img src="img/lakecastle.jpeg" alt="湖泊和城堡的照片" />

當影像的目的是裝飾性時，你可能想要使用空的 alt 值。這樣，當頁面顯示時，“裝飾性”文字不會中斷頁面主要文字的流程。

<img src="img/prettypattern.jpeg" alt="" />

但是，當影像在網頁上具有功能時，alt 文字的存在對於無法看到影像的訪問者非常重要。例如，許多網頁都使用連結選單構建導航，其中連結由影像表示。如果影像無法顯示，並且沒有 alt 文字，使用者將無法使用導航。

<a href="family.html"><img src="img/button-family.png" alt="家庭" /></a>

img 元素允許你在頁面上嵌入影像。當然，你也可以連結到不想在頁面上顯示的影像，因為它在頁面上沒有作用。例如，如果你想讓人們有機會下載你拍攝的照片，你可以提供指向這些照片的連結。為此，你使用與我們一直在用來連結到其他網頁的相同 a 元素

<a href="img/lakecastle-large.jpeg">湖泊和城堡的照片（JPEG，512 KiB）</a>

請注意，你可以建立指向可以使用 URL 定位的每個檔案的連結。透過指出照片儲存在 JPEG 格式（照片中非常常見的格式）中，並指出檔案大小，我們讓訪問者有機會決定他們 A）是否可以使用這種格式的檔案，以及 B）是否願意下載此大小的檔案。

預格式化文字

HTML 包含許多其他元素（例如，HTML 4.01 包含 91 個不同的元素），但現在我們只討論一個，然後再繼續討論網頁寫作的風格。

pre 元素允許您保留純文字格式（正如本章開頭簡要討論的那樣）。這意味著在元素內部，連續空格、製表符和硬回車不會摺疊成單個空格或軟回車。

這個元素幾乎沒有用。它阻止文字在瀏覽器寬度縮小或擴充套件時整齊地重新流動，導致訪問者水平滾動，而網頁瀏覽者通常不喜歡這樣做。HTML 及其配套佈局語言 CSS 有很多選項來顯示換行符和縮排。此外，在非視覺化瀏覽器中它幾乎沒有意義。

但是，當您想從其他文件中複製預格式化文字時，在您有時間標記該文字之前，使用 pre 元素可能會很方便。

示例

<pre>1  2    4        8</pre>

進一步閱讀

在本課程的後面，我們將討論更多元素。但是，本課程的意圖不是讓你精通 HTML；而是讓你精通網頁創作。

一般來說，要完全理解某件事，你需要先完全理解它的形式。如果你不能完成各種動作，你就不能成為一個成功的空手道家。如果你沒有掌握法語的語法和詞彙，你就不能成為一個成功的說法語的人。然而，知道所有打人的方法並不能讓你成為一個優秀的空手道家，知道法語的所有單詞和規則也不能阻止你在下次需要說法語時變成一個結結巴巴的猩猩。

要完全理解網頁創作，你需要超越你用來編寫它們的語言。這就是我們在本書的大部分後續章節中要做的。

世界網際網路聯盟的官方 HTML5 建議可以在這裡找到。雖然這份文件有時可能很難閱讀，但它代表了關於什麼是有效的 HTML5 以及什麼不是的最後結論。

此外，HTML 4.01 建議的作者之一戴夫·拉格特編寫了幾本關於 HTML 及其配套佈局語言 CSS 的實用指南，您可以在 http://www.w3.org/MarkUp/#tutorials 找到它們。如果您在本節以及後續章節中發現有您不完全理解的部分，那麼研究戴夫的文字可能是一個不錯的選擇。它們的清晰度遠遠超過官方規範，而且篇幅足夠短，可以與本文字一起學習。

參考資料

↑ “URL 和 URI 之間的區別”。Daniel Miessler。 https://danielmiessler.com/study/url-uri/

上一步：簡介 - 上一級：目錄 - 下一步：如何為網頁寫作

[1] “URL 和 URI 之間的區別”。Daniel Miessler。 https://danielmiessler.com/study/url-uri/

[1]

網頁創作/建立簡單頁面