菜鳥工程師肉豬: HTML 撰寫你的第一個HTML網頁教學

2019/7/7

HTML 撰寫你的第一個HTML網頁教學

本篇教您如何撰寫你的第一個HTML網頁教學。

HTML文件，為所有網站(Websites)的基礎，我們使用瀏覽器(Browser)在網路上瀏覽網站時，每一個在瀏覽器中顯示的畫面，背後的基礎都是由HTML文件(HTML documents)所構成的網頁(Web pages)。每一個頁面背後其實就是一份HTML文件，所以學習如何製作網站的第一步就是要知道什麼是HTML。

下面是一個簡單的HTML範例。此時你先不用管內容裡面的那些奇怪符號，先照著步驟做就對了，之後我會在一一解釋每個符號的意義。

`welcome.html`

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>您好，歡迎光臨</h1>

</body>
</html>

一般來說，HTML標籤都會有一個開始標籤(Start tag)，一個結束標籤(End tag)，中間包夾著內容(Content)。

結束標籤前面會有一條斜線/。

HTML標籤是大小寫不敏感的(case-insensitive)，意思是說
<H1>與<h1>意思相同。

首先打開文字編輯器(Text editor)，例如Windows的記事本(Notepad)。打開記事本後將以上內容複製(copy)（請習慣使用Ctrl + C）貼到（Ctrl + V）記事本中。

然後在功能選單點選檔案(File) -> 另存新檔(Save as)。

接著依下圖紅圈部分做修改，
把[存檔類型(Save as type)]更改為[All Files (*.*)]，
[檔案名稱(File name)]命名為welcome.html（你可以任意命名，只要記得後面要加上副檔名.html，例如home.html），
[編碼(Encoding)]改為[UTF-8]，
點選[桌面(Desktop)]做為存檔的位置，
最後按存檔(Save)確定儲存。

存檔後在桌面就會出現一個剛存檔的welcome.html。

welcome.html的檔案圖示(icon)可能因為你預設開啟的程式和我不同而長得不一樣，例如我預設都是用Chrome瀏覽器來打開副檔名為.html的文件，所以顯示的是Chrome瀏覽器的圖示，但不用管圖示是否一樣，直接點選兩下welcome.html，通常就會你的瀏覽器就會自動開啟這份文件如下。