今天繼續製作我的專案網頁首頁,主題是介紹我最喜歡的歌手 Keshi(凱西)。在這個初版雛形中,我先建立了基本的 HTML 結構,並把歌手的介紹內容填寫進去,確保整體架構完整。
我的 HTML 檔案包含以下幾個重要區塊:
在 h1 中,我放上了網頁的主標題「Keshi - 凱西」,讓訪客一進來就知道主題是誰。接著我利用 nav 標籤,建立了導覽列,裡面放置了連結到 YouTube、X、Instagram、Spotify、Apple Music 及 SoundCloud 的超連結。這樣用戶可以快速找到 Keshi 的社群與音樂平台。
程式碼:
我透過 h2 來做小節標題,例如「歌手介紹」、「早年生活」,並用 p 標籤填上段落文字。這樣可以保持結構清晰,也方便未來做排版或美化。
程式碼:
在音樂作品部分,我使用 ul 與 li 來建立清單,列出 Keshi 的歷年專輯或 EP。這樣比單純用文字更有條理。
程式碼:
執行後的結果:
雖然這個版本還沒有太多 CSS 美化,但我已經把最基本的內容骨架做好了。接下來,我會逐步美化這個網頁,讓它更圍繞在Keshi身上。今天的重點在於把主要內容先落實,等基礎架構穩固後,再來進行視覺設計。