網頁設計 – HTML 文章段落及排版

看完了 HTML 基本排版 之後,您已經迫不急待要開始撰寫文章了吧!

HTML 提供了我們一些常用文章的標題、段落…等標籤,讓我們在網頁上寫文章時,能夠很容易讓人瞭解您文章的段落章節,更容易閱讀您的文章。

HTML 的文章標題 (主題)

每篇文章應該都會有個主題,甚至較長的文章還會分為篇、章、節、小節、條目…等。這樣的文章編制,其實在許多書籍裡面都會看得到,一個文章有分不同的篇、章、節,也更方便要找資料的人,可以更容易找到自己所想要看的文章段落。

文章的篇章節在 HTML 中使用 <h1> ~ <h6> 來標示的,其中 h 是取自於「標題」的英文 heading 第一個英文字母,而後面所接的 1 ~ 6 代表篇、章、節…等,由大標題至小標題的文章結構。

我們來看一下底下的範例:

<html>

  <head>
    <title>網頁設計教學 HTML - 文章標題</title>
  </head>
  
  <body>
    <h1>網頁的 h1 標題</h1>
    <h2>網頁的 h2 標題</h2>
    <h3>網頁的 h3 標題</h3>
    <h4>網頁的 h4 標題</h4>
    <h5>網頁的 h5 標題</h5>
    <h6>網頁的 h6 標題</h6>
  </body>
  
</html>

執行結果如下:

網頁的 h1 標題
網頁的 h2 標題
網頁的 h3 標題
網頁的 h4 標題
網頁的 h5 標題
網頁的 h6 標題

由上面的結果我們可以看出,在 HTML 中預設的 <h1> ~ <h6> 標題的字型是由大到小的,並且都是以粗體字的方式呈現,以便與接下來的文章段落文字做區隔。

HTML 的文章段落

在 HTML 中的文章段落標籤,是以「段落」的英文 paragraph 第一個字母 p 做為簡寫,因此 <p> 即為文章段落的標籤。

<html>

  <head>
    <title>網頁設計教學 HTML - 文章段落</title>
  </head>
  
  <body>
    <p>網頁設計是架設網站的第一步!</p>
	<p>想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!</p>
  </body>
  
</html>

執行結果如下:

網頁設計是架設網站的第一步!

想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!

HTML 的文章的對齊位置

先前的範例中,文章內容都是靠左對齊的,但有時我們也會希望文章能夠置中或靠右對齊。因此,在 <h1> ~ <h6> 與 <p> 標籤中,都有一個特別的「屬性」,能夠幫我們達成這個目的。

<html>

  <head>
    <title>網頁設計教學 HTML - 文章的對齊位置</title>
  </head>
  
  <body>
    <h2 align="center">網頁文章標題置中對齊測試</h2>
	<p align="left">這個段落文字靠左對齊</p>
	<p align="center">這個段落文字置中對齊</p>
	<p align="right">這個段落文字靠右對齊</p>
  </body>
  
</html>

執行結果如下:

網頁文章標題置中對齊測試
這個段落文字靠左對齊
這個段落文字置中對齊
這個段落文字靠右對齊

在 HTML 中,所有屬性 (Attribute) 的值都是以一個等於符號「 = 」及左右兩個雙引號「 " 」來設定的。

上面範例中的 align 就是 <h1> ~ <h6> 與 <p> 標籤的「對齊屬性」。透過指定 align 屬性的值為 left 即可靠左、 center 置中、 right 則是靠右,例如 align="center" 即是對齊屬性的設定置中方式。

HTML 的水平分隔線

有時文章若較長時,光是用 <h1> ~ <h6> 與 <p> 去將文章做不同篇幅的內容區隔還不夠,也許您還會需要加上分隔線,這時就會使用到 <hr> 標籤。

水平分隔線的英文是 horizontal line ,而 hr 主要是取「水平」的英文 horizontal 前兩個發音的音節 "ho-ri" 中各音節的第一個字母,即 <hr> 標籤的命名由來。

<html>

  <head>
    <title>網頁設計教學 HTML - 水平分隔線</title>
  </head>
  
  <body>
    <p>網頁設計是架設網站的第一步!</p>
	<hr>
	<p>想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!</p>
  </body>
  
</html>

執行結果如下:

網頁設計是架設網站的第一步!
想要打好網頁設計的基礎,最重要的就是先把 HTML 語法學會,這樣之後的學習之路才會駕輕就熟,那我們一起努力吧!

水平分隔線 <hr> 標籤與換行的 <br> 標籤一樣,因為不會包住任何的文字內容,不是屬於一個區塊標籤,因此也不需要 </hr> 來做結尾。

HTML 文章段落綜合範例

<html>

  <head>
    <title>網頁設計教學 HTML - 水平分隔線</title>
  </head>
  
  <body>
    <h2 align="center">網頁設計教學</h2>
    <p align="center">網頁設計教學前言<p>
    <hr>
    <h3>第一章 架設網站的基本知識</h3>
    <p>網頁設計是架設網站的第一步!<p>
    <h3>第二章 網頁設計要學些什麼</h3>
	<p>從 HTML 語法開始學起才是王道。<p>
    <h3>第三章 網頁設計的趨勢</h3>
    <p>SEO 搜尋引擎最佳化是目前網路行銷中最夯的方法之一。<p>
  </body>
  
</html>

執行結果如下:

網頁設計教學
網頁設計教學前言

第一章 架設網站的基本知識 網頁設計是架設網站的第一步! 第二章 網頁設計要學些什麼 從 HTML 語法開始學起才是王道。 第三章 網頁設計的趨勢 SEO 搜尋引擎最佳化是目前網路行銷中最夯的方法之一。

HTML 學習小提示

自動換行特性:之前我們曾在 HTML 基本排版 這篇提過,若是想將文字換行,必須在文字後面加上 <br> 換行標籤。但是我們本篇所介紹的 <h1> ~ <h6> 、 <p> 與 <hr> 標籤,剛好都是屬於一個文章段落的開始、結束、或段落與段落間的分隔,因此若觀察前面的範例,可以發現標題、段落、水平分隔線之間,不需要特別再加 <br> 換行標籤,即會自動以另一行 (段落) 開始。

<< 上一篇: HTML 基本排版 [ HTML 教學目錄 ] 下一篇: HTML 文字變化 >>
留個言吧…

你的電子郵件位址並不會被公開。 必要欄位標記為 *