製作 HTML 網頁樣版檔
當我們在製作一個網站的時候，除非你是做一頁式網站，不然通常不會只有首頁 index 一個檔案，可能還會有最新消息、關於我們和聯絡我們…… 等等的頁面，這個時候如果有一個樣版檔在手，那麼在製作上就會方便很多，也就是事先把 html 標籤、head 標籤裡的 meta 資訊等等，都先打在樣版檔，等到要製作其它頁面時，只要複製樣版檔就能直接開始撰寫，不需要把 html 標籤從頭再寫一次！
雖然之前有寫過一篇「初探 HTML」文章，稍微介紹了一點 HTML，但這次還是會手把手帶同學再做一次，順便補充一些之前沒講到的！
- 首先開啟妳的萬能記事本，並輸入以下標籤：
<!-- 註解說明：這是網頁的樣版檔 -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
</head>
<body>
</body>
</html>解說
第一行為註解，註解文字要用「<!–」和「–>」框起來。
第二行 DOCTYPE 為宣告，宣告我們的網頁現在是用哪一個版本的 HTML。(現在是 HTML5)
第三行 html 標籤為整個 HTML 文件最外層的標籤(第一行註解和第二行宣告不算)，其中 head 和 body 標籤，都要放在 html 標籤的裡面；此標籤的 lang 屬性是設定文件的語言識別碼，這裡我們用 zh-TW 繁體中文。
第四行 head 標籤，設定網頁的標題、文字編碼、關鍵字及簡介…… 等等，還能匯入 CSS 和 JavaScript 外部檔案。
最後的 body 標籤，放在 head 標籤的”底下“(不是裡面喔~)，凡是我們能在網頁上看到的東西，都會寫在 body 標籤裡面。
2. 將以下 meta 和 title 標籤，寫在 head 標籤的裡面。
<meta charset="UTF-8">
<title>網頁樣版檔</title>
<meta name="keywords" content="說明：請填寫網頁的關鍵字">
<meta name="description" content="說明：請填寫網頁的簡介">
<!-- 註解說明：設定 OGP -->
<meta property="og:url" content="說明：請填寫網頁的 URL">
<meta property="og:type" content="說明：請填寫網頁的種類 --> 填「website」">
<meta property="og:title" content="說明：請填寫網頁的標題">
<meta property="og:description" content="說明：請填寫網頁的簡介">
<meta property="og:image" content="說明：請填寫網頁分享時的影像檔案路徑">解說
meta 標籤，放在 head 標籤裡，可以設定網頁的文字編碼、內容簡介、網頁的關鍵字…… 等等。
第一行 meta 標籤，屬性 charset 設定網頁的編碼為 UTF-8。(如果網頁顯示是亂碼，記得要將這行寫進網頁。)
第二行 title 標籤設定網頁的標題
第三、四行 meta 標籤，屬性 name 的值為 keywords 和 description，分別為設定網頁的關鍵字和簡介，要將內容寫在 content 屬性。(關鍵字之間用逗號隔開)
最後的五行 meta 標籤，都是在設定 OGP。
老師，到底什麼是 OGP 啊？
所謂 OGP 是「Open Graph Protocol」”開放圖表協議” 的縮寫，有設定 OGP 的話，當有人分享妳的網站到社群媒體網站時，會顯示網頁標題、網址、簡介和縮圖。
更詳細的介紹及設定請到以下網站觀看：
3. 最後將以下 h1 標籤內容，寫入 body 標籤裡面。
<h1 style="color:red;">Hello World</h1>解說
h1 標籤是標題，裡面用 style 屬性來設定字體的顏色。
這是在 HTML 中套用 CSS 的三種方法中的其中一種
第二種為在 head 標籤裡面寫 style 標籤做設定，App Inventor 結合 Google 試算表 文章裡的網頁檔的內容，就是用此種方法。
如此，一個簡易的網頁樣版檔就完成囉！
記得存檔成 index.html
完整 HTML 文件內容
<!-- 註解說明：這是網頁的樣版檔 -->
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>網頁樣版檔</title>
<meta name="keywords" content="說明：請填寫網頁的關鍵字">
<meta name="description" content="說明：請填寫網頁的簡介">
<!-- 註解說明：設定 OGP -->
<meta property="og:url" content="說明：請填寫網頁的 URL">
<meta property="og:type" content="說明：請填寫網頁的種類 --> 填「website」">
<meta property="og:title" content="說明：請填寫網頁的標題">
<meta property="og:description" content="說明：請填寫網頁的簡介">
<meta property="og:image" content="說明：請填寫網頁分享時的影像檔案路徑">
</head>
<body>
<h1 style="color:red;">Hello World</h1>
</body>
</html>
如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
