Like Share Discussion Bookmark Smile

J.J. Huang   2019-05-18   Web   瀏覽次數:

Web - 第九章 | HTML 撰寫一封信

以前的e-mail,都只有單純的文字格式;而現在我們可以用HTML格式來豐富我們的郵件,透過HTML我們可以在郵件上展示出包括標題、重點、超連結⋯等等。

項目簡介

塊/結構語義:

  • 使用適當的結構來構造整體文件,包括doctype、<html>、<head>和<body>元素。
  • 除下面提到的幾點之外,這封信應該被標記成有著段落和標題的結構。這封信有1 個頂級標題(“回覆:”那行)和3 個二級標題。
  • 使用適當類型的列表標記該學期的開學時間、學習科目和異域舞蹈。
  • 兩個地址可以直接放在段落中,<address>元素不適合它們(想一下為什麼)。此外,地址的每一行都應該另開新行,而不是新段落。

內聯語義:

  • 應著重顯示發信人和收信人的姓名(以及“電話”和“電子郵件”字樣)。
  • 用適當的元素把文件中的四個日期標記成機器可讀的日期。
  • 為信中第一個地址和第一個日期設置一個類屬性“ sender-column”,這樣就能通過添加CSS來使它們右對齊,以符合經典信件的佈局。
  • 信件正文中有5 個首字母縮略詞/縮寫詞,標記出它們的擴展形式。
  • 正確標註6 個下標/上標(位於化學方程式、科學計數法中)。
  • 試著標記至少對兩個單詞進行著重(<strong>)/強調(<em>)顯示。
  • 有兩個地方應加上超連結,要為它們添加適當的標題。連結指向https://example.com/ 即可。
  • 用適當的元素標記校訓和引文。

文件的頭部:

  • 用適當的元標籤把文件的字符集聲明為utf-8。
  • 用適當的元標籤說明信件的作者。
  • 用適當的標籤引入我們提供的CSS 代碼。

信件範例

  • 建立一個資料夾example

  • 在example裡面在建立一個資料夾styles

  • 複製下面的css範例。

  • 開啟一個新的text檔案(文字文件)。

  • 將剛複製的css範例貼到新開的text檔案裡。

  • 將檔案存為 style.css。

  • 將 style.css 放置 styles 資料夾內。

  • 複製下面的html範例。

  • 開啟一個新的text檔案(文字文件)。

  • 將剛複製的html範例貼到新開的text檔案裡。

  • 將檔案存為 letter.html。

  • 將 letter.html 放置 example 資料夾內。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
max-width: 800px;
margin: 0 auto;
}

.sender-column {
text-align: right;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.3em;
}

p, ul, ol, dl, address {
font-size: 1.1em;
}

p, li, dd, dt, address {
line-height: 1.5;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta name="author" content="李雷">
<title>紐臂科學院學位申請郵件往來</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<p class="sender-column italic">
中國北京市門頭溝區,102300<br>
紐臂大學 紐臂科學院<br>
<strong>李雷</strong> 教授<br>
<strong>聯繫電話</strong>:123-456-7890<br>
<strong>電子郵件</strong>:no_reply@example.com
</p>
<p class="sender-column">
<time datetime="2019-2-22">2019 年 2 月 22 日</time>
</p>
<p class="italic">
中國海南省三亞市亞龍灣<br>
<strong>韓梅梅 女士</strong>
</p>
<h1>回复:韓梅梅學位申請</h1>
<p>親愛的韓同學:</p>
<p>感謝你申請紐臂大學科學院的哲學博士學位課程,下面我將就你的問題依次做出解答。 </p>
<h2>開學日期</h2>
<p>歡迎你在任意時間來校學習,但在學期開始時來校更理想,每學期開學時間如下:</p>
<ul>
<li>第一學期:<time datetime="2019-9-9">2019 年 9 月 9 日</time></li>
<li>第二學期:<time datetime="2020-1-15">2020 年 1 月 15 日</time></li>
<li>第三學期:<time datetime="2020-5-2">2020 年 5 月 2 日</time></li>
</ul>
<p>請告訴我你是否願意在學期開始時來校,並告知你選擇的學期。 </p>
<p>你可以在我們的網站上找到更多關於 <a href="https://example.com/">學校重要日期</a> 的訊息。 </p>
<h2>學習科目</h2>
<p>紐臂科學院本著兼容並蓄的原則,課題涉及一些科技領域。歡迎有才智、態度專注的研究人員參加,也歡迎符合我們價值觀的朋友加入。我們最感興趣的課題如下(按優先度排序):</p>
<ol>
<li>把水(H<sub>2</sub>O)轉變為酒的方法,以及白藜蘆醇(C<sub>14</sub>H<sub>12</sub>O<sub >3</sub>)對健康的幫助作用。 </li>
<li>測量室溫30°C(86°F)時,觀眾人數呈指數級增加對放克貝斯手錶演的影響(3 × 10<sup>3</sup> &gt; 3 × 10<sup>4 </sup> 效應)。 </li>
<li>使用 <abbr title="超文本標記語言(HyperText Markup Language)">HTML</abbr><abbr title="層疊樣式表(Cascading Style Sheets)">CSS</abbr> 構建樂譜。 </li>
</ol>
<p>請針對上述課題提供更多的訊息。包括研究時長、所需資源,以及其它未盡事宜,謝謝。 </p>
<h2>異域舞蹈</h2>
<p>你說的沒錯!異域部落舞蹈是我博士後研究項目的一部分。為了回答你的問題,我在下面列出我個人最喜歡的舞蹈種類和相關介紹:</p>
<dl>
<dt>波利尼西亞小雞舞</dt>
<dd>一種古老、神秘但影響廣泛的舞蹈,可追溯至公元前 300 年,整個村莊圍繞著一個小雞形狀的圈跳舞,祈禱牲畜肥美。 </dd>
<dt>冰島布爾曳步舞</dt>
<dd>在冰島人學會用火取暖之前,他們之間流行著這種舞蹈,舞蹈時人們在地上擁成一個圈,用極小極快的動作晃動身體。我有一個學生說冰島曳步舞是現代甩臀舞的鼻祖。 </dd>
<dt>北極機器人舞</dt>
<dd>一個有趣的歷史誤傳,二十世紀六十年代的英國探險者宣稱發現了一種像“機器人跳舞”的舞蹈,這種舞蹈動作僵硬,流行於加拿大和阿拉斯加北部地區。後來人們發現這裡的居民是因為天氣太冷了才做出這樣的動作。 </dd>
</dl>
<p>更多訊息請查看我的 <a href="https://example.com/" title="李雷的異域舞蹈研究站點">異域舞蹈研究</a> 網頁。 </p>
<p>李雷 教授</p>
<p>紐臂大學校訓:<q>人人皆可紐臂</q> —— <cite>諸葛中天 紳士</cite></p>
</body>
</html>

最後再使用瀏覽器打開 letter.html ,將會看到一個郵件範例,這邊就不特別截圖了。

這邊轉載了大量的文章和內容,但是每個部分我都有實際去做過,並了解過。這邊轉載主要是做筆記記錄。

註:以上參考了
MDN web docsMarking up a letter 文章。