練習：建立 HTML 頁面

  • 5 分鐘

在此練習中，您會開始建立履歷網頁。 首先，您會新增一些高階資訊，例如您的名稱和區段標頭。 您也會新增一些註解，我們將用來做為稍後練習中新增資訊的位置標記。

本練習使用 vscode.dev - Web 版的 Visual Studio Code 和 CodeSwing。 這些工具有助於簡化開發程式。 不需要本機安裝即可完成後續練習。

使用 CodeSwing 建立 HTML 頁面

您可以先建立一個資料夾、設定您的工具環境，並在 vscode.dev 中使用 CodeSwing 建立一個 "swing"。 自動機制會顯示您在 VSCODE.DEV 上撰寫的程式碼結果。 這可讓您快速進行修改，並實時進行更新。

下列影片示範如何在 Visual Studio Code 中安裝 CodeSwing。 這些步驟也包括在練習步驟中。

  1. 在名為 resume 的桌面上建立資料夾。
  2. 開啟 vscode.dev。
  3. 請選取 [開啟資料夾]。
  4. 流覽至您稍早建立的 履歷 資料夾，然後選取 選取資料夾。
  5. 當系統提示您 [讓網站檢視檔案] 時，選取 [檢視檔案]。
  6. 選取 [延伸模組] 按鈕。

    延伸模組圖示的螢幕快照。

  7. 在 [ Marketplace 中的搜尋延伸模組 ] 文本框中，輸入 CodeSwing。
  8. 選取 [安裝] 以安裝 CodeSwing。
  9. 選取 Mac 上的 Ctl-Shift-P 或 Cmd-Shift-P ，以開啟命令選擇區。
  10. 在命令面板中輸入 CodeSwing，然後選取 CodeSwing: 目錄中新建 Swing...。
  11. 選取 [選取資料夾] 以使用目前目錄 (這是您在先前步驟中建立的目錄)。
  12. 選取 [基本：僅限 HTML]。
  13. 當系統提示您儲存 變更以繼續 時，請選取 [儲存變更]。

Visual Studio Code 會並排建立兩個視窗。 左側是編輯器，您可以在其中輸入 HTML。 右側的區域就像瀏覽器，會顯示 HTML 程式碼的結果。

新增 HTML 以建立頁面的結構

接下來，您會新增 HTML 來建立頁面的結構。 您建立 html、head 和 body 這三個主要元素。 在 中 body，您會新增一個區段，其中包含有關您的一般資訊，例如您的名稱和社交媒體資訊。 然後，您可以新增列出教育與體驗的區段。

下列影片示範如何在 Visual Studio Code 中撰寫 HTML，並在 CodeSwing 中轉譯程式代碼。 這些步驟也包括在練習步驟中。

請隨意將Your name替換為您的名字。 在其他練習中，您會建立與您的電子郵件地址、社交媒體帳號，以及學歷和經驗相關的清單和連結。

新增程式代碼之後，您將檢閱已新增的程序代碼。

  1. 在 index.html內，新增下列 HTML：
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

HTML 中的每個元素都會執行特定動作。 下表描述您在 HTML 中使用的標記，以及瀏覽器如何了解它們。

標籤 說明
<html> 整個 HTML 檔的 「container」 標記。 所有其他標記都會寫入 HTML 元素內。
<head> 標題容器。 標頭通常包含頁面或網站需要的其他檔案連結。 它也可以包含搜尋引擎和社交媒體網站用來更好地尋找您的網站的數據。
<body> 此標記會建立網頁的主體容器。 大部分的顯示元素都會放入 body 元素中。
<div> 分割標記會在 HTML 中建立區段。 區段通常會有與彼此相關的類似內容或內容。
<h1> - <h6> 這些是標頭標記。 它們會提供 HTML 檔的一些結構。 他們會告訴瀏覽器以特定方式格式化它們之間的文字，以顯示該階層。
<!-- comment text --> 這些標記是 HTML 中的批註。 它們不會產生渲染的輸出。 開發人員會使用它們，讓程式代碼更容易尋找、共用和瞭解。
/* CSS comment */ 這些批註標籤用於級聯樣式表單中。
  1. 當您輸入時，頁面會自動更新;最終結果看起來類似下圖：

履歷結構的螢幕快照。

檢閱程式代碼

每個 HTML 頁面都有 html 作為根核心元素，其中包含其中的所有內容。 html 通常有兩個直接子系， head 其中包含元數據，以及 body 包含要顯示的資訊。

請注意，您只需針對您的名稱使用一個 h1 元素，而針對每個區段的標題使用 h2 元素。 這是為了幫助突出頁面上最重要的部分。 您的名稱是頁面上最重要的資訊片段;因此，它會使用 h1 取得最高計費。

最後，有電子郵件位址、社交媒體、教育和體驗的批注。 這些會作為預留位置使用，將在本課程模組稍後的練習中取代。