网页设计语言HTML

第3章网页设计语言HTMLHTML是网页制作的一种规范 一种标准 本章介绍了用HTML制作网页的各种标记符的设置方法 包括网页数据的编辑与格式化 在网页中使用超链接和插入图片 网页中的表格设计以及表格与文字的混排等 教学重点与难点 在网页中使用超链接与图片的编排列表的使用表格与文字的混排 3 1HTML概述 HTML HyperTextMarkupLanguage 超文本标记语言 几乎所有的网页都是以HTML格式书写的 HTML以标识符来标识 排列各对象 标识符本身以 标识 标识符内的内容称为元素 element 元素代表了标识符的意义 元素是与大小写无关的 用超文本标记语言 HTML 编写的网页文件其实只是很平常 很普通的文本文件 可以用你所熟悉的文字编辑器来编辑它 如Edit Word 写字板 记事本等 但一定要以纯文本方式保存 浏览器只能识别纯文本格式的文件 标记HTML的开始 在文件结束处要有对应的符号 3 2网页数据编辑与格式化 一 创建HTML文档1 用工具软件创建HTML文档用比较完善的工具软件来制作网页 像FronPage2000 Dreamweaver4等2 用编辑工具编写HTML文档EDIT 记事本 写字板 Word等编辑工具可以用来编辑HTML文档 二 标签格式在HTML文件中 重要的文字部分都由 标签 括起来 这样文字就成了特别的文字 而标签本身则以 号标识 标签内的内容称为元素 它代表了标签的意义 如 中南省委宣传部主页括住的文字称为 内容 整个标签称为一个 元件 三 标题格式HTML提供六种标题格式 其所用的标记符为 标题n n 1 6 的字体最大 的字体最小 其属性如下 1 ALIGN LEFT CENTER RIGHT 文字左对齐 LEFT 居中 CENTER 或右对齐 RIGHT 2 ID 指定标记符的ID选择器 3 STYLE 指定标记符的样式表命令 4 CLASS 指定标记符的样式类型 5 LANG 指定标题文字的语种 6 DIR 指定标题文字的方向 7 TITLE 指定标记符的标题 此外 还有一些鼠标操作的属性 四 段落格式1 分段与换行符分段标记符用于将文档划分为段落 标记符为 要将文字强制换行 而不是另起段落 可以用换行标记符BR实现该功能 注意 BR仅单独使用 而非成对出现 2 添加水平线添加水平线的标记符为 与BR类似 HR也不包括结束标记符 3 段落对齐 1 ALIGN属性ALIGN属性用于设置段落的对齐方式 其常见取值有4种 RIGHT 右对齐 LEFT 左对齐 CENTER 居中对齐 JUSTIFY 两端对齐 2 DIV标记符 3 CENTER标记符 4 格式的嵌套 五 文字格式1 字符格式通过表3 1的标记符设置字符格式2 字体大小 字符颜色和字体样式 1 SIZE属性 控制文字的大小 2 COLOR属性 控制文字的颜色 3 FACE属性 指定字体样式 六 列表格式1 有序列表定义有序列表需要使用有序列表标记符 和列表项 Listitem 标记符 语法如下 Listitem1Listitem22 无序列表无序列表标记符 和列表项标记符 3 定义列表定义列表的制作需要3个标记符 定义列表标记符 用来指定定义列表的开头与结尾 定义术语 Definitionterm 标记符 用来指定第一层数据 定义描述标记符 用来指定第二层数据 标记符必须有结束标记 但和标记符的结束标记可以省略 3 3在网页中建立超链接 一 超链接标记符创建一个超链接需要使用 标记符 A是Anchor的首字母 标记符的最基本属性是HREF 用于指定链接到的文件位置 其他属性见教材 二 创建超链接1 指向本地网页的链接 绝对URL2 链接至位于相同文件夹的文件 相对URL方式3 链接至位于不同文件夹的文件4 指向其他网页的链接 如 我要上网易5 页面的特定部分链接6 连接至E mail地址的超链接 3 4在网页中插入图片 一 插入图片用标记符在HTML文件中插入图片 标记符常用的属性见教材 二 图片布局可以使用HEIGHT WIDTH BORDER属性指定图片的高度 宽度以及是否具有框线 1 图片的高度 宽度 如 图片的边框还可以用标记符的SOLID属性设置边框颜色 格式 3 图片的对齐方式图片的对齐是指图片本身在页面中的对齐和图片与文本的对齐 3 5表格设计 一 创建基本表格可以用 标记符创建一个表格 并在它的中间加入标题和需要的数据 表格定义的代码为 具体表格内容 1 表格的标题元素定义了表格的说明 如 在这里输入标题行里的内容标题的属性ALIGN决定了标题的对齐方式 TOP是将标题放在表格的顶部 BOTTOM将标题放在表格的下面 2 行 表头和数据定义一个表格 需从第一行逐级向下 并且按行中单元格的顺序开始定义 行 表头和数据定义的代码为 表头数据 二 表格及文字的对齐与布局1 表格在页面中的对齐利用表格的ALIGN属性 可以将表格显示在页面的左边或右边 如果没有设置这一属性 表格单独显示为页面的一行 在页面的左侧 ALIGN LEFT 将表格按左边对齐 而表格的所有文本显示在表格右侧和页面之间的位置 ALIGN RIGHT 将表格按右边对齐 文本显示在表格的左侧 2 表格内数据的对齐ALIGN属性为单元格数据提供水平对齐方式 该属性有LEFT 左对齐 RIGHT 右对齐 CENTER 居中 3个值 VALIGN属性定义单元格数据的垂直对齐方式 该属性有TOP 顶部对齐 BOTTOM 底部对齐 MIDDLE 中间对齐 3个值 三 设置表格尺寸 设置表格边框尺寸利用的BORDER属性可以设置表格边框的尺寸 它以指定的粗度来显示表格边框 如 2 设置表格尺寸利用的WIDTH和HEIGHT属性可以设置表格尺寸 如 3 设置表元间隙利用标记符的CELLSPACING属性可以设置表元的间隙 如 4 设置表元内部空白利用标记符中的CELLPDDING属性来 以像素为单位来设置它的值 如 四 设置表格的色彩设置表格 行或行中单元的相关颜色 可以在 和标记符里使用BGCOLOR BORDERCOLOR BORDERCOLORLIGHT BORDERCOLORDARK等属性 COLOR的值可以是以十六进制表示的颜色 或者是16种颜色 BLACK WHITE GREEN MAROON OLIVE MAVY PURPLE GRAY RED YELLOW BLUE TEAL LIME AQUA FUCHS