《HTML页面与表格》PPT课件.ppt

第一章,HTML页面与表格,课程目标,HTML文件的结构 如何设置HTML文件的背景色及文本色 如何在页面上添加一个超链接 如何在页面上添加一个表格 如何设置表格的属性,使学生能设计并实现下列各种程序,通过本章的学习要对HTML文件有初步地了解，并且可以灵活的设置超链接以及表格的属性,目标,创建一个 html页面 表格 超连接,体验,创建使用超链接和表格的HTML页面 本章我们首先创建一个HTML页面。在页面中创建一个超链接，使超链接指向另一个显示信息的页面。在显示信息的页面中，以表格的形式显示信息。如图1-1、1-2所示：,网页基础知识,万维网WWW (World Wide Web) 超文本传送协议HTTP (HyperText Transfer Protocol) HTTP协议用经常用在传送WEB页 网站是由若干个文件组成！,网页基础知识,统一资源定位器URL （Uniform Resource Locator） URL包括传送协议，服务器名称、文件的完整路径 例如：/index.html 其中http:/是传送协议 是服务器名称 index.html 是文件的完整路径 服务器名称还有其他的叫法，主机名、域名。一般大众叫法叫域名 .com .net .gov 等等代表服务类型。,网页基础知识,超级文本标记语言HTML 它是WWW上通用的描述语言。 HTML语言支持多媒体（即文，图，声） HTML以文件形式存放在计算机内，HTML文件可以通过WWW传送给世界上所有连接INTERNET上的计算机，使其可以浏览HTML里的内容。,HTML,HTML是Hypertext Markup Language（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。 HTML文档由文本和HTML标记组成，通常以.html或者.htm为文本的扩展名（如index.htm）。 网页浏览器负责解释HTML文档中的标记，并将HTML文档显示为网页。 任何有浏览器的计算机都可以显示HTML文档，不论计算机上运行的是UNIX，Macitionish,还是Windwos操作系统。,HTML功能,HTML的功能： 出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。 通过超链接检索在线的信息。 为获取远程服务而设计表单，可用于检索信息、定购产品等。 在文档中直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用。,HTML和网页浏览器的关系,HTML和网页浏览器的关系： 不同的浏览器中网页的显示效果可能不同。大多数浏览器不完全支持HTML的所有特性，每一种浏览器都可能会有一些特有的HTML标记和属性，这些标记和属性可能不会被其他的浏览器识别。这些有软件公司开发的标记和属性被称为HTML扩展，而不是标记的一部分。,超文本标记语言HTML,HTML标记 基本格式 标记内可以包含一些属性,文件内容,HTML中的注释： ,HTML文档,HTML页面的基本结构 起始标记 文件头,HTML页面的基本结构,起始标记 网页标题 文件主体, 网页的标题和属性 文件主体 ,基本结构,起始标记,标记符号,标记用于HTML文档的最前面，用来标记HTML文档的开始,则是放在HTML文档的最后面，用来表示HTML文档的结束,两个标记必须一起使用,文件头,结构,文件头标记对构成HTML文档的开头部分,用来描述HTML文档相关信息,文件头,标记对构成HTML文档的开头部分,1Title标记 ,2Base标记 /是一个链接基准标记,用以改变文件中 所有链接标记的参数默认值,3Link标记 ,4Meta标记 ,页面主体格式和页面效果,标记对之间的内容是HTML文档的主要部分，在此标记对之间可包含众多的标记和信息 标记中还可以设置一些属性,两个标记必须一起使用,页面链接,页面链接的基本概念 外部链接 内部链接 邮件链接,了解路径,绝对路径,相对路径,绝对路径是指完整的描述文件位置的路径,所谓相对路径，顾名思义就是自己相对与目标位置,外部链接,链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。 一个超链接通常由以下3个部分构成：,超链接标记,属性href及其值,超链接中显示页面上显示链接的文字,新浪网,内部链接,有时候，当某页的内容很多时，我们可以利用网页的内部链接，以便使用者快速的找到资料 原理：,在欲链接处做个记号,链接时就寻找个这记号,内部链接就是网页中的书签,格式,书签内容,内部链接实例,例如，先定义一个标签a，然后找到“标签名”这个标签，就可编写如下代码：,书签内容 单击此处监视浏览器调到“标签a”处,邮件链接,邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址发送邮件 格式,IT在线,访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件,表格,表格的基本形式 有通栏的表格 表的大小，边框宽度，表格间距 表格中文本的输出 表格在文件中的位置定义 表格颜色,表格的基本形式,表格，一般用于对网页的内容进行排版 一个表格由标记开始，结束 表的内容由,和定义,单元行,单元格,标记所标记的单元格的文字以粗体出现，通常用于表格的标题栏,表格的例子, 编号 名称 价格(元) 001 语文教材 20.00 ,有通栏的表格,1有横向通栏的表格用属性说明 2有纵向通栏的表格用属性说明,#代表通栏占据的网格数,以像素为单位,横向通栏示例, 图书信息 编号 名称 价格(元) ,表的大小，边框宽度，表格间距,1表的大小用width=#和height=#属性说明 2边框宽度由border=#说明 3表格间距即划分表格的线的粗细用cellspacing=#表示,宽,高,#是以像素为单位的整数,表格的粗细, 编号 名称 价格(元) 001 语文教材 20.00 ,表格中文本的输出,1文本与表框的距离用cellpadding=#设置 2表格的宽度大于其中的文本宽度时，文本在其中的输出位置用“align=#”定义 3表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。,#是left，center和right三者之一，分别表示左对齐，居中和右对齐,#是top，middle，bottom，baseline四者之一。分别表示顶端对齐、居中对齐、底部对齐、基线对齐,#是以像素为单位的整数,001,文本与表框的距离, 表格中文本的输出 编号名称价格(元) 001语文教材20.00 ,表格的高度大于其中文本的高度, 编号 名称 价格(元) 001 语文教材 20.00 ,表格在文件中的位置定义,表格与文件中内容对齐时，若在现在位置上不能满足其对齐方式，可定义其位