# HTML, CSS, JavaScript 簡介
### 👨💻 適合高中生的入門簡介
<!-- Put the link to this slide here so people can follow -->
slide: https://hackmd.io/@b73201020/HyhnmuAh1l
---
## 上網的基本原理
---
由用戶的瀏覽器向主機要求，主機返回網頁內容
---
## 範例網站
* 靜宜大學網站：www.pu.edu.tw
* 葉介山老師網站：www1.pu.edu.tw/~jsyeh
---
## 網頁是如何製作?
網頁的製作主要分為 **前端（Front-End） 和 後端（Back-End）**，通常會使用 HTML、CSS 和 JavaScript 來設計前端，再加上伺服器端技術來處理資料和邏輯。
---
## 網頁前端
---
## 1. 設計網頁結構（HTML）
📌 **HTML（Hyper Text Markup Language, 超文本標記語言）** 是用來建立網頁的基本結構。
```html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>我的網站</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一個簡單的網頁。</p>
</body>
</html>
```
---
## 2. 美化網頁（CSS）
🎨 CSS（層疊樣式表）用來調整網頁的外觀，例如顏色、字型、版面等。
```css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #007bff;
}
```
---
## 3. 增加互動功能（JavaScript）
⚡ JavaScript 可以讓網頁更有互動性
例如按鈕點擊：
```html
<button onclick="alert('Hello!')">點我</button>
```
JavaScript 結合 HTML
```js
function changeText() {
document.getElementById("demo").innerHTML = "你點擊了按鈕！";
}
```
```html
<button onclick="changeText()">點我 改變文字</button>
<p id="demo">這裡的文字會變化</p>
```
#### Demo: https://codepen.io/b73201020/pen/MYWXBJL
---
## HTML + CSS + JavaScript 整合
🛠 綜合範例：點擊按鈕改變背景顏色
```html
<button onclick="document.body.style.
backgroundColor='yellow'">變黃！</button>
```
demo: https://codepen.io/b73201020/pen/azbKRBa
---
## 🎯 小測驗時間！
1. **HTML 的 `<h1>` 標籤是用來做什麼的？**
2. **請問 CSS 如何改變背景顏色？**
3. **JavaScript 可以用來做什麼？**
👀 試著回答，然後我們一起討論！
---
## 網頁後端
---
## 建立後端（PHP、Node.js、Python）
如果需要 會員登入、資料儲存、後台管理 等功能，就需要一個後端伺服器。例如：
* PHP + MySQL（WordPress、Laravel）
* Node.js + MongoDB（現代 Web 開發）
* Python（Django、Flask）
* Ruby on Rails
---
## 部署到網路（上線網站）
當你的網站開發完成後，需要上傳到網路上：
* 購買網域名稱（如：jsyeh.com）
* 自行架設網站主機或租用主機（如：智邦、匯智、中華電信）
* 使用 FTP 或 Git 部署（如：FileZilla、GitHub Actions）
---
## 🌟 小總結
* HTML 建立網頁結構
* CSS 美化網頁
* JavaScript 增加互動性
* 後端技術（PHP、Node.js） 處理資料
* 伺服器與網域 讓網站正式上線
---
## Q&A 🎤
🚀 **歡迎提問！**
---
## 參考網站
1. HTML, CSS, JavaScript教學： w3schools.com
2. 線上編輯平台：codepen.io
---
---
:bulb:
---
:100: :muscle: :tada:
---
{"showTags":"true","title":"HTML, CSS, JavaScript 簡介","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"dba27c10-a8f7-407c-a5ae-31d91d75f551\",\"add\":7035,\"del\":6747}]"}