製作 HTML 網頁樣版檔
HTML,  網頁設計

製作 HTML 網頁樣版檔

當我們在製作一個網站的時候,除非你是做一頁式網站,不然通常不會只有首頁 index 一個檔案,可能還會有最新消息、關於我們和聯絡我們…… 等等的頁面,這個時候如果有一個樣版檔在手,那麼在製作上就會方便很多,也就是事先把 html 標籤、head 標籤裡的 meta 資訊等等,都先打在樣版檔,等到要製作其它頁面時,只要複製樣版檔就能直接開始撰寫,不需要把 html 標籤從頭再寫一次!

雖然之前有寫過一篇「初探 HTML」文章,稍微介紹了一點 HTML,但這次還是會手把手帶同學再做一次,順便補充一些之前沒講到的!





  1. 首先開啟妳的萬能記事本,並輸入以下標籤:
<!-- 註解說明:這是網頁的樣版檔 -->
<!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 帳號註冊

發表迴響