网页设计课件.HTML语言

网页设计与制作№1网页设计与制作HTML语言基础WANGYESHEJIYUZHIZUO网页设计与制作№2网页设计与制作一，HTML语言的由来1967年，在IBM资助下，世界上第一个真正运行成功的“超文本编辑系统”建成，这项研究由AndriesVanDam主持，在美国布朗大学最终完成。1969年，美国国防部高级研究计划署建立了ARPA网，该网络最成功的技术就是TCP/IP协议。网页设计与制作№3网页设计与制作1.1HTML语言的由来HTML语言起源于标准综合标记语言(StandardGeneralizedMarkupLanguage简称SGML)，是由CERN(欧洲粒子物理实验室)首先提出来的。其最早版本起源于1992年，HTML4.01版于1999年12月24日被推荐使用。HTML最初用于发布信息，并没有在网络上使用。它通过文件格式标准化，统一使用一些标记符号(TAG)，对文件的内容进行标注，指出内容的输出格式，如字体大小、颜色，背景颜色，表格形式，各部分之间逻辑上的组织等。网页设计与制作№4网页设计与制作1.1HTML语言的由来使用支持HTML的浏览软件，其它用户就可以对文件进行自由的跳跃式的阅读，还可自行调整显示和阅读的形式。由于它简单易学，表现力强，适用广泛,所以深受用户喜爱，迅速得到了推广和普及。网页设计与制作№5网页设计与制作超文本标识语言结构简单，语法较松散，易学易用。它是一种文字处理语言，而不是“程序”语言。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。1.2HTML语言的基本结构网页设计与制作№6网页设计与制作HTMLHEADTITLE一个简单的HTML示例/TITLE/HEADBODYCENTERH3欢迎光临我的主页/H3BRHRFONTSIZE=2这是我第一次做主页，无论怎么样，我都会努力做好！/FONT/CENTER/BODY/HTML━┓┃文件头━┛━┓┃┃┃┃文件体┃┃┃┃━┛1.3HTML语言的基本结构网页设计与制作№7网页设计与制作第二讲HTML语言HTML语言是超文本标记语言（HypertextMark-upLanguage）的缩写,主要用来创建与系统平台无关的网页文档,它不是编程语言，而是一种描述性的标记语言。所有网页软件都是以HTML为基础，学会了它可以更方便灵活地控制网页。特别是在动态网页的设计中，常常需要利用ASP、JSP、PHP等代码来输出网页的部分HTML代码，此时就必须对HTML标记相当熟悉才行。网页设计与制作№8网页设计与制作一、HTML网页的基本组成与特点1、用HTML制作网页的简单实例htmlheadtitle杜牧诗~秋夕/title/headbodybgcolor=#FFFFFFtext=#000000palign=centerfontsize=7color=#0000ff秋夕/font/ppalign=centerfontsize=5color=#0000ff杜牧/font/ppalign=centerfontsize=6color=#0000ff银烛秋光冷画屏/font/ppalign=centerfontsize=6color=#0000ff轻罗小扇扑流萤/font/ppalign=centerfontsize=6color=#0000ff天阶夜色凉如水/font/ppalign=centerfontsize=6color=#0000ff卧看牵牛织女星/font/p/body/html网页设计与制作№9网页设计与制作一、HTML网页的基本组成与特点2、HTML网页的基本组成网页的HTML代码有一定结构，其基本机构代码为：htmlheadtitle网页标题/title/headbody………./body/html网页设计与制作№10网页设计与制作一、HTML网页的基本组成与特点3、HTML的特点HTML文件是标准的文本文件，具有以下几个特点：（1）HTML标记的一般格式为：标记（名称）属性1=属性值1属性2=属性值2属性3=属性值3/标记（名称）但有的标记没有结束标记，称为单标记，如：BR（2）各属性项间用空格分隔，属性值可用双引号或单引号引起来，也可不引而直接表达。例如控制文本字体的标记为font，该标记有face、size、color属性，分别用于控制字体名、字体大小和字体颜色，用法为：fontface=宋体size=4color=#ff0000字体属性测试/font（3）HTML标记不区分大小写，HTML与html和Html是相同的。网页设计与制作№11网页设计与制作一、HTML网页的基本组成与特点3、HTML的特点（4）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容的换行用BR标记，换段用P标记，P表示段落开始，/P表示段落结束。例如：fontface=楷体_GB2312center2008北京奥运/center/font----------------------------------------------------------------------------------fontface=楷体_GB2312center2008北京奥运/center/font的浏览器显示效果均为2008北京奥运网页设计与制作№12网页设计与制作一、HTML网页的基本组成与特点3、HTML的特点（5）HTML标记可以嵌套使用，实现从不同角度对文本进行格式控制。嵌套使用时注意不要发生交叉嵌套。比如若要以加粗、居中、红色显示“奥林匹克精神”文本，则实现的代码为：bPalign=centerfontcolor=#ff0000奥林匹克精神/font/P/bbPalign=centerfontcolor=#ff0000奥林匹克精神/P/font/b各种标记符书写的先后顺序没有特别要求，只要不发生交叉嵌套就行。因此，以下三种用法等效。bPalign=centerfontcolor=#ff0000奥林匹克精神/font/P/bPalign=centerbfontcolor=#ff0000奥林匹克精神/font/b/Pfontcolor=#ff0000Palign=centerb奥林匹克精神/b/P/font网页设计与制作№13网页设计与制作创建HTML文档1.用编辑软件创建，如记事本2.工具软件创建，如dreamweaver网页设计与制作№14网页设计与制作常用HTML标签FONT/FONTIMGHRTABLE/TABLEA/ABODY/BODYFORM/FORM网页设计与制作№15网页设计与制作二、文本及版面风格控制标记（一）文本控制P381、文本格式标记文本控制主要是控制文本的字体、字体大小和颜色，这通过font标记来实现。格式：fontface=fontnamesize=fontsizecolor=#RRGGBB文本/font功能：设置网页中普通文字的显示效果。属性：(1)Face属性用于指定文字字体，如“楷体_GB2312”、“宋体”、“黑体”等。在使用字体时，应尽量使用一般操作系统都会安装的宋休、黑体、楷体等。网页设计与制作№16网页设计与制作二、文本及版面风格控制标记(2)color属性用于设置字体的颜色。在HTML中颜色通常用#RRGGBB来表达，RR、GG、BB分别代表红色、绿色、和蓝色的分量值，用十六进制数表示，取值范围为00～FF。通过改变三基色的混合量，即可形成各种各样的颜色。颜色红色绿色蓝色黄色黑色白色紫色取值#FF0000#00FF00#0000FF#FFFF00#000000#FFFFFF#FF00FF单词RedGreenBlueYellowBlackWhitePurple网页设计与制作№17网页设计与制作二、文本及版面风格控制标记（一）文本控制(3)size属性用于指定字体的大小。字体大小的表达方法有两种，一是设置为绝对字号，此时的设置值可以是1～７号，1号最小，7号最大，默认字号为3。例如，若要以蓝色，宋体2号字输出“网页设计技术”，则实现的代码为：fontface=宋体size=2color=#0000FF网页设计技术/font例如：fontsize=+2网页设计技术/font网页设计与制作№18网页设计与制作二、文本及版面风格控制标记2、标题格式标记标题格式使用Hn标记控制。格式：Hnalign=对齐方式标题文本/Hn说明：n表示标题字号，共六级，分别是1，2，3，4，5，6，数字越大，字号越小。Align表示水平对齐方式，取值为left、right或center。【实例】：H1这是第一级标题/H1H2这是第二级标题/H2H3这是第三级标题/H3H4这是第四级标题/H4H5这是第五级标题/H5H6这是第六级标题/H6网页设计与制作№19网页设计与制作二、文本及版面风格控制标记运行效果如图2.1所示。图2.1标题字演示注意：用该标记实现的文章标题效果有限，通常还是用FONT标记实现文章实际标题的丰富多彩效果。网页设计与制作№20网页设计与制作二、文本及版面风格控制标记3、字体效果（字型设置）标记HTML中还定义了一些用于改变字体效果的标记符，常用的有加粗、斜体、加下划线等。各种标记的格式和具体功能如表2.1所示：表2.1字体效果标记表标记格式功能BB受影响的文字/B加粗II受影响的文字/I斜体UU受影响的文字/U加下划线TTTT受影响的文字/TT标准打印机字体STRIKESTRIKE受影响的文字/STRIKE加删除线SUBSUB受影响的文字/SUB产生下标SUPSUP受影响的文字/SUP产生上标BIGBIG受影响的文字/BIG大字体文本SMALLSMALL受影响的文字/SMALL小字体文本BLINKBLINK受影响的文字/BLINK闪烁字注意：网页设计与制作№21网页设计与制作练习1使一段文本“电子科技大学”显示效果为：斜体，加粗再加下划线显示，显示颜色为红色，字体为黑体。网页设计与制作№22网页设计与制作二、文本及版面风格控制标记(二)版面风格控制P221、网页整体风格控制（文件主体）标记对网页整体风格的控制主要通过文件主体标记body及其相关属性来实现。格式：bodybackground=image-urlbgcolor=color功能：设置文件主体。说明：①body标记说明文件的主体，可以省略，中间可以插入其他标记和文字。②其属性可以省略，也可以有一个或多个。网页设计与制作№23网页设计与制作二、文本及版面风格控制标记(二)版面风格控制2、段落标记P27格式：palign=水平对齐方式……/p功能：设置文章段落开始和结束。属性：align是水平对齐方式，取值为left、right或center。例如：p白日依山尽/pp黄河入海流/p3、换行标记P28格式：br功能：另起一行显示文字。说明：①该标记是单标记。网页设计与制作№24网页设计与制作二、文本及版面风格控制标记(二)版面风格控制4、文本对齐方式标记格式：Palign=对齐方式文本/P功能：设置多个段落的文本居中、居左、不是居右。属性：align是水平对