不思議惑星 Magical Star Blogger: 網頁語法 html 基礎認識(圖文版)

《認識html》
html就是超文件標籤語言(HyperText Markup Language，簡稱為HTML), 是由各種不同的標籤tags所構成, 不同的標籤代表不同的展現方式, 如段落文字、超連結、圖案等, 當瀏覽器(IE or Firefox)解讀標籤tags後, 依標籤的類型展現至瀏覽者面前, 另外需要注意的是, 絕大部分的部落格本身已經具有Doctype、head、body的完成標籤, 故部落格作者不必重複使用Doctype、head、body標籤

《Html的組成》

Html文件的架構圖(點小圖看大圖)

由上圖可知, Html文件的架構可分三個部分,
1.綠色 Doctype宣告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　 Doctype(document type:文檔類型), 說明編寫網頁的HTML(Xhtml)標籤用的版本, Doctype宣告必須放在每一個網頁文件的頂部, 也就是所有的標籤Tags代碼之上

2.藍色 Html元素起始與結束標籤

<html>
　<head>
　　<title>Html文件的語言結構</title>
　</head>
　<body>
　　　略~網頁內容
　</body>
</html>

3.紅色 Head元素起始與結束標籤(網頁表頭)

　<head>
　　<title>Html文件的語言結構</title>
　</head>

　　Head元素又稱網頁表頭, 此範為是加入網頁相關訊息, 例如搜尋關鍵字或是網頁標題title, 使用title設定的網頁標題, 可在瀏覽器視窗標題列出現標題內容

4.黃色 Body元素起始與結束標籤(網頁內容)

　<body>
　　　略~網頁內容
　</body>

　　Body網頁內容是放置網頁的主體內容, 如段落文字、圖片、表格、超連結、框架...等

《標籤的開始與結束Container Tags》
　　<title>Html文件的語言結構</title>
多數的標籤Tags是屬為圍堵標記Container Tags, 即成對的標籤, 差異處只有結束標記多個斜線/
如以上範例, 紅色是開始標籤, 藍色是結束標籤
　注：br、img...等元素標籤不必設結束標籤

《標籤的架構》以超連結元素 a 為例

Html的架構：元素 a 為例(點小圖看大圖)

　元素(element)：
　　如上例使用a元素標籤, 代表起始標籤至結束標籤之間成一個超連結

　屬性(attribute)：
　　屬性只能加在起始標籤中, 如a元素起始標籤加上框架識別名稱target,即可指定目標框架；網址屬性href, 可指定開啟的網址

　屬性值(attribute value)：
　　當加入屬性後, 需要註明屬性值, 如target的屬性值有_self(目前框架)、 _blank(新視窗)、 _top(頂層框架)、 _parent(父框架) ；如href的屬性值即為網址

《範例說明》
1.以超連結URL為例
　Html Code：　<a target="_blank" href="http://tw.myblog.yahoo.com/rusptin/">[宗教] 永宏易理工作室</a><br/>
　Html Code 說明：　<a target="目標框架" href="網址">網站名稱</a><br/>
　瀏覽器顯示效果：

　[宗教] 永宏易理工作室

2.超連結URL、編排br、靠左對齊left、項目符號li為例
　未編排過的超連結：

[宗教] 永宏易理工作室 [芯瑀小棧] 祈福中國結(賣場)[看板] 台大 Ptt BBS [掃毒] Virus Total [論壇] FDZone-Forum

　Html Code：


<div align="left">
<ul>
<li><a target="_blank" href="http://tw.myblog.yahoo.com/rusptin/">[宗教] 永宏易理工作室</a><br></li>
  <li><a target="_blank" href="http://mybid.ruten.com.tw/user/lifemirror/">[芯瑀小棧] 祈福中國結(賣場)</a><br></li>
  <li><a target="_blank" href="http://gurucat.spaces.live.com/">[優格] 貓草天空</a><br></li>
  <li><a target="_blank" href="telnet://ptt.cc/">[看板] Ptt BBS</a><br></li>
  <li><a target="_blank" href="http://www.virustotal.com/zh-tw/">[掃毒] Virus Total</a><br></li>
  <li><a target="_blank" href="http://forum.tw.fdzone.org/?fromuser=lifemirror">[論壇] FDZone-Forum</a></li>
</ul>
</div>

　Html Code 說明：　

<div align="對齊方式">
<ul>
　　 <li><a target="目前框架" href="網址">網址名稱</a></li>
</ul>
</div>

　瀏覽器顯示效果：

[宗教] 永宏易理工作室

[芯瑀小棧] 祈福中國結(賣場)

[優格] 貓草天空

[看板] Ptt BBS

[掃毒] Virus Total

[論壇] FDZone-Forum

3.以文字段落P、置中center為例
　沒有使用文字段落的文章：

　水調歌頭明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓。人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。

　Html Code：　

　<p align="center">水調歌頭</p>
<p align="center">明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。<br>轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓。人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。</p>

　瀏覽器顯示效果：