多角度提高 HTML5 課程的教學(xué)質(zhì)量

陳徐

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

關(guān)鍵詞：渲染氣氛;工程世界;教學(xué)效果

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

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

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

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

二、利用媒體，提高教學(xué)效果

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

比如在教學(xué) HTML5 優(yōu)勢的時候，我用多媒體講解了一次關(guān)于 HTML5 對于HTML的新特性，先打開兩個展示效果相似的網(wǎng)頁，一個是由新的 HTML5 語言編寫的，另一個是由HTML編寫的，然后用兩個頁面的代碼差異來引出 HTML5 的優(yōu)勢，如： HTML5 會在第一行文檔中聲明了：“<！ DOCTYPE html>”;，<small>被用來定義小字等等。從差異對比中可以讓學(xué)生掌握關(guān)于 HTML5 的新特性?？傊媒虒W(xué)媒體，可以在課堂上向?qū)W生形象地展現(xiàn)教學(xué)的內(nèi)容，并與傳統(tǒng)的 HTML 實例形成鮮明對比，而讓學(xué)生在比較的過程中，能夠更好地理解 HTML5 的新特性。

三、適當(dāng)練習(xí)，強(qiáng)化所學(xué)知識

就信息技術(shù)而言，只看得懂不算學(xué)會，不上手就永遠(yuǎn)無法熟練地掌握，俗話說：“站在岸上學(xué)不會游泳”，說的就是這么一個道理。只有經(jīng)過適當(dāng)?shù)鼐毩?xí)，學(xué)生才會懂得應(yīng)該為達(dá)到什么效果而使用哪些代碼;也只有適當(dāng)?shù)鼐毩?xí)，學(xué)生才會縮短時間，提高編碼效率。

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

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

參考文獻(xiàn)：

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

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