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

Caffeine 咖啡因

發佈於2024 網頁x人因實務課程

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>