為您的網站設定 CSS 和 HTML：教學

Preslav Dobrev2022-10-28 · 2 min read

建立網站是開始網頁開發的第一步。網頁開發愛好者必須學習的第一件事，就是如何為網站設定 CSS 和 HTML。透過設定基本的入門頁面，初學者可以做好網站設計基礎的準備、磨練網頁開發技能，並學習與開發人員協作。

本教學將 引導您了解為網站設定 HTML 和 CSS 檔案的基礎知識。 讓我們開始吧！

先決條件

對 HTML 和 CSS 的基本了解。

步驟 1 - 初始設定

首先，我們將建立一個新的專案目錄，並將其命名為 demo-project :

mkdir demo-project

1	mkdir demo-project

接下來，使用 cd 指令：

cd demo-project

1	cd demo-project

在專案資料夾中，讓我們新增啟動基本網站所需的以下檔案：

index.html ：此檔案將包含所有的 HTML 程式碼。
styles.css ：我們將把所有用於網頁樣式設計的 CSS 檔案放在這裡。
images ：所有必要的圖片都必須放在此資料夾中。

現在我們已經建立了專案目錄並新增了必要的檔案，讓我們繼續前進，在下一步中將 HTML 內容新增到我們的 index.html 中。

步驟 2 - 在 index.html 檔案中新增 HTML 內容

在我們於上一步建立的 index.html 檔案中，我們將新增入門的 HTML 程式碼。這些基本的 HTML 行將作為瀏覽器的指令，但不會顯示在網頁上。

在您的 index.html 檔案中新增以下程式碼區塊：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

注意：在新增這些程式碼區塊之前，請確保 index.html 檔案是空的。此外，請考慮變更 <title> 區段中醒目顯示的標題。

讓我們來了解所使用的術語：

<!DOCTYPE html> ：這是一個宣告，用於通知瀏覽器該 HTML 文件中所使用的 HTML 類型。
- 由於有多個版本的 HTML 標準，指定 DOCTYPE 可讓瀏覽器輕鬆識別 HTML 版本。例如，在本指南中，我們使用的是最新版本的 HTML5.
<html> : 此標籤通知瀏覽器，其中包含的內容必須被視為 HTML。當開啟 <html> 檔案時，請確保使用 </html> 標籤將其關閉。此標籤支援 lang 屬性，您可以指定網頁的語言。在我們的教學中，我們使用 en 語言標籤將語言設定為英文。
- 訪問 IANA Language Subtag Registry 以查看其他可用的語言。
<head> ：這會在 HTML 文件中建立一個區段，並包含有關網頁的資訊。然而，這裡沒有詳細的內容，瀏覽器也不會在 head 區段中顯示任何資訊。
<meta charset="utf-8"> ：指定文件的字元集。它必須是 Unicode 格式，即 UTF-8，支援大多數公認的書寫語言。
<title> : <title> 標籤會通知瀏覽器網頁的名稱。當網站列在搜尋結果中時，標題會顯示在瀏覽器分頁上。
<link rel="stylesheet" href="css/styles.css"> ：通知瀏覽器識別包含 CSS 樣式的樣式表。
<body> : 此標籤包含網頁的主要內容。當使用 <body> 標籤時，請確保使用 </body> 標籤將其關閉。

步驟 3 - 使用 CSS 進行樣式設計

在 styles.css 檔案，根據您的專案需求添加樣式。在此範例中，在您的 styles.css 檔案：

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

我們終於建立了啟動網站所需的基本 HTML 和 CSS 檔案。此外，您可以添加圖片並將它們保存在 images 資料夾中。儲存並關閉檔案。之後，打開 index.html 檔案於您最喜愛的網頁瀏覽器中，您將在螢幕上看到一個基本頁面。

結論

在此入門教學中，我們已經學習了設定 HTML 和 CSS 的基礎知識，並建立了一個初步的網站。現在是建立新頁面、進行調整、添加內容並從導覽列連結所有內容的時候了。作為下一步，請嘗試向 index.html 檔案，並使用 CSS 為其設定樣式。

此外，您還可以在以下平台找到其他 HTML 和 CSS 教學：我們的部落格:

祝您寫程式愉快！

Preslav Dobrev

作者 · CloudSigma

Preslav Dobrev 是 CloudSigma 的創意設計師，專注於透過傳統與創新行銷渠道建立一致的企業形象。他擅長將藝術願景與策略行銷相融合，創造具有影響力的品牌敘事。