HTML文件編輯入門 [Introduction to Html]

這篇文將告訢你如何編輯HTML格式的文章，使你的作品
成為多采多姿的多媒體文件，能夠透過WWW的服務，讓
全世界分享您的心得。

一、名詞解釋

WWW
SGML
DTD
HTML

二、初步嘗試

現在，開始製作你的第一個HTML文件。
多媒體文件(HTML)其實只是很平常，很普通的文字檔。
你可以用你所熟悉的文字編輯器來編輯它，例如PE2、
VI等，不一定要用其它的新穎編輯器。只要透過一些
簡單的標注，就讓您的文章生動、活潑了起來，這就
是HTML的特色。

下面是個簡單的開始：

-----------------------------------------------------------
    <TITLE>簡單的HTML文件</TITLE>
    <H1>這裡放個標題</H1>
    歡迎進入全球資訊網 !
    這是第一段落的結束。<P>
    另一個段落的結束在這兒<P>
-----------------------------------------------------------
看看它在WWW裡變成什麼樣子：

上面五行就是HTML原始的樣子，那些大於(<)、小於(>)符號和 來於其中的英文字，就是所謂的「標注」(tags)。正因為有這些標 注，這WWW的讀者看到多采多姿的文章，我們的流覽器(例如Mosaic 或Cello)，會依照不同的標注，產生許多不同的效果。

<Title>和</Title>記號中間所包住的文字，就是這一篇文章的
主題，它一定在文章的最前面，也會顯示在Mosaic最上面Title的欄
位。而所有的< >和夾在其中的文字都不會顯示出來。被<H1>和
</H1>所夾在中間的文字，是文章裡的標題。它可以標注出六個層級
的標題，從<H1>、<H2> 、、、、、到<H6>，也可以說<H3>是<H2>的
次標題。差別在於標題的文字會比次標題來得大些、粗些、更顯 眼。

<P>是HTML格式中特有的段落句點。在HTML格式裡我們不需要在 意文章每行的寬度，不必擔心文字是不是太長了而被截掉；它會依 視窗的寬度而做自動轉折到下一行的工作。因此，在原始文件中的 <P>，就是指出了這兒告一段落，下面的文字換行從頭再開始。如果 沒有遇到<P>這個符號，它就會把所有之前的文字都擠在一個段落 裡，不遇到視窗的邊界是不會換行的。我們在原始檔中的換行動 作，若沒標記，是會被視而不見的。

太多的空白，不論二個或一行，都會被視為沒有。還有在< >中 的文字是不拘大小寫的，可以是<Title>也可以是<title>或<TITLE> 都可以。更可以發現有些標注是成對出現的，尾隨在後的會比前頭 的多了個"/"。

三、連結其它文件

HTML文章的另一個特色，就是在文章段落間任意地跳躍。可以 跳到另外一台電腦上的文件，也可以跳到文章的另一個段落。 下面是它標注的格式。 基本上，它會是這一個樣子：
<A href="filename.html" >Link to filename </a>
這表示我們將看到"Link to filename"會變色並加下底線出現
在Mosaic中，當遊標移到上面時，會從箭頭轉成手指，這表示
你可以在這兒壓一下：會跳躍到filename.html的文章裡。這很
簡單，我們只要把目的地放進" "當中就可以了。
(別忘了加上路徑。)

當它要跳躍到別台主機時，" "中的格式是這樣子的。
"Scheme://host.domain[:port]/path/filename"
scheme可以是file、http、gopher、WAIS，這要視該主機提供
ftp節點。

例如：想連結這篇文章的英文原板，就寫成下面那樣：
<A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
NCSA's HTML Primer </A>

[:port]代表的是用那一個通訊埠溝通，defult是80，通常不需
指明，但有些站比較不一樣，例如成大圖書館，就需加上
http://liphp.lib.ncku.edu.tw:5000/

除了跳到另一個HTML文件，也可以在一篇文章內隨心所欲地跳躍。
首先看看它在" "引號中的表示方式

<A HREF="#clients">Jump to Clients </A>
Jump to Clients」會變色加上底線並連接到一篇文章中有標
注<A NAME= "clients"> Clinets </A>的地方。

如果這兩個標注是在不同的文件內，則表示方法有點兒改變。 若Jump to Clients 在A文章，而Clents 在B文章中，則要改
<A HREF="filenameB#clients"> Jump to Clients </A>
這樣一來，當我們在A文章中按下Jump to Clients 就會跳到B
文章的Clients這個字，而不是B文章中的其它地方。

四、另一些標注

1.排列

因為HTML格式裡，空白跳行字元會被視而不見所以需要利用
另一些標潼讓我們的內容有條不紊的排列。
a.未標序的排列(Unnumblered Lists )
先行宣告排列的種類<UL>，然後在每一列文字前加上 <U1>，最後宣告結束</UL>例如：
 <UL>
  <LI2> apples
  <LI> bananas
  </UL>

The output is:
   apples
   bananas
要注要若使用不同的流覽器(Mosaic,Cello,Windeb)就可能會 有不同的效果。也許是圓形，或是一槓加在每一行的起始。

b.標序排列(Numberd Lists 或Ordered Lists)
方法跟前者相似，先行宣告種類<OL>，再加上<L1>於各項之 首，最後宣告結束</OL>，範例如下： 
 <OL>
  <LI> oranges
  <LI> peaches
  <LI> grapes
  </OL>

The list looks like this online:

 1. oranges
 2. peaches
 3. grapes

c.陳述式排列(Descricptive Lists)
陳述式的排列包括了個別的主題和其敘述主題較為敘述部 凸前，為獨立的一行。敘述的部分被視為一長串文字會自動轉折。 先宣告<DL>置主題於<DL>後，敘述加於<DD>後，最後以</DL>結尾。 在<DT><DD>間，可以包含其它的連結，範例如下： 
<DL>
  <DT> National Center for Supercomputing Applications
  <DD> NCSA is located on the campus of the University
  of Illinois at Urbana-Champaign. NCSA is a one of
  four member institutions in the National Metacenter for
  Computational Science and Engineering.
  <DT> Cornell Theory Center
  <DD> CTC is located on the campus of Cornell
  University in Ithaca, New York. CTC is another member
  of the National Metacenter for  Computational Science
  and Engineering.
  </DL>

The output looks like this:

National Center for Supercomputing Applications
   NCSA is located on the campus of the University of Illinois at
   Urbana-Champaign. NCSA is a one of four member institutions in the
   National Metacenter for Computational Science and Engineering.
Cornell Theory Center
   CTC is located on the campus of Cornell University in Ithaca, New York.
   CTC is another member of the National Metacenter for Computational
   Science and Engineering.

d.綜合排列
排列的裡面，亦可以包含排列；會是有層次的排列表現方 法。要說明的是，會因流灠器的不同，而會有同的效果，可能不是 你想要的。如NCSA Mosaic會把第二層的排列加上。範例如下： 
<UL>
  <LI> A few New England states:
    <UL>
    <LI> Vermont
    <LI> New Hampshire
    </UL>
  <li> One Midwestern state:
    <UL>
    <LI> Michigan
    </UL>
  </UL>

The nested list is displayed as

   A few New England states:
      Vermont
      New Hampshire
   One Midwestern state:
      Michigan

2.預設文字格式(Preformatted fext)

HTML在一般無標注的情況下會吃掉過多的空白字元和跳行字 元，但我們可以用<PRE>和</PRE>讓空白、跳行字元存活下來。在 <PRE>.</PRE>之間的文字間隔、跳行、空白照原始鍵入的情形，一 五一十忠實地再顯現出來。這常用於電腦程式的表達。而其它標注 (tags)是允許存在<pre>裡 例如： 
    <PRE>
  #!/bin/csh
  cd $SCR
  cfs get mysrc.f:mycfsdir/mysrc.f
  cfs get myinfile:mycfsdir/myinfile
  fc -02 -o mya.out mysrc.f
  mya.out
  cfs save myoutfile:mycfsdir/myoutfile
  rm *
</PRE>

display as:

  #!/bin/csh
  cd $SCR
  cfs get mysrc.f:mycfsdir/mysrc.f
  cfs get myinfile:mycfsdir/myinfile
  fc -02 -o mya.out mysrc.f
  mya.out
  cfs save myoutfile:mycfsdir/myoutfile
  rm *

　　　

3.Extended quotes

Use the <blockquote> and </blockquote> tags to include quotations in a
separate block on the screen.
範例如下：

    <blockquote>
  Let us not wallow in the valley of despair. I say to you, my
  friends, we have the difficulties of today and tomorrow. <P>

  I still have a dream. It is a dream deeply rooted in the
  American dream. <P>

  I have a dream that one day this nation will rise up and
  live out the true meaning of its creed. We hold these truths
  to be self-evident that all men are created equal. <P>
  </blockquote>

The result is

 Let us not wallow in the valley of despair. I say to you, my friends, we 
have the
 difficulties of today and tomorrow.

 I still have a dream. It is a dream deeply rooted in the American dream.

 I have a dream that one day this nation will rise up and live out the true
 meaning of its creed. We hold these truths to be self-evident that all men 
are
 created equal.

4.位址 Address

這個標注通常用來告知大家本篇文件的作者。經常是一個Email Address 放在文件的最後面。範例如下：
  <ADDRESS>
  A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
  </ADDRESS>
The result is:
  A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu

5.字型變化

各別的字式句子可以使用不同的型，這取決於你使用的流覽 器。譬如說，<CITE>在你的流覽器中定義為斜體字，那每次你輸入 <CITE>，字型就會自動變為斜體。

範例如下：

Italic
<I>text</i> puts text in italics (HTML Primer)
<em>text</em> also italicizes text (only one viewer)
<cite>text</cite> is used for citations of names of manuals,
sections, or books (HTML Primer) <var>text</var> indicates a variable (filename)
Bold
<b>text</b> puts text in bold (Important)
<strong>text</strong> also emphasizes text (Note:)
Fixed width font
<tt>text</tt> puts text in a fixed-width font (1 SU = 1 CPU
hour) <code>text</code> also puts text in a fixed-width font (1 SU
= 1 CPU hour) <samp>text</samp> formats text for samples (-la) <kbd>text</kbd> displays the names of keys on the keyboard ( HELP)

6.特殊字元

在ASCII碼中，有三個字元：大於(<)、小於(>)、(&)被當作 HTML格式中的控制碼，所以要在螢目上顯示出這三個字元，必需配 合其它表示法。

&lt 在螢目上會是 <
&gt; 在螢目上會是 >
&amp 在螢目上會是 &
尚有其他特殊字元(ISO 8859-1)從CERN的列表中得知。

五 線上秀圖

NCSA Mosaic 可以直接在文件上顯示 X Bitmap(X BM)或GIF格式的 圖形。每個圖形都需要時間來顯現而挈長了整個文件顯現的時間。 同一個圖在文件內使用多次會比只使用一次情況好些。注意：<img> 是NCSA Mosaic 首先採用的標注，並非所有的流覽器能解譯。
　表示方法如下：
　　　<IMG SRC="filename.GIF">

若未加特別注解,此段的文字會被置於圖形的下面。
若想要文字置於圖形的上面,就得加上align=top
的參數:<IMG ALIGN=top SRC="filename.GIF"> 如果圖很大,幾乎塞滿整個視窗,你應該在圖形插入前 加上<P>的標注。

六、呼叫圖形

當你的圖形很大,或是讓讀者選擇性的看圖時,你可以做一個聯 結(link),從一段文字或一個小圖跳躍到另一個新的圖形視窗(另一 個文件)。不用花費漫長的時間在主文件中讀圖，可以用小的圖片或 文字，引導讀者自己決定要不要看這個圖片。表示方法如下：

<A HREF="filename.GIF">link anchor</A>

圖檔的格式可以是GIF.TIEF.JPEG.RGB 或HDF格式。

七、因難排除

某些標注內不能引用其他的不完整的標注，這表示有些架構 是無法重疊的。如：
<h1> This is <A name="foo"> invalid HTML</h1></a>
就是行不通的。

八、範例

簡單的例子