網站製作基礎知識:從零開始學習HTML,製作出第一個網頁

2024 / 09 / 20
網絡時代,網站製作不僅是眾多品牌實踐線上行銷之路的必備武器,更成為無數人職業生涯中不可或缺的一部分。香港網頁(HKWEB)表示,無論是出於商業推廣、個人展示還學習交流的原因,掌握HTML(Hypertext Markup Language)都是踏入網頁設計領域的首要步驟。

那麼,如何從零開始學習HTML撰寫,以製作出自己的第一個網頁?

網站製作基礎知識:什麼是HTML?HTML包含哪些要素?

HTML(Hypertext Markup Language,超文本標記語言),是一種用來創建網站和APP的標準標記語言。由於HTML不包含任何邏輯判斷或程式流程控制語句,而是通過標記(Tags)來定義網頁的結構和內容,因此它不屬於程式語言的範疇。

HTML是由一系列元素(Elements)組成,這些元素主要分為三個部分,分別是起始標籤(opening tag)、內容(content)和結束標籤(closing tag)。

html-web-page-production-tutorial

網站製作基礎知識:嘗試創建你的第一個HTML元素

在HTML中,元素可以根據其特性和用途被分為多種類型,下面我們將介紹幾種常見的類型及用法:

1. 巢狀元素(Nesting element)

巢狀元素,顧名思義就是將一個元素放進另一個元素。例如我們想要強調自家貓咪非常兇,可以通過以下形式表達:

<p>My cat is <strong>very</strong> grumpy.</p>

需注意的是,由於我們先用p元素,然後採用strong元素,因此結束標籤頁應該是先關閉strong元素,再關閉p元素。否則,網頁瀏覽器將無法正確解讀HTML的意思,進而出現一個不如預期的結果。

2.區塊級元素 vs. 行內元素(Block versus inline element)

在HTML中有兩種元素類別是大家必須知道,分別是區塊級元素(block-level element)和行內元素(inline element)。

●   區塊級元素: 區塊級元素傾向於作為頁面上的結構化元素(structural element),舉凡段落、列表、導航選單、頁尾等等皆是。在網頁瀏覽器顯示時,區塊級元素通常會以新行來開始和結束,並且不會巢套在行內元素中,但有可能會巢套其他區塊級元素中。

●   行內元素:是指放在區塊級元素之中的內容,這些元素只由文件內容的一小部分組成,而非由完整段落或羣組式內容組成。一個行內元素不會在文件中產生新的一行,它們通常只會出現在一段文字中。

以下面這個例子來説:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p>
<p>fifth</p>
<p>sixth</p>

em屬於行內元素,所以在網頁瀏覽器顯示時,前三個元素互相緊鄰在同一行,兩兩中間並無任何空白。而p 是一個區塊級元素,所以每個元素都自成一行,並且上下都有一些空間。

3. 空元素

不是所有HTML元素都包含起始標籤、內容、結束標籤,有些可能僅有一個標籤,而且這些標籤通常用來在文件中插入/嵌入物件。這種HTML元素,我們通常成為空元素,例如換行元素<br>或圖片元素<img>:

<img src="image.jpg" alt="描述圖片">  
<br>  

這是一個換行。

4. 屬性(Attribute)

此外,我們也可以在元素中加入屬性,像是:

html-web-page-production-tutorial

屬性有著關於元素的額外資訊,但是網頁瀏覽器是不會顯示屬性內容。比如在上述例子中,class屬性的作用是給特定元素賦予一個名稱,稍後就能用這個名稱來指定元素的樣式及其他的東西。

在實際操作中,屬性可以根據其特性和用途被分為多種類型,下面我們將以<a>標籤為例,簡單説説常見的HTML屬性包括:

●  href:用於指向你想要鏈接的網址,當鏈接被點擊時,網頁瀏覽器就會導向導該網站。

●  title:用來附加有關連結的其他資訊,像是連結到的網站名稱。

●  target:指定用哪種方式打開網頁,例如在當前頁面打開鏈接、在新頁面打開鏈接、在新瀏覽器打開鏈接等。

●  布林屬性(Boolean attributes):有時我們會看到一些沒有值的屬性,這種就是布林屬性。它們只能附帶一個值,而這個值通常會和值的屬性屬性的名字一樣。以 disabled 屬性來説,你可以把它指派為input元素的屬性,使得輸入文字的框框變得不能輸入文字。

網站製作基礎知識:如何將所有HTML元素組合起來

很多時候單獨使用個別HTML元素,未必對網站製作有多大用處,所以我們需要將它們組合起來,才能創建一個真正的HTML網頁:

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>我的第一個網頁</title>  
</head>  
<body>  
    <h1>歡迎來到我的網頁</h1>  
    <p>這是一個段落。</p>  
</body>  
</html>

<!DOCTYPE html>:用於聲明文檔類型和版本。

<html></html>:該元素包裹住頁面的所有內容,有時也被稱作根元素(root element)。

<head></head>:該元素放著頁面中所有重要資訊,但這些資訊不會呈現在網頁瀏覽者眼前,如Meta標籤、CSS標籤等。

<meta charset="UTF-8">:這個元素指定文檔是使用UTF-8編碼,該編碼包含全球大大部分語言的字元,理論上可以處理所有想放文字內容。

<title></title>:該元素是用來設定網頁的標題,顯示在瀏覽器的標題欄或分頁標籤上。

<body></body>:這個元素包含網頁的所有可見內容,不管是文字、圖片、遊戲、可以播放的音樂或其他東西。

網站製作基礎知識:HTML最後一個重要知識點

HTML跟大部分程式語言一樣,提供一種能讓我們可以在原始碼中加入註解的方式。註解雖然會被瀏覽器忽略,並且不會被使用者看到的,但它可以讓我們在原始碼中説明你的原始碼是如何運作的、每段原始碼的作用等等。

尤其是當我們已經很長時間沒有察看某個網頁的原始碼,而且完全想不起來當時做過什麼時,又或者是我們需要將網頁原始碼交給別人一同協作時,註解將會是你的好朋友!
例如:

<!-- 這是一個註解,不會顯示在網頁上 -->  
<p>這是一個段落。</p>

相信通過本文的介紹,大家應該對HTML有大概瞭解,並掌握通過撰寫HTML元素來製作網站的基礎知識。當然,HTML只是網頁設計的冰山一角,想要讓網站後續的經營更順暢,我們還需要學習CSS來美化網頁,以及JavaScript來增加網頁的交互性。但無論如何,掌握HTML都是製作網站的必要條件。

更多文章

  • UI設計基礎知識:如何做好深色模式設計?為用戶帶來個性化體驗

    2025/02/11 深色模式與深色風格就像UI設計中的兩兄弟,雖形似卻有著本質的區別。前者是用來和淺色模式配對的反色模式,旨在為用戶提供更多個性化的選擇;而後者則如同一套優雅的晚禮服,以深色為基調,營造出沉穩而神秘的氛圍。
  • 進軍內地網絡營銷市場秘訣之開發小程序需要注意哪些事宜?

    2025/02/05 對於香港公司而言,內地市場不僅是一個龐大的消費藍海,更是一個充滿機遇與挑戰的新天地。那麼,如何在這片廣袤的土地上迅速站穩腳跟,實現業務的快速增長呢?答案或許就藏在「小程序」這個看似簡單實則強大的小工具裡。
  • 網頁設計技巧:如何設計令人眼前一亮的網頁動效

    2025/01/21 在紛繁複雜的互聯網世界中,網頁如同一個個虛擬的展示窗口,吸引着用户的目光。然而,在信息爆炸的今天,如何讓網頁在眾多競爭者中脱穎而出,成為用户心中的「白月光」?答案或許就藏在那些看似微不足道,實則充滿創意的動效細節之中。