2024 網頁x人因xDjango 實務課程 08 HTML 簡易實作
更新於 2024/03/07閱讀時間約 1 分鐘
前言
既然上一堂課，我們介紹了這麼多的標籤 ，接著是該來實作看看啦。利用上次所教過的標籤，我們用幾個比較常見的內容，去做一個自我介紹的網頁吧！
那麼廢話不多少，Let's go！
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
實作
網頁名稱
首先！最基本的事情一定是，先將這個網頁的名稱進行修改。讓我們將 <title> 裡面的字，修改成 自我介紹網頁 。像是這樣：
<title>自我介紹網頁</title>
那麼成效應該會長這樣：
修改好了名稱之後，讓我們開始著手進行網頁內部的設計。
總區塊
首先！在加入任何標籤之前呢，我們要寫入一個 區塊 ，這個區塊代表的意義是包含了整個頁面的區塊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
</div>
</body>
</html>
為什麼要寫一個包含整個頁面的區塊呢？就像是群組一樣，我們需要有一個區塊，是把所有標籤的包在一起的。這樣子，如果當我們想對這個網頁上，所有的標籤進行某種美編，比方說色彩、大小等等......我們就能透過這個區塊，直接修改所有人的美編。
標題
不免俗的，一定要有一個標題，來讓使用者可以明確知道此時這個網頁，主要是拿來做什麼的。因此讓我們來新增一個 <h1>在裡面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
<h1>自我介紹</h1>
</div>
</body>
</html>
那目前頁面，會長這樣：
照片(大頭貼)
當然我們的自我介紹，得讓別人知道你是誰才行，因此也得放上一張不錯的照片，請記得這邊也要用區塊包起來，像這樣：
<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>
大家請注意，這邊的 <img> 使用到了三種屬性：
- width 寬度
也就是調整照片水平的長度，其中包含的 長度單位如下：
- px : Pixel 像素
- em : 根據這個區塊中，文字預設設定的大小 * 這個數值，最終得到寬度 px 的大小
- rem：根據最原始，最大的區塊中，文字預設設定的大小 * 這個數值，最終得到寬度 px 的大小
- % ： 也就是以百分比，乘上這個區塊的大小，得出來寬度 px 的大小
- height 高度
也就是調整照片的垂直長度，長度單位與上述 width 中的長度單位相同。
- src 來源
也就是照片檔案的來源，通常為一個路徑，或是網址。
- 路徑的話，則是尋找你電腦上的檔案。
- 網址的話則不限於在哪邊，只要此網址是通往某個圖片即可。
最後程式碼會長這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
<h1>自我介紹</h1>
<div>
<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>
</div>
</div>
</body>
</html>
畫面則會呈現：
副標題(你的名字)
看到了照片是沒錯，但如果不記得你的名字，光認臉可能有些難度。因此讓我們新增一個 <h2> 並在上面寫上你的名字吧，請記得這邊也一定要加上區塊：
<div>
<h2>Ting</h2>
</div>
完整程式碼會長這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
<h1>自我介紹</h1>
<div>
<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>
<div>
<h2>Ting</h2>
</div>
</div>
</div>
</body>
</html>
畫面則是會呈現這樣：
文字
接下來要打上幾句簡短的介紹文字，而這次我們使用 <p> 來進行兩段的文字內容。當然別忘了，在這邊也要加上區塊，代表是一個自我介紹的區塊，像是這樣：
<div>
<p>大家好，我是小明，一名網頁設計師，專注於創造美觀且用戶友好的網站界面。自從大學畢業後，我便踏入這個充滿創意與挑戰的行業，至今已有五年的工作經驗。</p>
<p>除了專業領域外，我還對攝影充滿熱情，喜歡利用周末的時間去探索不同的風景與城市，捕捉那些稍縱即逝的美好瞬間。</p>
<p>此外，我也是一名吉他愛好者，彈奏吉他不僅為我帶來無窮的樂趣，也讓我在忙碌的生活中找到了平靜與慰藉。我相信，無論是在專業領域還是個人愛好中，持續學習與探索都是成長的關鍵。</p>
</div>
完整程式碼會長這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
<h1>自我介紹</h1>
<div>
<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>
<div>
<h2>Ting</h2>
</div>
<div>
<p>大家好，我是小明，一名網頁設計師，專注於創造美觀且用戶友好的網站界面。自從大學畢業後，我便踏入這個充滿創意與挑戰的行業，至今已有五年的工作經驗。</p>
<p>除了專業領域外，我還對攝影充滿熱情，喜歡利用周末的時間去探索不同的風景與城市，捕捉那些稍縱即逝的美好瞬間。</p>
<p>此外，我也是一名吉他愛好者，彈奏吉他不僅為我帶來無窮的樂趣，也讓我在忙碌的生活中找到了平靜與慰藉。我相信，無論是在專業領域還是個人愛好中，持續學習與探索都是成長的關鍵。</p>
</div>
</div>
</div>
</body>
</html>
畫面則是長這樣：
連結
最後，我們來製做一個超連結，讓有興趣了解更多的人，點擊這個連結來認識我們。你可以在此連結中放上，各種有關你的連結，社群媒體或是其他都可以。但一樣，別忘了加上一個區塊：
<div>
<a href="https://vocus.cc/salon/65baa7cafd897800016a45a2/room/2024_WEB">點我了解更多</a>
</div>
完整程式碼會長這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
<h1>自我介紹</h1>
<div>
<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>
<div>
<h2>Ting</h2>
</div>
<div>
<p>大家好，我是小明，一名網頁設計師，專注於創造美觀且用戶友好的網站界面。自從大學畢業後，我便踏入這個充滿創意與挑戰的行業，至今已有五年的工作經驗。</p>
<p>除了專業領域外，我還對攝影充滿熱情，喜歡利用周末的時間去探索不同的風景與城市，捕捉那些稍縱即逝的美好瞬間。</p>
<p>此外，我也是一名吉他愛好者，彈奏吉他不僅為我帶來無窮的樂趣，也讓我在忙碌的生活中找到了平靜與慰藉。我相信，無論是在專業領域還是個人愛好中，持續學習與探索都是成長的關鍵。</p>
</div>
<div>
<a href="https://vocus.cc/salon/65baa7cafd897800016a45a2/room/2024_WEB">點我了解更多</a>
</div>
</div>
</div>
</body>
</html>
畫面則是長這樣：
文字標註
那麼當我們完成上述這些的時候，感覺自我介紹的文字好想有點單調，那就讓我們來把重要的內容用 <b> 和 <i> 框起來吧：
<b><i>想要框住的文字</i></b>
被框起來的文字，會被 <b> 弄成粗體，也會被 <i> 弄成斜體。大家可以參考我的程式碼長怎樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
<h1>自我介紹</h1>
<div>
<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>
<div>
<h2>Ting</h2>
</div>
<div>
<p>大家好，我是小明，一名網頁設計師，專注於<b><i>創造美觀</i></b>且用戶友好的網站界面。自從大學畢業後，我便踏入這個充滿創意與挑戰的行業，至今已有五年的工作經驗。</p>
<p>除了專業領域外，我還對<b><i>攝影</i></b>充滿熱情，喜歡利用周末的時間去探索不同的風景與城市，捕捉那些稍縱即逝的美好瞬間。</p>
<p>此外，我也是一名吉他愛好者，<b><i>彈奏吉他</i></b>不僅為我帶來無窮的樂趣，也讓我在忙碌的生活中找到了平靜與慰藉。我相信，無論是在專業領域還是個人愛好中，持續學習與探索都是成長的關鍵。</p>
</div>
<div>
<a href="https://vocus.cc/salon/65baa7cafd897800016a45a2/room/2024_WEB">點我了解更多</a>
</div>
</div>
</div>
</body>
</html>
畫面呈現會長這樣：
那到這邊，就恭喜大家完成一個簡易版的自我介紹網頁啦。
結論
感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！
今天我們學到了真正實際去把標籤寫在 html 當中，並且製作出了一個比較陽春的自我介紹頁面。那我希望大家可以多多去使用上一堂課學到的標籤，每個都去玩看看，邊排出你喜歡的內容。
接下來，我們將介紹 CSS 的寫法，並帶大家運用在其中，讓自己的網頁變得好看。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
香港的網頁設計成本涉及硬體、軟體、人力和技術服務等多個方面。本文探討了在網頁設計中各部分成本的影響因素，以及自製和外包網頁設計的比較。建議企業在選擇網頁設計方案時需充分考慮成本和品質的平衡。文章還回答了一些常見問題，如成本、選擇自製還是外包、以及所需的時間。
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要，他們擁有豐富的經驗和技能，以提升客戶的在線存在感和業務成果。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
WordPress 是一個開源的內容管理系統，提供了豐富的功能和擴展性，成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後，提供了一些常見問題解答。
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly，有助於讀者找到適合自己的網站製作工具。
PHP是一個功能豐富且靈活的語言，用於開發動態和互動性強的網站。本文介紹了PHP的主要功能和用途，以及它的優點和特性。不論你是一個初學者還是一個專業的開發人員，PHP都是一個值得學習和使用的強大工具。
建立一個優秀網站需要適當選擇並使用各種網頁素材。這些素材可包括圖片、圖示、音頻、視頻、字體和設計元素等。本篇文章詳細介紹了這些素材的重要性以及選擇和優化的建議。
專業網頁設計服務能夠提升企業形象，增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文介紹了 Google Analytics 4（GA4）示範帳戶的取得方式，並提供了幾種 GA4 分析小練習，讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習，旨在幫助讀者更熟悉 GA4 這個工具。
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
香港的網頁設計成本涉及硬體、軟體、人力和技術服務等多個方面。本文探討了在網頁設計中各部分成本的影響因素，以及自製和外包網頁設計的比較。建議企業在選擇網頁設計方案時需充分考慮成本和品質的平衡。文章還回答了一些常見問題，如成本、選擇自製還是外包、以及所需的時間。
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要，他們擁有豐富的經驗和技能，以提升客戶的在線存在感和業務成果。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
WordPress 是一個開源的內容管理系統，提供了豐富的功能和擴展性，成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後，提供了一些常見問題解答。
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly，有助於讀者找到適合自己的網站製作工具。
PHP是一個功能豐富且靈活的語言，用於開發動態和互動性強的網站。本文介紹了PHP的主要功能和用途，以及它的優點和特性。不論你是一個初學者還是一個專業的開發人員，PHP都是一個值得學習和使用的強大工具。
建立一個優秀網站需要適當選擇並使用各種網頁素材。這些素材可包括圖片、圖示、音頻、視頻、字體和設計元素等。本篇文章詳細介紹了這些素材的重要性以及選擇和優化的建議。
專業網頁設計服務能夠提升企業形象，增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文介紹了 Google Analytics 4（GA4）示範帳戶的取得方式，並提供了幾種 GA4 分析小練習，讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習，旨在幫助讀者更熟悉 GA4 這個工具。