# 網頁製作I (HTML)
---
今日簡報
---
## 網站基本架構
---
---
## 前端技術
---
---
---
### 網頁基本構造
---
HTML -> CSS -> Javascript
---
### HTML簡介
---
HTML (HyperText Markup Language)
是一種標記語言，而非程式語言，它主要的功能就是告訴瀏覽器該如何呈現你的網頁
```htmlmixed
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
<p>This is a line.</p>
</body>
</html>
```
---
XML 可延伸標籤語言 (Extensible Markup Language)
XML是從SGML推演出來的，SGML其實是一套非常複雜的系統，因為它具有許多的機制，以便提供各種的語法，來解讀、編輯及保存內容龐大複雜且互相連結的技術文件。
目的：讓文件能夠很容易地讓人去閱讀，同時又很容易讓電腦程式去辨識的語言格式和語法
---
### CSS
---
CSS (Cascading Style Sheets)，又稱串樣式列表...
CSS不能單獨運作，須搭配HTML或XML，主要工作為處理頁面的布局
```css
h1 {
color: MediumSlateBlue;
font-family: Arial;
}
```
---
### Javascript
---
看起來跟Java很像，但完全是不同東西
一種直譯式程式語言，支援物件導向設計；可以用於設計網站動態行為
```javascript
var a = 5;
console.log(a);
```
```htmlmixed
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
```
---
所以這三樣東西的關係用車來比喻的話：
HTML -> CSS -> Javascript
(骨架) -> (上漆) -> (開起來的樣子)
---
### 今天的目標
---
---
主要用到HTML + CSS (Javascript先不用)
---
## 做網頁囉！
---
### 準備工具
---
記事本 ~~(超推)~~
Nodepad++
***Visual Studio Code***
---
安裝 Visual Studio Code
https://code.visualstudio.com
----
- Windows
----
----
- Mac
----
---
sli.do
邀請碼：html
---
先開一個資料夾！！
裡面新增一個.html檔案(主頁面)
---
### 建立網頁內容(第一頁HTML)
----
先把基本架構放好
```htmlmixed
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
```
----
放入title (主題自訂，他會出現在瀏覽器的標籤上)
```htmlmixed
<head>
<title>神奇海螺</title>
</head>
```
----
- meta標籤
```htmlmixed
<meta name="description" content="神奇海螺介紹"> <!--用來寫網頁的簡短描述。-->
<meta name="keywords" content="神奇海螺"> <!--用來放置網頁關鍵字。-->
<meta name="author" content="海綿寶寶"> <!--記錄網頁的作者名稱-->
<meta name="generator" content="visual studio code"> <!--用來記錄網頁編輯器名稱-->
<meta name="copyright" content="蟹堡王"> <!--用來標示網頁的版權或著作權聲明-->
<meta name="distribution" content="比奇堡"> <!--用來記錄網頁的發佈地區-->
<meta http-equiv="Content-Type" content="text/html"; charset="uft-8"> <!--網頁內容的種類以及編碼 -->
<meta http-equiv="Content-Language" content="zh-TW"> <!--網頁所使用的語言種類-->
<meta http-equiv="Refresh" content="time"> <!--自動更新網頁的時間-->
<meta http-equiv="Pragma" content="no-cache"> <!--禁止瀏覽器用快取開啟網頁-->
<meta http-equiv="windows-Target" content="_top"> <!--強制在單一視窗中顯示網頁-->
```
----
#### 語意標籤
主要是用來排版
----
- div/span：用來規劃區域的
- header：網頁的標頭，通常放置網站標題
- nav：網頁的選單、導覽
- main：網頁的主要內容
- section：自訂的區塊
- footer：頁尾
----
class / id
先加入這些元素，之後會用到
----
```htmlmixed
<body class="main-bg">
<nav class="navigation">
</nav>
<div class="main">
</div>
</body>
```
----
- 加入標題和內容
標題：h1 ～ h6，內容：p
```htmlmixed
<div class="main">
<h1>神奇海螺</h1>
<h3 class="hh3">簡介</h3>
<p>曾經一段時間...</p>
</div>
```
----
插入圖片
```htmlmixed
<div class="pic">
<img src="https://pic.pimg.tw/catsy/4a748283edd08.jpg" width="10%" height="10%" style="position:relative;left:50px;" />
</div>
```
----
HTML其他常用標籤<br>
```
<a></a> 超連結
<br> 換行
<hr> 分隔線
<iframe src="URL"></iframe> 嵌入網頁
```
----
- 表格
用table標籤包夾，用tr包圍的地方為一個欄，thead為第一欄，用th當項目，tbody表示內容項目，用td當項次
----
範例
```htmlmixed
<table>
<thead>
<tr>
<th>第一項</th>
<th>第二項</th>
<th>第三項</th>
</tr>
</thead>
<tbody>
<tr>
<td>屬性一</td>
<td>屬性二</td>
<td>屬性三</td>
</tr>
</tbody>
</table>
```
----
接著讓表格置中(使用HTML)
```htmlmixed
<center>
<table>
...
</table>
</center>
```
----
但是現在center元素很少用，所以待會教大家另一個用CSS讓表格置中的方式
----
參考(...部分自行增加)
```htmlmixed
<table>
<thead>
<tr>
<th>海螺種類</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>大香菇</td>
...
</tr>
<tr>
<td>中香菇</td>
...
</tr>
<tr>
<td>小香菇</td>
...
</tr>
</tbody>
</table>
```
----
#### 加入目錄
----
利用list元素
list分為ordered list跟unordered list
----
- unorder list
```htmlmixed
<ul>
<li></li>
<li></li>
</ul>
```
----
- order list
```htmlmixed
<ol>
<li></li>
<li></li>
</ol>
```
----
參考
```htmlmixed
<body class="main-bg">
<nav class="navigation">
<ul class="menu">
<li><a href="./web.html">Home</a></li>
<li><a href="./order.html">Order</a></li>
<li><a>About</a></li>
</ul>
</nav>
</body>
```
---
### 加入新頁面(第二頁HTML)
----
開一個新的html檔案
(上面目錄就用第一頁格式當做模板套用)
參考
```htmlmixed
<body class="main-bg">
<nav class="navigation">
<ul class="menu">
<li><a>Home</a></li>
<li><a>Order</a></li>
<li><a>About</a></li>
</ul>
</nav>
</body>
```
----
#### form 表單
----
- input 用於收集訊息
收集內容取決於type，type可分為：text、password、checkbox、checked、button...等
- label 用於標示input的標籤
for屬性與id相同
----
- 既然是訂單，就需要收集一些個人資訊
----
- 姓名
參考
```htmlmixed
<label for="first_name">姓氏</label>
<input type="text" id="first_name" required/>
<label for="last_name">名稱</label>
<input type="text" id="last_name" required/>
```
----
- 電子郵件
參考
```htmlmixed
<label for="email">電子郵件</label>
<input for="e_mail" type="email" size="55" required/>
```
----
```htmlmixed
<form>
<label for="type">item name</label>
<input type="checkbox" name="type" id="type">
</form>
```
----
參考
```htmlmixed
<input type="checkbox" name="typee" id="typee" value="神奇海螺" />
<label for="typee">神奇海螺</label>
<input type="checkbox" name="typee" id="typee" value="清香海螺" />
<label for="typee">清香海螺</label>
<input type="checkbox" name="typee" id="typee" value="安眠海螺" />
<label for="typee">安眠海螺</label>
```
----
參考
```htmlmixed
<label for="choose">請選擇最近據點</label>
<select name="yourlocation">
<option value="Taipei">台北</option>
<option value="Taichung">台中</option>
<option value="Taina">台南</option>
</select>
```
----
- 填數量
type為number，表示接受數字。
```htmlmixed
<input type="number" name="input" id="input">
```
----
然後設一個範圍
- min表示最小值
- max表示最大值
- step表示一次遞增/減多少
```htmlmixed
<input type="number" name="input" id="input" max="10" min="0" step="1">
```
----
參考
```htmlmixed
<input type="number" name="input" id="input" max="10" min="0" step="1" required/>
```
---
#### 提交表單
----
再開一個頁面(HTML檔)吧！
在頁面裡面加入一些字，當使用者按下提交後，你想讓他們看見什麼
----
然後回到下單頁面
----
- 新增一個提交按鈕
一樣為input標籤，只是type改成submit，value為顯示文字
```htmlmixed
<input type="submit" value="Submit">
```
----
- 設定提交後的動作
form參數，action、method
```htmlmixed
<form class="form1" action="提交頁面位置" method="post">
<input type="submit" value="提交">
</form>
```
----
參考
```htmlmixed
<form class="form1" action="submission.html" method="post">
<input type="submit" value="Submit">
</form>
```
----
然後用瀏覽器打開，按一下提交鈕，應該會跳到剛設定的提交畫面
---
#### 連結兩份文件
----
建立超連結，並套用至list
<br>
- 超連結範例
```htmlmixed
<a href="main.html">Home</a>
```
----
參考(此為主頁面的)
```htmlmixed
<nav class="navigation">
<ul>
<li><a href="./main.html">Home</a></li>
<li><a href="./order.html">Order</a></li>
</ul>
</nav>
```
----
下單頁面也加入連結
成功建立連結的話，它應該會在兩個頁面間跳動
---
完整程式碼(main)
```htmlmixed
<!DOCTYPE html>
<html>
<head>
<title>神奇海螺</title>
<link rel="shortcut icon" href="https://ilearn2.fcu.edu.tw/theme/image.php/essential/theme/1570529392/favicon">
<meta charset="UTF-8">
<meta name="description" content="神奇海螺介紹">
<meta name="keywords" content="神奇海螺">
<meta name="author" content="海綿寶寶">
<meta name="generator" content="visual studio code">
<meta name="copyright" content="蟹堡王">
<meta name="distribution" content="比奇堡">
<meta http-equiv="Content-Language" content="zh-TW">
</head>
<body class="main-bg">
<nav class="navigation">
<ul class="menu">
<li><a href="./main.html">Home</a></li>
<li><a href="./order.html">Order</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="main">
<h1>神奇海螺</h1>
<h3 class="hh3">簡介</h3>
<p>在太平洋內部的個深處，據說隱藏個一個專門產神奇海螺的地方。那裡群聚著各種神奇的生物，進行用無法用言語形容的奇妙互動，
使周圍這些海螺日以繼夜，不斷吸收此日月精華，而各自延伸出各種特質，而有著不同的作用。
</p>
<div class="pic">
<img src="https://lh3.googleusercontent.com/aLpogYqaJOiSnyCvjVVhYok8fZoEmGLVMlhBe2RnnuoebuzI88AUfVy63ZzqT0nXNsg" width="20%" height="20%" />
</div>
<br><br><br>
<table>
<thead>
<tr>
<th>海螺種類</th>
<th>簡述</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>神奇海螺</td>
<td>據說內部隱藏著智慧</td>
<td>開導眾生</td>
</tr>
<tr>
<td>清香海螺</td>
<td>很香阿</td>
<td>就芳香劑阿</td>
</tr>
<tr>
<td>安眠海螺</td>
<td>睡不著的救星</td>
<td>助失眠</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
```
----
```htmlmixed
<!DOCTYPE html>
<html>
<head>
<title>神奇海螺</title>
<link rel="shortcut icon" href="https://ilearn2.fcu.edu.tw/theme/image.php/essential/theme/1570529392/favicon">
</head>
<body class="bg">
<nav class="top">
<ul>
<li><a href="./main.html">Home</a></li>
<li><a href="./order.html">Order</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="content">
<br><br><br><br><br>
<h1>訂購頁面</h1>
<hr>
<form class="form1" action="submission.html" method="POST">
<h2>詳細清單</h2>
<label for="first_name">姓氏</label>
<input type="text" id="first_name" required/>
<label for="last_name">名稱</label>
<input type="text" id="last_name" required/>
<br><br><br>
<label for="email">電子郵件</label>
<input for="e_mail" type="text" pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*" size="55" required/>
<br><br><br>
<input type="checkbox" name="typee" id="typee" value="神奇海螺" />
<label for="typee">神奇海螺</label>
<input type="checkbox" name="typee" id="typee" value="清香海螺" />
<label for="typee">清香海螺</label>
<input type="checkbox" name="typee" id="typee" value="安眠海螺" />
<label for="typee">安眠海螺</label>
<br><br><br>
<label for="input">數量</label>
<input type="number" name="input" id="input" max="10" min="0" step="1" required/>
<br><br><br>
<label for="choose">請選擇最近據點</label>
<select name="yourlocation">
<option value="Taipei">台北</option>
<option value="Taichung">台中</option>
<option value="Taina">台南</option>
</select>
<br><br><br>
<input id = "btn" type="submit" value="Submit" />
</form>
</div>
</html>
```
----
```htmlmixed
<!DOCTYPE html>
<html>
<head>
<link href="dec_sub.css" rel="stylesheet" type="text/css">
</head>
<body class="BG">
<div class="Main">
<br><br>
<h2 id="show">Thank You!</h2>
</div>
</body>
</html>
```
---
- 到目前為止，你已經完成了一個完整的網站喔！
---
{"metaMigratedAt":"2023-06-14T23:16:57.537Z","metaMigratedFrom":"Content","title":"網頁製作I (HTML)","breaks":true,"contributors":"[{\"id\":\"246310b9-df49-4665-937f-59c2d79b7869\",\"add\":23663,\"del\":11949}]"}