资源描述
超媒體文件(HTML格式)實務製作(一)
(By 黃明祥 Oct. 26, 2004)
一、基本概念
1. 縮寫
HTML: Hypertext Markup Language (超媒體標示語言)
URL: Uniform Resource Locator(一致資源定位器)
WWW Browser: WWW瀏覽器
WWW Server: WWW 伺服器
WWW: World Wile Web(全球資訊網)
2. 編寫工具
2.1 HTML編寫工具：任何文書編輯器(記事本,小作家pe2,vi,notes,...)
2.2 影像製作工具： Photoshop, Image Pales, Corel Draw, 其它
3. 瀏覽工具
Netscape, IE
二、HTML主體架構
※ 檔名： xxx.htm (for Windows) xxx.html (for Unix)
※ 格式：
<標籤名稱 屬性名稱 屬性值>
</標籤名稱 屬性名稱 屬性值>
※ 簡單的範例：
<title>歡迎蒞臨交通部電信研究所</title>
<body background="tttbg.jpg" text=#400040>
<center>
<img src="ttt.jpg"></img>
</center>
</body>
三、語法格式
1. 主題(title)
<title>主題</title>
※用來顯示本頁之主題。
※顯示在netscape或ie最上面畫面。
2. 標題(heading)
<h1> 第一層標題 </h1>
<h2> 第二層標題 </h2>
<h3> 第三層標題 </h3>
<h4> 第四層標題 </h4>
<h5> 第五層標題 </h5>
<h6> 第六層標題 </h6>
※顯示文章之標題，類似文章之章、節、項。
※標題的字體與大小可由使用者自行設定。
3. 新段落(paragraph)
<p>
※產生一個新的段落
4. 超連結及定位錨(Anchors)
4.1與其它文件做連結
<a href=“filename.htm”> 連結內容標題 </a>
※用來連結(link)執行filename.htm之html檔案。
※在ie瀏覽器上，連結內容標題會以底線及不同顏色(default為籃色)顯示。
※當游標移到這些文字時，游標之形狀會由箭頭轉成手指狀，只要在此點一下就會跳到並執行filename.htm之HTML檔案。
4.2連結其它Web站
<a href=“URL filename”> 連結其它Web站 </a>
※用來超連結(hyperlink)到其它Web站。
※範例：
<a href=“scheme://host[:port]/dir/subdir/filename.htm”>連結其它Web站</a>
scheme: http,file,gopher,WAIS,news,telnet,ftp,mailto
<a href=“ftp://user_id:passwd@host/”> </a>
※相對路徑連結： ※絕對路徑連結：
4.3與同一份文件中之其它章節作連結
<a href=“#xxxx”> 跳到本文其它有標xxxx位置 </a>
※直接跳到本文其它有標<a name=“xxxx”>位置</a>
4.4與其它文件之章節作連結
<a href=“filename.htm#xxxx”> 跳到filename.htm文件上標xxxx位置 </a>
※直接跳到filename.htm文件上有標
<a name=“xxxx”>位置</a>
4.5 連結到其它影像
<a href=“imagefile”>連結到其它影像</a>
5. 列表(lists)
5.1 未標序號之排列(unordered list)
<ul>
<li>資料內容一
<li>資料內容二
</ul>
顯示結果：
‧資料內容一
‧資料內容二
5.2 有標序號之排列(oredered list)
<ol>
<li>資料內容一
<li>資料內容二
</ol>
顯示結果：
1 資料內容一
2 資料內容二
5.3 多層次列表(nested list)
<ul>
<li>無序號資料內容一
<ol>
<li>有序號資料內容一
<li>有序號資料內容二
<li>有序號資料內容三
</ol>
<li>無序號資料內容二
</ul>
顯示結果：
‧ 無序號資料內容一
1 有序號資料內容一
2 有序號資料內容二
3 有序號資料內容三
‧ 無序號資料內容二
5.4 敘述性列表(definition list)
<dl>
<dt>資料內容1
<dd>資料內容1.1
<dt>資料內容2
<dd>資料內容2.1
</dl>
顯示結果：
資料內容1
資料內容1.1
資料內容2
資料內容2.1
<dl>
<dt>1資料內容
<dd>1.1資料內容<dl>
<dd>1.1.1資料內容
<dd>1.1.2資料內容
</dl>
<dd>1.2資料內容
<dt>2資料內容
<dd>2.1資料內容
<dt>3資料內容
</dl>
顯示結果：
1資料內容
1.1資料內容
1.1.1資料內容
1.1.2資料內容
1.2資料內容
2 資料內容
2.1資料內容
3 資料內容
5.5 表格(table)
<table>
<caption><font size=6>表格標題</font></caption>
<tr><th>欄位名稱一<th>欄位名稱二<th>欄位名稱三<th>欄位名稱四
<tr><td>資料內容一<td>資料內容二<td>資料內容三<td>資料內容四
</table>
6. 水平線(horizontal rule)
<hr>
※產生一等寬之水平線
例：
<hr align=“left” width=60% size=3>
7. 強迫換行(line break)
<br>
※強迫換一行
8. 註解(comment)
<!-- 註解內容 -->
9. 使用原始排版方式
<pre>
.......................
</pre>
※在<pre>與</pre>之間資料內容會按照原編輯檔案顯示螢幕上。
※換行及空白字不會被吃掉。
10. 字型變化
<i>資料內容</i>
※資料內容以斜體字型顯示
<b>資料內容</b>
※資料內容以粗體字型顯示
<tt>打字機文字資料</tt>
11. 特殊字元
>: <
<: >
&: &
“: "
12. 線上顯示影像
<img src=“imagefile”>資料內容</img>
※資料內容之文字會放在圖下
<img align=top src=“imagefile”>資料內容</img>
※資料內容之文字會放在圖上
<img align=middle src=“imagefile”>資料內容</img>
<img align=bottom src=“imagefile” alt=“Warning”>資料內容</img>
註：alt: 當軟硬體環境無法顯示圖型檔案時，以“Warning“字串替代。
<a href=“/cgi-bin/htimage/dir/subdir/imagefile.conf”>
<a src=“imagefile” ismap></a>
13. <address>作者Email 位址 </address>
用來告訴本篇文件的作者的Email address。
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
