前言
既然上一堂課，我們介紹了這麼多的標籤 ，接著是該來實作看看啦。利用上次所教過的標籤，我們用幾個比較常見的內容，去做一個自我介紹的網頁吧！
那麼廢話不多少，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 的寫法，並帶大家運用在其中，讓自己的網頁變得好看。
