iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 6

[Day 6] 阿嬤都看得懂的開始寫第一支 .html 檔案囉!

阿嬤都看得懂的開始寫第一支 .html 檔案囉!

昨天我們介紹了 HTML 標籤怎麼寫,各位阿嬤是不是躍躍欲試了呢?今天,就讓我們打開記事本,開始寫第一支 HTML 檔案吧!

我們來寫些什麼好呢?先來寫些文字好了。

剛剛說到,文字段落的標籤名稱是 p。那就讓我們向阿嬤打聲招呼吧!

<p>Hello Granny!</p>

好,那我們來存檔。記得,在存檔的時候,要選擇存檔類型為「所有檔案」,然後記得在檔名後面加個 .html,這樣才會存成 HTML 檔案喔!

存檔好了以後,在資料夾應該會是預設網頁瀏覽器的圖示。

讓我們把這個檔案點開,應該會打開瀏覽器。瀏覽器當中會顯示

耶!恭喜阿嬤完成人生中第一個網頁!這樣已經踏出網頁工程師的第一步囉!
感謝大家收看,那這系列就到這邊結束囉!

等等,這個網頁也太陽春了吧!好歹把阿嬤 Granny 的字樣加上粗體啊!(咦
好的,如你所願,把阿嬤變強變 strong。我們可以用 strong 標籤,來加粗字體。
不過,實際上會怎麼寫呢?我們想加粗的部分,是 Granny 這個字。
也就是說,strong 標籤的範圍就是要把 Granny 包起來囉?
沒錯,所以我們會這樣寫:

<p> Hello <strong>Granny</strong>!</p>

讓我們重整一下這個網頁,就會看到:

字體變粗囉~是不是很美呢?

什麼?你說還是太樸素?好吧那我們讓阿嬤和乖孫開始對話吧。

<p> Hello <strong>Granny</strong>!
Howdy My Good Boy!</p>

同樣重整頁面,就會看到對話囉!

等等,這還是很醜吧!而且為什麼沒換行啊?

沒錯,在 HTML 標籤當中,通常會自動拿掉頭尾的空格與中間的換行。那麼,應該怎麼解這題呢?有 2 個解法:

  1. 手動加入斷行標籤 br (英文的 break 是打斷的意思)。想想看,br 標籤是否成對呢?沒錯,由於斷行不會有任何內部的元素,所以斷行標籤也是單身狗喔!
<p> Hello <strong>Granny</strong>!
<br>Howdy My Good Boy!</p>


2. 使用 pre 標籤取代 p。

<pre> Hello <strong>Granny</strong>!
Howdy My Good Boy!</pre>

等等,為什麼是 pre,難道是要預防 (prevent) HTML 標籤自動拿掉頭尾的空格與中間的換行嗎?答案很接近 (其實 pre 是 preformatted,並未給予格式的意思)。當我們使用這些標籤的時候,其實瀏覽器已經偷偷給了這些標籤一些基礎的樣式了。例如 strong 標籤的文字比較粗,或者用來表示大標題的 h1 標籤字型較大等等。

在這些偷偷給的樣式中,最麻煩的是元素間的推擠。在上面這段程式

<p>Hello <strong>Granny</strong>!</p>

中,strong 標籤中的 "Granny" 和 p 標籤中的 "Hello" 與 "!" (注意看喔,"!" 並沒有被包含在 strong 標籤中) 在渲染時,並沒有產生什麼推擠,所以都被呈現在同一行當中。這看起來似乎相當自然,我只是想把字體加粗而已,沒有想要換行沒錯。但是,以標籤自帶樣式的角度來說,這是因為 strong 這個標籤沒有自帶推擠的樣式。讓我們把 strong 標籤改成 p 標籤看看:

<p>Hello <p>Granny</p>!</p>


可以看見 "Hello", "Granny", "!" 整個變成 3 行了,而且這個行距比使用 br 標籤時還寬好多啊!沒錯,這是因為 p 標籤預設的樣式,就有推擠其他元素。當 p 標籤前面有其他元素的時候,p 標籤自己會跑到那個元素的下方;而當 p 標籤前後面有其他元素的時候,那個元素也會自己跑到 p 標籤的下方喔!

因此,當我們在使用 HTML 標籤的時候,需要特別注意這些標籤的預設樣式,才有辦法讓瀏覽器渲染出自己心中的理想排版喔!

今天我們開始寫了第一個 .html 程式,雖然網頁看起來還是陽春到爆炸,但是隨著我們介紹的標籤與樣式越來越多,我們的網頁也會越來越好看喔!明天就讓我們多介紹幾個 HTML 標籤吧!


上一篇
[Day 5] 阿嬤都看得懂的 HTML 標籤怎麼寫
下一篇
[Day 7] 阿嬤都看得懂的文字標籤與語意化標籤
系列文
你阿嬤成為網頁前端工程師的第一步30

1 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-21 00:19:04

我想變壯,也能用<strong>我</strong>做到嗎?

對喔,盡量別用 <b>我</b> 不然可能還會變禿 (咦

我要留言

立即登入留言