iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
Modern Web

給心理人的前端網頁開發系列 第 9

[給心理人的前端網頁開發] 09 關卡一:自介履歷之 HTML

  • 分享至 

  • xImage
  •  

今天要開始正式寫一個履歷網頁了。主角是一個新興 Vtuber 叫 HowB8,履歷網頁有他的頭貼、設定、經歷與作品集。請先點開連結查看效果:

HTML 的語法列於文末。以下講解此 HTML 語法代表的意義。

一、履歷網頁中 HTML 的結構

前幾天已經提到,一個 HTML 檔案的基本結構有哪些,包含 <!DOCTYPE html><html><head><body> 。接下來主要講的是 <body></body> 中的結構。

複習一下:

  • <!DOCTYPE html> 用來宣告目前的文件類型是 HTML
  • <html></html> 將 HTML 需要的元素都寫在裡面
  • <head></head> 將一些 HTML 的後設資訊寫在裡面(通常跟畫面無關)
  • <body></body> 將畫面需要的元素寫在裡面(通常跟畫面有關)
<!-- container: 把整個想顯示的 HTML 語法包起來。一種寫程式的習慣 -->
<div class="container">
  <!-- header: 放照片、HowB8 的簡介 -->
  <div class="header">
  </div>
  <!-- body: 放履歷的主要內容 -->
  <div class="body">
    <!-- block: 履歷有很多區塊,像是設定、經歷、作品集。用 block 區隔開來 -->
		<div class="block">
    </div>
  </div>
</div> 

二、還沒見過的 HTML 標籤介紹

<img> 是 image 的縮寫,代表圖片的意思。這邊可以看到 <img> 標籤內有三個屬性,分別是 classsrcalt

  • class 是 CSS 的自定義類別,明天會提到。
  • src 是圖片來源的意思,是 source 的縮寫。填上圖片網址後,這個 <img> 就會顯示出圖片了
  • alt 是替代文字的意思,是 alternative 的縮寫。當圖片連結失效時,就會顯示 alt 中的文字

延伸閱讀

<img
  class="header__img"
  src="https://i.imgur.com/lvv0KdI.jpg"
  alt="How B8 大頭貼"
/>

<h2> 是 heading 第二層的縮寫,表示標題的預設樣式為第二層的意思。同理,前幾天提到的 <h1> ,就是標題第一層的意思。通常網頁的預設樣式, <h1> 的文字大小會最大,接著就一路縮寫。

延伸閱讀

<h2>設定</h2>

<ul><li> 是要一起用的,是列表清單的意思。 <ul> 是 unorder list 的縮寫,表示無序清單,就是只用黑點而不是數字列點。 <li> 是 list item 的縮寫,表示清單中的項目。

延伸閱讀

<ul>
  <li>初配信</li>
  <li>情人節活動</li>
</ul>

<iframe> 是 inline frame 的縮寫,中文可以叫做內嵌框架。我們常用的 Youtube 有個分享功能,將複製的程式碼貼到網頁程式碼中,就可以讓網頁顯示出 Youtube 影片。這複製出來的語法,裡面就有用到 <iframe>

在複製出來語法中,其中 src<iframe> 最重要的屬性。 <iframe> 其實不是只能內嵌影片而已。在一般情況下,它其實可以內嵌大部分的網頁網址。另外像是 podcast 的播放器、問卷表單,有些也是能以 iframe 的方式被嵌入網頁中。

延伸閱讀

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/fWA3ckC5YeE"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

小結

以下是今天提到的內容

  • 履歷網頁的 HTML 主要拆分結構
  • img 的使用
  • h2 的使用
  • ul li 的使用
  • iframe 的使用

今天只介紹了 HTML,但還沒提到如何進行排版。明天將繼續介紹履歷網頁中 CSS 的部份

小作業:請將 HTML 中的內容,改成自己的履歷、或是有興趣人物的履歷

附註:HTML 的程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>How B8 的履歷</title>
    <link href="./main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <img
          class="header__img"
          src="https://i.imgur.com/lvv0KdI.jpg"
          alt="How B8 大頭貼"
        />
        <div class="header__content">
          <h1>How B8</h1>
          <p>HowFun 頻道的 Vtuber 新人。</p>
        </div>
      </div>
      <div class="body">
        <div class="block">
          <h2>設定</h2>
          <ul>
            <li>身高:186mm</li>
            <li>性別:沒有性別,性別是 HowB8</li>
            <li>繁殖方式:無性生殖,十八時就啵一聲出來了</li>
            <li>會賣公仔嗎:怕滯銷賣不完</li>
            <li>會後空翻嗎:不會,只會舉手,後空翻可能要等改版</li>
            <li>可以色色嗎:公三小,不要用 ig 問奇怪的問題</li>
            <li>可以空幹嗎:不行,廠商沒有做,我只會舉手轉頭</li>
            <li>
              中之人是不是HowHow:不是,你才 HowHow,你全家都
              HowHow。我沒有中之人,我就是 Vtuber
            </li>
            <li>業配報價:比How哥便宜</li>
            <li>鼻子很大嗎:我沒有鼻子</li>
            <li>能抬頭往上看嗎:不行,我只能左右</li>
            <li>
              可以一鍵換性別嗎:不行,我就是我,我沒有性別。我要去男廁女廁隨便。心情好可以去女廁,心情不好也可以去女廁
            </li>
            <li>你的智齒有拔嗎:我好像沒有牙齒</li>
            <li>耳朵在哪:沒有耳朵,有個洞可以聽就好</li>
            <li>為什麼沒去走鐘獎:因為才剛初配信,還沒被邀請</li>
            <li>日本v會教微積分,HowB8會嗎:作業自己寫啦</li>
            <li>HowB8跟How哥可以夢幻連動嗎:可能有點難</li>
            <li>來歷:來自How哥宇宙的平行宇宙。人設可能隨時會變,到時候再說</li>
          </ul>
        </div>
        <div class="block">
          <h2>經歷</h2>
          <ul>
            <li>初配信</li>
            <li>情人節傳情</li>
          </ul>
        </div>
        <div class="block">
          <h2>作品集</h2>
          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/fWA3ckC5YeE"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/ELevpiTmGlg"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>
  </body>
</html>

上一篇
[給心理人的前端網頁開發] 08 自介履歷之開發環境 - codesandbox
下一篇
[給心理人的前端網頁開發] 10 關卡一:自介履歷之 CSS
系列文
給心理人的前端網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言