2024 網頁x人因xDjango 實務課程 08 HTML 簡易實作
更新於 發佈於 閱讀時間約 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 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
本文教導如何自我啟發、發展個人品牌，並透過社交媒體和自己的創作獲得曝光。文章提供了從興趣到企劃、製作，再到營銷個人產品或服務的創造三步驟，以及打造品牌的三訣竅。
HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
這篇文是我自己的學習筆記，整理過後覺得挺值得分享的，就決定直接PO一篇文。
這邊只會紀錄重點跟脈絡，還有一些個人心得。
如果想要有仔細的案例講解，可以直接到Hahow購買線上課程，
課程名稱是《讓圖不只是好看的－資訊設計思考力！》。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
本文教導如何自我啟發、發展個人品牌，並透過社交媒體和自己的創作獲得曝光。文章提供了從興趣到企劃、製作，再到營銷個人產品或服務的創造三步驟，以及打造品牌的三訣竅。
HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
這篇文是我自己的學習筆記，整理過後覺得挺值得分享的，就決定直接PO一篇文。
這邊只會紀錄重點跟脈絡，還有一些個人心得。
如果想要有仔細的案例講解，可以直接到Hahow購買線上課程，
課程名稱是《讓圖不只是好看的－資訊設計思考力！》。