1、能力目标:能力目标:(1)利用HTML语言制作简单的网页(2)修改HTML代码实现对网页的修改。知识目标:知识目标:(1)HTML语言的基本结构。(2)HTML语言中标识语句的格式和用法。(3)HTML语言中标识语句的用法。任务一任务一 学习学习HTMLHTML标记语言标记语言HTML语言文件结构语言文件结构网页标题网页内容任务一任务一 学习学习HTMLHTML标记语言标记语言HTML语言文件结构语言文件结构HTML语言,HTML(HyperTextMarkupLanguage)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。设计HTML语言的
2、目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。任务一任务一 学习学习HTMLHTML标记语言标记语言HTML语言的基本语法结
3、构语言的基本语法结构要控制的元素其中为首标签,为尾标签。标签还可以设置属性,属性写在首标签中,尾标签不变,其语法为:要控制的元素任务一任务一 学习学习HTMLHTML标记语言标记语言HTML语言的基本标签语言的基本标签1.分段控制标签为分段控制标签,它可以单独使用也可成对使用,其作用是留一空白行。有一个对齐方式属性align,其属性可选值为right、left、center。默认值:align=left,如:商品分类介绍。2.居中对齐标签为居中对齐标签,它是一个双标签,其作用是进行居中控制。3.水平分隔线标签为水平分隔线标签,它是一个单标签,其作用是在标签所在位置上插入一条水平线。的属性有al
4、ign、size、width、color和noshade。align:设定水平线摆放位置,其属性可选值为right、left、center。默认值:align=center。size:设定水平线的粗细,以像素作单位,默认值:2。width:设定水平线长度,以像素作单位,可以是绝对或相对值,默认值:100。color:(只适用于IE浏览器)设定线条颜色,默认值:黑色。例如#0000FF代表蓝色,也可以采用颜色的名称:color=blue。Noshade:设定水平线不显示3D阴影,若无noshade属性则有3D阴影。任务一任务一 学习学习HTMLHTML标记语言标记语言HTML语言的基本标签语言的
5、基本标签4.设定网页背景和字体颜色设定网页背景和字体颜色主要是设置标签中的属性,格式为:其中bgcolor设置网页背景颜色,background设置网页背景图片,text设置网页中文字颜色。5.标题文字标签为标题文字标签,它是一个双标签,其作用是设置网页中的标题文字。标签一共6级,和之间的文字是第1级标题,和之间的文字是第6级标题,由到逐渐变小。每个标题标记所标示的字句将独占一行且上下留一空白行。有一个属性align,其属性可选值为:right、left、center。默认值:align=left。6.文字格式控制标签为文字格式控制标签,它是一个双标签,其作用是设置文字的字体、大小和颜色。的属
6、性有face、size、color。face:设定文字字体,其属性为字体名称。size:设定文字大小,取值l7,默认值为3。也可用“+”“-”来设置相对值。color:设定文字颜色。可以用#nnnnnn,也可以采用颜色的名称。任务一任务一 学习学习HTMLHTML标记语言标记语言HTML语言的基本标签语言的基本标签7网页中插入图形向网页中插入图形需要用到标签,它是一个单标签。的属性有src、alt、border、align、height/width等。src:设定图形路径名,此属性不可少。alt:设定图形的替代文字。border:设定图形的边框。默认或取0时为无边框。align:设定图形的对齐
7、方式,其属性值有:top、bottom、middle、right、left等。height/width:设定图形高度宽度8.超链接标签超链接标签为,它是一个双标签。格式为:超链接名称的主要属性有href和target。href:设定链接位置,此属性不可少。任务一任务一 学习学习HTMLHTML标记语言标记语言HTML语言的基本标签语言的基本标签9表格标签表格的建立由四个标签组成:、。(1)为表格标签,属性有border、width/height、align、bgcolor/background、cellspacing、cellpadding等。其中border表示边框大小;align表示表格的
8、位置,其属性可选值:left、center、right;width/height表示表格宽度/高度,属性值可以是数值也可以是百分比;bgcolor/background表示表格的背景颜色/背景图像;cellspacing表示单元格之间的距离;cellpadding表示单元格边框与单元格内容之间的距离。(2)为表的行标签,定义表格的一行,属性有height、bgcolor、align/valign等。其中height表示行的高度;bgcolor表示行的背景颜色;align/valign表示行的文字水平/垂直对齐方式,align的属性可选值为left、center、fight,valign其属性可
9、选值有:top、middle、bottom。(3)为表头标签,定义表格的表头,字体以粗体显示,可省略,属性同。(4)为单元格标签,定义表格的单元格,属性有width、bgcolorbackground、align/valign、rowspan/colspan等。其中width表示单元格宽度;bgcolor/background表示单元格的背景颜色/背景图像;Align/valign表示单元格的文字水平/垂直对齐方式,align的属性可选值为left、center、right,valign的属性可选值为top、middle、bottom;rowspan/colspan表示单元格所跨行数/列数,默认值为1。任务二任务二 应用应用 HTML HTML语言制作简单网页语言制作简单网页