HTML语言认识入门.ppt

1、第一章,HTML页面与表格,课程目标,通过本章学习，将掌握： HTML文件的结构 如何设置HTML文件的背景色及文本色 如何在页面上添加一个超链接 如何在页面上添加一个表格 如何设置表格的属性,课程定位,相关的术语,网站 当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这个网址的一些信息和内容，这个网址就是我们常说的网站。 网站实际上对应的是物理的磁盘目录，同时对应一个 IP 地址。 常说的虚拟主机实际上是一个网站及其它功能的组合（邮件、数据库等）。,相关的术语,网页 又称Web页面，是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按

2、钮等组成。 而打开网络由网址进入时第一个看到的页面，我们通常把它称为首页（home page）或主页。 由首页所延伸下去的页面，就是一个个网页。,打个比方,网页如同 word 一样，是一种文件形式，有自己的格式： Word 的文件格式是微软定义的，很复杂，office 2007 则是 xml 格式了。 网页的格式是国际标准组织定义的，叫做 w3c，具体标准是 html 标记语言格式。 网页设计就是按照 html 语言格式来编写文本文件而已。,相关的术语,服务器（Server） 服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源，以及进行网络

3、管理。服务器实质是一台配置较高的计算机。不同的电脑操作系统，有不同的适用服务器软件，如：微软视窗windows XP Professional操作系统适用的服务器软件IIS5.1 浏览器（Browser） 用于查看Web站点的软件被称作浏览器。它是WWW的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中所描述的动画、声音、文本、图形、图像，并能实现电子邮件查看、下载文件、FTD等功能。,远程站点(Remote Site) 远程站点是指服务器上组成的Web站点。本地站点是指与远程站点上的文件对应的本地磁盘上的文件。 本地站点（Local Si

4、te） 在制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片、Flash动画等，如果不进行管理归档，分散在硬盘的各个地方,就无法方便地进行网页发布。 定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。,相关的术语,统一资源定位器URL URL即Uniform Resource Locator（统一资源定位器）的缩写。 用来指明主机或文件在Internet上的位置，一个URL就是一个资源在Internet上的具体位置，URL由Internet资源类型、服务器地址、端口及路径组成，如： 无论是单一的页面，还是庞大复杂的网站

5、，甚至是一个小小的图片，所有的网络资源都能通过URL系统访问到。,相关的术语,文字 文字是网页最基本的构成要素，一个网页上大部分是由文字构成的，由于文字所表达内容比较清楚、直接,而且相对占用网页版面面积较小，使网页所表达的信息量加大，所以网上用来表达内容或链接的大部分是文字。 文字也称文本，网页有90左右是由文本组成。首页上的文本基本上都是用来链接用的。,网页界面的构成要素,图形图像 图形和图像也是网页主要的构成要素，它有动态和静态之分，和文字的功能一样，也是基本上用来链接用的，它比文字看上去更加直观，更让人容易理解内容。 Web图形的文件标准格式是JPG、GIF和PNG，对颜色具有平滑渐变的

6、图像使用JPG格式，如大多数照片；对于以单一颜色为主的图像，使用GIF格式。,网页界面的构成要素,网页界面的构成要素,超（级）链接 超链接由两个端点及一个方向构成。通常开始的位置称为源端点，目标位置称作目标端点。 链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。 根据源端点的不同，可以将超链接分为两种： 超文本（Hypertext）和超链接（Hyperlink）。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，如图像、表单等。 超级链接是网页之间相互调用的主要方

7、式之一。,超级链接,网页界面的构成要素,交互功能 交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。 这也是互连网的一大优势所在，它给人提供了一个快捷交流的平台，给人的生活带来了许多便利。 交互功能常常是通过表单（form）标记实现的。,网页界面的构成要素,多媒体（Multimedia） 多媒体就是指各种各样的信息载体在计算机中的应用，是一种文字、声音、图像、动画和视频影像成分的交互组合。 网页中的多媒体主要指采用音频和视频功能的软硬件技术，包括数字音响、全动态图像、超媒体连接等，主要是对声音、图像具有编辑处理的功能，即网页上提供的音频和视频下载及播放功能，包括Flash动画

8、、声音与影片文件的播放。 它必须通过网络媒体播放器来实现，有多种网络媒体播放器。如常用的有Windows Media Player和 Realone Player等播放器。,超文本标记语言HTML,是网页设计的核心语言，是一切网页的基础描述语言 任何网页都是基于这种语言描述出来的,Html 语言描述的内容,浏览器解释显示后的网页,超文本标记语言HTML,为了全世界有一个统一的“世界语”，出现了 HTML 语言，从而统一了网页的格式 HTML标记 基本格式：文件内容 基本属性：,如同 word 一样，也有自己的文件格式，只不过比较复杂，没有人去编写，而是通过使用 word 来编写 word 文件

9、是一个意思。最常见的、最简单的文件格式就是文本文件了！,HTML文档,用 HTML 语言编写的文档就是 HTML 文档，也常被称为“静态网页”文件.html .htm HTML页面的基本结构 起始标记 (html) 文件头 (head) 文件体（body） HTML 文档的 HTML 标记大多是“成对儿”的，即： 开始， 结束 HTML 标记大多是英文单词或其缩写，如： Table，表示表格 Tr（table row）,表示表的一行 HTML 的国际规范标准见：,HTML页面的基本结构,起始标记 网页标题 文件主体, 网页的标题和属性 文件主体 ,基本结构,起始标记,标记符

10、号,标记用于HTML文档的最前面，用来标记HTML文档的开始,则是放在HTML文档的最后面，用来表示HTML文档的结束,两个标记必须一起使用,文件头,结构,文件头标记对构成HTML文档的开头部分,用来描述HTML文档相关信息,文件头,标记对构成HTML文档的开头部分,1Title标记 ,2Base标记 ,3Link标记 ,4Meta标记 ,页面主体格式和页面效果,标记对之间的内容是HTML文档的主要部分，在此标记对之间可包含众多的标记和信息 标记中还可以设置一些属性,两个标记必须一起使用,页面链接,页面链接的基本概念 外部链接 内部链接 邮件链接,了解路径,绝对路径,相对路径,绝对路径是指完整

11、的描述文件位置的路径,所谓相对路径，顾名思义就是自己相对与目标位置,外部链接,链接到外面网页去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。 一个超链接通常由以下3个部分构成：,超链接标记,属性href及其值,超链接中显示页面上显示链接的文字,新浪网,内部链接,有时候，当某页的内容很多时，我们可以利用网页的内部链接，以便使用者快速的找到资料 原理：,在欲链接处做个记号,链接时就寻找个这记号,内部链接就是网页中的书签,格式,书签内容,内部链接实例,例如，先定义一个标签a，然后找到“标签名”这个标签，就可编写如下代码：,书签内容 单击此处监视浏览器调到“标签a”处,

12、邮件链接,邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址发送邮件 格式,清华IT在线,访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件,表格,表格的基本形式 有通栏的表格 表的大小，边框宽度，表格间距 表格中文本的输出 表格在文件中的位置定义 表格颜色,表格的基本形式,表格，一般用于对网页的内容进行排版 一个表格由标记开始，结束 表的内容由,和定义,单元行,单元格,标记所标记的单元格的文字以粗体出现，通常用于表格的标题栏,表格的例子, 编号 名称 价格(元) 001 语文教材 20.00 ,有通栏的表格,1有横向通栏的表格用属性说明 2有纵向

13、通栏的表格用属性说明,#代表通栏占据的网格数,以像素为单位,横向通栏示例, 图书信息 编号 名称 价格(元) ,表的大小，边框宽度，表格间距,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 ,表格在文件中的位置定义,表格与文件中内容对齐时，若在现在位置上不能满足其对齐方式，可定义其位置，以满足对齐要求 属性一般由align=left、right或