HTML文件的幾個基本特性:
1.用瀏覽器解讀
網頁是以HTML語言設計,而瀏覽器是用來解讀網頁的軟體,如同我們用Word軟體開啟DOC檔案一樣,我們要看網頁就必須使用瀏覽器,本課程介紹的HTML『程式』效果如何都必須由瀏覽器來執行驗證。
2.純文字檔案
HTML語言希望能盡量跨平台,通用於各種電腦作業系統,方便所有人編輯製作乃至閱讀,所以是純文字檔案
3.HTML不會當掉
HTML主要是用於排版,如果寫錯了導致瀏覽器看不懂時,並不會如一般程式一樣當掉!只是不執行而已,或者將原始碼當一般文字內容直接顯示在頁面上。

HTML文件的基本架構:
基本的網頁文件架構內容如下:

整個HTML文件除了內容的文字之外都是由標籤所組成,每個標籤由小於(<)及大於(>)符號當作括號使用。標籤本身的作用也如同括號,譬如整個文件的起始標籤是<html>,結束標籤就是</html>,在HTML中英文字的大小寫是通用的
在HTML標籤內部的<head>標籤表示檔頭資訊區,有關整個檔案共用的資訊匯集中放自這個區塊,以上例來說裡面就有個 title 標籤,定義網頁標題(HTML網頁基礎);接著是網頁內容的標籤 body,裡面也寫著:HTML網頁基礎。
請開啟一個記事本程式如上寫作,並另存新檔成為附檔名為 htm 或 html 的檔案,譬如 a.htm 或 a.html 意義都相同。
接著用瀏覽器開啟應該會看到類似這樣的畫面:

此時可以試著開啟功能表中的檢視→原始碼功能(英文是View->Source)可以看到你寫的「程式」會忠實的顯示!

 在 IE9瀏覽器中如果看到如上的功能表,請到瀏覽器標題空白處按右鍵,出現選單後選擇顯示功能表如下圖:

如果是使用Google Chrome瀏覽器,檢視原始碼的方式是從點選右上方的圖示(紅圈)開始,再找到工具選項的子項目→檢視原始碼:

 
版本驗證與文字編碼
雖然HTML可以很簡單,但通常你檢視原始碼任何一張現有網頁的原始碼時都會有多到讓人頭痛的內容,在此只先介紹在HTML檔案開頭處常見的幾個標籤,請打開Yahoo首頁原始碼,前四行大致如下:

第一行的DOCTYPE是宣告本文件的HTML語言版本,上面顯示是4.01版,目前HTML 5已經開始面市了,後面是如需驗證此格式時的文件網址,當然這行不寫的話瀏覽器會使用預設值,或者發現用某版本解釋不通就用另一版本。通常我們不需去管它,但一般網頁一開始就是這一行,不解釋怕同學以後看到就會怕怕的!
第二行 html 標籤後面空一格寫  lang = "zh-tw",lang就是語言 Language 的縮寫,zh是漢語,tw當然就是台灣用的漢語了!這邊不寫其實也沒關係,比較重要的是第四行,在 head 區塊內常常會出現這一行來指定網頁編碼,用錯就會讓網頁變成亂碼!
charset = utf-8 就是指定用 utf-8 編碼,charset代表字元系統,編碼方式純的繁體中文是 big5,它也可以辨識中英文,但是簡體字或日韓文等就不行了!相對的,utf-8 是目前全球通用的字碼集,各國文字包括繁簡中文都OK,多數網頁設計軟體也都預設使用這個編碼,所以現在的網頁已經極少看到亂碼了!

HTML常用基本標籤
HTML 通常是整個網頁的開始與結束,意思是說『此標籤區塊內講的是HTML』語言。
HEAD 這是標記檔頭資訊的區塊,裡面最常見的主角是網頁標題
TITLE 網頁標題,就是網頁視窗框框上面顯示的文字。
BODY 網頁主體,其間的內容就是網頁顯示區的HTML程式碼。
P 文字段落,就是文章一個段落的開始與結束。
BR 斷行,這個標籤不需要成對。
center 物件置中
&nbsp; 加一格空白,不需要成對。
! 註解的意思,不需要成對

有關顏色定義方式

  1. 直接使用英文顏色名稱:Red, Blue, Yellow,...,如 color = red
  2. 使用六碼16進位RGB三原色(紅綠藍)表示法,如 color = "#0088FF"
  3. 使用三碼16進位RGB三原色表示法,譬如:如:color = "#A07"
  4. 使用 rgb 函數:rgb(紅色值,綠色植,藍色值),每個顏色值範圍是0~255,如 color = rgb(255,0,0)是紅色

有關文字排版

I, B, U , em, strong, s 斜體字、粗體字與底線字,刪除線
H1~H6 標題字,H1最大,要成對出現
FONT size=? color= ? face=? :定義字的大小、顏色與字體。 size=? color= ? face=? :定義字的大小、顏色與字體。

操作練習:排版唐詩一首

  1. 無排版狀態
  2. 斷行與分段
  3. 置中
  4. 加入字體
  5. 加入字型