[JS教學-2]使用Copilot建立你的第一個網頁:從Hello World到客製化頁面

更新 發佈閱讀 6 分鐘

上一篇教了大家開始寫了第一隻javascript程式,「Hello World」。今天要教大家寫出第一個網頁!對真的是網頁。今天會使用 copliot 輔助開發學習。

讀完此篇你會學到:利用AI(Copilot) 寫出人生第一個 HTML 網頁,並學會如何在瀏覽器中看到成果。

網頁組成

網頁是由 Html,︀CSS,︀ Javascript 這三個組成的。那這三個分別主要是什麼關係?簡單來說 Html 主要是網頁的架構,CSS負責網頁的樣式也就是外觀。,Javascript 負責功能的部分。這個部分我們下一篇再來詳細的說名。今天先在重在寫出網頁。

不過你可能會想說,我不是來學 javascript的嗎?為什麼還要學 Html和CSS?還要多學其他的東西,感覺就好累。可以不要學嗎?

其實答案是可以的!因為 Html和CSS主要是網頁前端的部分,如果你對作網頁畫面沒有興趣的話,其實是可以不用學的。那可以做什麼?可以單純做後端,後端主要是用 Javascript 處理一些數據,可能是資料格式,或是和資料庫溝通,或是數據的處理方面,甚至是做一些功能。

但我還是比較建議都學,這樣可以自己做出一個成品的感覺成就感會比較大。

第一個網頁

講了這麼多,要開始正式開始了,打開你的 codespaces,建立一個 index.html檔案。然後要打什麼,我相信一開始的大家都很茫然,但會推薦使用 codespaces的原因就是因為他有 copilot。

Copilot

我們可以使用Copilot輔助我們寫出第一行程式,2025了,善用AI工具也是很必要的吧。

點擊最上面那個很像帶飛行眼鏡?的一個人頭圖像,就會出現聊天視窗。

vocus|新世代的創作平台

再來是在聊天視窗送出的按鈕旁邊有個下拉選單,選擇代理程式。這三個有什麼差別呢?

詢問:就是詢問AI,該怎麼寫,他會給你建議,但要不要採用是由你決定。

編輯:AI會幫你編輯特定選取的檔案

代理程式:AI會依照需求幫你修改檔案,甚至新增檔案,下終端機指令,而且會反覆試錯,到“他”覺得沒問題為止。

vocus|新世代的創作平台

至於要選擇什麼,可以依據情境還有個人需求選擇了。

請產生html檔案

再來我們請Copilot協助我們寫 html 檔案,在聊天視窗打

「請產生基本 html檔案」,就會得到以下成果。很有趣,他給你的範例也是 Hello Workld。

vocus|新世代的創作平台


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

執行Html檔案

寫好後,那我們要怎麼執行呢?其實執行Html檔案的方法有很多種,不過因為我們在開發網頁,會想看到網頁寫出來的樣子。在這邊可以安裝 "Live Server" 的插件,就可以直接執行程式碼。

Live Server

在側邊工具列點選市集的圖示,然後再搜尋打上 "Live"第一個看到的就是了。直接點擊安裝。

vocus|新世代的創作平台


安裝好後回到檔案總管,對著我們新增的 index.html 按下右鍵,會看一個 「Open with Live Server」。點下去就會執行html檔案了。

vocus|新世代的創作平台

瀏覽器會直接跳轉頁面,你就會看到一個只有 Hello World的網頁了。

vocus|新世代的創作平台

到這一步,你已經成功執行了 Html檔案,並且做出你的第一個網頁了!

修改網頁

再來把index.html裡面的 Hello, World修改成 Hello, Tom。看看網頁有什麼不一樣?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, Tom</h1> <<<修改這行
</body>
</html>

看到網頁就變成 Hello, Tom了!是不是很神奇!

vocus|新世代的創作平台

這樣你也學會怎麼修改並執行網頁了。

練習:

作業 :換句話說

請修改 <h1>Hello, Tom</h1> 裡面的內容,變成你自己想說的話,例如:

<h1>我做出我的第一個網頁了!</h1>

📌 觀察一下畫面有沒有跟著改?


你已經踏出學網頁的第一步!別小看這個 Hello, World,這代表你已經懂得怎麼操作環境、怎麼跑網頁並且看到結果。

可以把練習的結果貼在留言,讓大家知道你成功了!!有任何問題也可以在連言區問我,謝謝。喜歡的話記得幫我追蹤,才不會錯過我的更新!

關注Tom,每天十分鐘,你也學得會寫程式!


留言
avatar-img
湯編驛-湯姆實驗室
39會員
82內容數
這邊會放一些我自己的分享內容,實驗測試還有做的MVP介紹
你可能也想看
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News