HTML5: An Introduction
語意元素.網頁意涵資訊.瀏覽器相容性

網站/網群開發語言的最新趨勢

工具篇介述各種網站和網路社群的開發工具,分為語言層次和軟體層次工具。語言層次工具通常又包括3類:HTML,CSSDOM/Java。歷史上 HTML 4.01與XHTML 1.0--後者是加入了XML的功能,曾扮演重要角色,而扮演「斷代」的、則是當前的版本 HTML 5.* 版

在軟體層次的各種編輯器方面,當前為配合微軟教學上的優勢,本系列將講述微軟的網站開發軟體 Expression Web,並兼及前代的 SharePoint Designer 與 FrontPage

HTML 5/ HTML 5.* 技術與思想的發展與未來

最新發展中的是HTML 5 版,於2014年底完成 HTML 5.0,雖然已公佈新版命令與規範,但持續進化,在2016完成 HTML 5.1 「推薦版 Recommendation」,同時,已在 2017 年推出 HTML 5.2「試用版 Working Draft」HTML 5.2「解說版 Editor’s Draft」

HTML 5.* 版的演化,有相當比例在處理跨平臺網站--一般稱為「回應式網站 Responsive Web」(或直譯「響應式網站」)的需求,其成果就是「輕量網站 light webs」,其實在設計基本思想上與「內容網站」有所不同。

為簡化文字敘述、與減少溝通障礙,本系列對各 HTML 5.* 版的解說,均簡化為 HTML5。

HTML 5 將原始的 HTML 由「編輯」層次命令,進化為一般的高階形式的程式命令。

其中多屬技術層次的改變,屬於演化性的發展,但新增語意元素 Semantic Elements 、網頁意涵資訊 Microdata、則是具有創新性質的「思想」轉變。而使用 HTML 5 開發網站,宜注意瀏覽器相容性

廣義的 HTML 5 ,其內涵將從當前的3類工具發展為6類:

HTML 5 技術與思想的發展與未來HTML5:整合標誌語言/完整高階語言

修訂當前語言,並發展與以下 Semantic Elements 結合的 Microdata。

HTML 5 技術與思想的發展與未來HTML5 Multimedia:多媒體應用

當前各媒體播放器與各瀏覽器的配合,是最容易出問題的項目,這個部分最受期待。

HTML 5 技術與思想的發展與未來HTML5 Graphics:繪圖能力

將提供<canvas>畫布命令,及提供向量繪圖svg檔案能力。不過,預期效果大致相當SharePoint, Word能力,不可能取代專業繪圖軟體。

HTML 5 技術與思想的發展與未來HTML5 Applications:應用程式發展

包括 Java程式,與連結記憶體、資料庫能力。

HTML 5 技術與思想的發展與未來Semantic Elements/ HTML5 Forms:

語意元素與動態表單‧意涵式標籤命名

Semantic Elements/ HTML5 Forms:直譯為語意元素與動態表單。前者實則為建立:網頁平面結構設計定義、簡化網頁範本設計的能力、增加程式碼的可讀性。

譬如:當前是在網頁上以<div></div>設定若干個區域,然後使用個人化命名,1個叫<div id="nav"></div>,作為導覽區,1個叫<div id="article"></div>,作為主文區…,再把規畫好的區域,存為「範本」。

但 HTML5 直接發展各種 Semantic Elements,如<nav>, <article>…命令,界定區域內用途。

在「Web 結構_網頁平面設計:CSS法」一文中,將示範語意元素‧意涵式標籤的應用。

HTML5 的思想創新轉變

HTML5 的其他幾類改變,都是技術層次的改變,屬於演化性的發展,而本類工具則是具有創新性質的「思想」轉變。

根據「TX知識美學3論」,任何創意的「統一元素」有2:結構與意涵。

HTML(以及其他各種標籤語言)過去長期都是以「結構式」命名,譬如以 <div></div> 表示區域等。

而HTML5 改為以「意涵式」標籤命令命名,譬如以 <article></article> 表示文章等。

HTML5 Forms 就是以「意涵式」元素建立互動網頁、互動表單的能力。 

HTML5 的「瀏覽器相容性」測試網站

由於 HTML5 尚在發展中,採用 HTML5 開發的網站與各瀏覽器的相容性為何?HTML5 有一個測試網站如下:

http://html5test.com/index.html

點選以上連結,即可獲得一個相容分數。


Microdata 網頁意涵資訊Microdata 網頁意涵資訊

Microdata 直譯為「微資料」,但其目的是要提供「豐富的資料」,譯名正好和它追求「達意」的目的相反,故統雄老師建議譯為「網頁意涵資訊」。

Microdata 是由各搜尋引擎合作組成的 Schema.org ,支持 Html5 標準下的發展語法。

亦即 CSS 中的屬性(property)與值(value),也採用意涵式命名,譬如對一部電影預告篇的簡介如下:

程式碼
說明
<div itemscope itemtype ="http://schema.org/Movie"> 採用schema.org 所定義的Movie
<h1 itemprop="name">片名</h1> itemprop 屬性其值為片名
<span>Director: <span itemprop="director">導演名</span> 同上
<span itemprop="genre">類型</span> 同上
<a href="../movies/片名_預告片.html" itemprop="trailer">預告片</a> 同上
</div>  

這可使得搜尋引擎知道網頁資料的內容意涵為何,而可作進一步的服務應用。


HTML 5 技術與思想的發展與未來CSS3 :層疊樣式表第3版

而 HTML 5 的文件宣告,已簡化為<!DOCTYPE HTML>。

網站開發的組織與專案企畫網站開發的組織與專案企畫


HTML, xHTML : Function Tag 標註語言:功能命令精華篇HTML, xHTML : Function Tag 標註語言:功能命令精華篇

Cascading Style Sheets, CSSCascading Style Sheets, CSS: Presentation

簡捷建站程序簡捷建站程序

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題