多角度提高 HTML5 課程的教學質量

陳徐

摘 要：HTML5作為一種優化后的編程語言描述方式，在網站的編寫和應用上有十分良好的移植性和可用性，這種技術可以大大改善網頁的顯示效果，由于重在強調用戶體驗，因此它非常適合各種客戶端程序和游戲軟件的開發工作。在具體的教學中，如何讓學生愛上這門技術、掌握這門技術是教學重點，而如何提高這門技術的教學質量就變成了當下教師最關心的問題。

關鍵詞：渲染氣氛;工程世界;教學效果

八年的努力，HTML5標準終于一錘定音，在制定完成后的多年歲月里，各大瀏覽器最先扛起了支持的大旗，接踵而至的是各種移動開發商，都急迫地想要在自家產品中整合這門技術。據前幾年的調查顯示，應用了HTML5技術的手機瀏覽器已經突破了10億，而對于這門技術整合開發的“一線人員”，即工程師來說，人數也已經突破了200萬，有專家稱這一趨勢還在逐年上漲，從這里可以看到HTML5 的前景十分光明、道路十分廣闊，這一原因不僅是HTML5的性能較之前更加良好、完備，還在于入門相對簡單，具有“可讀性”體驗。因而在教育領域中，這種新技術也變成了教學重點之一。那么在教學中，我們該如何去提高HTML5的教學質量呢？以下結合筆者的個人實踐，從“渲染氣氛，了解工程世界”、“利用媒體，提高教學效果”、“適當練習，強化所學知識”三個方面進行闡述。

一、渲染氣氛，了解工程世界

氣氛課堂的影響尤為重要，一個良好的氣氛可以讓學生更好地激發學習興趣，在教學中，教師應該積極地營造氣氛，讓學生更好地了解到關于此技術的“工程世界”，讓其看到了技術的未來，這也是為學生的學習提供了方向。

比如我在課上帶來了安卓手機、蘋果手機、iPad、以及筆記本等設備，用這些設備同時打開百度或淘寶首頁，由于這類網站比起其他網站來說，更重視用戶的觀看體驗，以此來引出前端知識是十分有效的，而后學生便發現了這幾款設備打開的頁面都不一樣，他們問道：“為什么擁有同樣域名的網站，在不同客戶端中展示的也不盡相同呢？”我告之學生：“ HTML5 要先識別各種客戶端，而后再由獨特的編譯工具進行優化，這個過程不僅能夠提升頁面的加載性能，即優化模式化框架，還能夠資源定位，實現搜索功能”，這么一來，讓學生明白這些網站最為看重的就是網頁的“臉面”，即“前端世界”。此外，我還給他們演示了一個由 HTML5 做的游戲場景，這個場景十分逼真，由于此技術是取代flash的新工具，所以很多工程師都以此為職業，而這些基礎知識都來自于前端教材，學好這些知識才能進入工程師的世界。總之，教師要利用有效的手段營造氣氛，讓學生理解到工程世界雖然無比精彩奪目，但是也并非簡簡單單寫出來的，每個工程師都要根據自身的經驗，經過著無數的推敲琢磨環節，這種方式可以讓學生看到光明的前景，為前端知識的學習創造動力。

二、利用媒體，提高教學效果

多媒體作為一種優秀的輔學工具，它能夠用最少的資源、最豐富的聲色效果來為學生帶來更良好的觀看體驗，換言之，較之過去單拿著課本教學的模式來說，這種利用多媒體教學的模式能夠簡化教學的步驟，讓學生直接看到課程重點，提高了教學效果。

比如在教學 HTML5 優勢的時候，我用多媒體講解了一次關于 HTML5 對于HTML的新特性，先打開兩個展示效果相似的網頁，一個是由新的 HTML5 語言編寫的，另一個是由HTML編寫的，然后用兩個頁面的代碼差異來引出 HTML5 的優勢，如： HTML5 會在第一行文檔中聲明了：“<！ DOCTYPE html>”;，<small>被用來定義小字等等。從差異對比中可以讓學生掌握關于 HTML5 的新特性。總之，利用教學媒體，可以在課堂上向學生形象地展現教學的內容，并與傳統的 HTML 實例形成鮮明對比，而讓學生在比較的過程中，能夠更好地理解 HTML5 的新特性。

三、適當練習，強化所學知識

就信息技術而言，只看得懂不算學會，不上手就永遠無法熟練地掌握，俗話說：“站在岸上學不會游泳”，說的就是這么一個道理。只有經過適當地練習，學生才會懂得應該為達到什么效果而使用哪些代碼;也只有適當地練習，學生才會縮短時間，提高編碼效率。

比如：在練習圖像標記的時候，我們利用了一款很好用的工具，那就是W3cschool，學生在網站中把示例<img src="/i/eg_tulip.jpg"? alt="上海鮮花港 - 郁金香" >換成了<img src="p/row.jpg "? alt="草原 " />，然后用記事本以網頁形式打開就會看到一個草原的圖片顯示在眼前。在練習完之后學生要進行截圖，方便總結不同代碼能夠帶來什么不同的效果。而且，使用W3cshcool的好處就是，不但方便了教學的演示過程，也降低了教師投入的精力，還能夠在很大程度上促進學生的鞏固復習，強化所學知識。

綜上所述，HTML5是網頁前端開發工作中最基本也是最重要的技術，就像是一個組織的框架，這門技術的教學是一項公開技術，由國際上多家互聯網巨頭共同醞釀出來的，因此是絕對免費的，這一點也給學習帶來了很多福音，即學生在練習的時候，不僅可以使用課本上的知識，還可以在興趣之余，從課外搜索大量免費的代碼擴充知識面。此外，這項技術不僅支持跨平臺使用，還擁有自適應網頁設計等功能，強大的功能也是學生學習的目的。總之，基于HTMl5技術的網頁或者應用擁有很好的實用性和移植性，由于其前景十分良好，所以教師應該致力于探索多種教學手段，助力于學生的學習。

參考文獻：

[1]于薇.HTML5前端開發課程教學改革實踐探討[J].數字通信世界，2019（07）：244+96.

[2]王古森.探索HTML5在高職院校信息化教學中的應用[J].電腦知識與技術，2018，14（33）：142-143.