over 3 years ago

各位大家好,敝人在昨日總算又在Windows Store上架了APP-[龜兔賽跑棋],稍微來簡介一下其功能吧!

APP連結:http://apps.microsoft.com/windows/zh-tw/app/0a3a14aa-3100-4323-ac92-2b3b417e95d5

龜兔賽跑棋是一個簡單的棋類遊戲,其目的為想盡辦法將自身的三顆棋移至對面並且離開棋盤,若使用的是烏龜棋得往上面離開,而使用兔子棋則得往右邊離開。

規則為烏龜棋只能往上、左、右三個方向行走,兔子棋只能往右、上、下三個方向行走。當一方完全不能移動時,就直接跳過換成另外一方移動。

支援本機2P模式,歡迎各位可以跟親朋好友對戰看看喔!

 
over 3 years ago

隨身單字卡歷經了眾多更新,到了今日的模樣花了不少時間呀!

APP連結:http://www.windowsphone.com/zh-tw/store/app/%E9%9A%A8%E8%BA%AB%E5%96%AE%E5%AD%97%E5%8D%A1/b83bc17f-53a3-49d5-bae0-b41ef5a57cf7

新增功能部分

  1. 新增編輯分類、單字功能。
  2. 可使用拖曳方式更換分類與單字順序。
  3. 可切換單字清單之單字顯示方式(以單字或是其解釋做顯示)。
  4. 新增標音功能,可使用 (單字)[上標音] 來為單字標上標音,詳情請進入APP點選上面標題可看見範例。
  5. 新增匯入、匯出檔案。
  6. 可展開單字列表成串列單字卡。

更動部分

  1. 背景更換。
  2. UI更動:隱藏按鈕、返回按鈕、編輯與刪除按鈕。
  3. 轉場動畫變快。

APP截圖

 
over 3 years ago

這篇主要來介紹一下Windows Phone App的HTML5專案,打開Visual Studio並選擇Visual C#類別中的Windows Phone,即可找到Windows Phone HTML5應用程式的專案,如下圖所示:

新增專案後,你就會看到如下的畫面:

可以很明顯地發現到其實Windows Phone的HTML5專案其實只是放個瀏覽器在裡面,並且去瀏覽專案中Html資料夾中的網頁而已,藉此你可以透過HTML+CSS+Javascript去撰寫APP。

在首頁的地方寫了簡單的程式碼:

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <title>Windows Phone</title>
        <script>
            window.addEventListener("load", function () {
                document.querySelectorAll("#page-title p")[0].innerHTML = "Hello World!";
            });
        </script>
    </head>
    <body>
        <div>
            <p>我的應用程式</p>
        </div>
        <div id="page-title">
            <p>頁面標題</p>
        </div>
    </body>
</html>

簡單來說,就是在網頁載入後,將id為page-title裡的第一個p標籤裡的內容換成Hello World!。結果如下圖所示:

接著下來你就可以依照做網站的方式來開發APP了!

如果Javascript沒有作用...

我剛開始使用HTML5專案時,發現Javascript怎樣都沒有作用。如果遇到相同情形,可以在MainPage.xaml.cs中的Browser_Loaded函式內加上Browser.IsScriptEnabled = true;這行程式碼即可。

MainPage.xaml.cs
private void Browser_Loaded(object sender, RoutedEventArgs e)
{
  Browser.IsScriptEnabled = true;
  
  // 在此加入您的 URL
  Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}

參考資料

  1. Getting Started With Windows Phone 8 HTML5 Apps:http://blogs.msdn.com/b/matthiasshapiro/archive/2013/02/15/getting-started-with-windows-phone-8-html5-apps.aspx
 
almost 4 years ago

各位大家好,敝人在昨日總算是在Windows Store上架了APP-[索尼克資訊收集所],稍微來簡介一下其功能吧!

APP連結:http://apps.microsoft.com/windows/zh-tw/app/13c70cc4-0316-4a99-8d07-05bbe80c6253

基本上來說,這就只是一個RSS閱讀器而已,只是我把平常大家常逛的Sonic Retro、Sonic Stadium和Sega Blog的RSS放進去,再加上以前有的Sonic Hub聯播(現在掛了QAQ)的部落格的RSS放進去這樣,是個要追蹤索尼克資訊還蠻便利的APP就是了。

底下是目前有的RSS列表:

  1. Sonic Hub (有時會出現、有時會不見,Sonic Hub的RSS檔案有點問題= =...)
  2. Gnaw your fur! (冰翼)
  3. 亂寫亂畫亂貼 (曉翊)
  4. 小田的部落 (花狐)
  5. Sectumsempra (U7L)
  6. 鴨子.楊的網路日記 (Tikal)
  7. jerry的Blog (jerrytown)
  8. 音速無雙的個人記事錄(音速無雙)
  9. PARK LANE 閃電藍刺蝟★藍藍的很開心(新哀王子)
  10. 某S的小說發佈(忍蛋)
  11. Dash thru the Barrier - Life of SBC(Sound Barrier Crusher)
  12. Indulge in this Fantastic World(Tako)
  13. Sonic Retro
  14. Sonic Stadium
  15. SEGA Blog
  16. ソニックチャンネル スタッフコラム
 
almost 4 years ago

在HTML裡面,如果打了太長的一連串的英文字,瀏覽器會把它當作一個詞彙,並且不會在空間狹小的時候做分行(除非中間有-,?......等等之類的分隔符,會在分隔符處分行)。不過我們平常打中文沒有這個問題,中文一個一個字,中間就算沒空白也會以字為單位去做分行。但是就算打英文文章,好似也很少遇過會有一個單字長到完全裝不下的情形。其實是真有這情況會需要,那就是網址,網址中間通常都不會有分隔符,而偏偏又得連在一起,就會導致以下的結果:

那該怎麼做去解決這個問題呢?就利用wbr標籤吧!

wbr:字詞方行

wbr.html
...
   http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages
...

以上是個例子,我們在我們認定可以斷行的地方去加上wbr標籤,瀏覽器就會在裝該文字的容器塞不下的時候選擇適當的wbr標籤去斷行。若文字能夠完美得塞進容器內那就不會進行斷行。

可完美放入的時候:

無法完美放入的時候:

(此範例對於網址的分段方法是依照DevDocs上所言The Yahoo Style Guide的分行方法。)

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML <wbr> Tag:http://www.w3schools.com/tags/tag_wbr.asp
 
almost 4 years ago

今天終於要來提HTML5的新功能之一-放置多媒體的部分,底下一樣就用範例來解說。

embed:外部嵌入播放器播放音樂與影片

media.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>多媒體</title>
    </head>
    <body>
        <embed src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" />
        <embed src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" />
    </body>
</html>

這個embed標籤從很早以前就有了,不過直至HTML5才將之納為標準。

embed主要是用外部的播放程式鑲嵌在網頁上來播放音樂或影片,利用src屬性去放置音樂或影片的連結。如果該瀏覽器找不到可播放此音樂或影片的播放程式,那麼就沒辦法播放了。

不過在HTML5的標準裡,已經支援讓瀏覽器去播放音樂或影片了!底下就來看看直接讓瀏覽器播放音樂或影片的標籤吧!

audio:播放音樂

media02.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>多媒體</title>
    </head>
    <body>
        <p>
            <audio src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" controls autoplay loop>
            對不起,您的瀏覽器不支援HTML5。
            </audio>
        </p>
    </body>
</html>

audio標籤用於放置音樂,屬性有很多,在此列舉常用的controls、autoplay、loop,這些屬性跟以前看到的屬性有點不同,以前的屬性都要代值,但是HTML5中很多標籤是具有布林屬性:有出現就有功能,沒出現就沒功能。controls表示是否要出現控制面板,autoplay表示是否要自動播放,loop表示是否要循環。

audio裡面的內容可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

video:播放影片

media03.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>多媒體</title>
    </head>
    <body>
        <p>
            <video src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" controls autoplay loop>
            對不起,您的瀏覽器不支援HTML5。
            </video>
        </p>
    </body>
</html>

video標籤用於放置音樂,屬性跟audio一樣有很多,範例中一樣列舉常用的controls、autoplay、loop,這些屬性跟audio的同名屬性類似,就不多提了。

video裡面的內容一樣可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

瀏覽器支援音樂、影片列表

由於audio與video是使用瀏覽器自身來播放音樂與影片,故就要來稍微注意一下每個瀏覽器支援的音樂與影片格式有哪些了,底下是列表:

音樂格式支援

Browser mp3 wav ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera NO YES YES

影片格式支援

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera NO YES YES

看完上面的表,不知道各位有沒有發現,上面沒有一種格式可以在每個瀏覽器上皆可執行,那該怎麼辦呢?這時候就要來使用source標籤了!

source:設定音樂與影片的來源

media04.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>多媒體</title>
    </head>
    <body>
    <p>
            <audio controls autoplay loop>
        <source src="music.ogg" type="audio/ogg">
            <source src="music.mp3" type="audio/mpeg">
        對不起,您的瀏覽器不支援HTML5。
            </audio>
        </p>
        <p>
            <video controls autoplay loop>
        <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
                對不起,您的瀏覽器不支援HTML5。
            </video>
        </p>
    </body>
</html>

將audio或video內的src屬性拿掉,換成在audio或video內容內加入來source標籤,每個source標籤就代表一個音樂或是影片的來源,瀏覽器在讀的時候會照順序找尋可播放的來源,若找到有可以播放的來源時,就會播放。

最後給各位一個不錯的支援多瀏覽器的方法如下:

media05.html
...
<p>
  <audio controls autoplay loop>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    <embed src="music.ogg" />
  </audio>
</p>
<p>
  <video controls autoplay loop>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <embed src="movie.mp4" />
  </video>
</p>
...

除了原本加source的版本外,在給不支援HTML5的瀏覽器就用embed來取代,這樣就又可以支援更多的瀏覽器了!

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML5 Audio:http://www.w3schools.com/html/html5_audio.asp
  3. w3schools.com > HTML5 Video:http://www.w3schools.com/html/html5_video.asp
 
almost 4 years ago

各位大家好,敝人在昨日總算是在Windows Phone Store上架了人生第一支APP-[隨身單字卡],稍微來簡介一下其功能吧!

APP連結:http://www.windowsphone.com/zh-tw/store/app/%E9%9A%A8%E8%BA%AB%E5%96%AE%E5%AD%97%E5%8D%A1/b83bc17f-53a3-49d5-bae0-b41ef5a57cf7

首頁剛點入,會看到目前單字卡所有的分類項目。

可以透過上方的新增分類按鈕增加分類。

點入分類內可以看到該分類有哪些單字,透過單字總表可以確認那些單字還不懂其意義。

點分類上方的新增單字可在分類內增加單字。

如果有已經不要的分類或是單字,可以透過刪除功能將之刪除。

如果有不懂的單字,可以點入單字內,即可看到單字卡上的解釋。

功能理論上應該還會再做更新,如果有什麼問題或是希望有什麼功能也歡迎跟我說!XD

 
almost 4 years ago

本來是沒特別想寫這篇,不過想想這功能在最近已經被廣泛支援了,故就想說一定要好好來介紹一下!

大家在打入中文、日文的時候,有時候應該會想加入標音吧!正好以前IE有個標籤叫做ruby標籤可以做到這樣的事情,而在HTML5終於把ruby標籤做為標準加入了!

標音

底下一樣先用一個範例來解釋:

ruby01.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>標音</title>
    </head>
    <body>
        <ruby><rt></rt></ruby>まれた<ruby><rt>はな</rt></ruby> <br /><ruby><rt>ㄐㄧㄢˋ</rt><rt>ㄊㄚˋ</rt></ruby>的花朵
    </body>
</html>


上面的排版有點亂,不過為了不要讓文字中間出現空白,只好擠成一行了,底下列一下通用式用法的解說:

rubyusage.html
<ruby>
    [欲加上標音的字詞1] <rt>[標音1]</rt>
  [欲加上標音的字詞2] <rt>[標音2]</rt>
  ...
</ruby>

大體上就是如此,整個標音群組用ruby標籤包住,打上要標音的詞彙後,加上rt標籤去做標音,就可以達到標音的效果了!

rb標籤:早期的寫法會把[欲加上標音的字詞]包在<rb>...</rb>內,但是收錄進HTML5標準的時候,去除了rb標籤,所以目前的標準是要省略rb標籤的唷!

不支援標音之瀏覽器的表現方法

假設今天要讓不支援標音的瀏覽器上看起來也要至少正常一點,可以將要多餘顯示的文字用rp標籤包住。這樣的話,有支援標音的瀏覽器會忽略rp標籤裡的內容,而不支援標音的瀏覽器就會顯示rp標籤裡的內容。底下看個範例:

ruby02.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>標音</title>
    </head>
    <body>
        <ruby><rp></rp><rt></rt><rp></rp></ruby>まれた<ruby><rp></rp><rt>はな</rt><rp></rp></ruby> <br /><ruby><rp></rp><rt>ㄐㄧㄢˋ</rt><rp></rp><rp></rp><rt>ㄊㄚˋ</rt><rp></rp></ruby>的花朵
    </body>
</html>


左邊Google Chrome可以使用標音功能,故就直接顯示其標音,rp標籤裡之內容不管;而右邊Firefox不能使用標音功能,故就把rp標籤內的內容也一併顯示出來。

  1. 與w3schools.com裡的內容不同:rp標籤我是放在rt標籤外才能讓有標音功能的瀏覽器顯示正常,但w3schools.com內的卻放在rt標籤內。
  2. Firefox支援Ruby否?根據w3schools.com的內容是說已經支援了,但我的Firefox還是沒有。如果你的Firefox沒有標音功能,可以到這裡(HTML Ruby)下載套件安裝一下就支援了!

參考資料

  1. w3schools.com > HTML <ruby> Tag:http://www.w3schools.com/tags/tag_ruby.asp
  2. w3schools.com > HTML <rp> Tag:http://www.w3schools.com/tags/tag_rp.asp
  3. Re: <rb> as part of HTML5 ruby? from Dean Lee on 2011-12-29 (public-html-ig-zh@w3.org from December 2011):http://lists.w3.org/Archives/Public/public-html-ig-zh/2011Dec/0021.html
  4. 日文歌詞標音編輯器:http://but.lolicom.org/tool/
 
almost 4 years ago

清單在網頁中是很常使用到的東西,故多少還是要了解一下。在HTML中有三種不太一樣的清單,分別是無序清單、有序清單與定義清單,無序清單與有序清單的用法差不多,但與定義清單的用法差距比較大,底下來個別解釋其使用的方法。

無序清單

unordered-list.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清單</title>
    </head>
    <body>
        <ul>
            <li>Sonic</li>
            <li>Tails</li>
            <li>Knuckles</li>
            <li>Amy</li>
            <li>Shadow</li>
            <li>Silver</li>
        </ul>
    </body>
</html>

無序清單使用<ul>...</ul>將整個清單包起來,每一項使用<li>...<li>即可,效果就跟用Word按的項目符號及編號做出來的差不多。

有序清單

ordered-list.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清單</title>
    </head>
    <body>
        <ol>
            <li>Sonic</li>
            <li>Tails</li>
            <li>Knuckles</li>
            <li>Amy</li>
            <li>Shadow</li>
            <li>Silver</li>
        </ol>
    </body>
</html>

有序清單的使用與無序清單差不多,僅僅只是將ul(unordered list)標籤換成了ol(ordered list)標籤,效果就從原本的項目符號換成了數字編號。

如果要改變起始的編號,可使用start屬性,例如起始值要改成10,就寫<ol start="10">

HTML5提供了新的屬性,可讓ol反向計算數值,利用reversed屬性即可,僅要寫<ol reversed>即可反向。(HTML5的功能性屬性,大多都是有寫就有效果,不用給值,沒寫就沒有效果)

定義清單

description-list.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清單</title>
    </head>
    <body>
        <dl>
            <dt>Sonic</dt>
            <dd>刺蝟音速小子(日文:ソニック・ザ・ヘッジホッグ;英文:Sonic The Hedgehog)是一個電子遊戲人物,也是世嘉公司的吉祥物,誕生於1990年。他是刺蝟音速小子系列的主角,也是世界上最有名的刺蝟,擁有超過音速的奔跑速度,被稱為「世界上最快的刺蝟」。以音速小子為主人公的電玩遊戲曾在多個平台發售,總累計銷量已經超過了7000萬套。以它為主角的動畫、漫畫作品也風靡全球。其主要創作者為中裕司,大島直人以及安田廣和。</dd>
            <dt>Tails</dt>
            <dd>初登場於音速小子2,是個有兩條尾巴的小狐狸,如同音速小子小弟般的存在。可以藉由兩條尾巴旋轉飛行,其飛行速度接近音速小子。因為天生有兩條尾巴而遭到同伴排擠,在偶然間遇到音速小子後便跟隨他。對於機械有相當高的領悟力。</dd>
        </dl>
    </body>
</html>

與前述兩種清單不同的地方在於,整個清單用<dl>...</dl>包住,每一項從原本僅有一個li標籤,換成dt和dd各一個標籤,dt表示的是欲解釋的項目,dd表示的是欲解釋的內容,因為是解釋的內容,所以dd標籤在排版上會做自動縮排。

巢狀清單用法

若要在清單內的某一項再利用清單解釋,可用以下的做法:

nested-list.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>清單</title>
    </head>
    <body>
        <ul>
            <li>
                Team Sonic
                <ul>
                    <li>Sonic</li>
                    <li>Tails</li>
                    <li>Knuckles</li>
                </ul>
            </li>
            <li>
                Team Dark
                <ul>
                    <li>Shadow</li>
                    <li>Rouge</li>
                    <li>E-123 Omega</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

上面對於每一項li標籤內又在加入了另外一個清單去做描述,而清單內的清單瀏覽器會自動在排版上去做縮排,這是很方便可以做多層巢狀清單的用法,各位也可以自己試試看如果換成用ol和dl又會發生什麼事情。

參考資料

  1. w3schools.com > HTML <ul> Tag:http://www.w3schools.com/tags/tag_ul.asp
  2. w3schools.com > HTML <ol> Tag:http://www.w3schools.com/tags/tag_ol.asp
  3. w3schools.com > HTML <dl> Tag:http://www.w3schools.com/tags/tag_dl.asp
  4. 這樣做就對了 > HTML <dl/>, <dt/> 與 <dd/> 的誤用:http://josephjiang.com/entry.php?id=340
 
almost 4 years ago

請原諒我很久沒繼續寫HTML教學文了,
一直很想寫,但因為生病的關係停了一陣子,
真的是很不好意思。

行和列、欄和列、Row & Column

首先要先能夠分別[行和列]、[欄和列]、[Row & Column],這樣在表格的教學文中才不會出現問題,首先先看底下的圖來進行分辨:

或許各位會記不起來行和列的分別,所以我利用以前在赫哲補習班學到的方法來告訴大家,透過行與列的第一個筆畫即可分別,的第一個筆畫偏上下,而的第一個筆畫為左右,故可藉此來分別,不過中國大陸的行和列是與我們相反的,還請各位多多注意。

基本表格結構

底下先讓我們看一個基礎的範例:

BasicTableExample.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>英文名稱</th>
                <th>中文名稱</th>
            </tr>
            <tr>
                <td>Sonic</td>
                <td>索尼克</td>
            </tr>
            <tr>
                <td>Tails</td>
                <td>塔爾斯</td>
            </tr>
            <tr>
                <td>Knuckles</td>
                <td>納克</td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>艾咪</td>
            </tr>
        </table>
    </body>
</html>

看到程式碼這麼長,大家應該都昏了吧!我來慢慢解釋給各位聽吧!

首先,<table>...</table>包的是整個表格的內容,而table標籤本身有個屬性叫做border,在以前的標準,其值為框線的粗細大小;現時的標準,只有0與1這個值可以填,表明表格是否要有框線,若沒使用border,則預設為無框線。

再來有四組的<tr>...</tr>,每組tr標籤個別表示的是表格裡的一列,在每組tr標籤中,有<td>...</td><th>...</th>兩種標籤,分別都表示一列裡面的一格資料,只不過th標籤表示的是標題資料,td標籤表示的是一般資料。而th標籤由於是表示標題資料,故有預設的粗體、文字置中樣式會自動套上去。這樣大概就是整個表格的架構了!

合併格

接著我們來合併格子吧!底下一樣給個範例:

BasicTableExample.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>英文名稱</th>
                <th>中文名稱</th>
            </tr>
            <tr>
                <td rowspan="2">Sonic</td>
                <td>索尼克</td>
            </tr>
            <tr>
                <td>音速小子</td>
            </tr>
            <tr>
                <td>Tails</td>
                <td>塔爾斯</td>
            </tr>
            <tr>
                <td>Knuckles</td>
                <td>納克</td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>艾咪</td>
            </tr>
            <tr>
                <td colspan="2">E-123 Omega</td>
            </tr>
        </table>
    </body>
</html>

我們可以在td標籤與th標籤插入colspan與rowspan屬性去給予要合併的格數。

在範例中,Sonic該格使用了rowspan="2",也就是指Sonic該格要佔兩個列(row),所佔的位置為該格與下一列的對應位置的該格,這也使下一個tr內少了一個td標籤。同理,而E-123 Omega該格使用了colspan="2",也就是指E-123 Omega該格要佔兩個行(column),所佔的位置為該格與向右一格的格子,故其所在的tr標籤少了一個td標籤,這也就是合併格子的用法。

這樣講完了基本的表格用法,等之後再來提提更進階的表格結構吧!(雖然這個之後應該會非常久就是了XD!!)

參考資料

  1. w3schools.com > HTML Tables:http://www.w3schools.com/html/html_tables.asp
  2. w3schools.com > HTML <table> Tag:http://www.w3schools.com/tags/tag_table.asp
  3. HTML表格(table)的常用語法:http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hHTML/HTMLtable.htm