1、计算机网络基础第5章教案攀枝花市经贸旅游学校教 案第5章HTML语言入门课 型：新课课时安排：18课时教学目标：知识目标：1)理解网页与网站的概念；2)掌握HTML文件的基本结构；3)掌握HTML文件编辑的常用标记；4)掌握列表标记的应用；5)掌握超链接标记的应用；6)掌握表格标记的应用；7)掌握表单和框架技术的应用；8)掌握多媒体在网页中的应用；9)掌握CSS在网页中的应用；技能目标：培养学生运用所学知识与技能，主动探究，解决实际问题的能力。德育目标：培养大家养成勇于探究新知识，不断地提高自身的审美意识，树立正确的人生观和价值。教学重点：HTML、 列表标记、超链接标记、表格标记、表单和框架
2、技术、CSS教学难点：标记的使用与运用安全教育：培养学生网络安全意识教学方法：讲演练教学过程：第1,2课时5.1 网页制作概述一、网站网站(Website)是指在Internet上，使用HTML(Hypertext Markup Language,超文本标记语言)等工具制作的用于展示特定内容的相关网页集合。1网站类型网站类型是指根据网站使用性质和内容的不同对网站的分类，通常情况下可以将网站分为政府网站、商业网站、企业网站、教育科研机构网站、个人网站和其它非盈利机构网站等。2网站结构网站结构一般分为物理结构和逻辑结构，网站物理结构是指网站真实的目录及文件所存储的位置；网站逻辑结构是指在一个网站中
3、各页面之间的逻辑链接关系，也可称为网站地图。常见的网站逻辑结构有以下三种：(1) 线性结构：这是网站最简单的一种结构，它是以某种顺序组织的，可以是时间顺序，也可以是逻辑甚至是字母顺序。通过这些顺序呈线性地链接。如一般的索引就采用线性结构。线性结构是组织网页的基本结构。(2) 二维表结构：这种结构允许浏览者横向、纵向地浏览信息。(3) 层次结构：层次结构是由一条主线构成索引，每一层又由一条线性结构构成。如网站导航就是这种结构。层次构造是目前网页制作普遍采用的一种结构形式。二、网页网页是网站中的“一页”，是构成网站的基本元素，是承载各种网站应用服务的平台。就是当浏览者访问网站时，在浏览器窗口中所看
4、到的一个个页面。其中，在浏览器窗口中首先打开的默认页面称为该网站的首页或主页(Home Page)，网站首页一般命名为index或default。1网页文件的类型网页是以文件的形式存储的网页文件。以.htm或.html为后缀的文件，俗称HTML文件。不同的后缀，分别代表不同类型的网页文件，如以.asp或.aspx或.php或.jsp等为后缀的网页文件。2网页的分类网页按使用技术的不同，一般分为静态网页和动态网页。静态网页是相对于动态网页而言的，是指没有后台数据库、不含程序和交互操作的网页。采用纯HTML来编写。插入.gif格式的动画、FLASH动画、滚动字幕等可实现视觉上的动态效果。动态网页可
5、以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的JavaScript和VBScript；另一种是服务器端技术如目前常用的ASP和PHP。它们会随不同浏览者、不同时间、不同操作返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI等；客户端脚本语言JavaScript：由网景公司的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类型广泛用于客户端网页开发的脚本语言，最常是于HTML上使用，用来给HTML网页添加动态功能。VBScript是微软开发的一种脚本语言，可以看作是VB语言的简化版，动态网页技术：ASP （Active
6、Server Pages）：动态服务器网页，由微软公司开发的服务器端运行的脚本平台，它被Windows下Internet Information Services (IIS)的程序所管理。PHP （Hypertext Preprocessor）：由拉斯姆斯勒多夫在1995年发明，是一种在电脑上运行的脚本语言，主要用途是在于处理动态网页，也包含了命令行运行接口（command line interface），或者产生图形用户界面（GUI）程序。1JSP （Java Server Pages）：由Sun Microsystems公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求，而
7、动态生成HTML、XML或其他格式文档的Web网页的技术标准。JSP技术是以Java语言作为脚本语言的，JSP网页为整个服务器端的Java库单元提供了一个接口来服务于HTTP的应用程序。2构成网页的元素网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。v 文本：是网页中最基本的元素。网页中文字的设计一般从以下几个方面来考虑： 字体的选择。 字号、行距的选择。 特殊字体的使用。 字体的颜色。v 图像：现在网络上使用的绝大多数图片和图像是gif、jpeg和png文件格式。网页上使用图像要注意的问题： JPEG格式适合于照片图像，GIF格式适合于包含
8、纯色的图像，例如插图和线条图。 利用图像编辑软件来放大或缩小图像 屏幕显示图像的分辨率一般为72dpi。制作图像时，不必使用比此再高的分辨率。尝试各种不同的JPEG压缩率 使用合适的色彩模式。 慎用动画v 链接：也叫超链接（Hyperlink），是从一个网页指向另一个目的端的链接，是页面间的链接关系。 链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。 超链接的标志一般有：文本、图像、热区三种。除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。v 动画：目前网络
9、上常用的动画类型有gif和Flash动画两种。v 视频：是多媒体网页的一个重要组成部分，常用的视频格式有avi、mpeg，.rm和mov等，视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用（严禁喧宾夺主）。v 音频：在网页中插入音频会增加网页的生动性。常用的音频格式有rm(ram)、midi、wav和mp3等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。3网页布局形式(1)“国”字形布局：也可称为“同”字型。(2)“匡”字形布局(3)标题文本型布局：标题文本型布局是指页面内容以文本为主， (4)框架型布局：采用框架布局结构，常见的有左右框架型、上下框架型和综合框
10、架型。还有综合型布局、封面型布局、海报型布局、Flash型布局等，网页布局一般都采用表格布局法，还可使用框架布局法和层叠样式表布局法。4网页制作工具网页编辑工具超文本标识语言HTML（Hyper Text Markup Language）全称是超文本标记语言，利用标记来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以编辑HTML文档。是一种专门用于Web页制作的语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。FrontPage是非常受初学者欢迎的一种，是一种非常容易上手的工具。它是由微软开发，并己集成为Office的组件之一，
11、与Microsoft Office应用程序的无缝集成。Macromedia公司开发的Dreamweaver软件是一种专业的网页编辑器，用于对站点、网页和Web应用程序进行设计、编码和开发。可直接编写HTML代码还可以在可视化编辑环境中工作网页图像编辑工具Photoshop：是Adobe公司开发的，是当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。Fireworks：是由Macromedia公司开发的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。Flash：Macromedia公司出品的Flash是目前非常流行
12、的一种交互式Web矢量动画软件。Dreamweaver和Flash、Fireworks三个软件被称为“网页三剑客”，是现在公认的比较标准的网页制作利器。第3,4课时5.2 HTML初步一、HTML的概况HTML (HyperText Markup Language) 超文本标记语言，是用特殊标记(tag)来描述文档结构和表现形式的一种语言。使用HTML语言描述的文件，需要通过Web浏览器显示出效果。即浏览一个网页时，实际上是把该网页所对应的HTML文件下载到我们的计算机中，然后由本地计算机中的浏览器来解释。HTML发展：由蒂姆伯纳斯-李给出原始定义，由IETF用简化的SGML（标准通用标记语言
13、）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。超文本置标语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）： HTML 2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.21996年1月14日，W3C推荐标准 HTML 4.01997年12月18日，W3C推荐标准 HTML 4.01（微小改进）1999年12月24日，W3C推荐标准 ISO/IEC 15445:2000（“ISO HTML”）2000年5月15日发布，基于严格的HTML 4.01语法，是国
14、际标准化组织和国际电工委员会的标准。HTML 5目前仍为草案，并已被W3C接纳。XHTML（可扩展超文本标记语言）是W3C计划中的HTML的接替者。是一个独立的、和HTML平行发展的标准。W3C目前的建议是使用XHTML 1.1、XHTML 1.0或者HTML 4.01进行网络出版。动态HTML（Dynamic HTML，简称DHTML、DHML）是一种通过结合HTML、用户端脚本语言（Client Side Script，如JavaScript）、串接样式表（CSS）和文件物件模型（DOM）来创建动态网页内容的方法应用： 产生交互式表单 生成类似WebCT的e-learning交互式在线基础
15、培训 创建基于浏览器的视频游戏 二、HTML标记的语法及文件结构1、HTML的标记语法什么是标记HTML用于描述功能的符号称为“标记”。比如、等，都是标记，标记表示HTML文档的开始。标记在使用时必须用尖括号“”括起来，有些标记必须成对出现，以开头无斜杠的标记（如:）开始，以有斜杠的标记（如:）结束。比如，表示一个表格的开始，表示一个表格的结束。在HTML中，标记的大小写作用相同，如和都是表示一个表格的开始。标记的分类HTML标记一般分为容器型标记和非容器型标记。容器型标记：由“起始标记”和“结束标记”两部分构成，必须成对使用。格式为：内容 起始标记告诉Web浏览器从此处开始执行该标记所表示的
16、功能。 结束标记告诉Web浏览器在这里结束该功能。始标记前加一个正斜杠（/）即成为尾标记。 “内容”部分就是要被这对标记施加作用的部分。如：非容器型标记：只需单独使用就能完整地表达意思，格式为： 如，它表示换行。标记属性标记属性用于更加详细地描述、修饰和设置HTML文件的显示内容及格式，标记属性可由用户设置，可选的；省略时将采用标记规定的默认设置值。其格式为：如各属性之间用空格隔开，排列不分先后顺序。HTML标记的书写规则：(1)HTML标记必须放在一对尖括号“”内，它通常是英文单词或英文单词缩写。针对容器型标记，必须成对出现，且应在结束标记前加上斜杠“/”。(2)在书写标记时，英文字母的大、
17、小写或混合使用大小写都是允许的，如HTML、html和Html的作用和效果都是一样的。(3)标记属性放在起始标记之后，且以空格作为分隔。(4)标记属性由属性名=属性值构成，其中的属性值必须用双引号或单引号括起来。(5)任何空格或回车在代码中都无效，插入空格或回车有专用的标记，分别是 、。不同的标记间用回车键换行再编写是个不错的习惯。(6)标记中不要有空格，否则浏览器可能无法识别，比如不能将写成。HTML文件的基本结构用HTML建立的文件称为HTML文件或超文本文件，它是由HTML标记和网页内容组成的描述性文本文件，可以使用任何的文本编辑器对它进行编辑，但文件必须保存为后缀名为.htm或
18、.html的格式。HTML文件内容通常由文件头部和文件主体两部份构成。其中，文件头部用于描述网页的标题及属性；文件主体是HTML文件的主要部分与核心内容，它包括用于描述网页文字、图形、动画、声音、表格、链接及页面布局等的各种标记和网页所显示的实际内容。其HTML文件的基本结构如下：网页标题文件主体为了方便阅读和理解，网页代码中的各标记按其层次关系统一采用缩进格式书写。HTML文件的命名 文件的扩展名要以.html或.html结束。 文件名中只可由英文字母、数字或下划线组成。 文件名中不要包含特殊符号，比如空格、$等。 文件名是区分大小写的，在Unix和Windows主机中有大小写的不同。 网站
19、首页文件名默认是index.htm或index.html。三、HTML文件结构的基本标记1标记放在HTML文件的开头，用于标识HTML文件的开始，放在HTML文件的最后，用于标识HTML文件的结束。标记在HTML文件中只能出现一次，同时通过对这一对标记的读取，浏览器才可以判断目前正在打开的是网页文件，而不是其他类型的文件。2标记标记在HTML文件中只能出现一次，用于标识HTML文件的头部，在标记中可以使用、等标记，这些标记都是用于在文件头部描述HTML文件的相关信息，同时标记之间的内容不会显示在浏览器的窗口中。title元素标记只能放在标记中，且只能出现一次，用于定义网页的标题。网页的标题内容
20、显示在浏览器窗口的标题栏中。如：攀枝花市经贸旅游学校首页meta元素描述HTML文档的元信息，即关于文档自身的信息。 定义搜索关键字以及文档描述格式例： 定义语言格式例：script元素语法格式： 程序代码 属性：languagestyle元素语法格式： 样式语句 link元素该网页与哪些文件设有链接语法格式： 3标记用于标识HTML文件的主体部份，只能出现一次。格式为： 页面元素标记中还可以设置一些属性 。属性功能示例BGCOLOR设置背景颜色BACKGROUND设置背景图片TEXT设置文本颜色LINK设置超链接颜色VLINK设置已使用的超链接的颜色ALINK设置正在被点击的超链接的颜色v
21、颜色值表示：16进制颜色代码：#RRGGBB10进制RGB代码：RGB（RRR，GGG，BBB）直接颜色名称：“Red”/“Blue”/“Silver” 如：【例5.1】使用基本标记创建一个简单网页。答：操作步骤如下： (1)单击“开始 /”“所有程序”/“附件”/“记事本”，打开记事本程序。(2)输入代码如下：我的第一个网页嗨，大家好！欢迎访问我的网页。(3)将上述代码保存为MyWeb.htm或MyWeb.html的HTML文件。(4)在IE浏览器中打开该HTML文件，浏览器窗口显示效果如图所示。操作完成。第5,6课时HTML中的常用标记一注释标记注释标记用于在HTML文件中插入注释内容。注
22、释是为了方便理解HTML代码而在HTML文件中添加的代码解释或说明信息，其内容不会显示在浏览器窗口中。用户可以使用注释来注解代码或说明某段代码的功能，这些注释信息可在以后为用户阅读编辑代码提供必要的帮助或提示。格式：功能：为HTML代码添加注释内容。说明：在记中的注释内容之前必须加上感叹号“!”。例：二特殊字符的插入HTML标记本身使用了一些特殊的符号，如“”、“ &”等,因此想要在网页中显示这些符号,就必须用代码替代这些特殊的符号在HTML代码中插入特殊字符时，必须以“&”或 “&#” 开头，以“；”结束，之间为规定的字母组合或数字。例如：“”为：> 、“&”为：& 、“”为：
23、© 、“”为：® 、空格为： 三、与段落控制相关的标记1居中标记格式：功能：在页面中对标记之间的文本进行居中显示。2、换段标记换行标记主要用于对一段文字的某行强制换为两行，而换段标记主要用于对显示内容创建为一个段落。换段标记具有换行的功能，但换段之后的两个段落之间多了一空白行。格式：功能：在页面中对标记之间的文本创建为一个段落。说明：(1)在标记中可使用ALIGN属性描述段落的对齐方式如：Align属性：Left，Center，Right分别表示左对齐、居中对齐或右对齐。(2) 换段标记可以省略结束标记，但无论省略与否，换段标记都属于容器型标记。3换行标记在HTML
24、文件中，针对文本编辑器中对文本编辑的控制符或一些特殊符号直接使用都是无效的，都必须使用相应标记来描述。格式：功能：在标记插入位置执行回车换行操作，使标记之后的内容强制显示在页面的下一行4水平线标记格式：功能：在页面中插入一条水平分隔线。说明：标记在默认情况下插入的是一条黑色的带3D阴影的粗细为2个像素、宽度为页面宽度的水平分隔线，标记也可以使用一些常用属性来控制水平分隔线在页面中的显示样式，其常用属性如表 所示。表5-2 标记的常用属性属性功能示例SIZE以像素为单位设置水平分隔线的粗细WIDTH以像素或百分比为单位设置水平分隔线的宽度ALIGN设置水平分隔线的对齐方式COLOR设置水平分隔线
25、的颜色NOSHADE取消水平分隔线的3d阴影例：【例5.2】：常用标记综合应用，创建如图所示网页。代码如下：常用标记使用春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少？四、与文本显示相关的标记1段落标题标记在网页中段落标题标记则是用于设置不同级别段落标题的专用标记，被设置为段落标题的文字将以不同字号的黑粗体方式来表示不同级别的标题并显示在网页中。格式：功能：在页面中对标记之间的文本设置为一个段落标题。说明：(1) 标记中n的取值为：、，分别表示至个级别的段落标题。其中，n的取值越大，标题的级别越小。默认字体为黑体。(2) 在标记中可使用ALIGN属性描述段落标题的对齐方式。(3) 段落标题本身自为一段落，所以标记具有换段的功能。【例5.3】：使用段落标题标记，创建如图所示网页。代码如下：段落标题标记使用一级标题二级标题三级标题四级标题五级标题六级标题2 文字字体格式：功能：在页面中对标记之间的文本设置字体，字号和颜色。说明：标记有个基本
