Web前端开发电子教案 项目1 HTML文档结构-1.1项目描述、1.2知识准备_第1页
Web前端开发电子教案 项目1 HTML文档结构-1.1项目描述、1.2知识准备_第2页
Web前端开发电子教案 项目1 HTML文档结构-1.1项目描述、1.2知识准备_第3页
Web前端开发电子教案 项目1 HTML文档结构-1.1项目描述、1.2知识准备_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

教学课题项目1HTML文档结构—1.1项目描述、1.2知识准备授课班级授课时间教学目标知识目标1.掌握HTML5文件的基本结构；2.掌握HTML5基本标签；3.掌握Sublime编辑器的使用；4.了解HTML5语法的变化；5.了解Chrome浏览器中的开发者工具。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析网络已经成为人们学习、工作和娱乐中不可缺少的一部分，网页设计也成为学习计算机知识的重要内容之一。本项目来学习HTML基本概念和编写方法及浏览HTML文件的方法，使读者初步了解HTML。教学重点1.HTML5文件的基本结构；2.HTML5基本标签；3.Sublime编辑器的使用。教学难点1.HTML5文件的基本结构；2.HTML5基本标签；3.Sublime编辑器的使用技巧。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个简单的网页页面，并通过网页页面的源代码，导入HTML文件的基本结构。教师提出问题，学生可分组讨论，协作探究。技能学习一、HTML5文件基本结构一个HTML5文档中，必须包含<html></html>标签，并且放在一个HTML5文档中的开始和结束位置。<html></html>之间通常包含两个部分，分别为<head></head>和<body></body>，head标签包含html头部信息，例如文档标题、样式定义等。body包含文档主体部分，即网页内容。二、HTML5基本标签1.文档类型说明<!DOCTYPEhtml>2.HTML标签<html> …</html>3.head标签<head> …</head>（1）<head>标签中的<title>标签HTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中，在HTML文档中，标题信息设置在<head>与</head>之间。标题标签以<title>开始，以</title>结束。语法格式如下： <title> … </title>（2）<head>标签中的<meta>标签<meta>标签是<head>标签内的一个辅助性标签。<meta>标签提供的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以方便搜索引擎来搜索到页面的信息。（3）<head>标签中的<link>标签<link>标签用于外部文件的链接，一般用于链接外部CSS样式表文件和JS文件。<linkrel="stylesheet"type="text/css"href="theme.css"/>【例1-1】创建一个link链接外部CSS文件的实例。新建CSS文件夹（此文件夹与1-1.html文件在同一目录中），在CSS文件夹中创建style.css文件。在chrome浏览器中预览，效果如图所示。（4）<head>标签中的<script>标签<script>标签用于定义客户端页面脚本。（5）<head>标签中的<style>标签<style>标签用于定义元素的CSS样式。【例1-2】将例1-1用内嵌样式表示。4.body标签网页所要显示的内容都要放在body标签内，它是HTML文件的重点，<body>标签的作用就是定义了网页主题内容的开始和结束。5.页面注释标签<!---->注释是在HTML代码中插入描述性的文本，用来解释该代码或提示其他信息。<!--注释的内容-->三、Sublime编辑器的使用1．SublimeText编辑器的安装2．SublimeText3下Emmet的使用技巧四、HTML5语法的变化五、Chrome浏览器的开发者工具1．如何打开开发者工具2．开发者工具简介教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳一、HTML5基本结构如图所示。二、HTML5基本标签及说明如下表所示。三、Sublime编辑器的使用技巧教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.所有的HTML标签都有固定的格式，必须由_________符号括起来。A(…)B<…>C/*…*/D/…/2.下列________标签用于显示网页标题。A<head>B<html>C<title>D<body>3.下列________标签用于显示网页主体内容。A<head>B<html>C<title

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论