線上教室

認識標籤語言(HTML5)

講義

認識 HTML
HTML 的全名是 HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的標籤語言，這些標籤可以控制我們的瀏覽器要怎樣把文件顯示出來, 它可控制字體的大小，也可以插入圖像或連結。
網頁是以 HTML 的標籤語言來組成，它是一種網頁的排版語言，透過「超鏈結 (hyperlink)標籤」，可以將全世界的網頁彼此互相鏈接，進而形成一個巨大的網際網路多媒體頁面。
HTML5 除了原有的 HTML 標籤，還包含了 CSS3 與 JavaScript 等綜合的功能，因此在 HTML5 發表時，就受到了非常大的觀注。 HTML5 的目標就是在實現以往前端網頁只能依賴某些應用軟體才能實現的用戶端網頁動態效果。
網頁伺服器
網頁伺服器是一個負責回應使用者運用瀏覽器提出用戶端請求的主機，它可以依照後端網站設計者的指示來提供要執行的程式或資料庫內容，目前頁面伺服器較具代表性的有微軟(Microsoft)公司的 IIS(Internet Information Services)和 Apache HTTP Server等。
網頁伺服器主機端是透過 HTTP(Hyper Text Transfer Protocal)通訊協定和提出網頁需求的瀏覽器用戶端進行通訊，基本上，「用戶端」傳給「主機端」的要求(Request)和從「主機端」傳回給「用戶端」的回應(Response)都是透過 HTTP 來進行。
靜態網頁
「靜態網頁」是指每一個網頁都是存在於「主機端」的一個單獨的HTML文件，而這些文件都是在「主機端」事先建立好的檔案，當「用戶端」出需求時，「主機端」會直接把文件檔案傳遞給「用戶端」。
動態網頁
「動態網頁」是指在伺服器的「主機端」先建立腳本(Script)程式，當「用戶端」向「主機端」提出需求時，「主機端」會依事先建立的腳本程式回應一個 HTML 網頁給「用戶端」。
關於HTML5
HTML5是W3C(World Wide Web Consortium)制定的 HTML 新標準，除了原有的 HTML 標籤外，還包含 CSS3(Cascading Style Sheets 3)和 JavaScript API(Application Programming Interface)。
- 網頁資訊遷移
在舊有的 HTML 規格上，每次「用戶端」與「主機端」的互動，都需要重新傳送一次網頁，但是 HTML5 打破了這個限制，讓「用戶端」可以維持在相同的網頁狀況下，與「主機器」互相交換資訊，進一步實現了即時更新的技術。
- 多媒體功能
HTML5 新增了畫布(Canvas)標籤，雖然此標籤本身無繪圖能力，但是若運用javascript語言，就可以在網頁上進行文字、繪圖、影像、遊戲及動畫製作等。
Lesson1
HTML文件的結構
HTML文件有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為：
```
<!DOCTYPE html>
<html>
   <head>    
   </head>
   <body>
   </body>
</html>
```
大部份的標籤會成對出現，包含開啟碼與關閉碼，每一個開啟碼是由 `<>` 兩個符號所框住的，而關閉碼是由 `</>` 所框住的。
<HTML> 與 </HTML>
表示「文件開始」與「文件結束」
在文件中分為「頭部」與「身體」兩個部份。
頭部元件 `<head>`...`</head>`
頭部元件包含檔案相關資訊，例如：網頁的標題 `<title>`...`</title>`。
身體元件 `<body>`...`</body>`
身體元件顯示網頁的內容，可以在 `<body>` 標籤中加入網頁相關的屬性設定，例如：背景顏色(bgcolor)、背景圖(background)、文字顏色(text)、超連結文字顏色(atext)等。
靜態網頁通常使用「.html」或「.htm」作為檔案的副檔名。透過瀏覽器 (例如：Internet Explorer、Chrome、Firefox) 閱讀 Hyper-Text Markup Language (簡稱HTML)，形成我們所看到的網頁。
文字的排版
HTML是一種結構性的標籤語言，利用不同的標籤來定義文件的外觀，並完成網頁的排版。
HTML文件是由元件組合而成，包括容器元件和空元件兩種。容器元件使用「起始標籤」與「結束標籤」，在兩個標籤之間，可以加入敘述。
例如：
```
<font color="blue">歡迎光臨</font>
```
說明：
* `<font>` 稱為「起始標籤」、`</font>` 稱為「結束標籤」，這兩者通常會成對出現。
* `font` 稱為「標籤名稱」
* `color` 稱為「屬性名稱」
* `blue` 稱為「屬性值」。
容器元件可以放在另一個容器元件中，就如同把小盒子放在大盒子中。例如：
```
<font color="blue">歡迎<B>光</B>臨</font>

<font color="blue">歡迎<B>光</B>臨</font>
```
其中第三個字（光）會以粗體呈現。
空元件是用來執行一個特定的動作，例如： `<HR>` 標籤會在瀏覽器中顯示一條水平線，不需要 `</HR>` 來表示結束。
段落的排版
用來分隔不同的段落，即除了換行之外﹐還會與上一行間多加一行空白
標籤：`<p>...</p>`
常用屬性：
屬性說明
align 對齊方式：left(靠左)，center(置中)，right(靠右)
段落的排版範例：
```
<p align="left">白日依山盡</p>
<p align="center">黃河入海流</p>
<p align="right">欲窮千里目</p>
<p align="center">更上一層樓</p>
```
瀏覽器會忽略你在HTML文件中所輸入的空格與換行，文件中若是要換行，須在要換行的位置上必須加上`<BR>`標籤﹐如此才能達到換行的效果。
標題的排版

HTML 包含不同重要程度的標題標籤，從最重要的標題`<h1>` 開始到最不重要的 `<h6>` 標題，在瀏覽器預設情況下，h1 的字體最大，h6 的字體最小。
```
<h1>這裡是標題一</h1>
<h2>這裡是標題二</h2>
<h3>這裡是標題三</h3>
<h4>這裡是標題四</h4>
<h5>這裡是標題五</h5>
<h6>這裡是標題六</h6>
```
以下範例輸出結果：
這裡是標題一

這裡是標題二

這裡是標題三

這裡是標題四

這裡是標題五

這裡是標題六
Lesson2
圖片的排版
- 標籤：`<img>`
- 常用屬性：
屬性說明
src 圖片的資源位址
width 顯示時的圖片寬度
height 顯示時的圖片高度
border 圖片的外框
- 圖片的排版範例：
```
<img src="https://openclipart.org/image/300px/svg_to_png/288017/happy_python.png">
```
- 圖片的排版示範：
在不指定寬度與高度的情況下，會以圖片的原始尺寸來顯示。
圖片的排版範例：
```
<img src="https://openclipart.org/image/300px/svg_to_png/288017/happy_python.png" width="100">
```
在僅指定寬度或僅指定高度的情況下，會等比例進行縮放。
超連結

超連結的標籤語言。
- 標籤： `<a>`...`</a>`
- 屬性：
屬性說明
href 超連結的位置
target 開啟的目標視窗
- 語法示範
以文字做為連結點：
```
<a href="https://coding.nutc.edu.tw/">Joy of Code</a>
```
以圖片做為連結點：
```
<a href="https://coding.nutc.edu.tw/"><img src="http://coding.nutc.edu.tw/static/images/header.png"></a>
```
文字超連結的示範：
Joy of Code
圖片超連結的示範：
表格的排版
表格排版的標籤語言。
- 標籤：`<table>` `<tr>` `<th>` `<td>`
- 表格 `<table>`...`</table>`
- 列 `<tr>`...`</tr>`
- 儲存格
- 標題儲存格 `<th>`...`</th>`
- 內容儲存格 `<td>`...`</td>`
語法示範
範例程式：
```
<table border="1">
   <tr>
       <th>地區</th>
       <th>溫度</th>
   </tr>
   <tr>
       <td>台北</td>
       <td>18~20</td>
   </tr>
   <tr>
       <td>彰化</td>
       <td>20~24</td>
   </tr>
</table>
```
執行結果：
項目符號
在 HTML 文件中，常用的資料列表有下列二種：
1.無序列表 `<ul>`
2.有序列表 `<ol>`
無序列表：每一筆資料之前都有個小黑點代表提示符號。
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>檸檬</li>
</ul>
```
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>檸檬</li>
</ul>
```
type="disc" （預設值）代表實心圓點所產生的列表。
type="circle" 代表空心圓點所產生的列表。
type="square" 代表實心正方形所產生的列表。
無序列表的示範：
- 香蕉
- 蘋果
- 檸檬
有序列表：使用序號來代表提示符號。
<ol type="A">
<li>香蕉</li>
<li>蘋果</li>
<li>檸檬</li>
</ol>
```
<ol>
<li>香蕉</li>
<li>蘋果</li>
<li>檸檬</li>
</ol>
```
type="1"：這是預設值，代表用阿拉伯數目（1, 2 ,3 ...）字編號。
type="A"：代表用大寫英文字母（A-Z）來編號。
type="a"：代表用小寫英文字母（a-z）來編號。
type="I"：代表用大寫羅馬數字（I, II, III, ...）來編號。
type="i"：代表用小寫羅馬數字（i, ii, iii, ...）來編號。
有序列表的示範：
1. 香蕉
2. 蘋果
3. 檸檬
Lesson3
表單標籤
HTML form 表單結構
```
<form action="送出目的地" method="資料傳送方式">

</form>
```
- `action` 屬性用來指定送出表單的資料要由哪個網址來處理
- `method` 屬性用來指定資料傳送的方式，最常見的值有2種：
1. `GET` ：將欄位資料當成網址列的參數來傳遞，較簡單，但僅適合傳送少量資料使用
2. `POST` ：將欄位資料當成HTTP請求檔頭的一部份，資料內容不會出現在網址列上，適合用來傳送大量資料，例如：上傳檔案
常見的表單元素
單行文字輸入
```
<input type="text" name="欄位名稱">
```
- 輸入單行文字時使用
- 若有預設內容，可加上 `value="預設內容"` 屬性
  密碼輸入
單行文字輸入的示範：
```
 <input type="password" name="欄位名稱">
```
- 外觀似單行文字欄位，但在輸入時的內容會以 `*` 來呈現，以保護資料不被他人窺伺
  多行文字輸入
```
<textarea name="欄位名稱"></textarea>
```
- 輸入多行文字時使用
  若要指定外觀的寬與高，可加上 `cols="行數"` 或 `rows="列數"` 屬性
  若要預先指定預設內容，可將其置於 `<textarea>` 與 `</textarea>` 標籤之間
```
   <textarea name="comment" cols="60" rows="10">
   這是預設內容的第1行
   這是預設內容的第2行
   這是預設內容的第3行
   </textarea>
```
多行文字輸入的示範：
這是預設內容的第1行這是預設內容的第2行這是預設內容的第3行
下拉選單
```
<select name="欄位名稱">
   <option value="選項值1">選項文字1</option>
   <option value="選項值2">選項文字2</option>
   
 </select>
```
- 下拉選項的每一個選項都要指定一個對應的選項值
- 若要預設某個選項已被選定，則在該選項 `<option>` 標籤加上 `selected` 屬性，例：
```
   <select name="gender">
     <option value="1">女</option>
     <option value="2">男</option>
     <option value="3" selected>不告訴你</option>
   </select>
```
下拉選單的示範：
單選按鈕
```
 <input type="radio" name="欄位名稱" value="選項值">
```
* 適用於某個欄位僅能由幾個選項中選一個的情況，類似前述下拉選單的預設情況
* 這些選項需共用同一個欄位名稱，但其選項值不同
* 若要設定預設選項，則在該選項的 `<input>` 標籤加上 `checked` 屬性，例：
```
   性別：
   <input type="radio" name="gender" value="1">女 
   <input type="radio" name="gender" value="2">男 
   <input type="radio" name="gender" value="3" checked>不告訴你 
```
單選按鈕的示範：
性別：女男不告訴你
核取方塊
```
 <input type="checkbox" name="欄位名稱" value="選項值">
```
核取方塊的示範：
- 可用來當作複選欄位的輸入方式
- 預先要被核取的欄位，可加上 `checked` 屬性，例如：
```
   <div>您的興趣</div>
   <div>
     <input type="checkbox" name="interest" value="coding" checked>寫程式
   </div>
   <div>
     <input type="checkbox" name="interest" value="music">聽音樂
   </div>
   <div>
     <input type="checkbox" name="interest" value="singing" checked>唱歌
   </div>
```
核取方塊的示範：

您的興趣

寫程式

聽音樂

唱歌
按鈕
```
 <input type="按鈕類型" value="按鈕標籤">
```
按鈕的示範：

按鈕類型說明
submit 送出表單
reset 重設表單，將此表單的所有欄位恢復成預設值
button 顯示為一般按鈕，通常需搭配 javascript 來控制頁面上的元件
- 按鈕通常不需要特別指定 `name` 屬性
- 按鈕上顯示的標籤文字，由 `value` 屬性指定
- `submit` 或 `reset` 這兩類按鈕若省略 `value` 屬性，則其標籤文字由瀏覽器決定
- `button` 類型的按鈕若省略 `value` 屬性，則不顯示標籤文字
例如:
```
 <form action="/comment/add" method="post">
   
   <input type="submit" value="發表意見">
   <input type="reset" value="清空重填">
 </form>
```
- 隱藏欄位
```
<input type="hidden" name="欄位名稱" value="欄位值">
```
隱藏欄位按鈕的示範：
- 隱藏欄位在頁面上不可見
- 通常在頁面間傳遞資料或狀態時使用，因此通常會指定其 `value` 屬性，例：
```
 <input type="hidden" name="secret_token" value="AIzaSyCjSrqWHhmWJnoI7JlD8">
```
- 檔案欄位
```
 <input type="file" name="欄位名稱" accept="檔案類型篩選規則">
```
檔案欄位按鈕的示範：
- 會顯示一個按鈕，按下後可選擇欲上傳的檔案
- `accept` 屬性可用來限制欲上傳的檔案類型，可以使用 MIME 的格式，也可以使用副檔名限定，例：
```
   <div>
     <label>大頭照</label>
     <input type="file" name="mypic" accept="image/jpeg, .png">
   </div>
```
若省略 `accept` 屬性，則不限制上傳檔案的類型。
表單範例
```
<form action="/submit" method="post">
姓名：<input type="text" name="username"><BR>
內容：<textarea name="content"></textarea><BR>
<input type="submit" value="送出">
</form>
```
表單的示範：
姓名：
內容：

指定標籤

在標籤的屬性中，有「 id 」與「 class 」兩種「全域屬性」，可以在所有的標籤元素中被指定，以利於「 CSS 」樣式表與「 JavaScript 」程式兩者建立關聯。
- id 屬性
id 屬性是指標籤元素中指定的識別字，要特別注意的是在一個文件中，無法指定名稱相同的多個 id 。
用法如下：
```
<div id="name">
```
- class 屬性
class 屬性是指標籤中指定的類別名稱，一個文件中可以指定多個相同的類別。
用法如下：
```
<div class="name">
```
關於「指定標籤」，在下一個單元「認識CSS」課程中會詳細介紹。

meta標籤
- metadata
HTML 文件中可以嵌入「 metadata(元資料) 」，可以將某些資訊藏在文件中，不會顯示在網頁上面，為什麼要加入這些資料呢？因為「 metadata 」中存放了一些文件的內容、字集、編碼、以及提供給搜尋引擎使用的關鍵字等資料。
- meta 標籤
meta 標籤是用來指定 metadata 的標籤。這個標籤可以隨著屬性種類的不同來指定 HTML 文件中的資料。
用法如下：
```
..
<head>
<meta name="author" content="Jean & Dino">
<meta http-equiv="content-language" content="zh-tw">
<title>網站設計</title>
</head>
..
```
- metadata 的種類
1. 作者資料
如果要指定作者資料的話，需要在 name 屬性中指定為「author 」，在「 content 」屬性中指定為「作者姓名」。
2. 關鍵字
如果要指定關鍵字提供搜尋引擎使用，以利於增加網頁排名的話，就要在 name 的屬性指定為 keywords 。 content 屬性中則要指定關鍵字的值。
```
<meta name="keywords" content="南港高中,網站設計,Python,Django">
```
3. 字元編碼
如果要指定網頁的字元編碼時，就要在 http-equiv 的屬性中設定。
```
<meta http-equiv="content-language" content="zh-tw">
<meta http-equiv="content-type" content="text/html;charset=UYF-8">
```

屬性	說明
align	對齊方式：left(靠左)，center(置中)，right(靠右)

屬性	說明
src	圖片的資源位址
width	顯示時的圖片寬度
height	顯示時的圖片高度
border	圖片的外框

屬性	說明
href	超連結的位置
target	開啟的目標視窗

按鈕類型	說明
submit	送出表單
reset	重設表單，將此表單的所有欄位恢復成預設值
button	顯示為一般按鈕，通常需搭配 javascript 來控制頁面上的元件

認識標籤語言(HTML5)

認識 HTML

網頁伺服器

靜態網頁

動態網頁

關於HTML5

Lesson1

HTML文件的結構

<HTML> 與 </HTML>

文字的排版

段落的排版

標題的排版

這裡是標題一

這裡是標題二

這裡是標題三

這裡是標題四

這裡是標題五

這裡是標題六

Lesson2

圖片的排版

超連結

表格的排版

語法示範

項目符號

Lesson3

表單標籤

表單範例

指定標籤

meta標籤