網頁

v0.41 - by 晴☆

什麼是網頁

網路上的頁面

網頁

就是一個呈現資料給使用者看的介面

因為不可能把資料直接砸給使用者，那沒有人看得懂

[
    [
        1687148361470,
        "這裡可以點進來看",
        "# 這裡可以點進來看\n測試一下公告系統的 Markdown 吧～\n\n**粗體字**\n\n`Codeblock`\n\n[Google 連結](https://google.com/)"
    ],
    [
        1687156229013,
        "公告系統測試",
        "# 公告系統測試\n好耶，現在可以**從前端**發公告了！\n\n||但別問我是怎麼寫的 :)||"
    ],
    [
        1687158587116,
        "AaW 問我是怎麼寫的",
        "# AaW 問我是怎麼寫的\r\n但我不想說 哈哈\r\n\r\n放個 Spoiler: ||公告系統其實就是存一個 JSON 檔案而已啦||"
    ],
    [
        1687159332173,
        "我試試看大的 Codeblock 效果如何",
        "# 我試試看大的 Codeblock 效果如何\r\n\r\n```\r\n// import module\r\nconst express = require(\"express\");\r\n\r\n// create an express app\r\nvar app = express();\r\n\r\n// GET method route\r\napp.get(\"/\", (req, res) => {\r\n  res.send(\"GET request to the homepage\");\r\n});\r\n\r\n// POST method route\r\napp.post(\"/\", (req, res) => {\r\n  res.send(\"POST request to the homepage\");\r\n});\r\n\r\n// listion port 80 (http)\r\napp.listen(80);\r\n```"
    ],
    [
        1687160438498,
        "Markdown 有點複雜啊",
        "# Markdown 有點複雜啊\r\n\r\n因為 URL Encode 的縮排似乎會爛掉\r\n\r\n不過沒差啦 不要用需要縮排的東西就好\r\n\r\n之後再想有沒有更好的做法"
    ],
    [
        1687253865816,
        "96 是一個數字",
        "# 96 是一個數字\r\n\r\n我相信有寫學術上機考的人都知道這是什麼\r\n\r\n但……\r\n\r\n我發這個文幹嘛？\r\n\r\n其實只是||想要測試手機發文啦|| :D"
    ],
    [
        1688555310525,
        "123",
        "# 123\n聽說明天是茶會總籌欸\r\n\r\n但我簡報還沒做好\r\n\r\n── 晴☆"
    ],
    [
        1688557042348,
        "空格",
        "# 空格\n話說現在標題會自己加上去了！\r\n\r\n嗯，所以有沒有辦法不要去掉頭尾的空格啊？\r\n\r\n不然這樣：\r\n\r\n```\r\nint main() {\r\n    cout << \"cout\\n\";\r\n}\r\n```\r\n\r\n會爛掉欸"
    ],
    [
        1688557161141,
        "哇他是好的",
        "# 哇他是好的\n好耶\r\n\r\n空格沒跑掉！\r\n\r\n因為我用的是現成的 Markdown Render\r\n\r\n但是框框跑掉了，好醜\r\n\r\n而且我覺得 Spoiler 會爛掉\r\n\r\n||測試||"
    ],
    [
        1688558358240,
        "Bruh",
        "# Bruh\n因為 Spoiler 跑掉不太開心\r\n\r\n所以我還是手刻好了\r\n\r\n||沒問題吧||\r\n\r\n而且 Codeblock 現在是好的了\r\n\r\n```\r\n(async () => {\r\n    console.log(\"Hello world!\");\r\n})();\r\n```"
    ],
    [
        1688558417824,
        "List",
        "# List\n蛤 你說 List\r\n\r\n那種東西真的會用到嗎\r\n\r\n1. 可能會\r\n2. 應該吧\r\n3. 我好像正在用"
    ],
    [
        1688560152643,
        "好欸終於有第二頁了",
        "# 好欸終於有第二頁了\n我可以來抓 Bug 囉"
    ],
    [
        1688560875386,
        "2023 建北電資聯合社展《Code Apocalypse》",
        "# 2023 建北電資聯合社展《Code Apocalypse》\n建北電資聯合社展即將盛大舉辦嘍～\r\n\r\n來看展覽不需要花錢喔！\r\n\r\n現場還會有小活動與摸彩環節\r\n\r\n當天只要完成小任務就能參加摸彩\r\n\r\n有機會獲得精美小禮物喔～\r\n\r\n(偷偷說在我們社展ig主頁有個神秘表單據說填完可以多拿一張摸彩券喔)\r\n\r\n-\r\n\r\n活動時間：6/3 (六) 10:00~16:00 ( 12:00中場休息1小時 )\r\n\r\n活動地點：建國中學資源大樓5F\r\n\r\n主辦單位：**建中電研第42屆 北一資研第36屆**\r\n\r\n社群帳號：[code_apocalypse_2023](https://www.instagram.com/code_apocalypse_2023/)\r\n\r\n執秘｜208 張存逸｜二溫蘇怡恩"
    ],
    [
        1688627300693,
        "我覺得茶會總籌沒料啊",
        "# 我覺得茶會總籌沒料啊\n我到底去做什麼？\r\n\r\n傳染 A 流給大家嗎？"
    ]
]

網頁

就是一個呈現資料給使用者看的介面

因為不可能把資料直接砸給使用者，那沒有人看得懂

[
    [
        1687148361470,
        "這裡可以點進來看",
        "# 這裡可以點進來看\n測試一下公告系統的 Markdown 吧～\n\n**粗體字**\n\n`Codeblock`\n\n[Google 連結](https://google.com/)"
    ],
    [
        1687156229013,
        "公告系統測試",
        "# 公告系統測試\n好耶，現在可以**從前端**發公告了！\n\n||但別問我是怎麼寫的 :)||"
    ],
    [
        1687158587116,
        "AaW 問我是怎麼寫的",
        "# AaW 問我是怎麼寫的\r\n但我不想說 哈哈\r\n\r\n放個 Spoiler: ||公告系統其實就是存一個 JSON 檔案而已啦||"
    ],
    [
        1687159332173,
        "我試試看大的 Codeblock 效果如何",
        "# 我試試看大的 Codeblock 效果如何\r\n\r\n```\r\n// import module\r\nconst express = require(\"express\");\r\n\r\n// create an express app\r\nvar app = express();\r\n\r\n// GET method route\r\napp.get(\"/\", (req, res) => {\r\n  res.send(\"GET request to the homepage\");\r\n});\r\n\r\n// POST method route\r\napp.post(\"/\", (req, res) => {\r\n  res.send(\"POST request to the homepage\");\r\n});\r\n\r\n// listion port 80 (http)\r\napp.listen(80);\r\n```"
    ],
    [
        1687160438498,
        "Markdown 有點複雜啊",
        "# Markdown 有點複雜啊\r\n\r\n因為 URL Encode 的縮排似乎會爛掉\r\n\r\n不過沒差啦 不要用需要縮排的東西就好\r\n\r\n之後再想有沒有更好的做法"
    ],
    [
        1687253865816,
        "96 是一個數字",
        "# 96 是一個數字\r\n\r\n我相信有寫學術上機考的人都知道這是什麼\r\n\r\n但……\r\n\r\n我發這個文幹嘛？\r\n\r\n其實只是||想要測試手機發文啦|| :D"
    ],
    [
        1688555310525,
        "123",
        "# 123\n聽說明天是茶會總籌欸\r\n\r\n但我簡報還沒做好\r\n\r\n── 晴☆"
    ],
    [
        1688557042348,
        "空格",
        "# 空格\n話說現在標題會自己加上去了！\r\n\r\n嗯，所以有沒有辦法不要去掉頭尾的空格啊？\r\n\r\n不然這樣：\r\n\r\n```\r\nint main() {\r\n    cout << \"cout\\n\";\r\n}\r\n```\r\n\r\n會爛掉欸"
    ],
    [
        1688557161141,
        "哇他是好的",
        "# 哇他是好的\n好耶\r\n\r\n空格沒跑掉！\r\n\r\n因為我用的是現成的 Markdown Render\r\n\r\n但是框框跑掉了，好醜\r\n\r\n而且我覺得 Spoiler 會爛掉\r\n\r\n||測試||"
    ],
    [
        1688558358240,
        "Bruh",
        "# Bruh\n因為 Spoiler 跑掉不太開心\r\n\r\n所以我還是手刻好了\r\n\r\n||沒問題吧||\r\n\r\n而且 Codeblock 現在是好的了\r\n\r\n```\r\n(async () => {\r\n    console.log(\"Hello world!\");\r\n})();\r\n```"
    ],
    [
        1688558417824,
        "List",
        "# List\n蛤 你說 List\r\n\r\n那種東西真的會用到嗎\r\n\r\n1. 可能會\r\n2. 應該吧\r\n3. 我好像正在用"
    ],
    [
        1688560152643,
        "好欸終於有第二頁了",
        "# 好欸終於有第二頁了\n我可以來抓 Bug 囉"
    ],
    [
        1688560875386,
        "2023 建北電資聯合社展《Code Apocalypse》",
        "# 2023 建北電資聯合社展《Code Apocalypse》\n建北電資聯合社展即將盛大舉辦嘍～\r\n\r\n來看展覽不需要花錢喔！\r\n\r\n現場還會有小活動與摸彩環節\r\n\r\n當天只要完成小任務就能參加摸彩\r\n\r\n有機會獲得精美小禮物喔～\r\n\r\n(偷偷說在我們社展ig主頁有個神秘表單據說填完可以多拿一張摸彩券喔)\r\n\r\n-\r\n\r\n活動時間：6/3 (六) 10:00~16:00 ( 12:00中場休息1小時 )\r\n\r\n活動地點：建國中學資源大樓5F\r\n\r\n主辦單位：**建中電研第42屆 北一資研第36屆**\r\n\r\n社群帳號：[code_apocalypse_2023](https://www.instagram.com/code_apocalypse_2023/)\r\n\r\n執秘｜208 張存逸｜二溫蘇怡恩"
    ],
    [
        1688627300693,
        "我覺得茶會總籌沒料啊",
        "# 我覺得茶會總籌沒料啊\n我到底去做什麼？\r\n\r\n傳染 A 流給大家嗎？"
    ]
]

那我們要怎麼做？

排版！

我們用個動畫演示一下

物件

物件

全台最「電」

資訊系社團

2023-07-05 2023 建北電資聯合社展《Code Apocalypse》

樣式

公告
關於
幹部
課程
活動
ISCOJ
歷屆社網

物件

樣式

互動

全台最「電」

資訊系社團

2023-07-05 2023 建北電資聯合社展《Code Apocalypse》

怎麼寫網頁

用程式寫

關於這堂課

會教：

使用 html, css & js 製作一個可以自己打開的前端網頁

```
html
```
```
css
```
```
js
```
```
檔案之間的連結
```

不會教：

架伺服器

```
靜態檔案路徑
```
```
伺服器後端處理 & database
```

前端網頁

「超文本標記語言」

以不同標籤撰寫

用來表示網頁中有不同元件

<div class="box" onclick="fun()">
    <a>Click me!</a>
    <br>
    <a>Or me!</a>
</div>

「階層樣式表」

選取不同 html 元件

表示樣式、動畫等等

.box {
    padding: 20px;
    font-size: 64px;
    background-color: lightblue;
}

又稱作 ECMA Script

是個簡單易學的程式語言

可以增加網頁的互動

function fun() {
    alert("Hello!"); 
    alert("Nice to meet you!"); 
}

開發環境

我信賴 VS Code

建個專案

首先要有一個資料夾來放東西

然後打開 VS Code

按左上角的「檔案」

建個專案

首先要有一個資料夾來放東西

然後打開 VS Code

按左上角的「檔案」

按「開啟資料夾」然後開啟你要用的工作資料夾

建個專案

然後打開 VS Code

按左上角的「檔案」

按「開啟資料夾」然後開啟你要用的工作資料夾

建立 html 檔案

然後就可以開始寫了

但我什麼都還沒教啊

馬上來教

HTML

標記一下哪邊有什麼物件

HTML

就是很多標記

<element>

</element>

<inner-element>

<element-2>

</element-2>

文字內容

</inner-element>

文字內容 2

HTML

就是很多標記

<element>

</element>

<inner-element>

<element-2>

</element-2>

文字內容

</inner-element>

文字內容 2

文字內容

文字內容 2

物件種類

其實 element 有種類之分

<div>
    123
</div>

<a>123</a>

<button>
    Click me!
</button>

區塊

文字

按鈕

還有一堆其他的，等等有一個章節專門講

架構

先在 html 檔案中寫下這串：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        
    </body>
</html>

架構

先在 html 檔案中寫下這串：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        
    </body>
</html>

<html> - 整個 HTML

<head> - 頭，前置處理區

<body> - 身體，真正會顯示的區塊

架構

<html> - 整個 HTML

<head> - 頭，前置處理區

<body> - 身體，真正會顯示的區塊

架構

<html> - 整個 HTML

<body> - 身體，真正會顯示的區塊

加上一些東西

我們回到 code 來看

直接加上文字！

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        123
    </body>
</html>

看看結果

回到檔案總管

點兩下用 Chrome 把它打開就可以了

看看結果

回到檔案總管

點兩下用 Chrome 把它打開就可以了

~~好欸你會寫網頁了！~~

CSS

改變物件的樣式

樣式

先

看看

完全沒有

樣式的網頁長什麼樣子：

再

已經加上

樣式

再

看看

已經加上

樣式的網頁長什麼樣子：

先

完全沒有

怎麼加樣式

用 CSS 語言！

基本上就是選擇物件 → 修改它們的屬性值

蛤？

舉個例子：

晴☆ {
    身高: 200cm;
    體重: 20kg;
}

這樣就修改好了

我就會變成 200 公分高、20 公斤重 = =

CSS 要寫在哪

可以寫在一個 <style> 裡面

<style>
    晴☆ {
        智商： -200;
    }
</style>

或者使用連結來引入其他 .css 檔案

<link rel="stylesheet" type="text/css" href="./神奇檔案.css">

馬上加檔案

新增一個資料夾

然後對它按又鍵新增一個檔案，命名為 style.css

懶得放截圖了

現在它應該會長這樣

馬上加檔案

新增一個資料夾

然後對它按又鍵新增一個檔案，命名為 style.css

懶得放截圖了

現在它應該會長這樣

先不管它
回去 index.html
我要解釋一下如何辨別 html 中的物件

Tag Name, ID & Class

Tag Name 就是種類

<div> </div>

這個物件的 tag name 就是 div

ID 就是 ID，不能有重複的

<div id="123"> </div>

這個物件的 id 就是 123

Class 就是所屬的類別，一個物件可以有很多 Class

<div class="happy tree"> </div>

這個物件的 class 就是 happy 和 tree

從 css 選取物件的方法

選取所有相同 tag name 的物件

div {
  
}

<div>

選取在這個 class 裡面的所有物件

.my-class {
  
}

<div class="my-class other-class">

選取指定 ID 的物件

#my-id {
  
}

<div id="my-id">

全選

* {
  
}

優先順序： \(\text{ID} > \text{Class} > \text{Type} > *\)

從 css 選取物件的方法

選取所有相同 tag name 的物件

div {
  
}

<div>

選取在這個 class 裡面的所有物件

.my-class {
  
}

<div class="my-class other-class">

選取指定 ID 的物件

#my-id {
  
}

<div id="my-id">

全選

* {
  
}

優先順序： \(\text{ID} > \text{Class} > \text{Tag} > *\)

互相的關係

A 或 B：用逗號分隔

div, .my-class {
  
}

<div>

被包在 A 裡面的 B：用 > 分隔

.box > .banana {
  
}

<div class="box">
    <div class="banana"> </div>
</div>

A 且 B：接在一起

div.red.circle {
  
}

<div class="circle red">

<button class="my-class">

做個範例

首先我們把 html 改成這樣：

<body>
    <div id="my-first-div" class="cool hot">
        about this element:
        <br>
        type = div
        <br>
        id = my-first-div
        <br>
        class = cool & hot
    </div>
    <br><br><br>
    <div id="my-second-div" class="hot">
        about this element:
        <br>
        type = div
        <br>
        id = my-second-div
        <br>
        class = hot
    </div>
</body>

先偷看一下

應該會長這樣：

按 F12，點選元素就可以看到它的位置了

引入 css 檔案

加上這行

<link rel="stylesheet" type="text/css" href="./static/style.css">

引入 css 是前置處理的一部分

好像不應該顯示出來

放在 <head> 裡面！

<head>
    <link rel="stylesheet" type="text/css" href="./static/style.css">
</head>

寫 css 內容

在 style.css 中寫上這些：

div {
    font-size: 32px;
}

.hot {
    border: 5px solid red;
}

.cool {
    background-color: lightblue;
}

把在 hot 這個 class 裡面的物件
加上紅色邊框

把在 cool 這個 class 裡面的物件
變成淺藍色背景

把 div 中的文字放大

偷看一下

它理論上會變成這樣：

這就是 css 的力量！

但這個範例感覺有點醜欸

JavaScript

讓網頁能夠與使用者互動

關於 JavaScript

是一種程式語言
- 跟 Java 完全沒有關係
- 不一定要在網頁中使用
- 物件導向

這好像是題外話

如果學得好，JavaScript 也可以向 Python 一樣，有一大堆功能

按鈕

我們想要讓一個按鈕可以互動

那就會用到 JS 了

先寫 html:

<body>
    <button>按我按我</button>
</body>

現在按了還是沒用

按鈕

我們想要讓一個按鈕可以互動

那就會用到 JS 了

先寫 html:

<body>
    <button>按我按我</button>
</body>

現在按了還是沒用

我們要讓它在被按得時候做點事
那就會用到 onclick 事件

<element onclick="/* JavaScript 程式碼內容 */"> </element>

這個事件會在物件被點擊時觸發
並執行 JavaScript 程式碼

按鈕

我們想要讓一個按鈕可以互動

那就會用到 JS 了

先寫 html:

<body>
    <button>按我按我</button>
</body>

我們要讓它在被按得時候做點事
那就會用到 onclick 事件

<element onclick="/* JavaScript 程式碼內容 */"> </element>

這個事件會在物件被點擊時觸發
並執行 JavaScript 程式碼

把 onclick 加到 <button>

按鈕

我們想要讓一個按鈕可以互動

那就會用到 JS 了

<body>
    <button onclick="myFunction();">按我按我</button>
</body>

這個事件會在物件被點擊時觸發
並執行 JavaScript 程式碼

把 onclick 加到 <button>

這樣按按鈕的時候就會呼叫 myFunction 函數！

蛤？什麼函數？？？

JS 要寫在哪

話說 JavaScript 和 CSS 一樣，可以直接寫在 HTML 中：

<script>
    // some code
</script>

但我們還是寫在獨立的 .js 檔案裡比較好

可以這樣引入：

<script src="./神奇檔案.js"> </script>

馬上加檔案

加上 .js 檔：

從 html 那邊引入：

<head>
    <link rel=stylesheet type="text/css" href="./static/style.css">
    <script src="./static/script.js"> </script>
</head>

寫 code 囉

定義一個叫做 myFunction 的函數

function myFunction() {
    alert("你好");
    alert("很高興認識你");
}

它的內容就會呼叫 alert 函數 (警示，也就是彈出對話框)
依序顯示「你好」、「很高興認識你」

偷看一下

大概長這樣：

這大概就是把 JS 應用在 HTML 中的原理了！

常用 Blocks 列表

但其實我喜歡全部都用 <div>

<div>

就是一個好用的方塊，可以互相排列、包來包去之類的

會換行

什麼意思？

<div> </div>
<div> </div>
<div> </div>

<span>

就是一個好用的方塊，可以互相排列、包來包去之類的

不會換行

<span> </span>
<span> </span>
<span> </span>

但之後你就會發現，要不要換行其實可以自己指定

<button>

一個原始的、別人幫你寫好樣式的按鈕

寫起來很簡單

長得大概像這樣：

但之後你就會發現，只要 CSS & JS 寫得好，<div> 也可以當按紐

<button>
    不要按我，按了也沒用
</button>

<input>

各式各樣的輸入，比較複雜一些

<input />

你可能覺得那個 / 出現在很奇怪的地方欸
因為它是少數不用對應 </> 的 Blocks 之一

預設是輸入文字

但目前也沒什麼用

<input>

各式各樣的輸入，比較複雜一些

<input />

你可能覺得那個 / 出現在很奇怪的地方欸
因為它是少數不用對應 </> 的 Blocks 之一

預設是輸入文字

但目前也沒什麼用

<input type="button" value="文字" />

和 <button> 差在哪？

也可以是按紐

~~可以搞後端 ~~ 我沒有要教啊

<input>

各式各樣的輸入，比較複雜一些

但目前也沒什麼用

<input type="button" value="文字" />

和 <button> 差在哪？

也可以是按紐

~~可以搞後端 ~~ 我沒有要教啊

還有一堆：

type="checkbox"

type="date"

<input>

各式各樣的輸入，比較複雜一些

但目前也沒什麼用

<input type="button" value="文字" />

和 <button> 差在哪？

也可以是按紐

~~可以搞後端 ~~ 我沒有要教啊

還有一堆：

type="checkbox"

type="date"

type="color"

<input>

各式各樣的輸入，比較複雜一些

但目前也沒什麼用

<input type="button" value="文字" />

和 <button> 差在哪？

也可以是按紐

~~可以搞後端 ~~ 我沒有要教啊

還有一堆：

type="date"

type="color"

type="file"

<input>

各式各樣的輸入，比較複雜一些

但目前也沒什麼用

<input type="button" value="文字" />

和 <button> 差在哪？

也可以是按紐

~~可以搞後端 ~~ 我沒有要教啊

還有一堆：

type="color"

type="file"

不舉例了，因為大概不會用到

<a>

用來包文字的，預設不會有任何改變

<a>123</a>

<a>

用來包文字的，預設不會有任何改變

<a>123</a>

但是可以用來放連結！

<a href="https://ckefgisc.org/">建北電資社網</a>

"href" 是 hyper reference，也就是超連結

<h*>

標題，有 <h1> ~ <h6> 之分

<h1> 最大，<h6> 最小

但基本上到 <h4> 再更小就沒什麼意義了，平常也不會去用

<h1>1 號標題</h1>
<h2>2 號標題</h2>
<h3>3 號標題</h3>

<b|i|u|s>

```
粗體　  <b>old
```
```
斜體　  <i>talic
```
```
底線　  <u>nderline
```
```
刪除線  <s>trikethrough
```

我們其實也可以透過 CSS 改樣式來做到一樣的效果

<b>粗體</b> <i>斜體</i> <u>底線</u> <s>刪除線</s>

CSS 屬性

等級: 1☆;

網頁

什麼是網頁

網頁

網頁

全台最「電」

資訊系社團

全台最「電」

資訊系社團

怎麼寫網頁

關於這堂課

前端網頁

前端網頁

開發環境

建個專案

建個專案

建個專案

HTML

HTML

HTML

物件種類

架構

架構

架構

架構

加上一些東西

看看結果

看看結果

CSS

樣式

樣式

怎麼加樣式

CSS 要寫在哪

馬上加檔案

馬上加檔案

Tag Name, ID & Class

從 css 選取物件的方法

從 css 選取物件的方法

互相的關係

做個範例

先偷看一下

引入 css 檔案

寫 css 內容

偷看一下

JavaScript

關於 JavaScript

按鈕

按鈕

按鈕

按鈕

JS 要寫在哪

馬上加檔案

寫 code 囉

偷看一下

常用 Blocks 列表

CSS 屬性

Properties

網頁

More from 晴☆