CH03 全球資訊網

CH03全球資訊網
認識全球資訊網認識Web 商務認識HTML網頁設計

3-1認識全球資訊網

WWW WWW(World Wide Web) 念為triple W、W3 或3W 採用HTTP(HyperText Transfer Protocol) 通訊協定包含了聲音、文字、影像、圖片等多樣化的介面。由全球大大小小的網站(Web Site) 組成

URL URL( 全球資源定位器,Uniform Resource Locator) 就是一般所稱的網址用來指出一個網頁所在的WWW 伺服器主機位置和存取的方式。由四個部分組成通訊協定網頁所在主機名稱存放路徑網頁名稱

ISP 要連接上網際網路，都必須向ISP(Internet Service Provider) 業者申請網路服務。 ISP 業者，主要分為以電信電路的ADSL 系統和有線電視為主的Cable 系統兩類。台灣最大的ISP服務業者為Hinet ADSL Asymmetric Digital Subscriber Line, 非對稱數位式用戶線路）

常見的通訊協定

DNS Domian Name System(DNS, 網域名稱系統) 主要用來做網址和IP位置之間的轉換動作 DNS被提出前，使用Host File( 主機檔案)做為網址和IP的對應

DNS架構 IP位址和網址的對應使用多台DNS伺服器處理 DNS 系統採用樹狀階層式的架構來管理完整網域名稱。可分為四層: 根網域頂層網域第二層網域主機

頂層網域共有兩種命名方式: ccTLD(Country Code Top Level Domain) gTLD(Generic Top Level Domain) 根網域 DNS 架構的最上層其下任何一層網域(頂層網域、第二層網域、主機)皆可向其要求資源

gTLD 以組織性質為命名方式例:com表示公司行號、 edu表示教育單位 ccTLD 以[國碼]為命名方式美國以外的國家通常採用此方式命名依ISO 3116 所制訂的[ 國碼](country code) 作為區分，例： tw表示台灣、jp表是日本、cn表示中國、ca 表示加

命名方式之種類

第二層網域通常第二層網域會開放給一般大眾自由申請，而名稱則由申請者自訂此層網域名稱必須是唯一，不能重複 [.com.tw]、[.edu.tw]、[.tku.edu.tw] 等皆屬於第二層網域

主機 DNS架構最底層由各網域的管理員自行建立，不需向管理機構註冊。

Proxy Proxy( 代理伺服器)為一種網路服務允許用戶端透過它與另一個網路服務進行非直接的連線，也稱「網路代理」提供Proxy 服務的電腦稱為代理伺服器(Proxy Server)

Proxy之運作方式 Proxy的優點由於在代理伺服器中會留有之前使用者對網站所要求的資料的備份，因此使用Proxy服務，在所要求的目標網頁有其他使用者瀏覽過時，可加快網頁瀏覽速度與代理伺服器建立連線向伺服器發出請求，要求目標網頁的檔案資源伺服器回傳資料

瀏覽器用來瀏覽WWW上各類網站的軟體最早的瀏覽器是Netscape，之後各式各樣的瀏覽器便紛紛出現微軟的Internet Explore(IE)瀏覽器於1995年發表

各瀏覽器全球市佔率各大瀏覽器全球市佔率圓餅圖( 資料來源：StatCounter)

Google Chrome 又稱Google 瀏覽器 Google公司基於其他開放原始碼(OpenSource) 的軟體所開發的網頁瀏覽器。以穩定性、速度和安全性做為Google Chrome 開發目標

Apple Safari 蘋果公司所開發的網頁瀏覽器特色: 以自行研發的WebKit技術來進行網頁排版及執行JavaScript iPhone、iPad等蘋果公司系列產品指定瀏覽器

Apple Safari Apple Safari瀏覽器畫面

Microsoft Internet Explore 從Inter Explore 4.0 開始，與微軟所開發的作業系統綁定販售由於和微軟所開發的作業系統綁定，目前仍是全球市佔率最高的瀏覽器 Microsoft Internet Explorer，簡稱IE。微軟公司所開發的網頁瀏覽器由一款商業性的專利網頁瀏覽器Spyglass Mosaic 衍生出來。

Firefox 一般稱做火狐瀏覽器，最初叫做Phoenix。目前全球市場占有率第二高的瀏覽器由Mozilla 基金會從MozillaApplication Suite 獨立出來，採用開放原始碼

Opera 在手機平台上，是目前市場佔有率最大的行動瀏覽器之一。在個人電腦上的市佔率，則不及IE、Firefox、Chrome 三大主流瀏覽器。為Opera Software ASA 公司所開發 Opera 瀏覽器能適用於各種平台與作業系統包含Mac、PC、Linux、PDA、手機甚至在遊戲機上

Google Search 目前搜尋引擎的龍頭由史丹佛大學的兩位博士生於1998創立除了一般輸入關鍵字搜尋外，還有多種進階搜尋方法 CH09 全球資訊網

Google Search 進階搜尋 AND或+ 或空格搜尋同時擁有關鍵字A和關鍵字B的資料例:關鍵字A+關鍵字B 關鍵字A[空格]關鍵字B 關鍵字AAND關鍵字B 注意: AND一定要是大寫，輸入小寫會被google視為一般關鍵字 CH09 全球資訊網

Google Search 進階搜尋 OR 搜尋擁有關鍵字A或關鍵字B的資料例:關鍵字AOR關鍵字B 注意: OR一定要是大寫，輸入小寫會被google視為一般關鍵字 CH09 全球資訊網

Google Search 進階搜尋 - (減號) 搜尋擁有關鍵字A但排除關鍵字B的資料例:關鍵字A-關鍵字B 注意: 減號”-”和關鍵字B之間不能有空格減號“-”為英文字半型符號 CH09 全球資訊網

Google Search 進階搜尋 site: 網址針對某網站的資源進行進行搜尋例:關鍵字Asite:tku.edu.tw 注意: OR一定要是大寫，輸入小寫會被google視為一般關鍵字關鍵字和site之間可不需空格冒號”:”之後不能有空格，不然site會被視為一般關鍵字 CH09 全球資訊網

Google Search 進階搜尋 filetype: 限制搜尋特定檔案類型例:關鍵字Afiletype:pdf 注意: 關鍵字和filetype之間可不需空格冒號”:”之後不能有空格，不然filetype會被視為一般關鍵字 CH09 全球資訊網

Google Search 進階搜尋 .. (兩個點) 搜尋數字範圍例: 想要找iphone，且價格在18000~22000之間。可輸入 iphone[空格]$18000..$23000 注意: 必須指定數字範圍所代表的單位，如:$、kg CH09 全球資訊網

Google Search 進階搜尋 “ ” (雙引號) 查詢專有名詞或片語例: 想找出包含Well begun is half done完整句子的網頁可輸入 “Well begun is half done” 注意: 雖然一般搜尋也會將整句關鍵字列於搜尋結果中，但有時由於字與字之間的空格。所以可能會被google是為好幾個分開的字詞。而無法搜出完整句子。因此可用此語法搜尋 CH09 全球資訊網

電子郵件電子郵件(Electronic Mail,e-mail)，利用電子通訊的技術，來達到傳遞信件的目的。可利用各種的電子郵件軟體( 例:Outlook Express、Eudora⋯) 或使用各家業者所提供的Web mail 服務，寄送email 。 CH09 全球資訊網

電子郵件格式電子郵件地址的標準格式為: username@hostname username為使用者帳號 hostname為郵件伺服器位址 @，英文上為at的意思，通常念為at或小老鼠 CH09 全球資訊網

電子郵件通訊協定使用電子郵件作收信和送信的動作各會使用到不同的通訊協定 CH09 全球資訊網

Email運作流程圖 SMTP SMTP Access Protocol A的電腦 A的Mail Server B的Mail Server B的電腦 SMTP: delivery/storage to receiver’s server Mail access protocol: retrieval from server POP: Post Office Protocol [RFC 1939] authorization (agent <-->server) and download IMAP: Internet Mail Access Protocol [RFC 1730] more features (more complex) manipulation of stored msgs on server HTTP: gmail, Hotmail, Yahoo! Mail, etc. CH09 全球資訊網

Web Mail 傳統一般使用Outlook等Email軟體收發電子郵件郵件必須下載至本機電腦才可瀏覽內容，長時間累積將造成儲存空間的浪費目前一般使用WWW上的Web mail服務使用瀏覽器即可直接在網頁上瀏覽郵件內容 CH09 全球資訊網

常見WWW上WebMail服務 CH09 全球資訊網

3-2Web商務

Web2.0 Web 也就是我們平常所稱的WWW(World Wide Web，全球資訊網) 一般依照網頁類型和網頁內容的提供者，可分為Web1.0和Web2.0

Web2.0 Web 1.0 1.靜態網頁，與網頁內容提供者或其他瀏覽網頁的訪客叫無互動。 2.網頁內容為網站經營者所提供。 Web 2.0 1.動態網頁，網路使用者之間互動頻繁 2.所有使用者成為網路內容的提供者，以使用者為中心。

Web2.0 目前常見的各種社群網站皆為Web2.0的典型應用 ex:Wiki、Blog、Facebook、Google+、Plurk、Twitter...等。

維基百科Wikipedia Wiki 是一種在網路上開放、可供多人協同創作的文字系統。使用Wiki系統的網站稱為Wiki網站例: 維基百科維基百科是一個動態的、可自由存取和編輯的線上百科全書世界網站流量排名第七大網站與第一大無廣告網站。

維基百科Wikipedia 特色: 1.大部分頁面都可以由任何人使用瀏覽器進行閱讀和修改 2.由於內容修改自由度高，使用者對於其內容之準確性產生質疑維基百科有管理員負責對使用者發佈的內容進行審核

部落格已成為一種社會媒體，具一定影響力 RSS(Really Simple Syndication 或 Rich Site Summary) 1.部落格使用的一種技術 2.訂閱該部落格的RSS，可取得部落格的更新訊息部落格，由英文Blog而來是web log 的組合字使用者可在其部落格上發表文章、相片、影音... 等內容利用留言、回應等各種方式與部落格的訪客互動部落格撰寫者稱為部落客(blogger)

部落格於目前網路上有許多網站都有提供免費申請個人部落格的服務例:無名小站、Google 的Blogger、痞客邦PIXNET、yam 天空部落...等

常見部落格服務提供網站

Twitter Twitter，中文稱為推特。是國外的一個微網誌服務 Twitter，英文表示「很弱的脈衝訊號」與「小鳥的啁啾」多平台閱讀與發文可透過即時通訊、SMS、RSS、電子郵件等各種方式來發佈訊息

Plurk Plurk提供時間軸、背景的主題，供使用者套用，也支持使用CSS 來修改背景主題。 Karma值 Plurk使用者的使用率和發言頻率的指標 Plurk，中文稱為噗浪。與Twitter同為一種微網誌服務 Plurk目前在臺灣較為流行，市場佔有率遠高於Twitter 特色: plurk使用時間軸的方式在一條時間軸上顯示了自己和朋友的所有訊息。

Facebook Facebook，中文稱作臉書屬於一種社群網站服務可在Facebook 上發佈訊息、照片、影片、寫網誌、聊天可建立社團、紛絲專頁等加強使用者之間的互動性 CH10 Web商務

Facebook 好友搜尋功能: Facebook具有強大的好友搜尋功能可經由MSN、Yahoo即時通、Skype等好友名單找出有使用Facebook的人可經由共同朋友或個人資本資料找出可能認識的人塗鴉牆 (1)Facebook的主要使用者介面 (2)與傳統留言板相似 (3)使用者只要在自身的塗鴉牆上發布訊息，就會同步顯示在所有好友的塗鴉牆上

Skype 微軟於2011 年10 月正式將Skype 收購，成為微軟的一個獨立部門。並於2013 年4 月25 日( 台灣地區) 將MSN 正式轉換到Skype。

Web 2.0的影響 Web2.0下社群網站出現，網路社群之間訊息交換快速。可做為散布消息、發起活動的有效工具行銷方式改變，廣告成本降低企業使用部落格，社群網站等網路行銷方式推廣產品

Web商務 Web 商務，也稱做電子商務(E-commerce) 指企業或個人透過網際網路從事商業活動或各種相關服務。包含下列4大領域: 資訊科技商業服務管理科學法律政策

電子商務的優點全球性潛在市場龐大成本低豐富性互動性速度快自由競爭

Web商務的種類依照企業、個人、政府在電子商務中的供給者和消費者的關係，將電子商務分為四大類 B2C (customer) B2B C2C B2G

B2C 企業使用線上商店的方式進行經營，較傳統具有許多優勢不須實體店面節省成本無須聘請門市人員顧店營業時間無限制商品價格較便宜 B2C ，英文Business-to-Consumer 企業對消費者的電子商務模式線上購物、線上訂票... 等皆屬於B2C，是我們最常接觸的一塊

B2C 知名的B2C 網站有PChome網路購物、Yahoo! 奇摩購物中心、博客來網路書店...等。

B2B 當消費者在網路下訂單後，供應商、製造商、經銷商等各家公司廠商分工合作，將商品順利出貨，送達消費者手中。 B2B，英文Business-to-Business 是企業對企業的商務行為將企業之間的金流、物流... 等，透過網路連結提升企業對消費者的反應速度和企業發展

B2B 消費者下單後的B2B流程如下消費者下單銷售商向供貨商查詢庫存供貨商回報查詢結果銷售商詢問送貨商可運送時間日期送貨商回報時間日期銷售商向供貨商請求出貨、通知送貨商送貨款項結算交易完成

C2C C2C ，英文為Consumer-to-Consumer 消費者對消費者的電子商務模式提供消費者之間的交易平台交易平台的供應商在C2C中扮演重要角色，維持交易公平性和提供安全的交易環境

C2C 交易平台的供應商應提供下列服務負責監督管理交易進行，保障消費者權益提供技術支援: 幫助建立線上商店提供付款機制幫助買方搜尋商品線上比價

C2C 典型的C2C 網站，也就是交易平台的供應商 Yahoo! 奇摩拍賣、露天拍賣、ebay... 等。

B2G B2G ，英文為Business-to-Government 企業跟政府間的電子商模式電子報稅等皆屬於B2G的範疇目前的E化政府，為一個典型B2G的實現政府和各級單位、民間機構。透過網路完成各種服務

E化政府透過網路完成各種業務。速度快、減少相關事務處理的花費時間與金錢具下列優點 1.加強民意反應與接觸 2.增加政府與民眾互動 3.公文電子化使處理流程透明 4.紙張減量 5.透過網路可24小時服務 6.節省成本

行動商務依服務對象分為兩類: 1.個人服務(customer service) 2.企業服務(business service) 行動商務，或稱為m-commerce、mobile commerce 透過手機、平板電腦或其他可攜式裝置與網路連線，進行通訊與交易等活動提高工作效率、降低營運成本、提供客戶即時服務

行動商務企業服務: 行動會議行動工作行動供應鏈管理個人服務: 遊戲下載音樂下載生活情報路況氣象或新聞查詢股市基金交易

行動商務行動商務的產品或服務應具備下列特點：時效性如新聞、氣象、即時路況適地姓如訂機票、火車票、電影票、旅館、景點導覽娛樂性如遊戲下載、音樂下載

付款系統電子商務的交易皆在網路上進行。需要有可靠的網路交易機制支持常見的網路付款機制電子現金電子支票智慧卡

電子現金目前較為成熟的電子現金為Mondex 英國西敏寺銀行創立台灣的Mondex卡由Mondex Asia、宏碁、萬事達卡國際組織成立的萬碁股份有限公司所發行電子現金(e-cash)，又稱做電子錢包(e-Wallet) 數位簽章為基礎使用前需向銀行或金融機構開戶、存入金錢消費時使用銀行提供的公鑰進行加密，店家將加密後訊息金額傳送給銀行完成扣款和交易動作

電子支票與傳統支票相同的部分包含付款人姓名、金融機構、帳戶及收款人姓名、金額、到期日需先向發行電子支票的金融機構開戶註冊

智慧卡消費者向發行智慧卡金融機構預先支付金額，再由金融機構香等值的金額資訊儲存在消費者持有的儲值卡或預付卡中手機的sim卡、捷運悠遊卡、銀行的金融IC 卡、健保IC 卡、7-11 便利商店的icash皆屬於智慧卡

線上交易安全機制無論使用何種網路付款機制，都需配合各種加密或認證技術來確保交易的安全進行一般常見的加密技術加密演算法對稱式非對稱式數位簽章安全通訊協定(SSL,Secure Socket Layer) SET

加密演算法加密演算法，共可分為兩類：對稱式密碼系統和非對稱式密碼系統都需要金鑰做加解密工具金鑰為一串數字，由數個位元(byte) 所組成

非對稱式密碼系統 CH09 認識全球資訊網

數位簽章數位簽章(Digital Signature)，又稱為電子簽章主要是用於確認某項訊息的送出者的身分需利用[ 非對稱式密碼系統] 技術實現-RSA 非對稱式金鑰法訊息量較大時，會先透過Hash( 雜湊函數) 運算，將資料轉換為較短的摘要

安全通訊協定(SSL) 是網頁伺服器和瀏覽器之間以加解密方式溝通的安全技術標準，這個溝通過程確保了所有在伺服器與瀏覽器之間通過資料的私密性與完整性， SSL是一個企業級標準，它被數百萬個網站用來保護他們與客戶的線上交易資訊，而為了使用SSL安全連結，一個網頁伺服器需要一張憑證。 CH10 Web商務

SET SET，Secure Electronic Transaction的縮寫，中文稱為安全電子交易為VISA、MasterCard、IBM、Microsoft、GTE、VeriSign⋯ 等公司在1996 年聯合制訂

CH09 認識全球資訊網

3-3HTML網頁設計

源流與發展全名為 Hyper Text Markup Language。西元 1991 年提出。主要為方便分享資料所設計。主要顯示文字與超連結。網頁內的內容皆可以透過不同的標籤定義。最新的 HTML 標準稱為 HTML5。

HTML瀏覽器一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。目前主流的瀏覽器有 Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera

HTML 標籤大部分的標籤都是成雙成對的，有開始標籤，就會有結尾標籤。如： <html>…..</html> <body>….</body> 網頁瀏覽器會將 HTML 轉譯成我們平常所看到的網頁效果、排版與顏色等。

HTML 網頁架構基本 HTML 網頁架構： <!DOCTYPE HTML PUBLIC … > <html> <head> … </head> <body> … </body> </html>

HTML 網頁內容與標籤一般網頁起始於 <html>，結尾於</html>。網頁的主要內容，如表格、圖片、文字、影片與超連結多媒體內容等，皆必須置於<body>...</body>之中 <head>…</head> 用來定義網頁文件等訊息，如網頁的標題等。

HTML 標籤與屬性每個標籤內可能定義了多個屬性。 <body background=“bg.jpg”>….</body> Background 為 <body> 的屬性之一，代表的是網頁所使用的背景圖片，而 bg.jpg 為其背景圖片之檔案名稱。

HTML 基本標籤

HTML 格式化標籤

HTML 超連結及圖片標籤

HTML 表格標籤

HTML表單標籤

HTML 頁框標籤

HTML 樣式及Meta標籤樣式標籤 Meta 標籤

HTML 程式標籤

HTML 編輯軟體-1 純文字編輯。如直接透過任何純文字編輯器，如 Windows 記事本。透過 W3School TryIt Editor 編輯，並可即時預覽。

HTML 編輯軟體-2 利用文書編輯軟體，如大家常用的 Word 編寫網頁內容與繪製表格等。編輯完畢後儲存成 html 或 htm的檔案格式。由於該類文書編輯軟體並非針對專業網頁製作所設計，因此若要網頁動態化，或是各種精緻化功能都會有問題。

HTML 編輯軟體-3 透過專業網頁編輯軟體，方便設計者撰寫 HTML 以及 Javascript等語法。較著名的網頁編輯軟體： Microsoft FrontPage NamoWebEditor Adobe Dreamweaver Microsoft Expression Web Kompozer為免費的網頁開發工具。

HTMLKompozer

TKU網頁結構設計分析

網頁結構分析(1) – table標籤

網頁結構分析(1) – HTML 碼 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TKU Website Structure</title> </head> <body> <table cellspacing=0 cellpadding=0> <tr> <td rowspan=3> <imgsrc="t1-11.jpg"></td> <td colspan=2> <imgsrc="t1-12.jpg"></td> </tr> <tr> <td> <imgsrc="t1-21.jpg"> </td> <td> <imgsrc="t1-22.jpg"> </td> </tr> <tr> <td colspan=2> <imgsrc="t1-31.jpg"></td> </tr> </table>

網頁結構分析(2) – td 含 table

網頁結構分析(2) – HTML 碼 <table> <tr> <td valign="top"> <table> <tr> <td> <imgsrc="t2-11-1.jpg"> </td> </tr> <tr> <td> <imgsrc="t2-11-2.jpg"> </td> </tr> </table> </td> <td> <table> <tr> <td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td> </tr> <tr> <td> <imgsrc="t2-12-2.jpg"></td> </tr> </table> </td> <td> <imgsrc="t2-13.jpg"> </td> </tr> <tr> <td colspan=3> <imgsrc="t2-21.jpg"> </td> </tr> </table>

網頁結構分析(3) – td 插入影片

網頁結構分析(3) – 找到td 原 HTML 語法 <tr> <td valign="top" align="center"> <imgsrc="t2-12-1.jpg"></td> </tr>

網頁結構分析(3) – HTML 碼替換為新的 HTML 語法 <tr> <td valign="top" align="center"> <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/RechrtUxfQc" frameborder="0" allowfullscreen></iframe> </td> </tr> <tr> <td style="color:#0000ff;background-color:#ffccff"><center><h3> 淡江大戲 Part <a href= "http://www.youtube.com/watch?v=RechrtUxfQc&playnext=1&list=PLA134F7F5E4A537D2" >[1]</a> <a href= "http://www.youtube.com/watch?v=MRWX49Furew&feature=related">[2]</a> <a href= "http://www.youtube.com/watch?v=METhdbL_iMw&feature=related">[3]</a> <a href= "http://www.youtube.com/watch?v=ZyDbq-lEKTo&feature=related">[4]</a> <a href= "http://www.youtube.com/watch?v=NlsrJbVvjaA&feature=related">[5]</a></h3><center> </td> </tr>

取得YouTube影片之內嵌碼

網頁 -- 顏色表示法 <td style="color:#0000FF;background-color:#FFCCFF"> 顯示在 <td> 格中背景是粉紅底(FFCCFF)，前景顏色是藍色(0000FF)。這裡顏色是用RGB色彩三原色表示，R是紅色(Red)，G是綠色(Green)，B是藍色(Blue)，RGB每種顏色各有256種組合，十進位數字為00~255，十六進位數字為00~FF。

網頁 – 顏色及RGB值

淡江大學網頁空間學校針對 100 學年度新生提供的伺服器如下 Web 伺服器：s02.tku.edu.tw FTP 伺服器：ftp.s02.tku.edu.tw 學生上傳網頁成功後，瀏覽自己網頁的 URL 為http://s00.tku.edu.tw/~ID ID 為學生於淡江大學之學號。

FTP 軟體下載與安裝至 Google 搜尋 FileZilla，下載後安裝。

FTP 軟體 -- Filezilla設定啟動Filezilla，並做好連線設定後，連線登入。請從選單「檔案」中選「站台管理員」，先輸入站名名稱(如ftp.s002) 主機名稱100年度大一新生請填寫 ftp.s00.tku.edu.tw，99年度學生請填寫 ftp.s99.tku.edu.tw，依此類推。使用者請輸入學號，密碼請輸入學校提供的密碼，按確認就可以將ftp.s00站台儲存起起來，下一次就不必再輸入。設定好了按「連線」登入ftp.s00.tku.edu.tw

FTP 軟體– Filezilla畫面

Filezilla連線TKU 提供之ftp 空間

瀏覽放在TKU網頁空間之網頁啟動瀏覽器，輸入網址 http://s02.tku.edu.tw/~ID，看看是否能夠看到你寫的網頁。如果可以就是成功了。之後如果網頁檔案更新，只要將有更動的檔案傳入ftp.s02.tku.edu.tw即可。

CSS 簡介 HTML主要是用標籤來定義文件的結構。 CSS (Cascading Style Sheets) 主要是用來定義HTML文件要如何顯示。同一個網頁內容，因為不同的CSS而造成顯示產生差異。

CSS 簡介 <body> <h1>淡江大學</h1> <hr> <h2>World Wide Web</h2> <table border="1" width="100%"> <tbody> <tr> <th align="left">Chapter</th> <th align="left">Title</th> </tr> <tr> <td width="10%">13</td> <td width="50%">雲端服務</td> </tr> <tr> <td width="10%">14</td> <td width="50%">智慧型手機</td> </tr> </tbody> </table><br> <hr> </body>

CSS 範例於 <head>…</head> 中加入下列語法 <style type="text/css"> body { font-family:"lucida calligraphy",arial,'sans serif'; background-color:#DCDCDC; color:#8A2BE2; margin:10px; } h1 {font-size:250%;} h2 {font-size:150%;} th {background-color:#D3D3D3;} td {background-color:#FFFAF0A;} </style>

CSS 免費資源 http://www.w3school.com.cn/css/ 無名小站有針對CSS提供畫面美化的服務，有興趣者可以去試試看，不僅可以藉此更深入了解CSS的用法，還可以做出個人風格的網頁來。

動態 HTML 免費資源 DynamicDrive (http://www.dynamicdrive.com/)

HTML 編輯器- CKEditor ckEditor(http://ckeditor.com/demo)

CKEditor編輯畫面

CKEditor顯示網頁

HTML 編輯器- Blogger

Google 問卷客製化

Google 問卷加入HTML編輯

Google 問卷整合HTML

Google 問卷 – Facebook發佈

Google問卷– 調查結果

Google問卷 – 結果分析

CH03 全球資訊網