第14课 初识HTML5（教案）- 2023-2024学年信息技术四年级下册浙江摄影版（三起）（2020）

课题：初识HTML5 课时：1 课型：新授 执教：徐梧 教学目标： （1）知道什么是HTML5，并可以说出HTML5的一些书写规律。 （2）能读懂组成HTML5文档基本结构的三对标记，并能简单运用标记编辑网页。 （3）通过实践和观察，感受用HTML5直接编辑网页的优点。 教学重点： （1）HTML5的语法规则和书写规范。 （2）HTML5文档的基本结构和标记的简单使用。 教学难点： HTML5的语法规则和书写规范 教学方法： 讲授、实践 教学媒体： 电子白板课件、微视频、学习网站 教学过程： （一）导入 小菜和大高都做网页，小菜的网页只能实现字幕左右移动，大高的网页却能实现字幕上下移动。小菜不服气，将FP中的字幕对话框翻了个遍，也没找到方法。 大高的方法是什么？ （演示，修改网页HTML5，实现向上滚动效果） 揭示所用方法。 看来，HTML5能hold住网页，那就让我们一起走进迷人的HTML5世界。（提示：打开学习网站的主页） （二）新课 1．初识HTML5 给出1-2分钟的时间阅读“HTML5简介”，了解HTML5的概念。 【课堂交流】 （1）HTML5是缩写，全称是Hypertext Markup Language，中文意思是什么？何谓超文本？标记长什么样？ （2）这种语言用于什么？（它的用途是什么） 下面，我们就用HTML5来编写一个简单的网页。 先浏览一下代码，让学生区分标记和文本。 提出实践要求，提示可以复制HTML5代码，保存文件时，一定要加扩展名，强制文件类型。 【实践与交流】 实践：5分钟 交流： （1）看到的网页结果是什么？ 主窗口显示什么，标题栏显示什么 （2）发现了哪些书写规律？ 预设：标记一般成对出现，<>开始，</>结束； 文本内容放在标记中间，受标记作用； 标记之间可以嵌套，但不能重叠。 2．认识HTML5基本结构和基本标记 我们已经发现了HTML5语言的一些规律，但这些对高手还说还不够。接下来，终于要面对标记了，我们要读懂你。 【读HTML5】 有没有发现，两个很有意思的标记？ head 头 body 身体，看来，网页也和人体一样具有一定的结构。 【学习与交流】 给出5分钟的时间阅读“HTML5基本结构和基本标记”的相关内容。 交流： （1）构成HTML5文档基本结构的三对标记分别是什么？ （2）<HTML5>标记对表示什么？<head>标记对？<body>标记对呢？ 请一位同学来按结构将这三对标记排列好。 （3）<title>标记标示什么？网页标题包含在哪个部分？head还是body 师演示<title>标记的使用，故意将结束标记放在</head>之后，等待学生纠错。 （4）如果想在网页中显示文字、图片、表格、字幕等等，应该在哪个部分加入？ 统统都在body标记对中间。 文字可以直接输入，其他页面元素就需要用标记来标示，所以，下节课我们还需要认识一些常用的HTML5标记。 3．设置标记的属性 标记标示的是某种网页元素，它可以通过属性设置演绎出网页的精彩。 师演示<body>标记设置text属性，使文字颜色改变。 请同学总结一下设置标记属性的方法。 （微视频重现演示） 预设：标记对的起始标记的尖括号里面，标记名之后，以空格隔开，输入属性=值，可以同时设置多个属性的。 每个标记的属性是不同的，使用前先查手册，请自己用手输入，不要复制代码。 【课堂实践】 修改“first.htm”的源文件，体验标记的用法。 【展示与评价】 请学生展示修改后的网页效果，呈现源文件，自述如何修改，最后说一说初学HTML5语言的感受。 请其他学生评价，代码修改是否正确。 （三）课堂小结 今天，我们初学了HTML5，也许你觉得它迷人，或许你觉得它烦人，但它是通向高级网页制作技术的必经之路。加油，大高在向我们招手！ 教学反思： 本节课的导入设计幽默有趣，为新课的学习创设了良好的情境，教学环节的过渡和衔接非常自然，有利于学生形成连续的学习经验。在微视频和学习网站的支持下，通过老师巧妙地引导，学生的学习既轻松又有效，取得了很好的教学效果。回顾本节课，值得改进的地方是可以适当增加学生自主阅读的时间。 学科网（北京）股份有限公司 $$