回到上一層
發信人: ceiling@fhlbbs (錫霖), 信區: ftp_WWW
標 題: WWW 簡單指令集!
發信站: 信望愛團契電子佈告欄 (Wed May 17 09:26:43 1995)
轉信站: fhlbbs (local)
這篇是簡單的WWW指令,有心做WWW的可一同來學習。真的非常簡單喔!
============================================================
A Beginner's Guide to HTML
HTML文件編輯入門
這篇文將告訢你如何編輯HTML格式的文章，使你的作品成為多采多姿的多媒體
文件，能夠＊
z過WWW的服務，讓全世界分享您的心得。
大綱：
一、名詞解釋
二、初步嘗試
1.表頭
2.標題
3.段落
三、連結其他文件
1.URL型式
2.跳躍至另一篇文章
3.跳躍至另一個段落
四、另一些標注(tags)
1.排列
a.未標序的排列
b.標序排列
c.陳述式排列
d.綜合排列
2.預設文字格式
3.區塊設定
4.字形變化
5.特殊字元
五、線上秀圖
六、呼叫圖形
七、困難排除
八、範例
一、名詞解釋
WWW -- World Wide Web 全球資訊網
What a Wonderful Word
SGML -- Standard Generalized Marked Language 標準標注式語言。
DTD -- Document Type Definition 文件型式定義。
C++之於電腦語言，如同SGML之於DTD。
HTML -- HtperText Markup Language 多媒體文件語言。
HTML is a SGML DTD.
多媒體文件語言是一種標準標注式文件的定義。而在全球資訊網中所閱讀的文
章，正是依＊
茧蛦o
種標準。
二、初步嘗試
現在，開始製作你的第一個HTML文件。
多媒體文件(HTML)其實只是很平常，很普通的文字檔。你可以
用你所熟悉的文字編輯器來編輯它，例如PE2、VI等，不一定要用其
它的新穎編輯器。只要透過一些簡單的標注，就讓您的文章生動、
活潑了起來，這就是HTML的特色。
下面是個簡單的開始：
-----------------------------------------------------------
簡單的HTML文件
這裡放個標題
歡迎進入全球資訊網 !
這是第一段落的結束。
另一個段落的結束在這兒
-----------------------------------------------------------
看看它在WWW裡變成什麼樣子：(剪貼Mosaic螢目顯示)
上面五行就是HTML原始的樣子，那些大於(>)、小於(<)符號和
來於其中的英文字，就是所謂的「標注」(tags)。正因為有這些標
注，這WWW的讀者看到多采多姿的文章，我們的流覽器(例如Mosaic
或Cello)，會依照不同的標注，產生許多不同的效果。
和記號中間所包住的文字，就是這一篇文章的
主題，它一定在文章的最前面，也會顯示在Mosaic最上面Title的欄
位。而所有的< >和夾在其中的文字都不會顯示出來。被和
所夾在中間的文字，是文章裡的標題。它可以標注出六個層級
的標題，從、 、、、、、到，也可以說是的
次標題。差別在於標題的文字會比次標題來得大些、粗些、更顯
眼。
是HTML格式中特有的段落句點。在HTML格式裡我們不需要在
意文章每行的寬度，不必擔心文字是不是太長了而被截掉；它會依
視窗的寬度而做自動轉折到下一行的工作。因此，在原始文件中的
，就是指出了這兒告一段落，下面的文字換行從頭再開始。如果
沒有遇到
這個符號，它就會把所有之前的文字都擠在一個段落
裡，不遇到視窗的邊界是不會換行的。我們在原始檔中的換行動
作，若沒標記，是會被視而不見的
所以在第一個範例中，會出現：
-----------------------------------------------------------
歡迎進入全球資訊網！這是第一個段落的結束。
-----------------------------------------------------------
在原始檔中，這原本是分開旳兩行，但這兒卻成了一行；顯然
換行被忽略了。所以下面的寫法，也會是同樣的效果。
-----------------------------------------------------------
簡單的HTML文件這裡於個標題歡迎進人
全球資訊網！這是第一段落的結束。另一個段落的結束在這兒
。
-----------------------------------------------------------
太多的空白，不論二個或一行，都會被視為沒有。還有在< >中
的文字是不拘大小寫的，可以是
也可以是<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節點。
http代表著另一台WWW伺服器。
gopher代表目地的是gopher主機上的檔案；WAIS亦同。
這些都是URL(Uniform Resource Locator)
例如：想連結這篇文章的英文原板，就寫成下面那樣：
<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文章中的其它地方。
四、另一些標注(tags)
1.排列
因為HTML格式裡，空白跳行字元會被視而不見所以需要利用
另一些標潼讓我們的內容有條不紊的排列。
a.未標序的排列(Unnumblered Lists )
先行宣告排列的種類<UL>，然後在每一列文字前加上
<U1>，最後宣告結束</UL>例如：
<UL>
<LI> apples
<LI> bananas
</UL>
The output is:
apples
bananas
要注要若使用不同的流覽器(Mosaic,Cello,Windeb)就可能會
有不同的效果。也許是圓形，或是一槓加在每一行的起始。
b.標序排列(Numberd Lists 或Ordered Lists)
方法跟前者相似，先行宣告種類<OL>，再加上<L1>於各項之
首，最後宣告結束</OL>■d例如下：
<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 Enginring.
<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 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 wih 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格式中的控制碼，所以要在螢目上顯示出這三個字元，必需配
合其它表示法。
< 在螢目上會是 <
> 在螢目上會是 >
& 在螢目上會是 &
尚有其他特殊字元(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格式。
七、因難排除
1.某些標注內不能引用其他的不完整的標注，這表示有些架構
是無法重疊的。如：<h1> This is <A name="foo"> invalid
HTML</h1></a>就是行不通的。
2.當<img>所聯結的影像檔不存在或無法正常顯示時NCSA
Mosaic 會用 NCSA logo 圖形取代。
八、較長而完整的範例
A Longer Example
Here is a longer example of a HTML document:
_____________________________________________________________________
___
<TITLE>A Longer Example
A Longer Example
This is a simple HTML document. This is the first
paragraph.
This is the second paragraph, which shows special effects. This is
a
word in italics. This is a word in bold.
Here is an inlined GIF image: 
.
This is the third paragraph, which demonstrates links. Here is
a hypertext link from the word foo
to a document called "subdir/myfile.html". (If you
try to follow this link, you will get an error screen.)
A second-level header
Here is a section of text that should display as a
fixed-width font:
On the stiff twig up there
Hunches a wet black rook
Arranging and rearranging its feathers in the rain ...
This is a unordered list with two items:
cranberries
blueberries
On the stiff twig up there
Hunches a wet black rook
Arranging and rearranging its feathers in the rain ...
This is a unordered list with two items:
cranberries
blueberries
This is the end of my example document.
Me (me@mycomputer.univ.edu)
_____________________________________________________________________
這篇文章是翻譯 A Beginner's Guide to HTML
陳彥宇 中央機械 ship@nculib4.ncu.edu.tw
--
===================================================
我達達的馬蹄,是首美麗的詩篇 錫霖
===================================================
回到上一層