第2章-HTML入门(网页制作案例教程)课件

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,单击此处编辑母版标题样式,学习目标：,第2章 HTML入门,认识HTML语言的作用，了解HTML代码的编写特点,掌握查看网页代码、修改网页代码的方法,掌握HTML常用标记及其属性的用法,掌握运用HTML编写网页表格、列表、框架和实现超级链接的方法,掌握HTML实现图片、音频、视频/动画等媒体文件在网页中的插入方法,2.1,HTML,基本概念,HTML,语言是网页制作的基础语言，因为无论使用什么工具制作网页，生成的网页代码都是以,HTML,语言为基础的。,HTML,是,Hyper Text Markup Language,的缩写，意为,超文本标记语言,。,2.1.1 HTML,简介,HTML,与操作系统平台的选择无关，只要有浏览器就可以运行,HTML,文档，显示网页内容。,HTML,使用了一些约定的标记，对网页上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。,使用,HTML,编写代码制作网页文件，是学习制作网页的基础。,2.1.2,标记及其属性,HTML,标记,用来定义网页文件中信息的格式和功能。,浏览器通过解释,HTML,文件内的各种标记并执行相应的功能以实现网页效果的显示。,HTML,标记用,两个尖括号“,”,括起来,，前一个标记是起始标记，后一个标记为结束标记，结束标记以符号“,/”,开头 。,一般是双标记。如,粗体字标记,和,。,2.1.2,标记及其属性,如果一个标记有多个属性，属性和属性之间用,空格,隔开 。,标记在使用时，应注意以下几点：,HTML,标记不区分大小写,使用,“,”,标记,将,HTML,文档中注解内容括起来,各标记可以嵌套，但不能交错。,如, ,是错误的,对于,HTML,文档中错误的标记及其属性，浏览器通常会跳过它，不处理也不显示。,2.1.3,浏览和修改网页,1,浏览网页,双击某网页文件的图标，就可以调出网页浏览器窗口并同时显示该网页内容。,2,修改网页,HTML,在浏览器窗口中,:,“查看”,|“,源文件”,“文件”,|“,保存”,刷新按钮“ ”，更新页面,2.2,创建第一个,HTML,文件,HTML,可以使用任何文本编辑器，如,Windows“,记事本”或“写字板等”进行编辑，代码输入后，,一定要把文件的扩展名保存为“,.htm”,或“,.html”,。,图,2-2,编辑,HTML,文档,图,2-3 IE,显示,HTML,网页内容,2.3.2 HTML,基本结构标记,另外，基本结构标记还有,网页标题标记,。,：,该标记位于,标记中，标记内的文字显示在浏览器的标题栏上。,有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。,2.3.2 HTML,基本结构标记,以下介绍,标记的常用属性：,bgcolor,：设置网页的背景色；,text,：设置非链接的文本色彩；,link,：设置未被访问过的超链接文本的色彩，默认为蓝色；,alink,：设置超链接文本在被访问瞬间的色彩，默认为蓝色；,vlink,：设置已访问过的超链接文本的色彩，默认为蓝色；,background,：设置网页的背景图像；,leftmargin,：设置页面左边的空白边距，单位是像素；,topmargin,：设置页面上方的空白边距，单位是像素。,2.3.2 HTML,基本结构标记,常用的色彩英文名称及十六进制代码如 下表：,2.4.1,文本格式,字体标记说明：,size,:,用于设定字号，即文字的大小，“,size”,属性的有效值范围为,17,，默认值为,3,。在,size,属性值之前可以加上“,+”,和“,-”,符号，用于指定相对于默认字号值的增量或减量。,face,:,用于设定字体名称，例如英文字体的“,Times New Roman”,、“,Arial”,；中文字体的“宋体”、“黑体”、“华文彩云”；,color,:,设定文字颜色，如前所述，各种颜色值可以使用英文颜色名称表示，也可以使用十六进制值表示。,2.4.1,文本格式,例,1,“,字体”设置,编写代码制作如下网页文本效果。,图,2-4,字体及属性设置,2.4.1,文本格式,2,文字修饰标记,HTML,文档允许在要显示的文字两端添加各种文字修饰标记，这些标记及其功能描述如下表 ：,2.4.1,文本格式,例,2,文字修饰标记,制作如图,2-5,所示的多格式网页文本效果 。,图,2-5,字体修饰标记的应用,代码如下：,文字修饰标记,粗体字,斜体字,加下划线,下标字效果,带删除线字体,字体强调效果,2.4.1,文本格式,2.4.1,文本格式,2,特殊字符标记,空格、字符“,”,、“,”,、“,&”,等具有特殊意义，要在网页中显示该些字符也同样要用专门的字符串表示 。,该类字符串标记都必须以“,&”,开头，以“,;”,结束。,2.4.2,段落格式,1,标题标记,：正文的第一级标题标记。,第二、三、四、五、六级标题标记，分别为,、,、,、,和,。,标题级别越高，文字越小。,设置为标题的文字将独占一行。,可以使用,align,属性指定标题文字的对齐方式，属性值有,“,left”,，“,right”,和“,center”,，分别表示左对齐、右对齐和居中对齐，默认值为“,left”,。,标题设置, H1:,一级标题, H2:,二级标题, H3:,三级标题, H4:,四级标题,左对齐, H5:,五级标题,居中对齐, H6:,六级标题,右对齐,2.4.2,段落格式,代码如下：,2.4.2,段落格式,2.,分段标记,：段落标记。它的作用是将其内的文字另起一段显示。,通常可以省略。,段与段之间有一个空行。,可以使用,align,属性指定段落的对齐方式，使用方法同上。,3,换行标记,：是换行标记。表示以后的内容移到下一行。,它是单标记，没有,。,2.4.2,段落格式,4.,水平线标记,标记是一条水平线，是单标记。,可以使用“,align”,属性设置对齐方式；“,color”,属性设置水平线颜色；“,size”,属性设置水平线粗细，以像素为单位，默认值为,2,。,使用“,width”,属性可设置线段长度，可以是以像素为单位的绝对值，也可以一个百分比的相对值，如“,width=50%”,表示相对于当前窗口,50%,的宽度。,早发白帝城,早发白帝城,作者：李白,朝辞白帝彩云间，,千里江陵一日还。,两岸猿声啼不住，,轻舟已过万重山。,2.4.2 段落格式,代码如下：,2.4.2,段落格式,5.,定位标记,标记用来设置文字、图像、表格的摆放位置。,使用“,align”,属性可设置,对中元素的对齐方式。,6.,列表标记,是有序列表标记，其中的列表项用,标记引导文字，显示网页中的这些文字后，文字前会自动加上“,1”,、“,2”,序号。,2.4.2,段落格式,是无序列表标记，其中的列表项用,标记引导文字，显示网页中的这些文字后，文字前会自动加上“, ”,序号。,无序列表的结构如下所示：,第一项,第二项,第三项,2.4.2,段落格式,有序列表和无序列表的,标记可省。,有序列表和无序列表都允许自身嵌套或相互嵌套 。,例,5,有序列表制作，该基础上修改成无序列表,图,2-8,有序列表,2-9,无序列表,2.4.2,段落格式,实现代码：,有序列表,以下是一个有序列表，有,4,个列表项。,网页多媒体的插入,文本的插入,图片的插入,视频及动画的插入,音频的插入,将该例中的“,”,改为“,”,，则为无序列表,2.4.2,段落格式,例,6,嵌套列表,图,2-10,嵌套列表,2.4.2,段落格式,实现代码：,有序列表与无序列表,以下是一个有序列表，有,4,个列表项，其中第,3,项嵌入一个无序列表，也有,4,个列表项。,网页多媒体的插入,文本的插入,图片的插入,视频及动画的插入,2.4.2,段落格式,mp4,视频格式,rm,视频格式,gif,动画格式,flash,动画格式,音频的插入,2.4.3,图像处理,1,图片插入,图像标记,格式为：,src,属性是,图像标记的必需属性，用来指定图像源文件的路径和文件名。网页使用的图片格式可以是,GIF,或,JPEG,。,height,和,width,的属性值为整数数值时，单位为像素，属性值以百分比表示（,1%100%,）时，图片将以相对当前窗口大小的百分比来显示。,2.4.3,图像处理,align,属性有,left,、,right,、,top,、,middle,和,bottom,共,5,种。其中“,top”,设置图像的顶部与文本顶部对齐；“,middle”,设置图像在垂直方向的中部与文本中部对齐；“,bottom”,设置图像的底部与文本的底部对齐。,hspace,属性用来指定图像与浏览器窗口左边界的水平距离；,vspace,属性用来指定图像与窗口上端边界的垂直距离，单位是像素。,alt,属性用来指定图像的替换文字，当图像正在下载或下载未成功时，图像所处的位置即可出现指定的替换文字。,标记没有对应的结束标记,。,2.4.3,图像处理,例,6,图片插入,如图,2-12,所示在网页中插入一蒲公英花地的图片，当在硬盘上删除了该图片文件“,picture.JPG”,后，网页打开的效果如图,2-13,所示。,图,2-11,嵌套列表 图,2-12,图片替代文本,2.4.3,图像处理,实现代码：,图片的插入,2.4.2,图像处理,1,网页背景图片,使用图像做网页背景的代码如下：,做背景的图像不用很大，浏览器会将它“平铺”至整个网页。,例,8,图片背景设置,图,2-13,图片背景设置,2.4.3,图像处理,实现代码：,图像背景设置,网页已设背景图,提示,html,在引用外部文件或文件路径时，文件名可用双引号（,）或单引号（,）括起，也可以不加任何引号直接给出文件名或文件路径。,2.4.4,表格处理,1,表格标记,，一个,标记对定义设置一个表格。,标记有如下属性：,border,：定义表格边框的粗细，单位为像素，如果省略则不带边框；,width,：定义表格的宽度，属性值为像素数或百分数（相对窗口百分比）；,height,：定义表格的高度，属性值为像素数或百分数（相对窗口百分比）；,cellspacing,：定义表项间隙，单位为像素；,cellpadding,：定义表项内部空白，单位为像素。,2.4.4,表格处理,1,表格行标记,，一个,标记对定义表格的一个行。,2,表项标记,，一个,标记对定义一个单元格，单元格内容写在该标记对之间。,在,、,和,标记可使用以下属性改变整个表格或个别行、个别单元格的背景和边框的色彩。,bgcolor,：,设置背景色彩；,background,：设置背景图像；,bordercolor,：边框的色彩。,2.4.4,表格处理,例,9,表格插入,在网页中插入一,3,行,2,列的表格 。,图,2-14,三行二列的表格,2.4.4,表格处理,实现代码：,表格的插入,表项,1,表项,2,表项,3,表项,4,表项,5,表项,6,2.4.5,超级链接,1,超链接标记,格式为：,用于超链接锚点的文字或图像,href,属性用来指定锚点被触发之后所链接到的,URL,。,标记中还可以包含,target,属性，用来指定在哪个窗口打开所链接的目标网页，,target,属性的属性值如下：,_blank,：在新窗口中打开；,_parent,：在上级窗口中打开；,_self,：在当前窗口中打开（默认）；,_top,：在整个浏览器窗口中打开，并删除窗口的所有框架。,图,2-16,链接打开的网页,2.4.5,超级链接,例,10,超级链接,点击网页中“这里”字样实现对“,al.html”,的超级链接。,图,2-15,设置超级链接的网页,2.4.5,超级链接,实现代码：,超级链接,点击,这里,链接到一个图片网页,2.4.5,超级链接,2,路径,的概念,路径的作用,就是定位一个文件的位置，沿着文件夹及子文件夹到达指位置经过的过程就是,路径,。,3,绝对路径,绝对路径是指文件在硬盘上的真正存放路径。,使用绝对路径指定网页的背景图片示例：,2.4.5,超级链接,4,相对路径,相对路径就是相对于自己的目标文件位置。,相对路径的表示中通常使用以下符号：,/,：作为目录的分隔字符。,如：,./,：表示当前文件夹。,如：,./,：表示上一层目录,如：,”,“,2.4.6,音乐及视频、动画处理,音频文件格式有：,mp3,、,wma,、,wav,、,mid,等，,视频、动画文件格式有：,avi,、,rm,、,swf,、,ram,等,1,添加背景音乐,使用,标记,可以在网页中插入背景音乐,标记可以放在,与,内的任何位置。,标记没有结束标记。,“,2.4.6,音乐及视频、动画处理,标记可以通过设置以下属性控制背景音乐的播放：,src,： 指定背景音乐文件的路径。,loop,：设置循环播放的次数。如果没有指定此属性，则只播放一次。如果此属性值设置为,-1,，则不停循环，直到关闭该页面为止。,delay,：设置两次循环间的时间间隔，单位为毫秒。如,如,:,“,2.4.6,音乐及视频、动画处理,2,外部音乐、视频,/,动画链接,网页中链接外部的声音文件与链接其它网页文件相同，如,:,动听的音乐,影视片段,点击网页中“动听的音乐”或“影视片段”浏览器均会调出一个播放器进行播放。,“,2.4.6,音乐及视频、动画处理,2,音乐、视频,/,动画直接嵌入,：,用于在网页中插入视频动画或音频对象。,src,：指定音频、视频动画文件的路径。,width,：设定控制面板的宽度。,high,：设定控制面板的高度。,“,2.4.6,音乐及视频、动画处理,例,11,音乐文件的嵌入,在网中以播放器方式嵌入一音乐文件“,music1.mid”,，并设定播放器宽度为,200,像素。,图,2-17,音乐文件嵌入到网页中,2.4.6,音乐及视频、动画处理,实现代码：,音乐嵌入,2.4.6,音乐及视频、动画处理,在上例基础上，将,换成嵌入视频行，代码如下：,则可实现“,.avi”,视频文件嵌入,2.4.7,网页框架,1,框架集,网页框架集就是把一个网页页面分成几个单独的区域（即窗口），每个区域显示一个独立的网页，该部分可以是一个独立的,HTML,文件。,对于一个有,n,个区域的框架网页来说，每个区域有一个,HTML,文件，整个框架结构也是一个,HTML,文件。,框架集标记：,“,2.4.7,网页框架,标记有以下两个常用属性：,rows,：纵向设置各框架列宽度；,如：,rows=n1,，,n2,，,n3,：,cols,：横向设置各框架行高度。,如：,cols=n1,，,n2,，,n3,：,其中，,n1,，,n2,，,n3,可用像数值表示，也可用占整个页面的百分数表示。,“,2.4.7,网页框架,2,框架,标记用于定义框架，它在,标记之间。,标记有如下属性：,src,：用来链接一个,HTML,文件。,name,：用来给窗口命名。,marginwidth,：用来控制窗口内的内容与窗口左右边缘的间距。,n,为像素个数，默认值为,1,。,marginheight,：用来控制窗口内的内容与窗口上下边缘的间距。,n,为像素个数，默认值为,1,。,scrolling,：用来确定窗口是否加滚动条，值为,yes,、,no,或,auto,。,“,2.4.7,网页框架,例,12,框架集及框架设置,制作如图,2-19,所示网页框架，纵向开设上下两个窗口，各占,40%,和,60%,，下边的窗口横向开设左右两个窗口，各占,25%,和,75%,。分别加载,HTML,文件为,1_1. html,、,1_2. html,、,1_3. html,。,2.4.7,网页框架,实现代码：,框架结构,小结,HTML语言是制作网页的基础语言，是初学者必学的基本知识。掌握HTML的语法将有助于今后的学习理解，也可以更精确的实现页面功能的应用。本章通过各个简明易懂的HTML代码案例的示范，介绍HTML常用标记的用法，包括文本格式控制、图片/表格/音频/视频插入、框架/超链接实现等HTML常用标记的用法。,作业与实验,作业：,1,HTML,代码中路径的作用是什么？绝对路径与相对路径在使用上有什么区别，哪一种方法更适合用于网站中文件的定位。,2,设置插图宽度、表格或单元格宽度时可用像素和百分比两种表示方式，这两种方式有何区别？,作业与实验,实验题：,1.,打开新浪网站“,”,主页，在浏览器窗口中选择“查看”,|“,源文件”菜单命令查看该网页的,HTML,代码文件，并找出其中,、,和,等标记对的位置。,2,编写,HTML,代码，将课本例,1,、例,2,、例,3,和例,4,合并成一个,html,网页文件。,3,参考“,例,9,表格插入”，设计自己的课程表网页，并输入相应课程名称。,作业与实验,4,编写一个能够显示背景图案并能播放背景音乐的网页。,5,用,HTML,编写两网页文件“,tea.html”,和“,pic.html”,，实现以下两图的网页效果。,要求：,（,1,）两网页标题栏须有文字说明；,（,2,）“,tea.html”,文件第一行“茶叶的种类”为一级标题；正文第一段为绿色文字，且首行缩进,2,个文字；,（,3,）“,tea.html”,正文中对茶叶的分类使用嵌套列表实现；分类第一行“绿茶”右边“绿茶图片”字样实现超级链接，链接对象为“,pic.html”,网页文件；,（,4,）“,pic.html”,中插入一张绿茶图片。,作业与实验,本章结束,