<!doctype html>
<html>
<head>
<title>HTML5 TITLE</title>
<!--存的檔案記得也要放 utf-8 不然非英文字元顯示會異常-->
<mata charset="utf-8">
<link href="user.css" rel="stylesheet"></link>
<script src="user.js"></script>
</head>
<body>
<h1>Hellow World, HTML5!</h1>
</body>
</html>
二、打造你開發 HTML5 開發環境
接下來就是要使用 Eclipse 設定 HTML5 開發環境，先到官方網站下載 eclipse download
目前選擇下載的是 eclipse Luna
下載後會發現沒辦法選擇 WEB -> Static Web Project
此時可到 help / Install new software
Work With : 使用的是 http://download.eclipse.org/releases/luna (按下 Enter 出現 Pending 時要打勾)
並在下方選擇 Web, XML, Java EE and OSGi Enterprise Development，接下來進行 Next 以及後續 accept license
重開啟 Eclipse 後，即可在 Project 找到 Web -> Dynamic Web Project
建立 HTML5 的 Project
開啟 Project 後，在 WebContent 建立 HTML 的檔案
輸入第一個 HTML5 的網頁名稱
並按下 Next 選擇 HTML5 的格式
系統預設 BIG5，如果你要改成 utf-8 記得要進行修正，按下右鍵 Preferences ...
再選擇 Encoding 為 utf-8
記得在把 Code 修改 charset = "utf-8"
接下來透過 Eclipse 執行網頁 Run As -> Run on Server
再選擇 HTTP Preview
透過 Eclipse 顯示執行結果
三、讓 Eclipse 連結 Tomcat 開啟執行 HTML5
雖然 HTML5 不需要透過 Web Server 才能執行，可直接用瀏覽器檢示，但有時可能需要與 ASP.NET/JSP/PHP 結合，以下則以 Tomcat 做說明
在 Eclipse -> Windows -> Preferences 中的 Server -> Runtime Environments 設定 Apache Tomcat v6.0 (視你電腦安裝的版本選擇)
再設定好你安裝 Tomcat 的路徑，以及 Jre 版本
在 Server Runtime Environments 中增加 Apache Tomcat V6.0
接下來看到 Project Explorer 增加了 Servers -> Tomcat V6.0
建立 Dynamic Web Project
在 Target runtime 選擇 Apache Tomcat v6.0
一樣在新 Project 加入 HTML5 的程式
接下來針對 Dynamic Web Project 執行 Run on Server 後並選擇 Apache Tomcat v6.0
即可看到目前的程式正確執行
沒有留言:
張貼留言