在這個數字時代,想架設好一個高品質網站並不是一項艱鉅的任務。網站架設不再局限於復雜的程式語言,網頁設計和那些難懂的技術性知識。事實上,你有大量自由選項來完成網站架設,使用 HTML 架站就是其中一種。它經常被認為是網站架設選項裡最經濟高效的方式。你不需要很多技術知識就可以開始編寫 HTML。如果你願意為網站架設花費一點時間,那不妨學習架設一個 HTML 網站。
這篇文章有兩個目的。其一是為那些想要透過 HTML 架設網站的初學者提供一份簡單的指南。而另一個則是讓網站架設者們清楚地了解他們擁有的其他架站選項,因為在了解了更多更高效易上手的網站架設選項後,他們往往會發現 HTML 網站並不是最適合他們的。
文章綱要:
1. 什麼是 HTML 網站以及它的元素
2. 如何使用 HTML 製作網站?
3. HTML 網站 Vs 網站平台—哪個更好?
4. 如何使用Strikingly架設網站?
5. 文章總結
1. 什麼是 HTML 網站以及它的元素
我們將首先帶你了解關於 HTML 的基礎知識,並向你展示設定功能性 HTML 網站所需的步驟。你需要了解 HTML 網站能為你做到什麼。更準確來說,HTML 是一種超文本標記語言而不是一種程式語言。它不能用於建立動態網頁設計和圖像,但允許用戶組織和格式化網站設計和結構。你可以透過使用 HTML 為你的網站建立節,段落,標題,連結和應用程式。HTML 網站的有兩個重要的組成部分,即標籤(Tags)及屬性 (Attributes)。
- HTML 標籤 (Tags)
HTML 標記指的是你向 HTML 網站發出指令的方式。如果你希望你的網站顯示標題或組織頁面佈局,你可以使用標籤。標籤通常用尖括號表示,其中包含的文本就是標籤的說明。
HTML 標籤例子:
大多數標籤必須打開 < h1 > 和關閉 < /h1 > 才能起作用。
• HTML 屬性(Attributes)
另一方面,HTML 屬性則是為特定標籤提供主要功能的相關說明。它們通常位於一個標籤內,並由相同的尖括號標記。它用於為 HTML 網站添加圖像、影片、連結和其他外部設計與功能。
HTML 屬性例子:
這裡的圖片來源(src)和描述文本(alt)是標籤的屬性。
2. 如何使用 HTML 製作網站?
你不需要在高端計算機上使用精美的軟件來建立 HTML 網站。你可以在系統上的 HTML 編輯器直接執行此操作。打開電腦後,你可以按照以下步驟開始構建你的 HTML 網站。
• 文檔類型
讓我們從 HTML 文檔類型開始。你的 HTML 網站將開始於你建立 Doctype 文檔的那一刻。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
這就是你開始 HTML 網站的最基本方式。即使你想建立一個相當簡單的網站,你也必須編寫大量代碼。因此,始終建議你將所有 HTML 文件存取在一個文件夾中。 以下圖片將是你的網絡組織方式。
完成 doctype 文件只是為了告訴瀏覽器要如何讀取文件。接下來,你需要輸入指定頁面,設計,內容及佈局的程式碼。例如,About-us.html,Product.html,Services.html,Contact-us.html 等。
• 更多標籤 (HTML Tags)
Doctype 只是概述頁面基本佈局的文檔,你還需要為你的 HTML 網站添加其他元素和屬性。比如:
<head> 標籤包含與標題、元標籤等相關的所有元素和屬性。
<title> 標籤是你插入頁面標題的地方。
<meta> 標籤用於添加有關文檔的資訊,例如字元程式語言,名稱(頁面上下文),描述。
看看 head 部分的代碼會是什麼樣子:
<head>
<title>My HTML Website</title>
<meta charset="UTF-8">
<meta name="description" content="關於你的頁面的信息將顯示在此處。">
</head>
圖片取自 Unsplash
• 添加內容
這一部分是關於
標籤。你的 HTML 網站上的所有內容都顯示在此處。它包括 HTML 網站上的文本,圖像,表單和所有其他元素的設計輸入。(一)首先,先為 HTML 網站添加標題:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
標籤
和是最重要的標題,其餘標籤將用作副標題或其他附加內容。注意:此資訊可幫助搜索引擎了解要在搜索結果中顯示的內容。
(二)接著讓我們試一試在 HTML 編輯器的新行中鍵入:
<h1>Welcome to My HTML Website</h1>
在新文件夾中將此文件另存為“index.html”並將其命名為“我的網頁”。
(三)最後為我們的 HTML 頁面添加文本:
只需使用一個標籤 < p > 打開的元素建立一個新段落,並將所有常規文本放在元素 < p > 中。 當我們用 HTML 編寫文本時,我們還可以使用許多其他元素來自定義文本或使其以某種方式出現。這些標籤必須圍繞相關文本並記得輸入打開和關閉。你可以透過鍵入以下 HTML 代碼試試:
<p>Welcome to<em>my</em> HTML Website. You can all my<strong>latest updates<strong>here.</p>
存取你的頁面以查看你的更改。提示,你可以記下一些常用的元素標籤如:
<b>=粗體
<Strong>=突出
<i>=斜體
<em>=加強
<u>=為字體添加下橫線
- 添加樣式表
建立一個樣式表並將其命名為“style.css”,然後存取到名為“css”的新文檔中。這個 style.css 文檔將幫助你設計你的網頁。記住在關閉 head 標籤之前添加一行程式碼,內容為:
<link href="css/style.css" rel="stylesheet" type="text/css">
這行程式碼通知瀏覽器需要在加載網頁時查找樣式表。 好啦!HTML 網站指南到此為止,現在你可以開始建立自己的 HTML 網站了。
3. HTML 網站 Vs 網站平台—哪個更好?
圖片取自 Strikingly產品
如果你想建立一個專業的網站,僅具備一些基本的程式語言知識是不夠的。你需要很好地掌握 HTML,否則你只會浪費本可以放在其他地方的寶貴時間。程式語言架站並不快,即使你要聘請專業人士,也必定需要一大把時間。因此,你可以想像如果你計劃現在才開始學習一些 HTML 指南來架設網站,將會是怎樣的情景。而且!建立了網站並不意味著你的工作就完成了,你必須持續更新你的網站以優化它在搜索引擎的排名,這也意味著你需要不斷更改程式碼。
現在開始尋找另一種網站架設選項還不遲。如果你毫無經驗,預算有限,又不想浪費一大把時間從程式設計開始學起,那我會推薦你使用網站平台/網站架設器。網站平台是一種工具,能為你提供比 HTML 要簡單得多的架站服務。
- 無需程式語言
你無需學習任何程式語言或了解網站的運作方式。你所需要做的就是在像 Strikingly 這樣的網站平台上建立一個帳戶,然後從海量高品質免費模板中選出自己喜歡的,添加內容和修改佈局,完成後一鍵發布即可。
圖片取自 Strikingly產品
- 快速
如果你要從學習 HTML 開始架設一個網站,那絕對不是一天兩天就能完成的。與架設 HTML 網站相比,在像 Strikingly 這樣的網站平台上架設網站則要快得多。由於程式碼是內建的,即使你沒有任何專業知識也可輕鬆操作。
- 用戶友好
即便你對使用網站平台架設網站毫無經驗,你依舊可以架出一個看起來比 HTML 網站好得多的網站。以 Strikingly 的簡單用戶界面為例,任何具有基本計算機技能的人都可以在沒有任何外部幫助的情況下透過 Strikingly 建立一個功能齊全的網站。而且更驚喜的是,Strikingly 架出來的網站都是響應式設計的,匹配所有行動設備哦!
圖片取自 Strikingly產品
- 輕鬆更新
要在 HTML 網站中更改或更新網站是非常艱辛的。與之相反,像 Strikingly 這樣的網站平台則能輕鬆幫你完成這項任務。用戶友好的編輯工具將網站管理最簡化。不論是添加新頁面,更改橫幅,添加電子信箱等,你都可以透過 Strikingly 輕鬆完成。
4. 如何使用 Strikingly 架設網站?
首先在 Strikingly 建立一個免費帳戶。你可以使用你的電子信箱 ID 或 Google 帳戶登入。註冊後,你將能夠從 Strikingly 龐大的架站模板庫中選擇適合的模板開始架站。你可以全面自訂網站,添加一些必要的頁面,按鈕,圖片,文本和內容完善你的網站。完成後便可發布你的網站並查看它在網絡上的樣子。當你的網站一切已準備就緒,請為你的網站註冊網域。你可以將帳戶升級至 Pro來享有更多專業網站功能,最大化開發你的網站潛能。
圖片取自 Strikingly產品
透過 Strikingly,網站架設就是這麼簡單。無需學習 HTML,無需投入大量資金和時間。你還在等什麼?馬上到 Strikingly 獲取你的專屬網站吧!如果對內容有疑問,可以透過 support@strikingly.com 與我們聯絡。