網際網路的應用服務 – Web 概念與網頁語言

網際網路的應用服務 – 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=" 到此一游!!!</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=“ target屬性: 可設定網頁顯示視窗或開啟新視窗顯示。例如, target=“aaa” (設定網頁顯示視窗在aaa這個網頁上)或者, target=“_blank”(開啟新視窗顯示) 例子: <a target=“aaa” href=“ <a target=“aaa” href=“ <a target=“_blank” href=“ 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> <A HREF=“mailto: address”>XX</A> 2018/9/17

超連結標籤3 可以建立其他媒體的連結，如wave, mp3, midi, jpeg, gif, mpeg等。
例子: <a href=“abc.mp3”>abc音樂撥放</a> 以上這些檔案IE均有支援，可直接點選開啟，但會呼叫系統的其他應用程式撥放。寄信的超連結寫法: <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程式--註解表示註解表示:  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">  </script> 2018/9/17

Javascript（續）加入外部的JavaScript 程式碼
•如果有多個網頁使用同樣的JavaScript程式碼（如函式庫），可把JavaScript程式碼存在一個以.js為副檔名的檔案中然後用<script> 標籤的src屬性連結進來 <script src="lib.js"></script> 把與網頁同目錄的lib.js 檔加入網頁中，又如： <script src=" 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">  </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

網際網路的應用服務 – Web 概念與網頁語言

Similar presentations

Presentation on theme: "網際網路的應用服務 – Web 概念與網頁語言"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

網際網路的應用服務 – Web 概念與網頁語言

Similar presentations

Presentation on theme: "網際網路的應用服務 – Web 概念與網頁語言"— Presentation transcript:

Similar presentations

About project

反馈