--- 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> ```