零售業批貨技巧與 網拍架站創業訓練班 寫個網頁先 建國科技大學 資訊管理學系 饒瑞佶
從網頁設計到網頁技術 網頁設計的基礎就是在建立HTML網頁，需要從伺服器下載至瀏覽器中顯示
客戶端網頁技術 客戶端網頁技術(單機)是指程式碼或網頁是在使用者客戶端電腦的瀏覽器執行，因為瀏覽器本身即支援直譯程式(大部分是JavaScript)，所以可以執行客戶端網頁技術
伺服端網頁技術 伺服端網頁技術簡單的說就是在WWW伺服器上(這門課用的是Apache)執行的應用程式(ASP.NET、PHP等)，而不是在客戶端電腦的瀏覽器執行
HTML介紹
HTML 4 HTML標示語言是一種文件編排語言(主要負責怎麼顯示文件內容)，其主要目的是編排顯示Web網頁。XHTML是HTML 4.01版的下一個版本，目前HTML的最新版本是HTML5。 「HTML」（HyperText Markup Language）的語法是源於SGML語言，「SGML」（Standard Generalized Markup Language），它是Tim Berners-Lee在1991年建立，1993年 HTML 1.0 版由Berners-Lee和Connolly完成，經過3.2版到HTML 4.01版，它是一種文件內容的格式編排語言。
HTML標記語言 HTML語言是一種文件內容的格式編排語言，不像SGML允許定義如何標示文件的標籤，HTML只是使用SGML慣用語法，即標籤和屬性，如下所示： 標籤（Tags）：HTML標籤是一個字串符號，可以用來標示文字內容套用的編排格式，例如：在<p>開頭標籤和</p>結尾標籤之中的文字內容，就是使用預設格式編排成段落，如下所示： <p>這是一個測試網頁</p> 屬性（Attributes）：每一個標籤可以擁有一些屬性來定義細部編排，例如：<img>標籤的src、width和height屬性，可以指定顯示的圖形和尺寸的寬和高，如下所示： <img src="sample.jpg" width="20" height="30" >
HTML Tag(標記) 使用中括號來定義 標記應該有頭有尾，中間夾住所要顯示的文字或圖形 每個標記都有已經定義好的意義 <a href=“http://www.ctu.edu.tw”>建國科技大學</a> 每個標記都有已經定義好的意義 例如<a>定義超連結 純文字檔（使用一般的文字編輯器就可以作業） 無大小寫之分 副檔名需要是.htm或是.html <標籤名稱 屬性 =“設定值”> ..要顯示之文件資料.. </標籤名稱> <Tag Attributes ="Value"> ..Document Of Display.. </Tag> <a href=“http://www.ctu.edu.tw”>建國科技大學</a>
網頁的結構 <html> 標示是一份HTML網頁 <head> HTML網頁的標題區塊 ……. <body> HTML網頁的內容區塊 </body> </html>
傳統網頁(HTML4)結構 <html> <head> <title>網頁標題</title> </head> <body> </body> </html> 標頭標籤 最外層標籤 內容主體標籤
標記撰寫的注意事項1 <h2><b>我的個人首頁</b></h2> 瀏覽器在直譯HTML標籤時，並不會檢查和顯示標籤語法的錯誤，在撰寫HTML網頁時使用者需要自行注意，因為HTML網頁如果出現直譯器看不懂的標籤，例如：拼錯標籤名稱，瀏覽器將直接跳過而不直譯。一些HTML撰寫時的注意事項，如下所示： HTML網頁是由標籤組成：HTML標籤是使用小於「<」和大於「>」符號夾著關鍵字，大部分標籤都是成雙成對，例如：段落編排標籤是<p>開頭和</p>結尾。 HTML標籤支援巢狀標籤：在HTML標籤中允許擁有其他HTML標籤，例如：在<h2>標籤中有<b>標籤，如下所示： <h2><b>我的個人首頁</b></h2> HTML標籤並不區分英文字母的大小寫：HTML標籤的<head>、<HEAD>和<Head>都代表相同標籤，在實務上建議使用小寫。
標記撰寫的注意事項2 HTML的開始標籤可以有屬性值：例如：<img>標籤的src屬性指定顯示圖片的URL網址，其值可以使用「"」或「'」符號括起或不使用也可以，建議使用「"」符號，如下所示： <img src="sample.jpg"> <img src=sample.jpg> HTML網頁的換行：HTML文件只是標準ANSI文字檔，Enter鍵的換行在瀏覽器並沒有作用，如果文件內容需要換行，請使用<br/>標籤。 HTML網頁的連續空白：連續空白在瀏覽器顯示時會簡化成一個空白字元。 註解文字：註解文字可以幫助我們維護HTML網頁，HTML網頁的註解是使用「<!」字串開始；以「--」為開端和「-->」結尾，瀏覽器在直譯和顯示網頁內容時會忽略這些註解行，如下所示： <!-- HTML網頁：Ch1_2_1.htm -->
HTML 4範例 01: <!-- HTML網頁：Ch1_2_1.htm --> 02: <html> 03: <head> 04: <title>HTML測試網頁</title> 05: </head> 06: <body> 07: <h3>HTML網頁</h3> 08: <hr> 09: <p>第一頁HTML網頁</p> 10: </body> 11: </html>
HTML5 HTML5不只是一種編排內容的標記語言，它更支援語意標籤和最新多媒體技術的語言，可以讓我們建立更適合人類閱讀和電腦處理的文件。 HTML5仍然遵循HTML 4.01標籤的語法，只是擴充、改進HTML標籤和API（Application Programming Interfaces）來建立複雜的Web應用程式，和處理DOM（Document Object Model）。不只如此，HTML5支援手機和平板電腦等低耗電的行動裝置，可以建立跨平台的Mobile應用程式。目前Internet Explorer、Firefox、Safari、Chrome和Opera等瀏覽器都已經支援HTML5。
1-2-2 HTML5 HTML5支援全新<video>、<audio>和<canvas>標籤來建立多媒體網頁，並且提供特殊規則來插入和格式化文字，例如：使用<section>、<article>和<header>語意標籤讓網頁設計者建立更有結構和人性化的網頁內容。 在HTML5 API部分，Canvas API可以在網頁canvas元素進行2D繪圖，電腦不需要安裝Flash外掛程式，就可以直接使用Media API在網頁的video和audio元素原生播放視訊和音效。HTML5的localStorage和sessionStorage可以取代Cookie在客戶端儲存使用者的專屬資料等。
HTML5網頁架構 <!DOCTYPE HTML> <html> <head> <title>網頁標題</title> </head> <body> </body> </html> 一定要有這個宣告 單獨只有HTML標籤
HTML5與HTML 4的差異 全新的剖析規則：支援更彈性的剖析和相容性，不只SGML，更可以使用SVG和MathML。 全新的元素：新增全新的語意、結構和多媒體等元素，可以輕鬆建立多煤體和行動裝置的Web網頁。 增強的表單控制：支援日期/時間、電子郵件、網址、搜尋、電話、色彩和範圍等資料和基本的表單驗證功能。 全新的屬性：支援meta標籤的charset屬性和script標籤的async屬性，和使用在所有元素的全域屬性id、tabindex、hidden和data-*等。
HTML5與HTML 4的差異 繪圖與多媒體的支援：HTML5支援向量繪圖、視訊與多媒體播放，我們不再需要在瀏覽器安裝外掛程式，就可以擁有多媒體的支援，在網頁播放多媒體檔案。 更佳的字型使用：HTML5網頁可以如同PDF一般的內嵌字型，讓瀏覽器可以使用正確的字型來顯示網頁內容。 不再支援舊版元素：HTML5不再支援舊版的acronym、applet、basefont、big、center、dir、font、frame、frameset、isindex、noframes、strike和tt元素。
CSS介紹
CSS 「CSS」（Cascading Style Sheets）層級式樣式表是一種樣式表達語言，可以用來描述標記語言(HTML標籤)的顯示外觀和格式，能夠重新定義HTML標籤的顯示效果，例如：<p>標籤是段落；<ul>為清單，CSS能夠重新定義標籤的顯示樣式，以便符合網頁設計者的需求。 在1996年12月公佈CSS Level 1規格，Internet Explorer 3.0或以上的版本都支援此規格，接著1998年5月推出Level 2規格，Level 3早在1999年就已經開始制訂，直到2011年6月7日才成為W3C的建議規格，在CSS3增加不少新的選擇器、多欄和特效功能。
在HTML網頁使用CSS CSS的目的是重新定義HTML標籤的顯示樣式，例如：HTML標籤<p>是文字段落，預設使用瀏覽器的字體與字型大小，如果使用CSS，我們可以重新定義標籤<p>的顯示樣式，如下所示： <style type="text/css"> p { font-size: 10pt; color: red; } </style> 程式碼定義<p>標籤使用尺寸10pt的文字，色彩為紅色，只要網頁使用<p>標籤的段落，都是套用此字型尺寸和色彩來顯示。
CSS的範例 01: <!-- HTML網頁：Ch1_3.htm --> 02: <html> 03: <head> 04: <title>HTML測試網頁+CSS</title> 05: <style type="text/css"> 06: p { font-size: 10pt; 07: color: red; } 08: </style> 09: </head> 10: <body> 11: <h3>HTML網頁+CSS</h3> 12: <hr> 13: <p>第一頁HTML+CSS網頁</p> 14: </body> 15: </html> CSS
JavaScript (JS)
JavaScript 基本上，程式語言可以分成好幾個世代，其中高階語言，例如：C和C++語言等都需要進行編譯，將程式碼轉譯成機器語言的執行檔案後才能在電腦上執行。腳本（Script）語言沒有如此複雜，它是一種直譯語言，直譯程式是一個指令一個動作，一列一列的執行腳本程式碼，例如：JavaScript和VBScript都屬於直譯語言。 因為JavaScript這類腳本語言不需要編譯，所以撰寫和除錯十分容易，而且一經修改馬上就可以執行，看到修改後的執行結果。
JavaScript 跟JAVA無關 JavaScript原為Netscape Communication Corporation（網景公司）開發的腳本語言，提供該公司瀏覽器產品Netscape Navigator開發互動網頁的功能。JavaScript原名LiveScript，於1995年在Netscape 2.0版正式發表，目前是巿面上各大瀏覽器最普遍支援的腳本語言。 微軟在Internet Explorer 3.0版時支援JavaScript 1.0版，稱為Jscript，這是一種與JavaScript相容的腳本語言，初期並不穩定，而且問題相當多，微軟在Internet Explorer 4.0版時支援官方版本ECMA標準的JavaScript規格，稱為ECMAScript，雖然Netscape的JavaScript和Microsoft的Jscript都支援ECMA規格，但屬於兩種不同的腳本語言。
HTML、CSS與JavaScript 在說明HTML、CSS和JavaScript之後，現在，我們就可以來看一看三者之間的關係
JavaScript 動態網頁 JavaScript是HTML網頁設計者的程式工具，因為大部分網頁設計者都不是專業的程式設計師，所以，JavaScript簡單易學的語法，就算不懂程式設計，也一樣可以輕鬆在HTML網頁內嵌一些JavaScript程式碼，JavaScript對於HTML網頁提供的基本功能 動態的文件內容 更改HTML標籤的樣式和屬性 表單驗證和送出 處理網頁或HTML標籤的事件 建立Web應用程式
建立JavaScript程式 JavaScript程式檔案本身是一份HTML網頁，擁有HTML標籤<script>插入的腳本程式碼，當瀏覽器讀到<script>標籤時，就知道內含JavaScript程式碼，需要直譯和執行內含的JavaScript程式碼。 雖可以混合寫，但還是可以有結構性
建立JavaScript程式 JavaScript程式碼是使用<script>標籤插入HTML網頁，在<script>…</script>標籤內的程式碼需要指定language屬性值JavaScript，如下所示： <script language="JavaScript"> …… </script> <script>標籤的language屬性指定使用的腳本語言，JavaScript為JavaScript；VBScript為VBScript。
建立JavaScript程式 在HTML5版不需要使用language屬性也可以，如下所示： <script> ……
JavaScript範例 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"/> 05: <title>Ch1_6.htm</title> 06: </head> 07: <body> 08: <script> 09: document.write("第一份JavaScript程式<br/>"); 10: </script> 11: </body> 12: </html> JS
OpenCart核心程式 PHP
PHP的由來 1994年，有個叫Rasmus Lerdorf的人，他用Perl寫了一些後端的程式，記錄有哪些人看過他的線上履歷表。慢慢地，一些網友對他所寫的程式碼產生興趣。於是，Rasmus Lerdorf就整理這些程式碼，包裝成一個叫作 ”Personal Home Page”的工具。
PHP的由來 之後，Rasmus Lerdorf又寫了一個腳本語言的核心引擎，加上能處理HTML表單輸入的工具，稱作 “Form Interpreter”簡稱FI。在1995年完成的這個版本，當時稱作 “PHP FI”，也有人稱之為 ”PHP2”。 1997年中的時候，PHP從Rasmus Lerdorf個人維護的開發專案，轉變成一個重要的網站開發技術。 目前PHP版本為5.x
PHP簡介 PHP是開放源碼的腳本語言(script)，特別適合用來開發網路(站)程式，可以內嵌在HTML碼。 PHP程式的原始碼是純文字，所以可以用任何可處理純文字檔的文字編輯器，如：記事本、vi、emac等，來撰寫PHP程式。 本課程使用Notepad++進行編輯(免安裝，直接解壓縮就可以使用)。
Why PHP：讓網頁動起來 傳統網頁(純HTML碼的網頁) 動態網頁 互動性高 靜態的（Static），內容固定不變 不容易更新與維護 透過程式(ASP.NET、PHP、JavaScript等)做到 內容是動態的 內容可以自動更新 互動性高
PHP如何運作 ? 步驟1：要求瀏覽網頁 A.php 步驟3：下載A.htm 用戶端 伺服端 瀏覽器 Apache網頁伺服器 步驟4：瀏覽器翻譯後顯示 步驟2：伺服器執行PHP程式並轉換成純HTML碼
PHP與HTML執行的不同 PHP程式會被Apache轉換成純HTML碼，所以PHP程式受到保護 網頁可以用瀏覽器開啟 執行：http://127.0.0.1/ 開啟：file://test.htm
一支PHP程式(網頁) 可能是： HTML標籤 + PHP程式 + JavaScript 或 HTML標籤 + PHP程式 或 三個腳色，各自功能不同，表現方式也不同，要學的就是怎麼整合！