HTML教學課程 (入門篇)4個章節 - 由淺入深學習HTML

如果你剛接觸編程，想建立網頁/APP，HTML絕對是你第一個要學習的編程語言。

在這篇「HTML教學課程 (入門篇)」，你會學習到：

  • HTML基本概念：
    開發環境、起始標籤(Opening Tag) 、結束標籤(Closing Tag)、屬性 (Attribute)
  • 進階HTML：
    div、span、iframe、src、background image、頁面給構、table、form

我們會從新手角度，分開4個章節，由淺入深，教授你所有你要知道的HTML編程知識。

準備好了嗎？我們開始吧！

目錄

第1章

開發環境

第2章

起始標籤(Opening Tag) 、結束標籤(Closing Tag)

第3章

屬性 (Attribute)

第4章

進階HTML

第1章HTML基本概念 - 開發環境

要編寫一個網頁，原來可以分為前台（Frontend)及後台（Backend)。

前台（Frontend）就是網頁的外觀。例如你看到的文字，圖片，美麗的排版等等，通通都是前台（Frontend）。

而前台（Frontend）（網頁的外觀），是由3種編程語言組成。

- HTML: 主要是負責外觀的結構。
- CSS: 負責把結構變得更美麗。
- Javascript: 負責外觀元素的控制。

HTML是負責外觀的結構。

就像寫信一樣，寫信會有一個結構，
例如上款，標題，內文，下款等等。
網頁的外觀也有一個結構，而這個結構，就是HTML。

開發環境

首先，我們去學寫Code之前，需要安裝一些軟件。

其實寫網站不需要用很多軟件的，有以下兩個便可以。

第一個軟件，是Chrome。


Chrome是一個Google的瀏覽器來的，你只需要去 google.com/chrome 就找到。

因為Chrome這個瀏覽器會有它自己可Debug的方式，所以我們會經常用到，

如果你沒有，可以先去以上連結去安裝。

第二個軟件，是Visual Studio Code。


我們可以去Visual Studio Code下載這個軟件，

由於我們寫Website，是可以用一個notepad都寫到的，

但是我們想syntax(句子文法)較易明白，或者有些提示，

我們都會用這個非常流行的軟件，就是Visual Studio Code。

什麼是HTML？

首先安裝好這兩個軟件，然後打開Chrome，

打開了Chrome後，嘗試隨便去一個網站，例如去 google.com 。


我們進入了google主頁後，會看到這個很漂亮的畫面。

其實這一個畫面，是由一堆frontend(前端)的語言組成，

包括：

  • HTML
  • CSS
  • javascript

HTML 主要是負責 > 外觀的結構。
CSS 負責 > 把結構變得更美麗。
Javascript 負責 > 外觀元素的控制。

大家可以看看這個layout，這個樣子到底是怎麼組成的？

我們隨便在一個空位，用mouse按右鍵，按檢視原始碼(view page source)，


按入去後，就會看到一堆這樣的東西。


這一堆原始碼是什麼東西呢？就是HTML了。

瀏覽器就是將這一堆HTML的東西，變做我們看得明的樣子(Google主頁)。


這一堆東西就是我們去了google的server，經server解讀後，而成的樣子。

當我們的瀏覽器收到這一堆東西的時候，就會將它變成我們看得懂的網站主頁。

如果你想了解更多有關frontend(前端)與backend(後端)，可以看看這編文章: 寫網頁課程 - 從零開始，學習網頁設計。

第2章起始標籤(Opening Tag) 、
結束標籤(Closing Tag)

HTML是如何為網頁的外觀進行結構呢？

答案就是透過使用標籤(Tag)，
來打造不同的外觀結構。

HTML標記包含，起始標籤(Opening Tag) 、
結束標籤(Closing Tag)（及其屬性）。

接下來， 我們來看看什麼是Opening Tag及Closing Tag吧！

什麼是Opening Tag & Closing Tag？

現在我們要學的第一個概念就是：

起始標籤(Opening Tag) 與結束標籤(Closing Tag)。

首先打開你的Visual Studio Code軟件，


開一個New File，嘗試輸入 

<p>This is some content</p>
，輸入完後，請儲存。


如果是手動的，可以按下圖中的「File -> Save」來儲存文件。


儲存文件後，如果文件沒有以「.html」作結尾，可自行加上「.html」來結尾。


儲存完後，大家可以嘗試一下用Chrome來打開這個File文件。


打開後，你會看到一段文字「This is some content」。


原來，我們第一樣學到的東西就是，

當HTML被Browser演繹後，就會自動變成這個樣子。


大家看到什麼不同呢？

你會看到原來這個HTML，會有一些<p>與</p>，

一進入到這個Chrome的瀏覽器，就會不見了。

為何會不見呢？

因為當瀏覽器演繹了這一堆的源碼後，就會轉變成一個大家都看得懂的Layout。

所以我們第一樣要學的Program，就是這個Opening Tag和Closing Tag。

Opening Tag就是上圖中的<p>，Closing Tag就是上圖中的</p>

以上的輸入法，到底代表著什麼呢？

其實<p>是代表「開始」，</p>代表「完結」，所以只要看見「斜」，便是完結句。


其實，開關引號裡面正正是包著內容，所以p Tag就是代表Paragraph的內文，

意思就是我們要跟電腦說明，中間這一堆Content，就是一堆內文。

所以HTML要做的東西，就是用這些不同種類的Tag，來組成整個網站。

大家還記不記得，HTML是用來做結構的。

我們就是一直弄這些不同的Tag，再包著這些東西，

然後就告訴別人，這一堆東西到底是「內文」，還是「其他東西」。

Program的手勢，內文p Tag

接著，我們嘗試一下刪除/更改一些內容後，你會看到下圖中紅圈位置有一個圓點。


圓點出現就代表更改內容後沒有Save，所以大家要記得Save了。

你可以按「File -> Save」，

但是我們實際上很少每一次改動後，都去按「File -> Save」，因為這動作太麻煩了。


所以這時候，大家就要學懂用快捷鍵了，

MAC機會用「Command + S」，
或者 Window機會用「Ctrl + S」。

Save完後，再回到Chrome的瀏覽器，按一下Refresh看看。


你會發現，按Refresh也是挺慢的方法，所以這裡同樣地需要用快捷鍵，

MAC機會用「Command + R」，
或者 Window機會用「Ctrl + R」。

跟著，我們都需要學會編程的3步基本手勢：

1 Visual Studio Code打完內容後，
2 就會習慣性地「Command + S」Save了它，
3 然後回到Chrome的瀏覽器「Command + R」。

編程的手勢就是一直保持做這組動作。


回到主題，我們一起輸入p tag，就會發現這個Code Editor很好，

當打<p> 的Opening Tag後，它就會自然出現</p> 的Closing Tag。

所以Opening Tag後，直接在這裡打我們想要的東西就行了，是不是非常方便呢。

這裡溫馨提示大家！新手最常犯的錯誤，就是漏掉輸入Closing tag。

所以這裡要多加注意喔！


標題 h1-h6

到目前為止，我們學了第一個的Programming syntax。

第一個叫p Tag，正是代表內文的東西，跟著就要學習更多不同的Tag。

第二個常用的Tag，叫標題h1 Tag，


大家跟著我一起輸入h1「This is heading」，之後再輸入h2「This is heading」，

一直輸入到h6為止(如下圖)。


然後Save他們，然之後在Chrome裡面Refresh，


你會發現，h1是最大，h6是最小的。

原來P就只有一個叫做p Tag的東西，沒有其他的東西。

但是如果Heading的話，我們就會跟這個重要性來輸入h1、h2、h3、h4、h5、h6。

而最重要的標題，當然就是h1，


第二重要的標題就是h2，

接著之後沒那麼重要的，就是h3、h4、h5、h6這樣。

這裡要留意一下，這些p Tag跟heading tag是可以輸入很多個的，

好比同一個h2、h3、h4等等，都是可以輸入很多個的。

但是要注意，h1盡量只寫一個就好了！
因為h1代表了你整篇的文章，或那一頁中最重要的標題。

最重要的標題應該只有一個，所以我們只放一個h1就行了。

這裡也帶出另外一個很重要的概念，

很多時候我們編程時會發現，原來h1至h6，都有不同大小的字型。

其實字的大小，不是在HTML裡轉的，而是在CSS轉的，是在做Layout的時候轉的。

如果大小不在HTML設定，那為什麼還要分不同的Tag呢？

我直接把內容全部輸入p Tag，然後用CSS調整大小不就行了嗎？

其實這樣做是不行的呢！

為什麼？

以下會為大家解答：


還記得這張圖嗎？

答案是：網站不光是給人看的，也要給電腦看的。

例如一些Google的Search Engine(搜索引擎)到你的頁面時，

它不會看你的文字大小。反之，搜索引擎是透過分析你網頁中，不同的TAG，去理解你的網頁。

所以當我們做網站的時候，不要只求貪快，而全部只輸入在p Tag裡面。

要記住，標題要用h1 h2或者h3。

因為有些網站是比較SEO Friendly，Search Engine(搜索引擎)會value這些h1裡面的字多一點，

所以，我們都會將一些Keyworld放進h1裡面，令搜索引擎讀懂其意思。

最後，大家必須要記住，寫網站時，我們都要跟這個結構來輸入喔。

Strong Tag

這次，我們一起輸入一個叫做strong的Tag，再將這個strong的Tag包著這個「This」。


然後用一個i Tag包著is這個字。


Save這個HTML後，用Chrome打開它，你會見到這個樣子：


「This」變了粗字體，
「is」就變了斜字體。

隔行 br Tag

跟著，我們會發現大部分的Tag，都會有Opening與Closing的。

但是也有一些Tag是沒有Closing Tag的，例如br Tag。

我們嘗試一下在h1這裡加入一個br Tag，


然後Save這個HTML後，用Chrome打開它，你會見到這個樣子：


你會發現原來br Tag是很常用的東西，因為其功能就是用來隔行的。

原來在HTML這裡隔行，是不可以直接輸入Enter Enter來隔行⋯⋯這是錯誤的！


因為隔行的正確做法，是輸入br Tag來實行，所以它才可以成功地隔行。

列點 ul Tag與li Tag

接著，我們學多兩個Tag，就會學完這個：

起始標籤(Opening Tag) 與結束標籤(Closing Tag)的概念。

首先，大家跟我以下方法來輸入，


開一個新Tag，叫ul Tag，

然後在ul Tag之間隔行，輸入li Tag，

接著在li Tag內文中輸入「List 1」「List 2」「List 3」。

其實，ul代表Unordered List，也就是一些列點。

Save這個HTML後，用Chrome打開它，你會見到這個樣子：


你會見到一個Point的東西清單。

我們再從這個概念中，增加多一些內容。

原來，你會見到一個List，就會有一個ul。


一個List會在一個Unordered List，

裡面每一個List ltem，都是用一個li包著。

那ul通常會用在那裏呢？

原來ul通常會用來做例點，或者做navigation的時候，都很流行用ul Tag去做的。

讓我們再深入了解一下：


你發覺到圖中的li會靠右一點嗎？它原來是會自動靠右去的。

為什麼要靠右呢？

原來我們在HTML裡面有一個很重要的概念，
當一個li Tag是讓另外一個Tag包著的話，
這一個Tag，是需要靠右邊一點。

因為靠右的好處是，能分別到這個Tag(li)是在這個Tag(ul)裡面。

只要當你分到一層一層來輸入，

這樣，我們寫的Code，就會變得非常整齊。

因為有時候，你寫一些大型Program計劃時候，

是會有很多層去包著很多層⋯

如果不分層的話，後果就會寫得很亂。

所以當你跟以上手法去做一個Syntax，自然容易看得懂整個編程的格式。

這樣解說後，是否更容易明白了呢！


所以，看見上圖你就會明白到，

原來ul是同一層的，li是同一層的，層次非常分明。

現在我們一起重新輸入一次，看看正確的手法是怎樣輸入的。

首先，先打<ul>與</ul>，
必需確認出現了Opening Tag與Closing Tag。


然後我會在中間這裡按Enter，


你會看到按了Enter馬上就會給你Tab了。

萬一沒有Tab，我們也可以自行按Tab泊入。

然後我們再輸入<li>與</li>，

輸入內文List 1、List 2、List 3之類的。


記住千萬不要輸入了<ul>後就輸入<li>，這是錯誤的。

否則的話，你會很容易漏了<ul>的Closing Tag。

要記得先輸入整個<ul>的Opening Tag與Closing Tag，

才去輸入內層的東西，比如<li>文內</li>。


這樣，才是正確的輸入手法。

這次試一下在ul Tag上，將這個「ul」，改成了「ol」，


然後Save這個HTML後，用Chrome打開它，你會見到這個樣子。

這個List就變成了：Point form 1 2 3了。

到底ol是代表什麼呢？

ol其實是代表了這個Ordered List，意思就是有列聚的列點。

學到這裡，以上就是全部Opening Tag與Closing Tag的基本概念了。

你學懂了嗎？記得多加練習呢！

第3章Attribute(屬性)

只有HTML的Tag(標籤)，其實是不夠的。

接下來，我們想給每個HTML標籤更多的額外資料，便需要為他們加上「屬性」。

Attribute(屬性) 是我們今天會學的第二個概念，也是一個非常重要的概念。

讓我們來詳細看看，什麼是Attribute(屬性)吧！

Attribute(屬性)

當我們學習完Opening Tag與Closing Tag的基本概念後，

下一樣需要學習的，便是Attribute(屬性)。

我們一起打開Visual Studio Code後，再開一個新的File，


首先，一起輸入a Tag，

a Tag的作用就是可以弄一個東西，能被人按到去別的網站，

我們在a Tag內輸入一行字「Click here」，然後Save，


在Chrome打開後，你會看到是這樣的。

你是否發現一個問題，就是按不了呢？

為什麼會這樣的？

原因是因為我們還沒有跟電腦講，現在這個a Tag是需要去那一個Link。

所以這時候，我們就要用到Attribute這個概念了。

因為Attribute的作用，就是給你的HTML Element多加一些資料。

對於第一次編程屬性的朋友，你會覺得這裡有點混亂，

不過不用害怕，你先跟著我的方法來輸入。

一起看看下圖，你有否發現到，原來屬性是需要寫在Opening Tag裡面的？


Attribute是輸入在a的後面，然後隔一隔空格，打「href=’’」，


你會見到有個開引號及閂引號，

這裡溫馨提示一下，我們打單引號與雙引號也可以的。

接著下來，我就會加入一條Link，例如：https://www.google.com/


我們成功地輸入了屬性，Save後，再去Chrome打開看看，


打開它後，你會發現，終於成功連到去google的主頁了。

現在我再很generic地重新看一次，整個流程是怎樣輸入的。

首先會有一個「Tag」，
Tag裡面有一個內容比如是「Content」，
然後在Tag的Opening Tag這裡輸入屬性，例如是「Attribute=’’」，
引號內打一個「value」。


你會見到：
<a></a> = <tag></tag>
Click here = Content
href='' = attribute=''

這就是一個非常generic的寫法。

不過，對於第一次輸入屬性的朋友，其實會經常輸入錯誤，比如下圖：


看看上圖這樣輸入法，是不是很容易漏了這個</a>的Closing Tag呢？

其次，更會漏了Opening Tag裡面的「>」。


所以大家要注意一下正確的寫法與流程：

首先，輸入<a></a>， 然後輸入「Click here」內文，

之後，在<a>內格一格空格，輸入「href=''」，

跟著，在引號內輸入「https://www.google.com/」連結。

為了讓大家更熟練以上的輸入手法，

我們一起重複5次這個寫法，好讓大家習慣一下正確輸入方法：


原來這個屬性，還可以放多過一個以上，


例如在attribute引號後面，隔一隔空格，輸入attribute2=''。

如果你不斷地在同一個Tag內隔一隔空格，其實可以放很多個attribute的。

當我們明白了這一點後，

我們嘗試下在這裡隔一隔(如圖)，


然後輸入「target=’_blank’」，Save看看Chrome會有什麼變化。


你是否發現到，這個Attribute可以利用一個新的Window去打開Link。


而舊的那些Tag，就會直接在Browser上面轉換那個Link。

相片 img Tag

最後我們學多一個Tag，叫img Tag，

這個Tag比較特別，因為它不需要有Closing Tag。

就如br Tag一樣，img Tag都是比較特別的Tag，是不需要有Closing Tag的。

輸入後Save，再去Chrome看看，喔～原來什麼都沒有？


不要緊，先跟著我一步步做下去，自然就會明白。

我們一起去Google搜尋「pig」，然後按去圖片這裡，


我們按右Click這張相片，按「在新分頁中開啟圖片」，


你就會發現這張圖片的Link了，再去看看副檔名是不是.jpg，如果是，那便是圖片了。

其實大家知不知道，圖片到底有多少個副檔名呢？

其實一共有5種：

  1. .jpg
  2. .jpeg
  3. .png
  4. .gif
  5. .svg

以上5種是我們最常見的圖片副檔名，

.jpg與.jpeg其實都是JPG最常用的，它們可以壓縮到這個File最小，

因為通常做網站相片都要小的，所以我們都會用JPG。

而.png會有一個透明的底層，最常用是做Logo，就會用到PNG。

.gif是會動的，例如GIF相片，

.svg也都是會動的，但是SVG是會用Vector來寫入圖片。

令到圖片會動之外，放到很大都不會pixelate，
所以算是GIF的進化版。

回到正題，

我們這裡隨便找到一張圖片，Copy圖片的Link，

然後輸入一個Attribute叫「src=''」


把圖片的Link Copy去引號內。

Save後，在Chrome打開後，是不是成功看到了圖片呢！


可是你會發現，這張圖片實在太大張了，那怎麼辦？

所以我們要再放另一個Attribute，

在圖片連結後面，隔一隔空格，輸入「Width='200'」


Save後，在Chrome打開後，你會看到圖片成功變細了。


這裡Width用的單位，我們會叫做px。

那px有多大呢？

你就當13寸的Mac機大概1300px，
21寸iMac的話大概2000多px，
手機大概就300-400px。

你看到我打了200後，相片是會按比例縮小的。

如果要弄一張相片小一點，直接輸入這個寬度就行了。

如果你想輸入高度的話，

可以再隔一隔，輸入「height=''」，嘗號引號內輸入800高度。


Save後，在Chrome打開後，你會看到圖片為什麼會變了形的？

就是因為你輸入了寬度200px，高度800px。

所以通常來說，我們只會打寬度，那就不會令圖片變形。

這裡最後分享多一點就是，我們現在是用external(外部連結)的一張相片，

如果萬一這條Link消失了，那你的網站就會下載不了這張相片，

所以，通常我們會將這張相片Save到自己的Local裡面，

Save這個圖片在HTML文件的同一個文件夾位置，就正確了。


我的這個HTML文件是放在桌面，所以我把相片都Save在這裡便可以了。

那你會問，怎樣儲存相片的？

其實這張圖片只需按右鍵「另存圖片」去桌面便可以了。


之後，把這個Src裡面，Value轉成桌面這張圖片的Link。

只需要輸入圖片名稱便可以，

Save後，在Chrome打開後，你會看到圖片成功連結了。


我們最後學習多一件事情，

其實圖片通常不會赤裸裸地將相片放在html文件夾裡便算。

我們會在html文件夾裡開一個叫「Pictures」，然後將圖片放進這裡。


由於圖片改變了位置，所以我們也要更改做「Pictures/pigpig.jpg」，


Save後，在Chrome打開後，你會看到圖片又再一次成功連結了。

最後，這兩個HTML基本概念：

包括Opening Tag與Closing Tag，及Attribute，

大家都學會了嗎？

第4章進階HTML

接下來，就要學習進階一點的html應用，

以下功能都是我們經常需要用到的東西來的。

包括：

  • div、span
  • iframe
  • 放相
  • 頁面結構
  • table
  • form

準備好了嗎？我們開始吧！

div、span

現在，我們要學習進階一點的HTML應用，

首先，我們需要學習2個新Tag：

一個叫div Tag，
另一個叫span Tag。


對於剛才才學HTML的大家，這兩個Tag雖然沒有意思，但是你會經常看到它們。

原來這兩個Tag的作用是做一些grouping，

div就是group著一些Element，

而span就是group著一堆字。(一起看看下圖)


例如我要輸入一些h1與p的內容，我就會用div Tag來grouping它們。


而span是用來輸入文字的，

例如我用p Tag打「 I am Jack」，「Jack」這個名字可以用span Tag包著。

為什麼要這樣做呢？

因為group著這些東西是有很多應用的。

它們可能有一些共同特性，

有可能是紅色顏色、白色顏色，或者令某些事情觸發一些特定效果。

所以，span Tag的概念，就是利用這一堆東西包在一起，去做某一類動作。

關於這一點，未來我再和大家深入分享。

其次，這裡也會牽涉到另外一個概念。


這個概念分兩部份，

第一部分叫Block Level，

第二部份叫Inline Level。

Block Level的Element，在Element和Element之間會隔行。

Inline Level的Element，在Element和Element之間不會隔行。

隔行的有什麼呢？

例如剛才的div Tag、h1 Tag、p Tag，
你會發現它們會自動隔行的。

而有些Tag本身是不隔行的，

例如span Tag、a Tag。

但這些特性是可以改的，這個問題我們遲一點去學。

因為之後學CSS轉Style的時候，可以去更改這些屬性的。

iframe Tag

接著下來，我們要學習第二個概念，就是iframe Tag。

iframe Tag是什麼？

iframe Tag的作用是在自家網站上，放上另一個網站，或是網站中的某一部分進來。

在寫網站的時候，iframe是我們經常用到的功能之一。

比如YouTube、Google Map，都是經常用到iframe的方法，

去將一些Element放進我們的網站裡面。

不如大家嘗試一起動手試試，一起去YouTube找一些頻道，
比如我這個頻道：鬍子Jack。


在頻道當中，隨便找一個段片，按入後按圖中的「分享」，然後「嵌入」，


然後，你就會看見嵌入(Embed)這一堆編碼，原來這就是html的iframe，

現在你應該明白到，這段東西就是html的一個iframe。


我們嘗試把它Copy，放上Visual Studio Code中，

Save後用Chrome打開看看，是不是成功連結了YouTube去你的網站了呢。

是不是很簡單呢？


原來它一直是用一些Attribute，

例如Width、Height來定這這個YouTube的Size。

現在，大家都學懂了怎樣嵌入YouTube了吧。

接著下來，再看看另一個常用的東西，就是Google Map了。

我們一起在Google Map中隨便找一個地方，

比如找「Time Square」，同樣地按「分享」，然後「嵌入」，


我們Copy後，放上Visual Studio Code中，

Save後，再用Chrome打開看看，你會發現，又成功連結了Google Map去你的網站了。


好了，學到這裡，大家都明白iframe Tag是怎樣用吧！

CSS的Background

來到這裡，我想分享多一點，有關於HTML放置相片的問題。

大家記不記得，之前教過大家放置相片是用<img src=''>對嗎？

原來在HTML裡面，放置相片還有另一個方法，

而這個方法不是用HTML，而是要用CSS去輸入的。

其實，我們常通輸入div Tag時候，裡面會運行一個叫做Style的東西，

Style用法，我遲一些會在CSS的教學裡，再與大家一一分享當中細節，

但是我們先記住，這個Style裡面行CSS的方法。


原來在div Tag的Style裡面運行CSS，

可以輸入Background:url()，然後在(.jpg)裡面再放入相片。

到這裡，大家雖然目前還沒有學識怎樣去寫，但是沒有關係，我只想跟大家先分享這個概念。

其實，在Layout上面放相片，只會有以下兩個方法：

第一個方法，就是用img Tag，
第二個方法，就是用CSS的Background。

為什麼要分享這個概念呢？

因為我發覺有些朋友或學生，從來都不會去學CSS，

就直接用HTML Template去做網頁了。

如果到時候用HTML的Layout Template，想轉換相片時，

最起碼知道，放置相片是有這兩種方法。

HTML 頁面結構

我們再看看下一個概念，也是非常重要的。

當我們真的用HTML去寫一個頁面時，應該怎樣做的呢？

我們一起來看看吧！


首先，我們會輸入一個html Tag，而Tag裡面就是代表了整個文件是HTML的內容，

然後在html Tag裡面，

之後我們又會輸入一個叫head Tag，

然後再輸入一個叫body Tag。


這裡溫馨提示一下，

原來螢幕中所有看到的東西，全部都應該在body Tag裡面打的，

那head Tag會放什麼呢？

其實head就是放一些螢幕看不到的東西，全部都是給電腦看的，

例如CSS，Meta Tag for SEO，Title Tag。


其實做任何HTML，我們都應該起一個這樣的基本結構(Architecture)，

首先輸入html Tag，
然後在html裡面輸入head Tag，
之後在html裡面輸入body Tag。

其次，我們才把想輸入的內容在body Tag裡面完成。

學到這裡，大家掌握到基本結構的正確寫法了嗎？

記得努力練習吧。

table Tag

接下來，我們會學習另一個Tag叫table Tag。


首先，我們輸入table Tag，

然後隔一隔數行，因為之後我們要輸入其他東西來包著全部內容，

然後在table Tag的每一行，都會輸入tr Tag，

tr的意思就是一個Row Table Row。

通常第一個table row就是th的東西，就是table head。

我們在th Tag隨便打一些內容，

比如是Some Content或Some Content2。


接下來，我們輸入多個tr Tag，裡面輸入td Tag，

我們在tr Tag隨便打一些內容，比如是Details或Details2。

tr就是網站打橫的內容，th就是table的標題，td就是打直的內容。


這樣我們就成功地弄成一個Table出來了。

Form

這裡，我們要學懂一個叫Form的東西。

Form就像中文的表格。

這是你的網站與Server溝通的一個方法。

比如你的網站，有一頁叫做Contact Us，而Contact Us是讓客戶在上面填寫資料，然後可以Summit。

這時候，就要用到Form的功能了。

首先，我們一起輸入一個from Tag，然後裡面輸入input Tag，

你會發現input，原來與br與img一樣，都是沒有Closing Tag的。


雖然有點複雜，不過大家先跟我一起做。

我們輸入input Tag，然後裡面輸入type=’text’，
而另一個input裡面，輸入type=’submit’。

Save後用Chrome打開看看，

你會看到，成功設計到一個簡單的Texbox，可以讓人按Submit按鍵。

如果你弄了一個Backend，接著就可以Submit這些資料給Server。

其實除此之外，我們還可以學其他不同的Input type，

比如有一個叫Password的input type。


Password的input type，文字是會變成了「密碼」的樣子，

是與text完全不同的，因為text打字時，是變成「文字」而不是「密碼」。

接下來，還有選東西的Tag。

我們一起輸入br Tag來隔一隔行，

之後輸入<input type='radio'>MALE，然後radio隔一隔打name=’’。

Name可能叫gender，

因為我們可能有多個選項，要讓人認得這堆選項，所以要這樣輸入。

所以最後是這樣的：
<input type='radio' name='gender'〉MALE

然後打多個是FEMALE的選項：

<input type='radio' name='gender'>FEMALE


Save後用Chrome打開看看，你看到有兩個讓人選擇的選項了吧。

大家都學懂了嗎？

Checbox & textarea

接著下來，我們要學習下一個叫Checbox的東西，

我們一起輸入<input type='checkbox'>，

然後在前面文字打「Tick me?」。


Save後用Chrome打開看看，

你會看到，出現了一個讓人Tick的Checbox了。

其實，還有另一個常用的Tag，就是select Tag，


一起輸入select Tag，然後在裡面輸入option Tag，

跟我一樣輸入3次option。

Save後用Chrome打開看看，

你會看到，有一個按鈕，按摩入去有3項選擇的Option。

最後要學的是，就是叫textarea Tag。

textarea Tag作用是提供一個大位置，讓你去輸入一段文字。


學到這裡，基本上整個Form的Element就學完了。

總結

HTML其實並不難學。

但要充分理解及運用，也需要花大量時間去練習，才會熟能生巧。

以上4個章節，由淺入深學習HTML，
已教授了你絕大部分你要知道的HTML編程知識。

大家好好學習吧！

加油！

你可能也會喜歡...

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程！