【公告】網站目前停止所有的課程訂閱服務,除了 7 月底預計完成上線的 KBF 餘下課程影片,將不會再新增其它課程內容,原有學員權益不受影響,造成不便還請見諒,我們正在開發以 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供更好的課程訂閱服務,感謝學員的支持。

Hello HTML5

Apple 掀起的行動裝置革命,連帶的瓦解了 Windows 獨佔的單一平台世界,多平台成了一種常態,這也促使 HTML5 成為網路未來的希望。最簡單的 HTML5 應用程式是一個單一的純文字檔,以 .html 或為副檔名,內容由三種元素所組成,分別是 HTML 標籤、 JavaScript  程式碼以及 CSS 樣式語言,由瀏覽器解譯執行,學習HTML5 的過程中,你必須瞭解這些相關的技術議題,才能成為一名合格的入門 HTML5 應用程式開發設計人員。

一個 HTML5 檔案是一個網頁,也是一支 Web 應用程式,而複雜的 Web 應用程式可能包含數量龐大的網頁與相關的程式碼,它可以作到幾乎任何你想要透過軟體作的事,就如同常見的視窗軟體,而開發HTML5 檔案不需要專屬的工具,只要有最基本的文字編輯器進行編寫,任何支援HTML5 的瀏覽器(Chrome、Firefox 與Opera …)即可測試。

既使沒有任何基礎的人,也可以很容易入門HTML5 ,開啟你的文字編輯器,輸入以下的內容:

<!DOCTYPE html>

這一行程式碼宣告此為 HTML5 網頁,完成之後,指定一個名稱,例如  first-html5,並且以副檔名 .html 進行儲存,完整的檔案名稱則是 first-html5.html,這樣你就完成了一個最簡單的HTML5 檔案,透過瀏覽器將其開啟即可。


如你所見,此截圖為利用瀏覽器執行此 first-html5.html 檔案的結果,當然,目前你還不懂HTML5 ,而且只完成了宣告的HTML5 檔案在瀏覽器也不會呈現任何內容,不過你要記得的是這確實是一個標準的HTML5 檔案。當然,一個標準的 HTML5 網頁不會只有一行而已,很快的,我們擴充此範例的內容,建立一個最典型的HTML5 網頁,此次建立一個具完整結構的HTML5 檔案,來看看其中的內容。

<!DOCTYPE html >
<html>
<head>
    <title>第一個標準的 HTML5 網頁</title>
</head>
<body>
    <P>HELLO HTML5 !</P>
</body>
</html>

除了第一行,接下來是由幾組標籤構成的巢狀內容,我們以視覺化結構的方式檢視,如下圖:


每一組標籤在網頁上形成一個封閉的區塊,並且逐一配置形成巢狀的區塊,這些標籤成對出現,<html></html> 這一組的標籤形成的區塊內容表示整個HTML 網頁,其內部有<head></ head > 與 <body></body> 這兩組標籤。

<head>
這一組標籤的內部配置與此網頁有關的資訊與描述資料,此範圍的內容並非網頁欲呈現的內容,因此不會呈現在網頁上。

<body>
這一組標籤構成網頁的內容主題,其中配置網頁上所要呈現的內容,這些內容同樣由特定的標籤所定義。

到目前為止,我們看到了一個單純但是典型的 HTML5 網頁內容與其組成架構,透過瀏覽器會看到以下的結果:


這個畫面有兩個重點,上方的標題「第一個標準的HTML5 網頁」,是由<head> 標籤裏面的<title> 標籤內容所定義,代表網頁的標題,而網頁的內容,也就是「HELLO HTML5 !」,由 <p> 這一組標籤所定義,表示網頁中的一段文句。

關於 HTML5 網頁,以下列舉幾項關鍵概念:
  • HTML5 網頁的內容由一群特定的標籤所定義。
  • 標籤由兩個角型符號與代表此標籤的元素名稱構成,例如<body> 標籤,表示一個body 元素,代表網頁的主體內容。
  • 原則上標籤總是開始與結束標籤成對出現,結束標籤的一開始角型符號後方多了一個斜線字元,例如</body> ,某些標籤可以省略結束標籤,而某些標籤只有單一標籤,例如用來表示斷行定義的<br/> 。
HTML 與 JavaScript

雖然建立基本的 HTML 標籤,就可以完成了 HTML5 網頁的定義,但即便是簡單的應用程式,只有 HTML 標籤是不夠的,更進一步的,你還需要 CSS 與 JavaScript 才能建立具真正功能的應用程式,以下的圖示解釋這三者的關係:


HTML 標籤負責應用程式的內容定義,CSS 決定最後網頁所要呈現的外觀,也就是使用者應用程式介面。 JavaScript 是整個應用程式的靈魂,使用者透過 JavaScript 與應用程式進行互動,而應用程式本身依賴 JavaScript 提供程式化控制的功能。

開啟你的文字編輯器,輸入以下的內容:

<!DOCTYPE html >
<html>
<head>
    <title> Hello </title>
    <script>
        function sayHello() {
            alert('Hello !');
        }
    </script>
</head>
<body>
    <button onclick="sayHello();" >SayHello</button>
</body>
</html>

灰階標示的是 <script> 標籤內容,這段內容即是所謂的 JavaScript 程式碼。當使用者按下畫面上的按鈕,即會執行這段程式碼,顯示 Hello 訊息。

接下來是 <body> 標籤的部份,其中配置了一組 <button> 標籤,這一組籤會在網頁上顯示一個按鈕,其中的文字 SayHello 將成為你所看到的按鈕表面的提示文字,而在這個標籤中,另外還有一段內容 onclick="sayHello();" ,其中的 onclick 是一種屬性,這個屬性的意思表示當使用者按下這個按鈕時,要求程式找到其後續雙引號中的 sayHello 這個 JavaScript 函式,然後執行其中的內容,整個流程如下圖:


在這個流程圖中, onclick 屬性是固定的,你必須指定這個名稱 <button> 標籤才會認得,而 sayHello() 則必須與 <script> 中的 sayHello() 相對應,這是自訂名稱,你可以修改這個名稱。

入門前端開發建議步驟

1.選一個文字編輯器,Sublime/Visual Studio/Aptana Studio .... 

2.從建立第一行 <!DOCTYPE html> 開始,瞭解基本的 HTML 檔案內容。


3.瞭解 <div>標籤,其它需要馬上理解的標籤有 <p>、<span>。

4.瞭解特定標籤,包含 <img>、<a>、<table>、<ul>、<input>

5.瞭解 CSS 語法與 HTML 的關係,以純文字方式編寫 CSS 樣式。


6.會利用 CSS 讓一個以上的 <div>以一特定長寬的矩形方塊呈現,為了達到這個目的,必須馬上理解 width、height、border、padding 、margin 樣式。

7.會利用 CSS 調整方塊在網頁上的位置,相關的樣式有 float、position、overflow、z-index 。

8.瞭解什麼是選擇器,最基礎的包含 #id、.class 與 tagName。

9.學好 JavaScript ,先熟練基本語法,物件操作,然後是與 HTML 元素的互動與事件處理機制,別急著使用 jQuery。



10.瞭解基礎的 HTML標籤、CSS樣式與 JavaScript  ,並能完全透過文字編輯器撰寫開發網頁內容,別急著使用現成設計工具與程式框架。

最後,嘗試不斷的實作網頁作品。


關於行動應用開發

目前開發市場最受歡迎的行動裝置應用,可以透過  jQuery Mobile+PhoneGap 進行無縫銜接,有了一定的基礎之後, 便可以透過這兩組套件進動裝置應用開發。



相較於其它程式開發平台,學習 HTML5 有很多好處:
  1. 開放性標準,獲得包括 Apple 、 IBM 、MS 以及 Google 等所有全球廠商的共同支持。
  2. 沒有版本的問題。
  3. 入門學習沒有門檻,不受特定工具綁定。
  4. 應用強大,取之不竭的資源,開發不盡的應用。
  5. 輕鬆接軌行動應用。.
學習 HTML5 ,歡迎參考我們出版的技術圖書《HTML5從零開始》與《HTML5完美風暴(第三版




沒有留言: