自行開發建立 Web UI：部分了解 HTML

Web 開發是當今最受歡迎的技能之一。它涉及創建可透過瀏覽器訪問的用戶友好且引人入勝的網站。成為 Web 開發人員的第一步是了解 HTML。

HTML（超文本標記語言）是任何網頁的支柱。它是用來建立網頁的標準語言，決定內容在瀏覽器中的顯示方式。雖然頁面的外觀由CSS (層疊樣式表) 決定，其功能由JS (Javascript) 決定，HTML 負責基本骨架或結構。

在深入學習這部分課程之前，了解您的旅程中將使用的著名和反覆出現的術語非常重要。這些將幫助您隨著我們的進展理解概念（也讓作者更容易解釋事情;-)）。

---

了解行話

1. 程式語言：以電腦可以執行的特定語法（程式語言的方式）編寫的一組指令。請記住，電腦只能理解二進位代碼（1 或0），現在，為了使電腦理解邏輯並找到權衡，我們（人類）創建了一種程式語言，以便可以輕鬆地我們編碼，也讓電腦理解它。
2. 編譯器：將用程式語言編寫的程式碼翻譯成電腦可以理解和執行的機器語言的工具。
3. 語法：定義程式語言結構的規則。將其視為句子中單字的排列方式以使其有意義。
4. 註釋：程式碼中的註釋，解釋程式碼某些部分的作用。註釋可以幫助其他開發人員（或未來的你）理解程式碼背後的邏輯。
5. DOM（文件物件模型）：DOM 是 HTML 文件的樹狀表示。 HTML 中的每個標籤都成為該樹中的一個節點。例如，如果您的 HTML 有一個 帶有

   的標籤(paragraph) 在其中，瀏覽器建立一個主體節點，並以段落節點作為其子節點。

6. 孩子：隨著你的進步，你就會明白這一點。元素嵌套在另一個元素內。例如，在 HTML 中，div 標籤 (
   ) 內的段落標籤 (

   ) 將被視為 div 的子層級。

7. 區塊級元素：隨著您的進步，您將了解這個術語。這個術語通常描述元素的特徵，即它將佔據全部可用寬度。

---

使用 HTML 啟動

HTML 代表 超文本標記語言

• 超文本：指 HTML 將不同文件連結在一起的能力。

• 標記語言：使用標籤來註釋文本，定義文本在瀏覽器中的顯示方式。

這是 HTML 文件的基本結構：


  
    <title>HTML Tutorial</title>
  
  
    <p>Hello, world!</p>
  

• 標籤：在 HTML 中，標籤用來定義元素。標籤括在尖括號中，例如 或

  。

• 元素：由開始標籤和結束標籤組成，其中可能包含內容。例如，

  你好，世界！

  是一個段落元素。

---

HTML 文件結構

每個 HTML 文件都遵循一個基本結構：

1. : Declares the document type and version of HTML.
2. : The root element that encloses all other HTML elements.
3. : Contains meta-information about the document, such as the title and links to stylesheets.
4. : Sets the title of the webpage, displayed in the browser's title bar or tab.
5. : Provides metadata about the HTML document, such as character set, author, and viewport settings. It's a self-closing tag.
6. : Embeds CSS code to style the HTML elements.
7. <script></script>: Embeds JavaScript code for adding interactivity to the webpage.
8. : Encloses the content that will be visible to users on the webpage.

---

Commonly Used HTML Elements

Here are some basic HTML elements you’ll use frequently:

• : Defines a paragraph.
• : A block-level element used to group other elements together.
• : An inline element used to group text for styling purposes.
• : Represents the introductory content or navigational links of a section.

• to
  : Headings, with

  being the highest level and

  the lowest.

• 
  : Inserts a line break (self-closing tag — meaning there is no need to close the tag).
• : Used to create an HTML form for user input.
• : Creates an input field, typically used within a form.
• : Creates a dropdown list.
• : Associates a text label with a form element.
• : Defines a table.
• : Defines a row in a table.
• : Defines a cell in a table row.
• : Defines a header cell in a table row.
• : Defines an unordered (bulleted) list.
• : Defines an ordered (numbered) list.
• : Defines a list item.

---

Creating Your First HTML File

To create an HTML file, you can use any text editor, such as Notepad or VS Code. Here’s a simple example:

1. Open your text editor and type the following code:

  <title>HTML Tutorial</title>


  <h1 id="Example-Number">Example Number 1</h1>
  <p>Hello, world!</p>

1. Save the file with a .html extension (e.g., index.html)
2. Open the file in your web browser to see your first HTML webpage in action!
3. To inspect your code, press Ctrl + Shift + C in Google Chrome to open the Developer Tools and explore the DOM structure.
4. Go to the network tab in the Developer Tools and refresh your browser tab.

You can find that there is a request in the name that you have saved as in this picture.


In the response tab, you will find the code that you have written as in the following picture


Now, what happened is that, once you opened the file you have saved as html, the computer began running the file in browser. The browser wanted something to show, so it made a request call to the file from which it was launched. The file gave the browser your code and that was found in the response section. Since it was a html file, the browser begins reading the HTML code from the top to the bottom. This process is known as parsing. During parsing, the browser encounters different HTML tags (like ,

, , etc.) and starts to build a structure called DOM based on these tags. As the browser builds the DOM, it simultaneously renders the content on your screen.

---

Creating a Table

Let’s take a step further by creating a simple table in HTML:

1. Open the same HTML file and add the following code inside the tag:

<p>Table Example</p>

Name	Power	Is Kurama Present
Naruto	Rasengan	Yes
Sasuke	Sharingan	No

1. Save the file and refresh your browser to see the table displayed.

Notice the heading is being rendered by paragraph tag. Alternatively, you can also use

tag, which will center the heading of the table. Experiment with the caption tag and refresh to see the changes.

Note that

tag should only be used immediately after the opening tag.

You’ve now successfully created a basic table in HTML. Feel free to experiment with additional rows and columns to get more comfortable with HTML syntax.

---

Conclusion

Congratulations on completing your first steps into web development with HTML! The key to mastering HTML is practice. Experiment with different elements, create your own webpages, and don’t be afraid to make mistakes — every error is a learning opportunity.

Remember, this is just the beginning. As you continue to build on this foundation, you’ll soon be able to create more complex and dynamic websites. Let’s make the web a better place, one line of code at a time.

本文由 Anantha Krishnan 撰寫，他是一位在 IT 和機械工程領域擁有豐富經驗的專業人士。 Anantha Krishnan 擁有全端開發背景以及對機械和電氣系統的熱情，現在專注於創建教育內容，以幫助其專業領域的初學者。