阿嬤都看得懂的開始寫第一支 .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 標籤吧！