搜索
网页制作教程1HTML语言基础网页制作教程2第一章HTML概述HTML是HypertextMarkupLanguage的缩写，意思是超文本标记语言，用于描述网页文档。第一节什么是HTML一、WEB的概念：1、浏览器的工作过程：用户连接到Internet→在浏览器的地址栏输入一个Internet地址（URL-一个网页）按回车→浏览器将此“请求”通过网络介质传送到页面所在的服务器（Server）→服务器做出响应，将相应的页面发送给浏览器→浏览器解释并显示页面。网页制作教程3BrowserInternetServer通过上面的过程，浏览器和服务器之间便建立了一种交互关系，使浏览者可以浏览到世界上各地计算机上的网页。我们通常使用的浏览器有：Microsoft公司的IE—InternetExplorer（探险者）和Netscape公司的Navigator（导航者）。2、Web的概念：定义：Web是一个支持交互式访问的分布式超媒体系统。所谓交互式访问，即它可以使用户与服务器之间进行交互操作；而所谓分布式（Distributed），则是指Web上的信息并非是驻留在某一台计算机上，而是以一种分散的方式驻留在多台计算机上。网页制作教程4在Web概念中，需要强调的是“超媒体”（Hyper-media）这个术语。实际上，超媒体系统是传统的超文本（Hypertext）系统的扩展，或者说超文本系统是超媒体系统的子集。但不论是在超媒体系统还是在超文本系统，信息都是以文档集（Web页）的形式存储的；在文档中，除了包括基本的信息以外，还可以包括指向文档集中其它文档的指针（超级连接—Hyper-link）。如图：链接A链接B链接C文档1文档2文档3定义：HTML是用来表示Web文档的规范，它使用标记符来确定网页的显示格式。Web页（HTML文档）的扩展名是htm或html；它是一个文本文档。Dreamweaver简介网页制作教程5第二节标记符基础一、HTML语法在HTML中，所有的标记符都用尖括号括起来，并且一般都成对出现；即包括开始标记符和结束标记符；它们定义了标记符所影响的范围。结束符和开始符的区别是其前面有一个斜线。如：B合体显示/B其只影响B和/B之间的文字，而不会影响标记符以外的文字。二、标记符的属性对于许多标记符还包括一些属性，以便对标记符作用的内容进行更详细的控制；所有的属性都放置在开始标记符的尖括号里。如：FONTSIZE=4COLOR=”RED”标记符属性的作用/FONT则本段文字将以红色4号字在浏览器中显示。网页制作教程6第三节Web页的基本结构一个Web页实际上对应于一个HTML文件，HTML文件以.html或.htm为扩展名。如下：为一个Web页的基本结构HTMLHEADTITLEWeb页基本架构/TITLE…………/HEADBODY…………/BODY/HTML网页制作教程7一、HTML标记HTML和/HTML是WEB页的第一个和最后一个标记符，页内的其它内容都位于这两个标记之间。它的作用是告诉浏览器该文件是一个WEB页。二、首部标记——HEADHEAD和/HEAD位于WEB页的开头，其不包括WEB页的任何实际内容，而是提供一些与WEB页有关的特定信息。如：可以在首部设置网页的标题（TITLE）、或定义样式表（CSS）、或插入脚本等。在首部，最基本、最常用的标记符是标题标记符TITLE\TITLE,用于定义网页的标题，其显示在浏览器的标题栏上，并可被浏览器用作收藏清单。三、正文标记符——BODYBODY和/BODY是包含WEB页实际显示内容的地方，其包括文字、图像、链接及其它HTML元素。BODY标记符包括一些常用的属性来格式化整体的版面格式；如设置网页的背景色、背景图像等。如：HTMLHEAD网页制作教程8TITLEWeb页标题/TITLE/HEADBODY正文，正文，正文，正文，正文，正文/BODY/HTML注意：空格、回车等格式控制符在显示时是不起作用的，要在网页中显示空格或产生换行是要借助于标记符和参考字符来完成。第四节添加注释HTML的注解由开始标记符!--和结束标记符--构成。这两个标记之间的任何内容都将被浏览器视为注释而不再浏览器中显示。如：HTMLHEADTITLEWeb页基本架构/TITLE网页制作教程9/HEADBODYDFSADFSADFASDFSADGSAD!--这是注解--/BODY/HTML注意：注释可以出现在WEB页的任何位置。第五节特殊字符的显示若用户要在网页中显示某些特殊字符，如：、、空格等；则需要使用参考字符来表示，而不能直接输入。参考字符以“&”开始，以“；”结束，既可以用数字代码，也可以用代码名称。常见特殊字符：特殊字符数字代码代码名称&&；&；<；<；>；>；空格 ； ；网页制作教程10注：与HTML标记符不同，字符代码名称区分大小写。如:要在网页中显示以下内容：HelloWord则不能写成：bodyHelloWord/body而应该写成：body<Hello Word>/body注：由于浏览器的不同可能出现浏览的结果不尽相同，什么时候需要用参考字符代替需查有关的资料和实际的显示结果。第二章常用标记符2.1、背景色——BGCOLOR用于设置网页的背景颜色，其值可以是颜色名称或#RRGGBB构成的十六进制色。格式为：BODYBGCOLOR=颜色名称或#RRGGBB常见的颜色有：网页制作教程11色彩名称十六进制值色彩名称十六进制值BLACK#000000BLUE#0000FFPURPLE(紫色)#800080RED#FF0000GRAY(灰色)#808080SILVER(银色)#C0C0C0WHITE#FFFFFFGREEN#008000TEAL(茶色)#008080YELLOW#FFFF002.2、背景图案——BACKGROUND指定网页的背景图案；格式：BODYBACKGROUND=“图像的路径及文件名”2.3、字符和超级链接的颜色lTEXT设置正文的颜色；lLINK设置未被访问过的链接的颜色；lVLINK设置访问过的链接的颜色；lALINK设置当前被选定的连接的颜色；网页制作教程12例：HTMLHEADTITLE颜色控制测试/TITLE/HEADBODYBGCOLOR=TEALTEXT=BLUELINK=BLACKVLINK=PURPLEALINK=RED文本颜色控制BRAHREF=搜狐网/ABRBRAHREF=新浪网/ABRBRAHREF=世纪网/ABR/BODY/HTML2.4、字符式样常用的字符式样的标记符有：粗体B/B、斜体I/I、下划线U/U网页制作教程13例：BODY正常文本显示PB粗体文本显示/BPI斜体文本显示/IPU下划线效果显示/UP/BODY2.5、FONT标记符FONT用于控制字符的颜色、大小、字体的标记符；其有3个属性：SIZE、FACE和COLORlSIZE：用于控制字符的大小，即字号；其值为1-7的整数；也可以用+、-号来指定相对字号。默认值为3。lCOLOR：控制字符的颜色；用法同BODY的TEXT属性；FACE：控制字符的显示字体；格式为：FONTFACE=”字体1，字体2，……”，默认为宋体；网页制作教程14例：HTMLHEADTITLEFONT标记符的使用/TITLE/HEADBODYTEXT=BLACK正常文本显示PFONTSIZE=77号字显示效果/FONTPFONTSIZE=+2比正常字号大2的显示效果/FONTPFONTCOLOR=REDFONT标记COLOR属性的控制效果/FONTPFONTFACE=隶书FACE属性显示字体的效果/FONTPFONTFACE=幼圆SIZE=5COLOR=TEALFONT的整体效果/FONT/BODY/HTML网页制作教程152.6、标题式样——Hn/Hn用于标识文档中的标题和副标题，n值是1-6的整数，其值越大字号越小。例：HTMLHEADTITLE标题式样控制/TITLE/HEADBODYH1一级标题显示/H1H2二级标题显示/H2H3三级标题显示/H3H4四级标题显示/H4H5五级标题显示/H5H6六级标题显示/H6/BODY/HTML网页制作教程162.7、强制换行标记——BR用于行尾换行，行与行之间不留空行；也可用于产生空行。2.8、强制换段标记符——P/P用于段末，定义一个新段落的开始。可省略结束标记。两段之间有一个空行。可看成是一个br加上一个空行。2.9、添加水平线——HRSIZE：控制水平线的粗细程度；以像素为单位；WIDTH:控制水平线的长度；可以用固定的长度值也可以用占窗口的百分比；COLOR：控制水平线的颜色；2.10、ALIGN属性：用于设置段落的对齐方式：RIGHT、LEFT、CENTER和JUSTIFY（两端对齐）；可用于的标记符有：P/P、HR、Hn及DIV/DIV(分区显示标记符）。六、格式的嵌套格式的嵌套即：考虑不同的格式设置作用于同一段内容时HTML的处理方式。通常的原则是：网页制作教程17（1）如果所设置的格式是相容的，则取格式的叠加效果。如：为一段文字同时设置了粗体和斜体格式，则该段内容以粗斜体显示；（2）如果所设置的格式是冲突的，则取最近样式符的修饰结果。如：在BODY标记符中设置了正文的颜色，但在正文中可以用FONT标记符更改特定文字的颜色。例：HTMLHEADTITLE格式嵌套/TITLE/HEADBODYTEXT=BLUEdivalign=center全文居中、蓝色字体显示PALIGN=LEFT本行对齐方式已改变/PB粗体显示I粗斜体显示/I粗体显示/BPFONTCOLOR=RED改变文字颜色/FONT/div/BODY/HTML网页制作教程18第二章使用图像第一节WEB常用图像格式Web页常用图片格式有：GIF、JPEG、PNG及一些矢量格式。1、GIF格式（图形交换格式）最适合于线条图（如含有最多256色的剪切画）及使用的块纯色图片。GIF使用无损压缩；当保存时可以决定是否保留图片的透明区域。2、JPEG格式（联合图形专家组图片格式）：使用有损压缩，压缩率很高。3、PNG格式（可移植的网络图形格式）：适应于任何类型、任何颜色深度的图片。采用无损压缩。不是很流行。4、矢量格式：常见的如：MacromediaFlash；要求浏览器有插件才能工作。第二节插入图像一、IMG标记符及基本属性：IMG有两个基本属性：SRC和ALT。SRC：指定图像的相关路径及文件名。ALT：指定当图片在浏览器中不能正确显示时显示的说明文本。例：HTMLHEADTITLE插入图像/TITLEHEADBODY网页制作教程19下面插入一个图像，当浏览器不能显示该图像，或下载较慢时，将显示“Thisisapicture”IMGSRC=WINLOGO.GIFALT=Thisisapicture.BODY/HTML二、图像布局：1、指定图像的高和宽WIDTH：指定宽度HEIGHT：指定高度格式：IMGWIDTH=XHEIGHT=Y其中：X,