網頁設計之HTML語法教學

FOL Editor

<<FOL Editor>>是一套由FOL未來線上網頁設計公司，所開發之線上所見及所得的HTML編輯器， 方便網站客戶編輯網站內容，支援圖片上傳以及優化線上編輯器所產生的HTML CODE，以符合W3C的HTML標準，優化項目如HTML標籤由大寫轉為小寫、標籤內屬性加上雙引號、為無結束符的標籤加入反斜線、恢復被瀏覽器自動刪除的結束標籤、、、等。

而為使客戶能更清處及順利的超作本產品，以下為您說明常用的HTML語法。

1. 標題字 由h1~h7

   • 標題字

   • <h1>標題字</h1>
2. 字體大小 由1~7
   • 字體大小
   • <font size="1">字體大小</font>
3. 字體顏色
   • 字體顏色
   • <font color="#cccc00">字體顏色</font>
4. 字體背景色
   • 字體背景色
   • <font style="background-color: #9900ff">字體背景色</font>
5. 粗體字
   • 粗體字
   • <strong>粗體字</strong>
6. 斜體字
   • 斜體字
   • <em>斜體字</em>
7. 底線字
   • 底線字
   • <u>底線字</u>
8. 段落文字

   • 第一段文字

     第二段文字

   • <p>段落文字</p>
9. 換行
   • 第一行
     第二行
   • <br />
10. 連結
    • 網頁設計高手!
    • <a href="http://www.fol.com.tw/index.php">網頁設計高手!</a>
11. 圖片
    • 
    • <img src="http://www.fol.com.tw/images/index/logo.gif" />
12. div區塊，並指定CSS樣式

    • div區塊

    • <div style="font-size: 12px; font-weight: bold; color: #FFFFFF; background: #666666; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width:100px; height:25px;">div區塊</div>
      • font-size: 字體大小，單位 px(像素) pt(點) %(百分比)
      • font-weight:字體粗細 bold(粗體) lighter(細體)
      • color:字體顏色 參照色碼表
      • background:背景顏色 參照色碼表
      • padding-top:內容物上間距，單位 px(像素) pt(點) %(百分比)
      • padding-right:內容物右間距，單位 px(像素) pt(點) %(百分比)
      • padding-bottom:內容物底間距，單位 px(像素) pt(點) %(百分比)
      • padding-left:內容物左間距，單位 px(像素) pt(點) %(百分比)
      • width:寬度，單位 px(像素) pt(點) %(百分比)
      • height:高度，單位 px(像素) pt(點) %(百分比)

以上加以舉一反三，可變化許多的樣式，例如圖片加上連結

<a href="http://www.fol.com.tw/index.php"><img src="http://www.fol.com.tw/images/index/logo.gif" /></a>

您是否注意到許多HTML標籤都是由 <>內容物</> 這樣的組成的呢?