---
# System prepended metadata

title: 基本環境設定
tags: [html]

---

---
tags: html
---

# 基本環境設定
內容可能不是非常詳細，歡迎有想學網頁的同學多多發問！！

### 1.基本網頁前端構成
html、css、javascript
這三種語言便可以組成一個前端網頁
HTML可以看成是網頁的骨架
CSS則是網頁的外觀
javascript可以讓網頁活起來

就像是一個人一樣 裸體的HTML可以用CSS來穿上華麗外衣，再利用javascript讓穿起外衣HTML做起動作來


### 2.基本應用程式下載
有了基本網頁認識 我們就可以嘗試開始創作自己的網站
使用VSCode或是線上編譯器Replit.com來完成網站

**1.VSCode**
去官網下載VSCode
https://code.visualstudio.com/
![](https://i.imgur.com/Wh6qtwR.png)

打開下載完的VSCode並點選左方的擴充，下載插件。這個插件可以讓觀看網站更加方便
![](https://i.imgur.com/mSK2nJ5.png)

點選左上角檔案選擇開啟資料夾，找到自己想存放資料夾的位置(懶人可以選擇桌面)，之後右鍵新增資料夾給他一個好名字，並選擇此資料夾
![](https://i.imgur.com/A5hqT95.png)
在HTML裡面新增檔案，並取名為index.html
![](https://i.imgur.com/uC6h1nG.png)
在右方貼上以下的程式，Ctrl+s存檔之後就可以按下Alt+B查看網站目前的樣子了

```
<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
  <H1>第一周進度</H1>
  </body>
</html>
```



**2.Repl**
先進入Repl.it網站並登入
登入後點選左上角+Create repl，選擇HTML,CSS,JS並在Title處輸入自己想要的專案名稱完成創立
![](https://i.imgur.com/NJpClTP.png)
進來之後可以看到網站已經幫你做好簡易的分配了，複製下方程式碼貼上後按下Run便可以開始執行你的網站
![](https://i.imgur.com/csoajb8.png)
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Hello, world!</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <H1>第一周進度</H1>
    <script src="script.js"></script>
  </body>
</html>

```










