网页制作与HTML语言图文教程

网页制作与HTML语言基本概念万维网站点与网站HTML动态HTMLCSSASP(PHP,JSP)Javascript(VBscript)CGI网页制作基本步骤站点创建主页创建创建网页基本元素利用表单增加交互网页中使用表格网页制作原则尽心筹划尽量精简尽量简朴善用图片使主页易于漫游重点突出循环利用现有信息保持新鲜感吸引用户浏览在线编辑测试结果HTML概述与基本结构一、HTML的概述HTML(HypertextMarkedLanguage)，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作万维网的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。通过HTML可以表现出丰富多彩的设计风格、实现页面之间的跳转、展现多媒体的效果。HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。一、HTML的概述一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置。HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。二、HTML的基本结构下面是一个最基本的html文档的代码:1－1.htmlHTML----------------------------------------〉开始标签HEAD--------------------------------------TITLE一个简单的HTML示例/TITLE|头部标签/HEAD--------------------------------------BODY---------------------------------------CENTER|H1欢迎光临我的主页/H1|BR|HR|文件主体FONTSIZE=7COLOR=red|这是我第一次做主页|/FONT|/CENTER|/BODY---------------------------------------/HTML---------------------------------------结尾标签简单实例三、HTML的标签与属性用“”和“”括起来的句子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项。HTML的标签分单标签和成对标签两种。成对标签是由首标签标签名和尾标签/标签名组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式标签名，单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性,属性要写在始标签内，属性用于进一步改变显示的效果,各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：标签名字属性1属性2属性3…内容/标签名字作为一般的原则，大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如：fontcolor=#ff00ffface=宋体size=30字体设置/font注意事项：输入始标签时，一定不要在“”与标签名之间输入多余的空格，也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确的识别括号中的标志命令，从而无法正确的显示你的信息。注意：HTML主体标签及属性颜色的设定一、html的主体标签body格式：bodytext=#000000link=#000000alink=#000000vlink=#000000background=gifnam.gifbgcolor=#000000leftmargin=3topmargin=2bgproperties=fixed属性描述link设定页面默认的连接颜色alink设定鼠标正在单击时的连接颜色vlink设定访问后连接文字的颜色background设定页面背景图像bgcolor设定页面背景颜色leftmargin设定页面的左边距topmargin设定页面的上边距bgproperties设定页面背景图像为固定，不随页面的滚动而滚动text设定页面文字的颜色在body和/body中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。body标签有自己的属性，设置body标签内的属性，可控制整个页面的显示方式。实例：2-1.htmlhtmlheadtitlebody的属性实例/title/headbodybgcolor=#FFFFE7text=#ff0000link=#3300FFalink=#FF00FFvlink=#9900FFcenterh2设定不同的连接颜色/h2测试body标签pahref=默认的连接颜色/apahref=正在按下的连接颜色,/apahref=访问过后的连接颜色,/aPahref=#onClick=javascript:window.history.back()返回/a/conter/body/html二、颜色的设定颜色值是一个关键字或一个RGB格式的数字。颜色是由“red”“green”“blue”三原色组合而成的，在HTML中对颜色的定义是用十六进位的，对於三原色HTML分别给予两个十六进位去定义，也就是每个原色可有256种彩度，故此三原色可混合成16777216种颜色。例如：白色的组成是red=ff,green=ff,blue=ff,RGB值即为ffffff红色的组成是red=ff,green=00,blue=00,RGB值即为ff0000绿色的组成是red=00,green=ff,blue=00,RGB值即为00ff00蓝色的组成是red=00,green=00,blue=ff,RGB值即为0000ff黑色的组成是red=00,green=00,blue=00,RGB值即为000000应用时常在每个RGB值之前加上“#“符号，如：bgcolor=#336699用英文名字表示颜色时直接写名字。如bgcolor=greenRGB颜色可以有四种表达形式:：#rrggbb(如，#00cc00)#rgb(如，#0c0)rgb(x,x,x)x是一个介乎0到255之间的整数(如，rgb(0,204,0))rgb(y%,y%,y%)y是一个介乎0.0到100.0之间的整数(如，rgb(0%,80%,0%)WindowsVGA(视频图像阵列)形成了16个关键字:aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，andyellow文字版面的编辑一、换行标签br换行标签是个单标签，也叫空标签，不包含任和内容，在html文件中的任何位置只要使用了br标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行。请看下面的例子：3-1htmlhtmlheadtitle无换行示例/title/headbody无换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。br有换行标记：br登鹳雀楼br白日依山尽，br黄河入海流。br欲穷千里目，br更上一层楼。/body/html二、换段落标签p及属性由p标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个P的开始就意味着上一个P的结束。良好的习惯是成对使用。格式：PPALIGN=参数其中,ALIGN是p标签的属性,有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.实例:3-2htmlhtmlheadtitle测试分段控制标签/title/headbodyp花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。/ppalign=right或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。/ppalign=center而美丽苦短的花期/ppalign=left却是那最后悲伤的秋风挽歌中的瞬间插曲。/p/body/html三、原样显示文字标签pre要保留原始文字排版的格式,就可以通过pre标签来实现,方法是把制作好的文字排版内容前后分别加上始标签pre和尾标签/pre.实例:3-3htmlHTMLHEADTITLE原样显示文字标签/TITLE/HEADBODYPRE白日依山尽，黄河入海流。欲穷千里目，更上一层楼。/PRE/BODY/HTML四、居中对齐标签center文本在页面中使用center标签进行居中显示,center是成对标签,在需要居中的内容部分开头处加center,结尾处加/center。实例：3-4htmlHTMLHEADTITLE居中对齐标签/TITLE/HEADBODYCENTER《送孟浩然之廣陵》p故人西辭黃鶴樓，煙花三月下揚州。孤帆遠影碧山盡，惟見長江天際流。/CENTER/BODY/HTML五、水平分隔线标签hrhr标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置hr标签的属性值，可以控制水平分隔线的样式。六、特殊字符在HTML文档中，有些字符没办法直接显示出来，使用特殊字符可以将键盘上没有的字符表达出来，而有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如等，为防止代码混淆，必须用一些代码来表示它们。七、注释标签在HTML文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。注释标签的格式有如下：!--注释的内容--八、字体属性3-10-1标题文字标签hnhn标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。标题标签的格式：hnalign=参数〉标题内容/hn说明：hn标签是成对出现的，hn标签共分为六级，在h1.../h1之间的文字就是第一级标题，是最大最粗的标题；h6.../h6之间的文字是最后一级，是最小最