2024 讓你 8分鐘 懂機器學習
Caffeine 咖啡因
更新於 2024/03/07閱讀時間約 1 分鐘

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

前言

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

那麼廢話不多少，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> 使用到了三種屬性：

  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>


畫面則會呈現：


副標題(你的名字)

看到了照片是沒錯，但如果不記得你的名字，光認臉可能有些難度。因此讓我們新增一個 <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 的寫法，並帶大家運用在其中，讓自己的網頁變得好看。


分享至
成為作者繼續創作的動力吧！
2024 讓你 8分鐘 懂機器學習
追蹤
2024 讓你 8分鐘 懂機器學習
追蹤
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

咖啡因學習教室 的其他內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.