HTML 教學 (一)

HTML 教學

簡介

網頁與網站

在開始撰寫我們的第一份HTML文件之前我想先簡單介紹一下網站與網頁之間的差異性。常常聽到人家說某某網站、某個網頁，但是其實網站跟網頁是有差別的，到底該怎麼分別呢？

我們先假設網站是一本書，如此一來網頁就是這本書內的分頁了，所以一個網站就等於是一個以上的網頁的集合體(當然也有所謂的單頁網站，就是只有一頁的網站)。更深一層的概念來說的話，網站是有某個明確目的為主的網頁的集合，譬如說是個人網站(Personal Website)就是一例，是以自我介紹為主要訴求的網站，裡面可能放著自己的介紹、作品集抑或是聯絡方式等來介紹自己；而在個人網站中的單獨某個頁面就是我們所說的網頁。

網頁與網頁之間彼此透過超連結(Hyperlink)互相連接，關於超連結我們後面就會提到了。透過超連結彼此串連起來就可以串起一本書的感覺，而這本書就是我們所說的網站，所以像是維基百科(http://zh.wikipedia.org)它就是一個很棒的網站，也自喻自己為網路上的大百科，就跟我們擺在書櫃上不一定會翻來看的百科全書一樣，而其中每個條目都是一個頁面，就像是百科全書內的每個頁面一樣。

網頁設計金三角：HTML、Java Script、CSS

這其實是我自己自創的名詞(也許有人用過了也說不定)，但我之所以會說這是金三角是因為絕大多數的網頁都一定會有這三個東西，網頁透過這三個東西的各司其職最後呈現在各位的瀏覽器裡面，但是這三個東西到底分別在做哪些事情呢？

  • HTML：也是這份文件的主角，它扮演著骨架的角色。
  • Java Script：之後會提到，它控制網頁可以做的任何互動。
  • CSS：之後會提到，讓網頁可以美美的不可或缺的角色。

假設網頁是一個人的話，那麼HTML就是這個人的骨架、CSS就是這個人的外形(造型、皮膚顏色、身高體重 … 等)、Java Script就是這個人可以做哪些動作(可以稱為互動)。

當我們決定好一個網頁的架構之後可以透過CSS的描述來讓這個網頁變得更漂亮，再透過Java Script賦予這個網頁生命(但也不一定要這樣就是了)讓它可以有更多的互動能力，譬如說顏色互相變換、某個東西會旋轉(CSS 3之後可以直接用CSS來做到這件事情)等等。

網站伺服器(Web Server)、FTP是什麼東東？

製作好網頁(站)之後我們要把網站可以讓我們以外的人看到，畢竟獨樂樂不如眾樂樂嘛 … 所以我們要把東西放在網路上讓大家可以在我們電腦關機之後也能瀏覽，這個時候就必須把我們的網站透過FTP來上傳到網站伺服器裡面，這樣就能夠有一個網址可以把網頁的位置給公佈出去了。不過到底什麼是網站伺服器以及FTP呢？

先來談談FTP吧，FTP的全名是File Transfer Protocol，也就是檔案傳輸在用的通訊協定，能夠讓我們把檔案從自己的電腦傳到FTP Server上面去保存或者分享。

這個東西分為兩端，分別是Client端以及Server端。所謂的Client端就是我們自己的電腦，要把東西傳到遠端去的那一個地方就是所謂的Client端，中文叫做客戶端；而接收遠端傳送過來的檔案的這一端就被稱為是Server端，中文就叫做伺服器端。在Client端與Server端彼此之間都要安裝軟體才能夠讓Client端把檔案傳到Server端去，而Client端已經有非常多好用的免費軟體、自由軟體可以使用。

不過不管今天讀者的電腦是使用什麼作業系統，我們都能夠去下載 FileZilla 來當作Client端。倘若讀者是使用Mac OS X的話(也就是蘋果的作業系統)，那可以上網找找Cyber Duck(圖示是一隻黃色玩具小鴨子)來用，或者是很不錯的Transmit(圖示是一台小卡車)，筆者的朋友一直很推薦這套，有興趣的讀者可以自己下載來試試看。

接下來是Server，我們剛剛說到Client端是把檔案傳送給Server端存放、分享的。所以可以把Server端當成是我們的銀行，我們把錢存到銀行裡面，然後透過一些方式可以把錢給別人(轉帳)。

我們可以透過FTP來把檔案上傳到FTP Server上，而一般來說網頁空間的FTP都會替你直接開設一個用來放網頁的資料夾，我們稱這種資料夾叫做網頁根目錄，絕大多數申請的網頁空間(不論免費或者是付費)的網站根目錄名稱都叫做public_html，只要把上傳的檔案放在這邊別人只要知道網址就能夠直接得到你的檔案(除非你有另外做過什麼隱藏的設定)，這樣一來我們就可以輕易地讓大家看到我們的網站了。

然而什麼是網站伺服器(Web Server)呢？它是用來提供網頁資料給瀏覽器的，當我們輸入一個網址(假設是：http://hechien.wordpress.com)的時候瀏覽器會自動去找到這個網址的網站伺服器，然後跟它要求首頁的網頁下來最後呈現給我們看，這個就是網站伺服器會做的事情了。

網址跟網域名稱有什麼關係

網址跟網域名稱其實是一樣的東西，我們一樣舉 http://hechien.wordpress.com 為例來解釋這個東西的運作，不過我們還得先把這個網址拆成幾個部分來看會比較好：

  • http:// 這個代表我們要讓瀏覽器使用http通訊協定連線
  • hechien 這個代表主機的名稱叫做hechien，這個又稱為子網域名稱(Subdomain)
  • wordpress 這個代表主要網址叫做wordpress，這個又稱為主網域名稱
  • com 這表示這個網址是放在com主機底下

當瀏覽器得到這個網址的時候它會連線到com主機去，詢問有沒有wordpress這個主機並且索取主機的IP位置(我們就當作是地址吧)，找到之後就會去問wordpress.com說有沒有hechien這個主機，如果找到之後就會連到hechien.wordpress.com看看是誰負責提供網頁資料的，然後再把網頁取回來顯示給讀者看。

HTML 5？CSS 3？

HTML 5是最近很火紅的一個課題，與CSS 3一起在2010年開始席捲整個網路圈，並且當蘋果公司前執行長Steve Jobs公開宣佈不會在iOS上支援Flash只支援HTML 5之後，許許多多的HTML 5、CSS 3的教學文章就如雨後春筍般一直冒出來，但這些東西到底是什麼呢？

其實這個「5」跟「3」不過就只是版本而已，在HTML的歷史中有過很多版本像是上一個版本是HTML 4.01；而CSS也有CSS 1, 2, 3的分別，每個版本都有每個版本的優點缺點以及主要強調的事情，如果讀者是剛接觸這個世界的話就不需要太過於關注這個問題，等到真正了解到HTML以及CSS的時候就一定會知道這些東西了，套一句長輩曾說過的話：「相遇得到」的啦！

用什麼做網頁呢？

在書局總是可以看到Dreamweaver、FrontPage等字樣的書籍，這些就是用來製作網頁的網頁編輯器，它們都提供了所謂的W.Y.S.I.W.Y.G.(What You See Is What You Get，所見即所得)的編輯功能，讓我們在開發網頁的時候可以很直接的看到我們的網頁大概長什麼樣子，並且能夠很容易的修改整個樣式，使用起來的感覺就像是在做Word或者是Pages文件一樣。

然而這種軟體都是需要付費購買的軟體，而且不便宜的價格總是令人卻步，再加上這本書內一點都不需要那種軟體的協助，所以還有另外一些軟體可以用來寫網頁，這種軟體稱之為文字編輯器。

其實網頁本身就是純文字檔案，只不過一般純文字檔案的副檔名是.txt而網頁的副檔名是.htm或.html而已，所以其實只要把任何的網頁副檔名改成.txt或者把任何文字檔案改成.html都是能互通的，也因為這樣的特性所以其實我們完全可以用內建的純文字編輯器來編輯我們的網頁，不論是HTML、CSS抑或是Java Script都一樣。

在Windows下可以使用記事本來寫，或者可以去下載Notepad++、PSPad等軟體使用，但在這邊我推薦的是Sublime Text 2 http://www.sublimetext.com/2 來使用；如果今天讀者是Mac使用者的話也可以使用Sublime Text 2來編輯，或者上App Store下載Panic公司的Coda 2來編輯網頁，該款軟體很好用，十分推薦；如果讀者是Linux使用者的話，可以使用內建的gedit或者也下載Sublime Text 2來使用哦。

這本書的範例原始碼等將會在Mac OS X Mountain Lion 10.8上使用Sublime Text 2來編輯，所以可以下載來使用看看哦。

我們的第一份網頁：空白

接著就直接嘗試製作一個簡單的網頁吧，請學我打以下內容在你的文字編輯器裡面。

    <!doctype html>
    <html>
      <head>
        <title>Hello, world.</title>
      </head>
      <body>
        <h1>Hi, 你好</h1>
      </body>
    </html>

寫好後存檔並且給予檔案名稱：001_blank.html然後使用瀏覽器開啓，讀者應該會看到類似這樣的畫面

讓我們仔細看看這張圖片來比對一下兩者之間的關聯性。首先看一下最上面的標題有出現Hello, world.，這個就是在標籤之中<title></title>的用處，它會顯示在瀏覽器標題列上。接著我們看到了Hi, 你好用了很大的字來顯示，這個是用了<h1></h1>的結果。都看不懂沒關係，這些標籤我們還會在後面慢慢的提到它，現在我們繼續來從頭解讀一遍這個網頁的原始碼。

解說時間

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <body>

在網頁架構中我們看到了這四個東西，而這四個東西是一個網頁最必須出現的四個東西。

  1. Doctype是文件類型，它代表瀏覽器該用哪種方式讀取這份網頁檔案。HTML在歷史上有過許多版本，而且中途又殺出了XHTML這種文件格式，每份格式都有各自不同的撰寫條件，所以當在設計網頁的時候必須明確的指定一個文件類型讓瀏覽器可以正常的顯示，如果不這樣做的話網頁有可能會顯示不正常哦。

不過我並不打算在這邊列出所有的Doctype寫法，而在範例中這個Doctype是HTML 5的寫法，而且2011年開始絕大多數的網站都慢慢的採用這個Doctype，讀者可以直接記得這個Doctype類型即可。倘若讀者還想看看其他類型的Doctype的話可以到http://www.w3schools.com/tags/tag_doctype.asp看看。

  1. 這是用來告訴瀏覽說「現在已經準備開始顯示網頁內容了哦，請仔細讀取」用的，被<html>以及</html>包住的部分就是這份網頁會顯示的內容。

  2. 被<head>與</head>包住的範圍內是用來設定跟這張網頁有關的資訊，像是這網頁的編碼是哪種、這網頁的作者是誰、這網頁需要引入哪些CSS樣式表等都應該寫在這個地方才對。

  3. 重頭戲就在這邊，要讓瀏覽器顯示的部分都會寫在<body>與</body>之間，像是大標題、文章段落等。

重點提醒

在上面的這個範例裡面我們可以發現到一件事情，同樣一個標籤名稱會有兩種寫法，拿title來說的話就會有<title>與</title>兩種，這到底是怎麼回事呢？

網頁標籤分為開始標籤以及結束標籤兩種，所謂開始標籤的意思就是瀏覽器會知道從讀到該開始標籤的「現在」開始算起就都是跟那個標籤有關，直到遇到了結束標籤才會關掉跟那個標籤有關的效果或者作用，所以絕大多數的HTML標籤都是會有一個開始以及一個結束標籤用來包出一個範圍。不過等等，有些標籤是沒有結束標籤的像是

  • img: 圖片標籤
  • meta: 資訊設定標籤
  • br: 換行標籤
  • hr: 水平線標籤

這幾種標籤(還有其他的)都是因為不需要建立起一個範圍所以才不需要結束標籤，而撰寫的方法就是

  • <img />
  • <meta />
  • <br />
  • <hr />

練習是進步最好的方式

把結束標籤前面的斜線放在後面的角括號前面即可。

好了，我想讀者也可以花點時間嘗試改改這個範例網頁，譬如再增加一個<h2></h2>標籤或者增加<p></p>標籤，然後在其中輸入一些文字看看會怎麼樣。

h1標籤是所謂的第一級標題，而標題在HTML中總共有六級，所以分別是

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

可以每個都試試看哦！

標籤的屬性

這次的網頁內容是以下這樣

    <!doctype html>
    <html>
      <head>
        <title>Hello, world.</title>
      </head>
      <body>
        <h1>Hi, 你好</h1>
        <a href="http://hechien.wordpress.com/" target="_blank">hechien的部落格</a><br />
        <a href="http://www.google.com.tw">Google</a>
      </body>
    </html>

請存成002_attributes.html後用瀏覽器打開，應該可以看到這樣的圖片

我們可以看到這次的網頁多出了兩個東西，一個寫著hechien的部落格，另外一個則是寫著Google，這個就是所謂的超連結(Hyperlink)。

解說時間

現在我們來仔細看看超連結的標籤要怎樣寫：

<a href="http://hechien.wordpress.com/">hechien的部落格</a>

這個是超連結標籤的最簡單寫法，其中href="http://hechien.wordpress.com/"就表示這個超連結會導向後面所指定的網址，當有人點下這個超連結的時候便會導向到這個網址去。

而hechien的部落格則會顯示在畫面上供人點擊，這個地方不一定要放文字，也可以是圖片或者只是一個單純的空間。

在這個例子裡面的href就是屬性，而href後面的=之後所指定的就叫做屬性值，也就是說在第一個超連結中的href屬性，它的屬性值就是http://hechien.wordpress.com/了。然而，屬性到底代表著什麼呢？每個HTML標籤都有自己專屬的作用與用途，而這些用途必須靠屬性的指定來發揮作用，像是超連結標籤如果沒有href的屬性的時候它就沒辦法連到其它地方去了，所以正確地設定屬性是很重要的一件事情。

所以像範例中第一個超連結後面還有一個target屬性，它的屬性值就是_blank，這個屬性之後會解釋到所以我們先不談，但是從這邊我們就能夠知道如果有兩個以上的屬性的話，那屬性跟屬性之間是用空白分隔開來的。

現在來看看屬性的格式：

屬性名="屬性值"

所以一個多屬性的套入標籤內大概就會長這樣：

<標籤名 屬性名="屬性值" 屬性名="屬性值"></標籤名>

重點提醒

可以發現到屬性值前後被雙引號包住，這雖然在HTML 5裡面是不被強制要求的，但是為了良好的習慣以及較高的可讀性，會建議讀者們用雙引號包住屬性值會比較好。

html-tutorial Tutorial

Comments

comments powered by Disqus