資源簡介

中小學教育資源及組卷應用平臺
初識HTML5 導學單
活動一：了解HTML5
1.上網搜索HTML相關資料，回答一下問題：
HTML的中文全稱是 ，該語言使用一套標簽或標記來描述網頁中的 、 、 、 等。
2.用瀏覽器瀏覽網頁時，除了“右擊”——查看網頁源代碼外，還可以按下 鍵，查看網頁的源代碼。
活動二：體驗操作
小組為單位，共同合作，將“網頁測試”設置為你們要的效果。
活動三：觀看微課《HTML發展史》，完成表格
時間 版本 事件
HTML1.0 （IETF）工作草案發布（非正式標準）
1995年 HTML2.0 于2000年之后被宣布已經過時
1996年 提供了很多新的特性
1999年 HTML4.0 在HTML4.0基礎上的微小改進
正式發布，仍在完善
HTML5的優點：
21世紀教育網(www.21cnjy.com)中小學教育資源及組卷應用平臺
初識HTML5教學設計
課 題 初識HTML5 單元 第三單元 學科 信息技術 年級 四年級
1.教學目標分析
知識與技能： 1. 了解超文本標記語言的概念。 2. 了解查看網頁源代碼的基本操作。 3. 理解基于HTML5的應用特點。 過程與方法： 1. 通過講解與實踐操作，了解超文本標記語言的概念，了解查看網頁源代碼的基本操作，理解基于HTML5的應用特點。 情感態度與價值觀：提升價值的判斷能力和負責任的行動能力，培養團結協作能力，激發對信息技術課堂的熱愛。提升分析問題、解決問題的能力。
2.教學重點、難點分析
【教學重點】 重點：查看網頁源代碼的基本操作，理解基于HTML5的應用特點。 【教學難點】 難點：理解基于HTML5的應用特點。
3.教學準備 1．一個基于H5頁面制作工具制作的作品，網頁測試代碼，微課視頻 2.移動終端 3.PPT課件，導學單
4.教學過程 （教學過程的表述不必詳細到將教師、學生的所有對話、活動逐字記錄，但是應該把主要教學環節、時間安排、教學方法、教學活動、教學手段、教學資源、設計意圖很清楚地再現。）
時間分配 教學設計 設計意圖
5分鐘 10分鐘 15分鐘 5分鐘 5分鐘 一、新課導入 1、疫情反反復復，學校組織了“疫情防控我幫忙”的主題活動，總共分成了兩個項目： 項目1“防疫多媒體處理師” 項目2“防控宣傳家（演示文稿），現在老師將項目2的作品”帶來了，大家來瞧瞧看，思考下他們遇到了什么問題？ 電腦端的作品用微信發給朋友時卻出現了問題（視頻無法正常顯示） 2、出示：電腦演示 VS 手機查看 3、思考：如何制作出移動端的防疫作品，擴大我們的影響力？ 4、回顧制作步驟：（出示） 確定主題——規劃內容——選擇制作工具（HTML）——設計作品——實踐創作——交流完善——完成作品 5、引入新課：HTML 二、深入探究，了解概念 1、自學書本P46-47頁，完成導學單中的活動一。 活動一：了解HTML 1.上網搜索HTML相關資料，回答一下問題： HTML的中文全稱是 ，該語言使用一套標簽或標記來描述網頁中的 、 、 、 等。 2.用瀏覽器瀏覽網頁時，除了“右擊”——查看網頁源代碼外，還可以按下 鍵，查看網頁的源代碼。 2、請一位學生演示打開網頁（活動一網頁測試）師講解，生操作。 3、思考：如果要修改網頁內容“大家好，我是吳老師”改一下”大家好，我是梅城中心小學的學生，需要在哪里修改？ 出示：代碼+瀏覽器=網頁 三、體驗操作：加深理解 1、介紹HTML文檔的常用標簽功能及結構。 2、活動二：小組為單位，共同合作，將“網頁測試”設置為你們要的效果 1、以小組為單位，合作做修改一段代碼效果（3段代碼選一） 2、生展示效果 四、自主學習，了解歷史 1、活動三：請同學們觀看微課《HTML發展史》視頻后，補充缺少信息，完成導學單中的活動三表格。 時間 版本 事件 1993年 HTML1.0 （IETF）工作草案發布（非正式標準） 1995年 HTML2.0 于2000年之后被宣布已經過時 1996年 HTML3.2 提供了很多新的特性 1999年 HTML4.01 在HTML4.0基礎上的微小改進 2008年 HTML5.0 正式發布，仍在完善 2、對比體驗，體會優勢 對比老版本HTML和HTML5，感受其不同，并在導學單活動三的劃線中填入HTML5的優點。 思考： （1）對比其他版本，HTML5多了哪些功能，和人之間互動更緊密？ （2）哪個版本的動畫效果更豐富？ （3）哪個版本可支持手機瀏覽？ （預設）有對話有互動性，手機查看方便，有音樂有圖片，動畫效果更優美（板書） 3、老師看HTML5那么有意思，也做了一個課堂的評價表，大家一邊體驗HTML5的過程中，一邊反饋今天的知識，看看大家能不能得一百分哦！ 引導生打開桌面課堂評價表 五、總結評價 這節課我們認識了什么技術？對比了那么多版本，我們選擇了？因為它？ 下節課我們繼續用HTML5這個技術制作防疫作品，給更多手機端用戶感受宣傳效果，擴大我們的影響力。 創設趣味的學習情境，更能激發學生的興趣。 師引導提出驅動性問題：演示文稿轉發到移動端（手機，iPad等）效果大打折扣，設計移動端解決弊端。 回顧數字化工具作品實現步驟，引出制作工具HTML。 學生利用自主探究、的方法去解決問題。 師生直觀演示更具說服力，加深印象。 學生利用小組合作、實踐操作的方法去解決問題加深理解。 借助微課自主學習，了解HTML的發展歷史。 師生共同探討，對比體驗，感受HTML5的優勢。
4.板書設計
初識HTML5 Ctrl+U 交互性強 (
網頁
) 查看更方便 動畫效果更精美 (
HTML5
) (
HTML4.01
) (
HTML2.0
) (
HTML3.2
) (
HTML1.0
)
121世紀教育網(www.21cnjy.com)(共13張PPT)
初識HTML5
執教者：XXX
TEXT
HERE
目前移動端用戶卻是電腦端用戶的9倍之多，如何制作出移動端的防疫作品，擴大我們的影響力？
手機查看
電腦演示
VS
制作步驟
HTML5
確定主題
規劃內容
選擇制作工具
設計作品
實踐創作
交流完善
完成作品
選擇制作工具
學習任務一:
自學書本P45-47頁，完成導學單中的活動一。
思考:
如果要將網頁內容“大家好，我是吳老師”改成”大家好，我是梅城中心小學的學生，需要在哪里修改？
代碼+瀏覽器=網頁
HTML5文件結構如下：
＜ html:＞標記網頁的開始
＜head＞標記頭部的開始
＜title＞顯示在瀏覽器左上方的標題＜/ title>
＜/head＞標記頭部的結束
學習任務二:
小組為單位，共同合作，將“活動一網頁測試”設置為自己想要的效果。
時間 版本 事件
HTML1.0 （IETF）工作草案發布（非正式標準）
1995年 HTML2.0 于2000年之后被宣布已經過時
1996年 提供了很多新的特性
1999年 HTML4.01 在HTML4.0基礎上的微小改進
正式發布，仍在完善
學習任務三: 觀看微課《HTML發展史》 ，完成表格。
HTML 1.0
HTML 2.0
HTML 3.2
HTML 4.01
HTML 5.0
HTML的發展史
1993年
1995年
1997年
1999年
2008年
學習任務四:
1、對比老版本HTML和HTML5，感受其不同，并在導學單活動三的劃線中填入HTML5的優點。
2、打開桌面上課堂表現評價表，并查看源代碼。
THANKS

展開更多......

收起↑