HyperText Markup Language 實務

by Chin-Shiuh Shieh on

[Previous][Top][Next]

網頁檔本身為ASCII文字檔，其間夾雜特殊語法的HTML標籤。
瀏覽器讀取、掃描網頁檔，並依據其中的HTML標籤作適當呈現。
利用瀏覽器所提供的檢視=>網頁原始內容(原始檔) 功能觀摩他人作品。
HTML標籤大小寫均可。
我們在本文前後加入適當的HTML標籤可以：

備妥網頁基本架構

網頁基本架構
<HTML> <HEAD><TITLE>Document Title</TITLE> </HEAD> <BODY> Document Body </BODY> </HTML>
<BODY> 配合修飾語 BACKGROUND 可以選用背景圖案
<BODY BACKGROUND="xxx.gif">
<BODY> 配合修飾語 BGCOLOR 可以選用背景顏色
<BODY BGCOLOR="#FF0000">

選擇文字屬性、段落結構

標題：
黑體字：<B>...</B>
斜體字：<I>...</I>
底線字：<U>...</U>
打字機字體：<TT>...</TT>
分段：<P>
強迫換行：<BR>
水平線：<HR>
原格式：<PRE>...</PRE>
特殊字元：
- <：<
- >：>
- &：&
字型：<FONT FACE="標楷體" SIZE="+4" COLOR="Red">字型</FONT>

安插圖片

單純圖片：

<IMG SRC="csshieh.jpg" ALT="Chin-Shiuh Shieh">

具有超連結的圖片：
gif89a動畫檔：
圖片檔來源可為數位相機、掃描器、視訊捕捉卡、或軟體繪製。
圖片檔必須連同網頁檔上傳到全球資訊網伺服器，檔案傳輸時選擇Binary模式。
gif 與 jpg 是兩種網頁上常用的圖檔格式。gif 適用於繪圖檔，jpg適用於照片檔。Paint Shop Pro 4.14 (ftp://bit.kuas.edu.tw/pub/util/psp414.exe) 可作檔案格式轉換及簡單影像處理。
gif89a 是一種動畫檔，單一檔案內藏多張圖片，瀏覽器可將其圖片逐一顯現產生動畫效果。Microsoft GIF Animator 1.0 (ftp://bit.kuas.edu.tw/pub/util/gifsetup.exe) 可用於製作此類動畫。

呈現清單

清單是呈現資料常用手法。

無序清單	`<UL>` `<LI>蘋果` `<LI>柳橙` `</UL>`	蘋果柳橙
有序清單	`<OL>` `<LI>網際網路簡介` `<LI>網頁設計` `</OL>`	網際網路簡介網頁設計
定義清單	`<DL>` `<DT>HTML<DD>HyperText Markup Language` `<DT>CGI<DD>Common Gateway Interface` `</DL>`	HTML HyperText Markup Language CGI Common Gateway Interface

單獨使用 <UL> 具有內收效果。

呈現表格

表格是呈現資料常用手法。

<TABLE BORDER=1> <CAPTION>表格範例</CAPTION> <TR> 　　<TD><IMG SRC="boy.gif" BORDER="0"></TD> 　　<TD><IMG SRC="girl.gif" BORDER="0"></TD> </TR> <TR> 　　<TD><IMG SRC="star.gif" BORDER="0"></TD> 　　<TD><FONT FACE="Arial Black" COLOR="Lime">Welcome!</FONT></TD> </TR> </TABLE>

表格範例

	Welcome!

資料格中可為任何資料。
BORDER=0 會隱藏格線，用於協助版面配置。

設置超連結

同一目錄下的文件
其他主機上的文件
同一份文件中的某處

整合其他服務項目

在 <A HREF="url">service</A> 中填入適當URL，藉以整合其他網際網路服務項目。

<A HREF="ftp://bit.kuas.edu.tw/pub/util/powarc61.exe">Power Archiver 6.1</A>
Power Archiver 6.1
<A HREF="telnet://bbs.kuas.edu.tw">KUAS BBS</A>
KUAS BBS
<A HREF="news:comp.answers">NetNews</A>
NetNews
<A HREF="mailto:csshieh@bit.kuas.edu.tw">Mail Me</A>
Mail Me

備妥下載檔案

任何檔案形式的資料均可備妥於網站上供讀者下載，
將檔案加以壓縮，以節省空間及下載時間。zip是最常見的壓縮格式，Power Archiver 6.1 (ftp://bit.kuas.edu.tw/pub/util/powarc61.exe) 可以壓縮、解壓縮此類檔案。

安插語音、視訊檔

wav、mid、mp3是三種常見音效檔格式。wav是錄音檔，檔案大。mid是音符檔，檔案小。mp3是高壓縮比的錄音檔。

<A HREF="welcome.wav">歡迎光臨(22.7KB)</A>
歡迎光臨(22.7KB)
<A HREF="laputa.mid">天空之城(9.62KB)</A>
天空之城(9.62KB)
<A HREF="jesu_joy_of_mans_desiring.mp3">J.S. Bach: Jesu - Joy of Man's Desiring(2.33MB)</A>
J.S. Bach: Jesu - Joy of Man's Desiring(2.33MB)
背景音樂
<EMBED SRC="lapuda.mid" LOOP="TRUE" WIDTH="146" HEIGHT="61" VOLUME="50" CONTROL="LARGECONSOLE" AUTOSTART="TRUE">
視訊檔
<EMBED SRC="catgirl.avi" WIDTH="160" HEIGHT="160">

安裝訪客計數器

網頁作者最關心有多少訪客到訪，訪客計數器可以記錄到訪人次。
訪客計數器牽涉到CGI程式，一般由主機管理者提供，請洽詢您的網管部門。
bit上安裝了一個CGI圖形計數器，bit的使用者可以仿下例引用，將csshieh改成您的帳號名稱。
<IMG SRC="http://bit.kuas.edu.tw/cgi-bin/Count.cgi?df=csshieh.dat&ft=0&dd=C">

安插 Java Applet

Java是一個以跨平台為訴求的程式語言。Java Applet 是其程式型態之一，專為網頁而設計。
<applet code="Lake.class" width="135" height="314"> <param name="image" value="lake.jpg"> </applet>
相關檔案：Lake.class (zip-compressed) (http://bit.kuas.edu.tw/~csshieh/teach/ia/Lake.zip)
<applet code="rubik.class" width="120" height="120"> </applet>
相關檔案：rubik.class (zip-compressed) (http://bit.kuas.edu.tw/~csshieh/teach/ia/rubik.zip)
建議初學者上網參考、借用現成程式，來產生種種特效。

切割視窗

將瀏覽器視窗加以切割，每一視框指定一網址。

<HTML>
<HEAD>
	<TITLE>國立高雄工業專科學校 電子工程科 七十五級</TITLE>
</HEAD>
<FRAMESET COLS="15%,*">
	<FRAME SRC="content.html"></FRAME>
	<FRAME SRC="main.html" NAME="MAIN"></FRAME>
</FRAMESET>
</HTML>

國立高雄工業專科學校電子工程科七十五級 (http://ohm.ec.kuas.edu.tw/~70)

備妥表單

表單提供介面讓使用者與伺服器藉以互動。
表單必須搭配其他網頁語言使用。
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query"> Name: <INPUT TYPE="TEXT" NAME="NAME" VALUE="Chin-Shiuh Shieh"> <BR> Password: <INPUT TYPE="PASSWORD" NAME="PASSWORD" VALUE="csshieh" SIZE="8"> <BR> Age: <INPUT TYPE="INT" NAME="AGE" VALUE="32" SIZE="3"> <BR> Sex: <INPUT TYPE="RADIO" NAME="SEX" VALUE="MALE" CHECKED>Male <INPUT TYPE="RADIO" NAME="SEX" VALUE="FEMALE">Female <BR> Amount of Schooling: <INPUT TYPE="RADIO" NAME="DEGREE" VALUE="HS">High School <INPUT TYPE="RADIO" NAME="DEGREE" VALUE="BS">College <INPUT TYPE="RADIO" NAME="DEGREE" VALUE="MA" CHECKED>Graduate School <BR> Favorite hobbies? <INPUT TYPE="CHECKBOX" NAME="SPORT">sports <INPUT TYPE="CHECKBOX" NAME="READ" CHECKED>reading <INPUT TYPE="CHECKBOX" NAME="COMPUTER" CHECKED>computers <INPUT TYPE="CHECKBOX" NAME="COOK">cooking <INPUT TYPE="CHECKBOX" NAME="SLEEP">sleeping <BR> Eyes color: <SELECT NAME="COLOR" SIZE=1> <OPTION>Green <OPTION>Brown <OPTION>Blue <OPTION SELECTED>Black </SELECT> <BR> Comments: <BR> <TEXTAREA NAME="COMMENT" ROWS=5 COLS=50> Hello, world! </TEXTAREA> <BR> <INPUT TYPE="SUBMIT"><INPUT TYPE="RESET"> </FORM>
Name:
Password:
Age:
Sex: Male Female
Amount of Schooling: High School College Graduate School
Favorite hobbies? sports reading computers cooking sleeping
Eyes color:
Comments:
Hello, world!

[Previous][Top][Next]

1號標題:	`<H1>...</H1>`
2號標題:	`<H2>...</H2>`
3號標題:	`<H3>...</H3>`
4號標題:	`<H4>...</H4>`
5號標題:	`<H5>...</H5>`
6號標題:	`<H6>...</H6>`

HyperText Markup Language 實務

備妥網頁基本架構

選擇文字屬性、段落結構

1號標題:

2號標題:

3號標題:

4號標題:

5號標題:

6號標題:

安插圖片

呈現清單

呈現表格

設置超連結

整合其他服務項目

備妥下載檔案

安插語音、視訊檔

安裝訪客計數器

安插 Java Applet

切割視窗

備妥表單