---
# System prepended metadata

title: 【Day4】伺服器原理與平台介紹

---


## 寫程式環境
- Sublime
- Codepen (線上平台)
## 伺服器瀏覽&原理
- 瀏覽
在網站空白處按右鍵 ---> 檢查 ---> 切到「Network」 ---> 重新整理網頁 ---> 點選最初檔案 ---> Headers ---> 可看到要求網址(URL)與遠端位置(IP)
- 原理
伺服器：遠方的一台電腦
```mermaid
graph TD;
將欲瀏覽資料丟至後端伺服器--->伺服器根據要求傳特定檔案回來
```
## 平台註冊&基礎設定
1. 網址列上打「codepen.io」進入首頁，點「Sign Up for Free」
![](https://hackmd.io/_uploads/B1BAxzQY2.png)
2. 註冊並驗證信箱
![](https://hackmd.io/_uploads/B1x1-zmYh.png)
3. 可從Trending參考他人作品
![](https://hackmd.io/_uploads/rJ9k-fmK2.png)
4. 點入其中一個作品，若喜歡可按愛心收藏或點選「Fork」開新的pen編輯他人作品並儲存為自己的檔案
![](https://hackmd.io/_uploads/rymafMQt3.png)
## 簡易實際操作
- 開啟一個new pen
- 打入文字與HTML程式碼
![](https://hackmd.io/_uploads/Sk6ktfQYh.jpg)
- 按「Save」以儲存
- 在「Change View」裡可用「Debug Mode」檢視整頁網頁
![](https://hackmd.io/_uploads/SkWyKMQth.jpg)
![](https://hackmd.io/_uploads/SykmYz7Kn.png)
- 點選「Profile」--->「Public」，可看見以儲存的網頁
![](https://hackmd.io/_uploads/rkoaKGXK3.png)
![](https://hackmd.io/_uploads/r1i6tzQt3.png)
## 使用sublime中快速鍵
1. ctrl+D : 選取相同的字，同步修改
2. ctrl+左中括號 : 往左縮排 ; ctrl+右中括號 : 往右縮排
3. ctrl+L : 選取一整行
4. ctrl+斜線 : 註解
5. shift+上下左右鍵 : 選取

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::