项目HTML语言

项目3HTML语言2任务5表单标记任务4超链接标记任务3表格标记任务2页面排版标记任务1认识HTML语言项目3HTML语言3任务分析该任务通过一个简单的网页实例来认识HTML文件的基本结构和HTML语言的基本语法。网页背景颜色为深红色，文本颜色为白色。任务1认识HTML语言4一．什么是HTML语言HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，通常它的扩展名为“.html”或“.htm”。任务1认识HTML语言5二．HTML基本语法任务1认识HTML语言HTML语言是通过各种标记来标识文档的结构和文字、图形、动画、声音、表格、链接等信息的。HTML的标记总是放在一对尖括号中，它有两种形式：单标记和双标记。1．单标记单独使用就可以表达语意的标记。语法：标记如，换行标记br。2．双标记双标记必需成对出现，由“始标记”和“尾标记”两部分组成。“尾标记”是在“始标记”前加一个斜杠（/）。语法：标记……/标记如，段落标记p……/p6二．HTML基本语法任务1认识HTML语言3.标记属性为了使呈现的页面更加美观，除了使用标记，还可以使用标记的属性对标记之间的内容进行修饰，其语法为：标记属性1=值属性2=值属性3=值……如，bodybgcolor=#880000text=#FFFFFF属性是可以省略的，省略时即取默认值。各个属性之间无先后次序，但是各属性间必须用空格隔开，属性的值用英文半角的双引号括起来。7二．HTML基本语法任务1认识HTML语言头部主体HTML文档htmlheadtitle网页的标题/title……/headbody网页正文部分/body/html头部主体HTML文档4.文档的结构HTML文档通常由包含在html标记和/html标记之间的头部和正文两大部分构成，基本结构如图：8二．HTML基本语法任务1认识HTML语言①html……/html表示文档的开头和结尾，在文档的最外层，文档中的所有信息都是都包含在这一对标签中。②head……/head是html文档的头部，这一对标签中的内容用于说明网页文件的标题(title……/title)和其他公共的属性，是不显示在浏览器窗口中的。③body……/body这对标记之间的内容是浏览器窗口中显示的内容。文档结构的几点说明：9二．HTML基本语法任务1认识HTML语言5.文档的属性body标记对应网页的主体部分，其标记属性就是页面的属性。如bgcolor、background、text等。bgcolor=颜色设置文档背景色background=图像文件的路径/图像文件的名字设置文档背景图像文件text=颜色设置文档文字默认颜色在HTML中，色彩的表示方法有两种：一种是用英文单词来表示的，如“red”、“blue”等几种常用颜色。另一种是用16进制的红（R）、绿（G）、蓝（B），即数字0-9和字母A-F来表示的，如“#FF0000”（红色）。10三.任务实施任务1认识HTML语言2．打开Windows记事本程序。输入如下HTML语句：htmlheadtitle例3-1/title/headbodybgcolor=#880000text=#FFFFFF这是一个简单的例子/body/html1．使用“我的电脑”或“资源管理器”在我们已经创建的example站点（mwmw文件夹），创建一个新文件夹，命名为exam。11三.任务实施任务1认识HTML语言4．打开mwmw文件夹中的exam文件夹，双击ex01.html网页文件，在浏览器中可以观察到其效果。3．保存此文件到exam文件夹中，命名为ex01.html。12任务1认识HTML语言网页的预览效果返回13任务分析该任务结合“优秀员工评比的通知”网页，介绍页面标记的使用方法。任务2页面排版标记14一．标题标记任务2页面排版标记格式：h#……/h#其中，“#”的取值范围为1-6。取1时为一级标题，字体最大；取6时为六级标题，字体最小。作用：设置文档的各级标题。常用属性：align，用于定义标题的对齐方式，默认值为“左对齐”，属性值如表所示。属性值功能示例left左对齐h2align=left二级标题左对齐/h2center居中对齐h2align=center二级标题居中对齐/h2right右对齐h2align=rigth二级标题右对齐/h215二．版面格式标记任务2页面排版标记1．说明标记格式：！——说明的文字——作用：为文档加上说明，但是不显示在网页页面中。2．段落标记格式：p或者p……/p作用：使标记后的内容另起一段，并加一个空白行。常用属性：align，用于定义段落的对齐方式。（取值方式如上表）3．换行标记格式：br作用：使标记后的内容换一行显示，但是不换段落。16二．版面格式标记任务2页面排版标记4．字体标记格式：font……/font作用：设置标记间内容的字体、大小、颜色等格式。常用属性：如表所示。常用属性功能示例face字体fontface=宋体文本/fontsize大小，取值范围为1-7fontsize=1文本/fontcolor颜色fontcolor=red文本/fonttitle当鼠标指向文本时，出现的信息fonttitle=标记文本/font17二．版面格式标记任务2页面排版标记5．字体修饰标记作用：设置标记间内容的粗体、斜体、下划线等特殊效果，标记功能示例b……/bstrong……/strong粗体b字体加粗显示/bi……/i斜体i字体斜体显示/iu……/u下划线u字体加下划线显示/us……/sstrike……/strike删除线strike字体加删除线显示/strikebig……/big字体加大big字体加大显示/bigsmall……/small字体缩小small字体缩小显示/smallsup……/sup上标sup字体变上标显示/supsub……/sub下标sub字体变下标显示/subem……/em强调em字体强调显示/em字体修饰标记的功能如表所示。18二．版面格式标记任务2页面排版标记6．文本居中对齐标记格式：center……/center作用：设置居中对齐方式。功能与p等标记中的属性align=center相同。19二．版面格式标记任务2页面排版标记7．水平线标记格式：hr作用：在文档中插入一根水平线。常用属性：如表所示。常用属性功能示例align水平线对齐方式若省略属性值，则默认为居中对齐hralign=rightcolor水平线的颜色hrcolor=#666666size水平线的宽度，单位默认为像素hrsize=5width水平线的长度，单位为像素或百分比(百分比指的是占页面宽度的比例)hrwidth=95%noshade水平线无阴影hrnoshadecolor=red20二．版面格式标记任务2页面排版标记8．特殊符号作用：在文档中显示特殊符号。各种特殊符号的字符名称如表所示。字符名称显示结果 ；空格<；小于号（）>；大于号（）"；双引号（）×；乘号（×）©；版权所有（©）®；已注册（®）21三．项目符号标记任务2页面排版标记有序列表：它的主要标记有ol……/ol和li……/li。其中，标记ol……/ol放在外层，标记li……/li放在内层用于区分每个列表项。列表效果如图所示。格式：ulli列表项1/li……li列表项n/li/ul作用：列表分为有序列表和无序列表两类。22三．项目符号标记任务2页面排版标记无序列表:即项目符号，它的主要标记有ul……/ul和li……/li。其中，标记ul……/ul放在外层，标记li……/li放在内层用于区分每个列表项。列表效果如图所示。格式：ulli列表项1/li……li列表项n/li/ul作用：列表分为有序列表和无序列表两类。23三．项目符号标记任务2页面排版标记属性值功能decimal数字（默认值）lower-roman小写罗马数字upper-roman大写罗马数字upper-alpha小写字母upper-alpha大写字母项目符号ol标记的属性项目符号ul标记的属性属性值功能disc实心圆点（默认值）circle空心圆square实心小方块24四．图像标记任务2页面排版标记格式：img作用：在文档中插入图像文件，其中插入的图像文件的格式可以是：.JPG、.GIF和.PNG。常用属性：如表显示。常用属性功能示例src指定插入图像文件的路径和名称imgsrc=imgage/1.jpgalign对齐方式，属性值：left、right、top、middle、bottom。imgsrc=imgage/1.jpgleft=middlealt当鼠标指向图像时，显示的文本。imgsrc=imgage/1.jpgleft=middlealt=文本width指定图像的宽度，单位为像素。imgsrc=imgage/1.jpgwidth=200height=150border=2height指定图像的高度，单位为像素。border指定图像的边框，默认为0，即无边框。hspace指定图像左右两边与其他对象之间的距离，单位为像素。imgsrc=imgage/1.jpghspace=15vspace=15vspace指定图像上下两端与其他对象之间的距离，单位为像素。25五.任务实施任务2页面排版标记1．运行DreamweaverCS3，打开站点example。2．新建一个文件夹article，在此文件夹中新建一个空白的网页文件notice.html。切换到代码视图。3．删除其中原有的语句，输入语句。4．认识并分析网页文件中所使用的标记及其属性。5．保存此网页文件，并浏览。26任务2页面排版标记网页的预览效果返回27任务分析任务2中的通知网页结构过于单调，在网页中增加一些相关元素后就会有较好的显示效果。为了使得这些增加的内容和原先的通知内容有机结合、统一布局，使用表格是一种可取的方法。任务3表格标记28一．几种表格标记任务3表格标记表格中的主要标记有五种：1．表格标记格式：table……/table作用：标志表格的开始和结束。常用属性：如表所示。常用属性功能Width表格宽度，单位为像素或百分比。Height表格高度，单位为像素或百分比。align表格的对齐方式，属性值：left、right、center，默认为左对齐。border表格边框的宽度，单位为像素默认值为0，即无边框。bordercolor表格边框颜色。bgcolor表格的背景颜色。background表格的背景图像。cellspacing单元格与单元格之间的间距，单位为像素。cellpadding单元格内容与单元格边框的距离，单位为像素29一．几种表格标记任务3表格标记表格中的主要标记有五种：2．表格标题标记格式：caption……/caption作用：用于设置表格的标题，该标记可省略。30一．几种表格标记任务3表格标记表格中的主要标记有五种：3．行标记格式：tr……/tr作用：表格中的一行。常用属性：如表所示。常用属性功能align行中内容的水平对齐方式，属性值：left、right、center，默认为左对齐。valign行中内容的垂直对齐方式，属性值：top、mid