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完美風暴(第三版




沒有留言: