網頁設計(入門) - 你的第一個網頁

只需要簡單的幾個步驟,就可以讓讀者看到自己的第一個網頁了!!

今天要開始寫網頁啦~ 不過在開始前,有一些事情工作需要準備。

  1. 打開我們前安裝的xampp,並點選Apache後面的Start按鈕(圖中是已經開啟的狀態),讓我們在自己的電腦上建立測試網頁用的伺服器。

  1. 在xampp安裝的資料夾中,進入htdocs資料夾,並建立一個資料夾(圖中建立的資料夾名稱為LearnHTML),一般來說,若是當初安裝xampp時,沒有特別更改安裝位置,那麼路徑應該是” C:\xampp\htdocs”,也就是在這個路徑下建立資料夾。

  1. 接著開啟我們之前安裝的VS Code,選擇左上角的 檔案 -> 開啟資料夾,開啟我們在步驟二建立的資料夾,如圖中所示。

  1. 接著點選圖中的”新增檔案按鈕”,並命名成XXX.html,XXX可以隨意取,圖中設定成index.html。

  1. 接著我們使用線上資源 - https://www.w3schools.com/W3School(本部落格右側有收藏該連結),一進到該網站,就可以看到大大的HTML基礎架構的程式碼(如圖中所示)。

  1. 我們將程式碼全部複製,並回到VS Code貼上,如圖中所示,接好以後儲存該檔案(快捷鍵為Ctrl + S)。

  1. 開啟瀏覽器,在網址的地方輸入localhost:8080/你在步驟二建立的資料夾名稱/XXX.html,XXX是你在步驟四取的名稱,以筆者為例,就會在網址輸入localhost:8080/LearnHTML/index.html,網站執行成功會向下圖所示。

  1. 下一篇文章,筆者就會開始介紹W3School如何使用,以及網頁上常見的按鈕、表格如何撰寫,其實程式不能死背,因為網路上都有資源,懂得怎麼找,怎麼用比較重要!!

 

 

 

命運不是代表著無所事事就會發生,而是要無比的努力,才能讓命中注定成真。

-真命天菜