iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0

今天要來分享 HTML 的基礎,因為它是整個網站的「骨架」。如果把網站比喻成人體,HTML 就像是骨頭,支撐整個結構;CSS 是外表的服裝與裝飾;JavaScript 則是大腦與動作控制。
HTML 全名是 HyperText Markup Language,它是一種標記語言,不是程式語言。它的工作就是透過「標籤」(tag)描述網頁的內容。例如:
https://ithelp.ithome.com.tw/upload/images/20250916/20168364D1gI0LCoWa.png

執行後的頁面如下:
https://ithelp.ithome.com.tw/upload/images/20250916/20168364RI4xM2VL7Y.png

在這裡,h1用來表示頁面的主題,h2代表次標題,把主題拆成小部分,p代表段落,來補充內容。這些標籤是瀏覽器能讀懂的語言。
常見的 HTML 標籤還有:
https://ithelp.ithome.com.tw/upload/images/20250916/20168364pGwRIPZKQl.png

今天建立了我的專案首頁,裡面只有簡單的歌手名稱和一句介紹,雖然很簡陋,但這是網站的第一步。接下來幾天我會逐步加入更多內容,讓它慢慢成型。

在這裡補充,這次鐵人賽將使用Visual Studio Code作為製作網頁的工具。

VS Code 安裝與設定教學

1.安裝 Visual Studio Code

  1. 前往官網下載:https://code.visualstud
  2. 根據你的作業系統(Windows / macOS / Linux)下載對應版本。
  3. 安裝完成後,打開 VS Code。

2.建立專案資料夾

  1. 建立一個資料夾(例如 ITHOME WEBSITE)。
  2. 打開 VS Code → 點選「File」→「Open Folder」→ 選擇 ITHOME WEBSITE。
  3. 在左側的檔案總管區域,就可以新增檔案,例如:
    -index.html(首頁)
    -style.css(樣式表)
    -script.js(JavaScript 腳本)
    -images (圖片)
    示意圖如下:
    https://ithelp.ithome.com.tw/upload/images/20250916/20168364rFpVDXc3fQ.png

上一篇
開場介紹 & 題目動機
下一篇
CSS 基礎 – 網頁裝飾與美化
系列文
打造專屬於歌手的音樂資訊網頁:從零開始的前端實作與技術分享3
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言