HTML教學:標題設定,body、margin、align與font,字型和大小

HTML可以直接針對頁面標題進行簡單設定,本文先介紹body和 topmargin、leftmargin用法,實際測試h1到h7的標題大小比例,align置中與靠右對齊參數,補充font face和color字型設定。

一、 html網頁電子書

本文範例是一個簡單的論語電子書網頁。

二、 body topmargin

首先,在「body」標籤建立網頁上方邊界的參數「topmargin」,設定參數值為「60」,單位是像素,可以看到預覽畫面上方保留了60像素高度的空白,等於是設定整個頁面上方的間距。

三、 leftmargin左側間距 

前面提到「topmargin」是設定網頁上方的間距,有另一個類似參數「leftmargin」,用來建立從左側邊緣開始起算的空白間距。在實務上,通常會將這兩個頁面屬性合併定義,如同截圖所示,恰當配置可以得到較好的版面呈現效果,也就是在頁面邊緣保留適當的空白。

四、 h1到h7標題標籤

設置好版面之後,在此以論語前面幾章的目錄作為範例,介紹在網頁設計上幾乎一定會用到的標題樣式,也就是h1到h7,表示由大到小七個不同的標題標籤,這裡的h代表headline,正是標題的意思,此處特別加上h0跟h8,純粹為教學示範,因為從預覽頁面很容易就可以看出來,在HTML標籤裡,其實並沒有h0和h8,因此在瀏覽器也不會顯示任何效果。

五、 align對齊方式

瞭解不同標題與相對應的大小比例之後,接下來使用參數「align」設置對齊方式,可以設定為「center」置中對齊或「right」靠右對齊,從預覽中能清楚看到顯示效果,注意到這裡沒有靠左對齊,這是因為瀏覽器顯示文字時,預設就是靠左對齊,跟熟悉的Excel儲存格一樣,因此不需要特別去做設定。

六、font字體標籤

關於文字樣式設計,通常也包含字體部分,相關的HTML標籤和參數分別是「font」和「face」,這裡設定的參數值為「甜甜圈體」,是贊贊小屋另外付費使用的商用字體。

七、文字顏色color

除了字型字體之外,通常也會設定文字的顏色,只要在上個步驟介紹的標籤裡增加參數「color」以及顏色代碼即可。

HTML網頁字體設定

這篇文章介紹HTML如何設置網頁文字所使用的字體,雖然有相關的標籤設定,可是在實務上幾乎很少用到。以文章範例而言,贊贊小屋是使用付費商用字體,然而大多數瀏覽器使用者的電腦中並沒有相同的文字樣式,即使是使用較為通用的字體,仍然有Windows系統和蘋果電腦系統的問題。況且,如今有一大部分使用者是透過手機或者平板裝置瀏覽網頁,上述種種情形使用特地設定網頁所使用的字體不切實際。贊贊小屋在此主要是提供教學範例,因此操作這個功能,讀者要使用本篇文章所介紹的字體標籤設定時,請格外留意適用性。

每天學習,每天充電:HTML系列文章

最新文章: