2024 網頁x人因xDjango 實務課程 08 HTML 簡易實作

閱讀時間約 1 分鐘

前言

既然上一堂課,我們介紹了這麼多的標籤 ,接著是該來實作看看啦。利用上次所教過的標籤,我們用幾個比較常見的內容,去做一個自我介紹的網頁吧!

那麼廢話不多少,Let's go!

raw-image


整理好你的思緒,深深吸一口氣,讓我們在 2024 這嶄新的一年當中,開始新的學習之旅吧。


實作

網頁名稱

首先!最基本的事情一定是,先將這個網頁的名稱進行修改。讓我們將 <title> 裡面的字,修改成 自我介紹網頁 。像是這樣:

<title>自我介紹網頁</title>


那麼成效應該會長這樣:

raw-image


修改好了名稱之後,讓我們開始著手進行網頁內部的設計。


總區塊

首先!在加入任何標籤之前呢,我們要寫入一個 區塊 ,這個區塊代表的意義是包含了整個頁面的區塊:

<!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>


那目前頁面,會長這樣:

raw-image


照片(大頭貼)

raw-image


當然我們的自我介紹,得讓別人知道你是誰才行,因此也得放上一張不錯的照片,請記得這邊也要用區塊包起來,像這樣:

<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>


大家請注意,這邊的 <img> 使用到了三種屬性:

  1. width 寬度

也就是調整照片水平的長度,其中包含的 長度單位如下:

  • px : Pixel 像素
  • em : 根據這個區塊中,文字預設設定的大小 * 這個數值,最終得到寬度 px 的大小
  • rem:根據最原始,最大的區塊中,文字預設設定的大小 * 這個數值,最終得到寬度 px 的大小
  • % : 也就是以百分比,乘上這個區塊的大小,得出來寬度 px 的大小


  1. height 高度

也就是調整照片的垂直長度,長度單位與上述 width 中的長度單位相同。


  1. 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>


畫面則會呈現:

raw-image


副標題(你的名字)

看到了照片是沒錯,但如果不記得你的名字,光認臉可能有些難度。因此讓我們新增一個 <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>


畫面則是會呈現這樣:

raw-image


文字

接下來要打上幾句簡短的介紹文字,而這次我們使用 <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>


畫面則是長這樣:

raw-image


連結

最後,我們來製做一個超連結,讓有興趣了解更多的人,點擊這個連結來認識我們。你可以在此連結中放上,各種有關你的連結,社群媒體或是其他都可以。但一樣,別忘了加上一個區塊:

<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>


畫面則是長這樣:

raw-image


文字標註

那麼當我們完成上述這些的時候,感覺自我介紹的文字好想有點單調,那就讓我們來把重要的內容用 <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>


畫面呈現會長這樣:

raw-image


那到這邊,就恭喜大家完成一個簡易版的自我介紹網頁啦。


結論

感謝你看到這邊,把這些內容持之以恆地讀完肯定不容易,你辛苦啦!

今天我們學到了真正實際去把標籤寫在 html 當中,並且製作出了一個比較陽春的自我介紹頁面。那我希望大家可以多多去使用上一堂課學到的標籤,每個都去玩看看,邊排出你喜歡的內容。

接下來,我們將介紹 CSS 的寫法,並帶大家運用在其中,讓自己的網頁變得好看。


8會員
18內容數
這裡是來自 高科大 資管系二年級的學生,希望能在學習的過程中,也分享這些知識給大家。
留言0
查看全部
發表第一個留言支持創作者!