網際網路的應用服務 – Web 概念與網頁語言 國立清華大學資訊基礎教育 教學改進計畫 網際網路的應用服務 – Web 概念與網頁語言 參考自原始作者：蔡英德教授 2018/9/17
Overview 網際網路的應用服務 網頁語言 伺服端網頁程式 Web的架構 遠端登入服務 檔案傳輸服務 Web伺服器 HTML Javascript 伺服端網頁程式 2018/9/17
網際網路的服務架構 網際網路的應用服務採用主從式(Client-Server) 模式 – EX. Web 服務 2018/9/17
遠端登入服務 遠端登入(Remote Login)服務是利用TCP/IP通訊協定群組應用層通訊協定telnet來完成的 使用者可以透過網路進入到遠端的電腦系統內(通常遠端電腦的作業系統為Linux或UNIX), 使用遠端電腦系統的計算資源 EX. BBS 服務 2018/9/17
檔案傳輸服務 檔案傳輸服務是由檔案傳輸通訊協定(File Transfer Protocol, FTP) 所提供 使用者可以使用安裝有FTP客戶端程式的系統, 連接並使用安裝FTP伺服器程式的遠端電腦系統(亦即檔案伺服器) 上的檔案系統, 就如同使用本身電腦系統上的檔案系統, 包括目錄的新增、刪除及更名, 也包含檔案的下載、上傳、刪除及複製 2018/9/17
Web Client (客戶端) – 流覽器 第一個風行於世的瀏覽器是網景公司的Netscape瀏覽器。之後有微軟公司推出Internet Explorer (IE)，而新一代瀏覽器，譬如Firefox，蘋果電腦公司的Safari瀏覽器（目前的市佔率約為百分之四左右）以及，Google公司也推出名為Chrome的瀏覽器。 Lynx只能顯示純文字 大部分的盲人就是透過Lynx和點字機來瀏覽Web。 2018/9/17
Web伺服器 Web伺服器是提供網頁服務的電腦主機 結構： 電腦主機。 一個固定的IP位址與網址名稱 必須安裝與執行一套Web伺服軟體如：微軟公司的Internet Information Server (IIS) 與Apache是當前兩個最常用的Web伺服軟體。 2018/9/17
Web伺服器 網頁的種類 靜態網頁：Web伺服器在硬碟上找到預先寫好的網頁檔案，不做任何處理即回傳給瀏覽器。 動態網頁：是透過電腦程式來產生的，因為其內容常隨時間不同而異。 2018/9/17
超文字傳輸通訊協定 超文字傳輸通訊協定（HyperTexTransfer Protocol, HTTP）規定瀏覽器與Web伺服器之間的網路溝通方式。最常見的是TCP/IP。 HTTP的組成，依序分為下面四個部分：要求行（request line）、標頭（headers）、空白行、與訊息主體（message body）。 HTTP是一種無狀態記憶（stateless）的通訊協定，也就是說，Web伺服器處理完一項要求後，即「束之腦後」，不留下任何記錄。 2018/9/17
超文字傳輸通訊協定(續) 超文字傳輸安全通訊協定（Hypertext Transfer Protocol Secure, HTTPS）是HTTP加上密碼機制的通訊協定，常用於需要保證安全性的資訊傳輸中，譬如網路購物傳送信用卡資料等等。 2018/9/17
網頁語言 HTML:規範網頁格式。 CSS：設定樣式的。 JavaScript：網頁程式語言。 撰寫第一個網頁 by HTML 基本標籤說明 常用標籤,列表標籤 影像標籤,超連結標籤 表格製作,表格製作 CSS：設定樣式的。 JavaScript：網頁程式語言。 2018/9/17
HTML 簡介 超文字標記語言（HyperTextMarkup Language, HTML）就是規範網頁編寫格式的標準。 90年代初期Tim Berners-Lee在CERN發展HTML，他創建了一種快速小型超文本語言 2018/9/17
HTML 簡介（續） <html> <head> <title>哈囉！WWW</title> </head> <body> <p> <font size=+2>哈囉！<b>WWW</b>，我來了！</font> </p> <p><imgsrc="Devil01.gif" height=61 width=62></p> <p><hr width="100%"></p> <a href="http://devil.pu.edu.tw/devil.html">紅小鬼</a> 到此一游!!!</p> </body> </html> 2018/9/17
認識HTML (Hyper Text Markup Language) HTML是一種標記語言，儲存檔名為htm或是html，是一純文字檔案。 HTML將欲控制的文字包夾在標記中間 開始標記<標記> 結束標記</標記> 超連結：將相關文件連結在一起 超文字：在文件中除了文字以外擁有圖片、影像、動畫、聲音等。 HTML的階層觀念 HTML HEAD BODY 2018/9/17
HTML 基本術語 HTML的基本術語 標籤（tag） 屬性（attribute） 元件（element） 編排網頁的「指令」（標籤）：<html>、<p>、<img>、…、等等以「小於符號<」和「大於符號>」括住的英文字。 結束標籤來界定其作用範圍：在標籤名稱之前加上「斜線符號/」，如：<html> 的結束標籤是</html>、<body> 的結束標籤是</body> 等。 有少數不需要結束標籤，如：<img> 標籤只是用來連結一個圖片檔案，因此就沒有對應的結束標籤</img>。 2018/9/17
撰寫第一個網頁 by HTML <HTML> </HTML> <HEAD> </HEAD> <TITLE>哈囉！WWW </TITLE> </HEAD> <BODY> 哈囉！WWW，我來了！ 本文在此 </BODY> </HTML> 2018/9/17
Notepad++ 編輯器 2018/9/17
HTML入門之要點 換行 <BR><P> 空白 空白 大小寫相同 <HTML>=<html> 不同瀏覽器會支援不同的功能 IE&NC支援不同的功能 VBScript在NC也許不被支援 HTML最新的標準版本是HTML4.0 開發工具 文字開發工具—Ultraedite, Notepad++, … 視覺化開發工具—Frontpage, Dreamwaver, Visual InterDev, … 2018/9/17
HTML標籤的語法 <標籤名稱屬性1=“值1” 屬性2=“值2” …> </標籤名稱> <HTML></HTML> 表示HTML文件的起始與結束 <HEAD> </HEAD> 表示文件的標頭 一般不提供內容，是作為辨識、索引之用 <TITLE> </TITLE> 表示文件的標題，會顯示在標題列 <BODY> </BODY> 表示文件本文的部分 2018/9/17
<BODY>標籤 bgcolor屬性—設定文件背景顏色 text屬性—設定文件中文字的顏色 bgcolor=“color name” bgcolor= #RRGGBB text屬性—設定文件中文字的顏色 link屬性—設定文件中未被連結過之超連結的顏色 vlink屬性—設定文件中已經連結過之超連結的顏色 alink屬性—設定文件中超連結被點選時的顏色 background屬性—設定文件中的背景圖片 background=“sub/file_name” 2018/9/17
撰寫第一個網頁 by HTML <HTML> </HTML> <HEAD> </HEAD> <TITLE>哈囉！WWW </TITLE> </HEAD> <BODY> <font size=+2>哈囉！<b>WWW</b>，我來了！</font> </BODY> </HTML> 2018/9/17
HTML 簡介（續） 標籤<font size=+2> 這個設定中，字型大小屬性size的值被設定為+2 （增大兩級的意思）。 含括在標籤和對應結束標籤之間的部份稱為元件。整份的HTML文件結構是由巢狀（nested）的各種元件所組成。 2018/9/17
基本標籤說明 網頁的標籤（Tags），每一個標籤都是由「<」及「>」所涵蓋，<HTML>，代表 HTML 網頁的開始，而 </HTML> 則代表 HTML 網頁的結束。 <head> 和 </head> 之間是用於規範和整體網頁相關的資訊，這些資訊不會直接出現在網頁上。這部分還包含了 <title>，用來說明此網頁的標題。此標題會出現在視窗最上方。 2018/9/17
常用標籤: 文字相關(1) 表頭（Heading）常用在強調文字的重要性 範圍: H1 字型最大，H6 字型最小 特性: 會在文字上下空白兩行 屬性: left, center, right 例子: <h1 align=left>這會是在左邊最大的字</h1> <h6 align=center>這會是在中間最小的字</h6> 結果呈現如下: 這會是在左邊最大的字 這會是在中間最小的字 2018/9/17
標題(Headlines) <HTML> <HEAD> <TITLE>標題標籤範例</TITLE> </HEAD> <BODY> <H1>標題一</H1> <H2>標題二</H2> <H3>標題三</H3> <H4>標題四</H4> <H5>標題五</H5> <H6>標題六</H6> <P>這是一般字的大小(H4)</P> </BODY> </HTML> 2018/9/17
常用標籤: 文字相關(2) <p> 代表「段落」 (Paragraph) ，可讓web內容更清楚分辨每一個區段內容 屬性: left, center, right 特性: 會和上一個段落隔開一列 <br>代表換行 (break), 沒有其他屬性 2018/9/17
常用標籤: 文字相關(3) 例子: <hr> 劃水平線 屬性: ALIGN : left, right, center NOSHADE (沒有陰影效果的水平線) SIZE: n (水平線的粗細，n 值為整數) WIDTH: n|p% (水平線的長度，可設定 Pixel 值或百分比值) 例子: <hr noshade size=4 width=80% align=center> 2018/9/17
常用標籤: 文字相關– 整理 標題標籤 段落標籤 換行標籤 水平分隔線標籤 <Hn>XXXXX</Hn> n=1~6 align=left, center or right 段落標籤 <p>段落文字</P> align =left, center or right 換行標籤 <Br> 水平分隔線標籤 <Hr> Size=n, where n is n pixels Width=x%, where x means x% of the window size color=#RRGGBB Noshade—表示沒有3D陰影 2018/9/17
常用標籤: 文字相關 <font> : 設定字型 屬性: 例子: 另一個例子: 可將size作更大的調整 COLOR: 顏色 FACE: 字體類別 例子: <font size=3 face=“標楷體” color=green>測試</font> 另一個例子: 可將size作更大的調整 <basefont size=3> <font size=+2>測試</font> <font>設定字型不會自動換行, 與<h>不同 2018/9/17
常用標籤: 文字相關(5) <i>: 斜體字 <b>: 粗體字 <u>: 底線字 <i>測試</i> 測試 <b>: 粗體字 <b>測試</b> 測試 <u>: 底線字 <u>測試</u> 測試 <sup>: 上標字 <sup>測試</sup> 測試 <sub>: 下標字 <sub>測試</sub> 測試 2018/9/17
常用標籤: 文字相關(6) < marquee > : 「跑馬燈」，僅限於IE使用，Netscape不適用。 屬性: 例子: Direction: left, right, up, down Bgcolor: #000000, 兩個兩個一組, 00~99, AA~FF Behavior: alternate (左右來回), slide (進入後停止), scroll (反覆) Scrollamount: 滑動步伐的寬 (速度) Scrolldelay: 捲軸捲動快慢 Height: 高度 Width: 寬度 例子: <MARQUEE DIRECTION=LEFT BGCOLOR=“#ff9999” BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=100> 測試 </MARQUEE> 2018/9/17
滑鼠移入就會停止的跑馬燈 <marquee onMouseOver=“this.stop()” onMouseOut=“this.start()” height=“50” direction=“up” scrolldelay=“4” scrollamount=“1”>測試的文字</marquee> onMouseOver=“this.stop()”表示滑鼠移入就停止 onMouseOut="this.start()" 表示滑鼠離開便跑動 2018/9/17
列表標籤1 總共有三種不同列表方式: 配合<lh>(list head)和<li> (list)標籤 無序列表（Unordered list）<UL> 有序列表（Ordered list） <OL> 定義列表（Definition list） <DL> 配合<lh>(list head)和<li> (list)標籤 每一種方式均可設定 type，其值可為 Disc Circle Square 2018/9/17
列表標籤2-- UL(無序列表)例子 UL(無序列表)例子: HTML code: 結果顯示: 這是標題 <UL type=circle> <LH>這是標題 <LI>計概很簡單 <LI>計概非常簡單 <LI>計概真的非常簡單 </UL> 結果顯示: 這是標題 計概很簡單 計概非常簡單 計概真的非常簡單 2018/9/17
列表標籤3--UL(無序列表)例子 也可在<li>內插type屬性 HTML code: 結果顯示: <UL> <LH>這是標題 <LI type=square>計概很簡單 <LI type=circle>計概非常簡單 <LI type=disc>計概真的非常簡單 </UL> 結果顯示: 這是標題 計概很簡單 計概非常簡單 計概真的非常簡單 2018/9/17
列表標籤4--OL(有序列表)例子 HTML code: 結果顯示: 可以試著將type=3改成type=a 或者type=i <OL type=3> <LH>這是標題 <LI>計概很簡單 <LI>計概非常簡單 <LI>計概真的非常簡單 </OL> 結果顯示: 這是標題 計概很簡單 計概非常簡單 計概真的非常簡單 可以試著將type=3改成type=a 或者type=i 2018/9/17
列表標籤5--DL(定義列表)例子 DL定義列表（Definition Lists），其功能就像是在定義一堆特殊名詞。 <dt> 代表「被定義的名詞」（Definition Term），<dd> 代表「說明的文字（Definition Data），這兩者必須成對出現。 HTML code: <DL> <DT>這是標題1 <DD>計概很簡單 <DT>這是標題2 <DD>計概真的非常簡單 </DL> 結果顯示: 這是標題1 計概很簡單 這是標題2 計概真的非常簡單 2018/9/17
影像標籤1 格式 : <img src=“xxx”, alt=“xxx”> 屬性： src, “路徑/圖檔檔名” alt, “找不到圖檔出現的文字, 或滑鼠移到圖片上方出現的文字” width, “顯示時的寬度, 百分比或像素值” height, “顯示時的高度, 百分比或像素值” border, “邊框大小, 像素值” align, “設定和文字搭配的圖形位置, 有top, bottom, middle,left, right等” 2018/9/17
影像標籤2 圖形 <IMG SRC=“圖形的URL”> <IMG SRC=“PATH/NAME”> ALIGN--TOP、MIDDLE、BOTTOM ALT--不能顯示圖形時描述的文字 <IMG SRC=“odie.gif” ALIGN=“TOP” ALT=“TEST”>以圖片的中央對齊 <IMG SRC=“odie.gif” ALIGN=“MIDDLE” ALT=“TEST”>以圖片的中央對齊 <IMG SRC=“odie.gif” ALIGN=“BOTTOM” ALT=“TEST”>以圖片的中央對齊 2018/9/17
HTML 複習 <HTML> <HEAD> <TITLE>哈囉！WWW </TITLE> <BODY> <H1>哈囉！WWW，我來了！</H1> <H4>這是"標題四"的大小</H4> <P> 這是<font color="red"> <U>一般字</U> </font>的大小(H4) </P> <MARQUEE –width=50%> Hi There! <IMG SRC="idocs.gif" HEIGHT=33 WIDTH=82 ALT="Idocs Guide to HTML"> </MARQUEE> </BODY> </HTML> 2018/9/17
超連結標籤1 格式：<a href=“URL”>超連結所顯示的文字</a> 連結的檔案就是一筆路徑名稱，分為絕對路徑和相對路徑兩種。 相對 :<a href="index.htm"> 絕對 : <a href=“http://www.cs.nthu.edu.tw/index.htm"> target屬性: 可設定網頁顯示視窗或開啟新視窗顯示。例如, target=“aaa” (設定網頁顯示視窗在aaa這個網頁上)或者, target=“_blank”(開啟新視窗顯示) 例子: <a target=“aaa” href=“http://www.ntu.edu.tw”>台大首頁</a> <a target=“aaa” href=“http://www.nctu.edu.tw”>交大首頁</a> <a target=“_blank” href=“http://www.nthu.edu.tw”>清大首頁</a> 2018/9/17
超連結標籤2 若不想要連結的時候有底線(比較不好看?)可以加入屬性 STYLE="text-decoration:none" <A HREF=“index.htm” STYLE=“text-decoration:none”>沒有底線的連結</A> 可配合 <a name=“xxx”>test</a>使用，例如當index.htm檔案裡面有一行是: <a name=“head”>這是開頭</a> 而這個index.htm檔案中的某處寫上 <a href=“#head”>跳到開頭</a> 或者 <a href=“index.html#head”>跳到開頭</a> 2018/9/17
建立超連結標籤3 超連結 E-MAIL <A HREF=“URL”>XXX</A> <A HREF=“#SECTION”>XXX</A> <A NAME=“SECTION”>XXX</A> E-MAIL <A HREF=“mailto: E-mail address”>XX</A> 2018/9/17
超連結標籤3 可以建立其他媒體的連結，如wave, mp3, midi, jpeg, gif, mpeg等。 例子: <a href=“abc.mp3”>abc音樂撥放</a> 以上這些檔案IE均有支援，可直接點選開啟，但會呼叫系統的其他應用程式撥放。 寄信的超連結寫法: <a href="mailto:www@cs.nthu.edu.tw">www</a> 2018/9/17
表格製作1 <table>:表格，會配合<tr>、<th> 、<td>等，其中<tr> 代表 table row， <th> 代表 table header ， <td> 代表 table data。也常會和<caption>標籤搭配，代表表格標題。 <td>和<th>的差別是 <th>中的字體是粗體且置中。 <caption>屬性 align可為top or bottom, 預設值top，如<caption align=bottom> 標題</catpion> <table>屬性: border (邊界的寬度)、align(位置) 、width(寬) 、height(高) 、cellspacing(儲存格之間的距離) 、cellpadding(表格資料到儲存格之間的距離)、 border color(border背景顏色) 、 bgcolor(表格背景顏色)等。 2018/9/17
表格製作2 Border: 邊界的寬度，以pixel為單位 Align: 決定該表格在文件中的位置， left 、 center 、 right. width、height : 表格的寬、高，可用百分比或pixel表示 Bordercolor: border的背景顏色， #xxxxxx, x為16進位值，也可以寫為bordercolor=green Bgcolor: 表格的背景顏色，寫法同上。 Cellspacing:每個表格之間的距離，以pixel為單位 <table border=10 cellspacing=20> Cellpadding:表格資料到表格框的距離，以pixel為單位 <table border=20 cellpadding=30> 2018/9/17
TABLE attribute 2018/9/17
表格製作3 在 <td> 標籤內，我們可以使用 colspan 或 rowspan 的屬性，來合併數個儲存格。 例子: <table border=3> <tr><td>A</td> <td rowspan=2>上下兩格合成一格</td> <td>B</td></tr> <tr><td>C</td> <td>D</td></tr> <tr> <td colspan=3>左右三格合成一格</td></tr> </table> 2018/9/17
表格實例 2018/9/17
表格實例 HTML code 2018/9/17
常用符號 空白表示:   (non-blank space) 大於: > 小於: < 雙引號: " (單引號直接打 ‘ 即可) 2018/9/17
HTML– 內嵌音效與影片 超連結 <A HREF=“FILE OR URL”>文字</A> 內嵌 <EMBED SRC=“FILE”> *.WAV *.MID *.AVI 播放次數(1). 連續播放(LOOP=“TRUE”) (2).播放三次(LOOP=“3”) 背景聲音:加入背景音樂的例子： <embed src=“xxx.wav" width=100 height=30 autostart=true loop=false> </embed> Ps. Autostart, 一開啟即撥放, loop, 循環撥放 2018/9/17
HTML程式--註解表示 註解表示: <!-- your comments --> Browser 不會去處理註解裡面所寫的內容 2018/9/17
Form (表單) 1 增加網頁的互動性 <FORM></FORM> METHOD ACTION POST、GET 接收SCRIPT的URL 2018/9/17
範例 Textarea <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> <TEXTAREA NAME="comments" ROWS="4" COLS="40"> 您可以在此輸入您的意見！ </TEXTAREA> </FORM> </BODY> </HTML> 2018/9/17
INPUT TEXT PASSWORD CHECKBOX RADIO HIDDEN RESET SUBMIT SELECT 2018/9/17
TEXT <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> 文字方盒：<INPUT TYPE="TEXT" NAME="name" SIZE="40" MAXLENGTH="40"> </FORM> </BODY> </HTML> 2018/9/17
PASSWORD <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> 輸入Password：<INPUT TYPE="PASSWORD" NAME="password" SIZE="25" MAXLENGTH="25"> </FORM> </BODY> </HTML> 2018/9/17
CHECKBOX <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> 選擇您電腦的種類：<BR> <INPUT TYPE="CHECKBOX" NAME="Pentium" CHECKED>Pentium <INPUT TYPE="CHECKBOX" NAME="486"> 486-Series PC <INPUT TYPE="CHECKBOX" NAME="Macintosh"> Macintosh </FORM> </BODY> </HTML> 2018/9/17
RADIO <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> 請選擇您最常使用的電腦：<BR> <INPUT TYPE="RADIO" NAME="Computer" VALUE="P" CHECKED> Pentium <INPUT TYPE="RADIO" NAME="Computer" VALUE="4"> 486-Series PC <INPUT TYPE="RADIO" NAME="Computer" VALUE="M"> Macintosh <INPUT TYPE="RADIO" NAME="Computer" VALUE="O"> 其他 </FORM> </BODY> </HTML> 2018/9/17
RESET與SUBMIT <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> <INPUT TYPE="RESET" VALUE="橡皮擦"> </FORM> </BODY> </HTML> <HTML> <HEAD> <TITLE>表單範例</TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="SUBMIT" VALUE="送出資料！"> </FORM> </BODY> </HTML> 2018/9/17
SELECT(1) <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> 選擇您最喜愛的食物： <SELECT NAME="food"> <OPTION SELECTED VALUE="ital">義大利菜 <OPTION VALUE="jap" > 日本料理 <OPTION VALUE="chin" > 中國菜 </SELECT> </FORM> </BODY> </HTML> 2018/9/17
SELECT(2) <HTML> <HEAD> <TITLE>表單範例</TITLE> <BODY> <FORM> 選選擇您最喜愛的食物： <SELECT NAME="food" MUTIPLE size="2"> <OPTION SELECTED VALUE="ital">義大利菜 <OPTION VALUE="jap" >日本料理 <OPTION VALUE="chin" >中國菜 <OPTION VALUE="max" >墨西哥菜 </SELECT> </FORM> </BODY> </HTML> 2018/9/17
Form (表單) 2 Form (表單) 設計可以讓使用者進行資料填寫或選取的功能，之後傳送至Server端處理，通常需搭配ASP、PHP 或CGI方面的程式。 <form>通常搭配<input>標籤，如下例: <FORM action=“/cgi-bin/test.cgi” method="post"> 名字：<INPUT type=text value="test"><br> 密碼：<INPUT type=password><br> 性別：<INPUT name="s" type=radio value="男">男 <INPUT name="s" type=radio value="女" checked>女<br> <INPUT type="submit" value="送出"> <INPUT type="reset" value="重新輸入"> </FORM> 2018/9/17
Form (表單) 3 <form>需搭配</form>結尾，而<input>則不需要。 <form>可以指定其submit之後所要使用的程式，以上例則是啟動系統的收發信軟體。 <input>可以設定許多屬性，常見的如下: Type = “text” (預設值) or “password” or “radio” or “checkbox” or “submit” or “reset” 等 Value則是此input的外在面貌。 上例結果: 2018/9/17
HTML編輯器 在WWW發展的初期，所有的網頁都得用文字編輯器「一步一標籤」地編寫出來。 WYSIWYG（What You See Is What You Get）的網頁編輯器，不必瞭解HTML種種標籤的寫法，就可以像文書處理一般地編寫網頁，並且在螢幕上即時看到編排的效果。這類的軟體包括：微軟公司的SharePoint Designer和Adobe公司的Dreamweaver。 2018/9/17
Javascript JavaScript是一種嵌入在網頁中的程式語言。它的前身是Netscape公司所發展的LiveScript程式語言。 Microsoft很快地也讓IE 瀏覽器支援JavaScript 的功能，並更名為JScript。 JavaScript是一種以物件為基礎（object based）的程式語言。 JavaScript程式碼必須利用<script> 標籤加入HTML文件中。 2018/9/17
JavaScript 範例一 <script type="text/javascript"> <!-- document.write("哈囉！JavaScript") //--> </script> 2018/9/17
Javascript（續） 加入外部的JavaScript 程式碼 •如果有多個網頁使用同樣的JavaScript程式碼（如函式庫），可把JavaScript程式碼存在一個以.js為副檔名的檔案中 然後用<script> 標籤的src屬性連結進來 <script src="lib.js"></script> 把與網頁同目錄的lib.js 檔加入網頁中，又如： <script src="http://www.pu.edu.tw/jslib/lib1.js"></script> 2018/9/17
today.js var today = new Date(); var year = today.getFullYear(); var month = today.getMonth() + 1; var date = today.getDate(); 2018/9/17
JavaScript 範例二 <html> <head> <title>JavaScript 範例二</title> <script type="text/javascript" src="today.js"></script> </head> <body> <p> <script type="text/javascript"> <!-- document.write("今天是西元"+year+" 年"+month+" 月"+date+" 日"); //--> </script> </p> </body> </html> 2018/9/17
JavaScript用途 檢查表單（form）資料的正確性 動態產生網頁內容 控制瀏覽器畫面 提供複雜的網頁導覽方式 產生動畫效果 2018/9/17
伺服端網頁程式 互動式的網頁都是利用HTML的表單（Form）元件來製作表單，以及利用一個伺服端網頁程式來收集與處理所接收到的表單資料。 2018/9/17
伺服端網頁程式 2018/9/17
CGI程式 共通閘道介面（Common Gateway Interface, CGI）是一種程式撰寫的規則，依據這個規則製作的程式稱為CGI程式。 CGI程式的電腦語言可為傳統的C/C++ 程式語言、UNIX系統下的shell script或Perl腳本語言、或Windows 系統下的Visual Basic程式語言等等。其目的: 1.取得從瀏覽器傳過來的資料（包括表單的資料和瀏覽器的資訊等） 2.利用作業系統所提供的資源（如檔案和工具程式等） 3.查詢或存取資料庫系統中的資料 4.經由WWW伺服程式傳送MIME（Multipurpose Internet Mail Extension）格式的文件（如純文字、圖片、HTML等）至瀏覽器顯示 CGI程式把完整的HTML文件透過標準輸出（standard output）輸出至WWW伺服器。 2018/9/17
嵌入式網頁程式 嵌入式的網頁程式是把程式碼加在HTML文件中，就如同客戶端的JavaScript程式一般。 過程： 1. 伺服器採用該程式語言的直譯器（interpreter）來執行網頁中的程式， 2. 然後把執行結果整合至網頁中 3. 全部完成後，再傳送至客戶端。 2018/9/17
PHP程式語言 PHP程式碼是寫在<?php和?> 兩個標籤之間。 <html> <head> <title>哈囉！PHP</title> </head> <body> <?php echo "<p>哈囉！PHP</p>"; ?> </body> </html> 2018/9/17
實作作業 作業9 作業10 請架構出您的Homepage (首頁)，簡介，音效，背景顏色和超連結到”課表”網頁 請參考計中網頁將自己的page放入server中 作業10 請製作出“課表”網頁，課堂上面附加”教授照片”圖檔 請應用課堂所教的技術，如：link、表格….等等 2018/9/17