網頁是怎麼做出來的呢?它不像我們常使用的文書編輯軟體WORD,在版面上打字就會出現想要的樣子。 因為我們打開網頁的瀏覽器有一套自己的語法,透過這套語法,瀏覽器可以解讀內容並將之呈現在螢 幕上。這套語法就是HTML,為HyperText Markup Language的縮寫。中文稱為超文字標記語言,有點長 且不易記,所以大家還是都習慣稱HTML。
HTML文件是由標籤組成的,他是由小於符號"<"以及大於符號">"所組成的記號,像是<head> 、<body>、<p>,我們稱這些由小於和大於組成的記號為標籤(tag)。這些標籤讓瀏覽器更 清楚的辨別要呈現的樣式,最後在螢幕上呈現出來。當你在瀏覽網頁時如果想看看原始碼,只要按滑鼠 右鍵選擇檢視原始碼,即可看到網頁的原始碼是怎麼編寫的。
為何要學HTML?

目前很流行的Wordpress是CMS(Content Management System)的一種,當它安裝好之後就可以像Word一般 在後台寫文章。對於不懂編碼的人士們,也可以輕鬆操作。另外還有像WIX商業付費網頁平台,只要用 滑鼠拖拉文件,即可完成一個初步的網站。
如果只是業餘寫個網站玩玩,可能不需要花時間學習HTML。但是若要學好網頁製作,就必須對這網頁的 基本構成要素有一定的瞭解。而且有些細節是建站軟體做不到的,如果你熟悉HTML網頁構成元素,即可 自行動手編輯。所以,對於想在網頁領域精進的人士,學習HTML是必備的基礎。
基本的HTML標籤
以下幾個基本標籤架構出HTML文件的結構。也就是說,一般看到的HTML文件都是由這幾個標籤形成主體,再加上 其他的標籤進行擴充。為了建立良好的文件架構,避免瀏覽器誤判,應該在文件中正確的使用這些標籤:
- <!DOCTYPE>:宣告網頁的文件標準
- <html>:文件的開始與結束
- <head>:標示文件的各項資訊
- <title>:文件的標題
- <body>:標示本文
範例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> --這個區域放置網頁內容-- </body> </html>
<!DOCTYPE> 文件標準的宣告
DOCTYPE宣告的完整名稱為Document Type Declaration,這是從HTML4.01版開始設為標準,目的是宣告文件的類型, 讓網頁瀏覽器能正確的解析HTML文件。DOCTYPE必須寫在文件的最開頭,<html>標籤之上。通常使用網頁編輯 軟體建立新文件時,都會自動加上DOCTYPE宣告。若使用記事本編寫,則需自己加上宣告<!DOCTYPE html>。<html> 文件的開始與結束
HTML文件應該以<html>為開始,以</html>結束,頁面中的所有內容都由這兩個標籤上下包圍起來,如圖一所示。<head> 存放與瀏覽器溝通的各項資訊
這個標籤主要是用以敘述HTML文件的各項資訊,以及宣告程式碼,這些資訊大都是供瀏覽器處理,瀏覽網頁時除了標題之外,其他的資訊不會出現。 在<head>與</head>之間,常會出現的標籤有下列四種:- title元素:為HTML文件的標題,這裡所填入的文字會顯示在瀏覽器分頁標籤或視窗標題上。
- meta元素:中繼資料(metadata),用來標示檔案所使用的編碼、作者、文章簡述等資訊。
- style元素:宣告使用的CSS樣式表。
- script元素:宣告使用的JavaScript程式碼
<body> 網頁的內容
body元素是用來標示網頁本文的部份,主要的內文都會在<body>與</body> 之間。