《网页制作案例教程 工业和信息化普通高等教育“十二五”规划教材立项项目 教学课件 ppt 作者 陈建孝 陆锡聪 余晓春 江玉珍 第2章 HTML入门》由会员分享，可在线阅读，更多相关《网页制作案例教程 工业和信息化普通高等教育“十二五”规划教材立项项目 教学课件 ppt 作者 陈建孝 陆锡聪 余晓春 江玉珍 第2章 HTML入门（69页珍藏版）》请在金锄头文库上搜索。
1、学习目标：,第2章 HTML入门,认识HTML语言的作用，了解HTML代码的编写特点 掌握查看网页代码、修改网页代码的方法 掌握HTML常用标记及其属性的用法 掌握运用HTML编写网页表格、列表、框架和实现超级链接的方法 掌握HTML实现图片、音频、视频/动画等媒体文件在网页中的插入方法,2.1 HTML基本概念,HTML语言是网页制作的基础语言，因为无论使用什么工具制作网页，生成的网页代码都是以HTML语言为基础的。 HTML是Hyper Text Markup Language的缩写，意为超文本标记语言。,2.1.1 HTML简介,HTML与操作系统平台的选择无关，只要有浏览器就可以运行H
2、TML文档，显示网页内容。 HTML使用了一些约定的标记，对网页上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。 使用HTML编写代码制作网页文件，是学习制作网页的基础。,2.1.2 标记及其属性,HTML标记用来定义网页文件中信息的格式和功能。 浏览器通过解释HTML文件内的各种标记并执行相应的功能以实现网页效果的显示。 HTML标记用两个尖括号“”括起来，前一个标记是起始标记，后一个标记为结束标记，结束标记以符号“/”开头 。 一般是双标记。如粗体字标记和 。,2.1.2 标记及其属性,某些标记为单标记，只需单独使用就能完整地表达意
3、思。如换行标记。 一些标记有自己的属性，属性细分了标记的功能，属性通常可以赋予具体的属性值 。 如： ,是正文标记,属性值，这里是颜色值(粉红色),bgcolor就是标记的属性，用于设置背景色,2.1.2 标记及其属性,如果一个标记有多个属性，属性和属性之间用空格隔开 。 标记在使用时，应注意以下几点： HTML标记不区分大小写 使用“”标记将HTML文档中注解内容括起来 各标记可以嵌套，但不能交错。 如 是错误的 对于HTML文档中错误的标记及其属性，浏览器通常会跳过它，不处理也不显示。,2.1.3 浏览和修改网页,1浏览网页 双击某网页文件的图标，就可以调出网页浏览器窗口并同时显示该网页内
4、容。 2修改网页HTML 在浏览器窗口中: “查看”|“源文件” “文件”|“保存” 刷新按钮“ ”，更新页面,2.2 创建第一个HTML文件,HTML可以使用任何文本编辑器，如Windows“记事本”或“写字板等”进行编辑，代码输入后，一定要把文件的扩展名保存为“.htm”或“.html”。,图2-2 编辑HTML文档,图2-3 IE显示HTML网页内容,2.3 HTML编码基础,2.3.1 HTML文档的基本架构 HTML文档的基本结构如下： 文件开始标记 文件头信息 文件体信息 文件结束标记,2.3.2 HTML基本结构标记,另外，基本结构标记还有网页标题标记。 ： 该标记位于标记中，标
5、记内的文字显示在浏览器的标题栏上。 有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。,2.3.2 HTML基本结构标记,以下介绍标记的常用属性： bgcolor：设置网页的背景色； text：设置非链接的文本色彩； link：设置未被访问过的超链接文本的色彩，默认为蓝色； alink：设置超链接文本在被访问瞬间的色彩，默认为蓝色； vlink：设置已访问过的超链接文本的色彩，默认为蓝色； background：设置网页的背景图像； leftmargin：设置页面左边的空白边距，单位是像素； topmargin：设置页面上方的空白边距，
6、单位是像素。,2.3.2 HTML基本结构标记,HTML中颜色的表示方法有2种： （1）以定义好的颜色的英文名称，如； （2）以“#”开头的6位十六进制数值表示一种颜色，6位数字分为3组，每组2位，依次表示红、绿、蓝3种颜色的强度。 如 该方法操作灵活性更高，设计者可以调配出自己想要的任何一种颜色。,2.3.2 HTML基本结构标记,常用的色彩英文名称及十六进制代码如 下表：,2.4 HTML常用标记,2.4.1 文本格式 1. 字体标记 和：该标记可用来设置文本的字体、字号和文本颜色等，是HTML文档中常用的标记。 其设置格式为： 文字 ,2.4.1 文本格式,字体标记说明： size: 用
7、于设定字号，即文字的大小，“size”属性的有效值范围为17，默认值为3。在size属性值之前可以加上“+”和“-”符号，用于指定相对于默认字号值的增量或减量。 face: 用于设定字体名称，例如英文字体的“Times New Roman”、“Arial”；中文字体的“宋体”、“黑体”、“华文彩云”； color: 设定文字颜色，如前所述，各种颜色值可以使用英文颜色名称表示，也可以使用十六进制值表示。,2.4.1 文本格式,例1“字体”设置编写代码制作如下网页文本效果。,图2-4 字体及属性设置,代码如下： 字体设置 1号字体 2号字体 3号字色红体 4号蓝色字体 5号橙色字体 6号黄色黑体字
8、体 7号绿色隶书字体 +2号紫色宋体字体 ,2.4.1 文本格式,2.4.1 文本格式,2文字修饰标记 HTML文档允许在要显示的文字两端添加各种文字修饰标记，这些标记及其功能描述如下表 ：,2.4.1 文本格式,例2文字修饰标记制作如图2-5所示的多格式网页文本效果 。,图2-5字体修饰标记的应用,代码如下： 文字修饰标记 粗体字 斜体字 加下划线 下标字效果 带删除线字体 字体强调效果 ,2.4.1 文本格式,2.4.1 文本格式,2特殊字符标记 空格、字符“”、“”、“”结束。,2.4.2 段落格式,1标题标记 ：正文的第一级标题标记。 第二、三、四、五、六级标题标记，分别为、和。 标题
9、级别越高，文字越小。 设置为标题的文字将独占一行。 可以使用align属性指定标题文字的对齐方式，属性值有“left”，“right”和“center”，分别表示左对齐、右对齐和居中对齐，默认值为“left”。,2.4.2 段落格式,例3 “标题”设置示例将各级标题的文本加入到网页中，并设置其中四、五、六级标题的对齐方式分别为：左对齐、居中对齐和右对齐。,图2-6 各级标题及各种对齐效果, 标题设置 H1: 一级标题 H2: 二级标题 H3: 三级标题 H4: 四级标题,左对齐 H5: 五级标题,居中对齐 H6: 六级标题,右对齐 ,2.4.2 段落格式,代码如下：,2.4.2 段落格式,2.
10、 分段标记 ：段落标记。它的作用是将其内的文字另起一段显示。通常可以省略。 段与段之间有一个空行。 可以使用align属性指定段落的对齐方式，使用方法同上。 3换行标记 ：是换行标记。表示以后的内容移到下一行。 它是单标记，没有。,2.4.2 段落格式,4. 水平线标记 标记是一条水平线，是单标记。 可以使用“align”属性设置对齐方式；“color”属性设置水平线颜色；“size”属性设置水平线粗细，以像素为单位，默认值为2。 使用“width”属性可设置线段长度，可以是以像素为单位的绝对值，也可以一个百分比的相对值，如“width=50%”表示相对于当前窗口50%的宽度。,2.4.2 段
11、落格式,例4 分段、换行及水平线标记 。,图2-7分段、换行及水平线标记的使用, 早发白帝城 早发白帝城 作者：李白 朝辞白帝彩云间， 千里江陵一日还。 两岸猿声啼不住， 轻舟已过万重山。 ,2.4.2 段落格式,代码如下：,2.4.2 段落格式,5. 定位标记 标记用来设置文字、图像、表格的摆放位置。 使用“align”属性可设置对中元素的对齐方式。 6. 列表标记 是有序列表标记，其中的列表项用标记引导文字，显示网页中的这些文字后，文字前会自动加上“1”、“2”序号。,2.4.2 段落格式,有序列表的结构如下所示： 第一项 第二项 第三项 ,2.4.2 段落格式,是无序列表标记，其中的列表
12、项用标记引导文字，显示网页中的这些文字后，文字前会自动加上“ ”序号。 无序列表的结构如下所示： 第一项 第二项 第三项 ,2.4.2 段落格式,有序列表和无序列表的标记可省。 有序列表和无序列表都允许自身嵌套或相互嵌套 。 例5 有序列表制作，该基础上修改成无序列表,图2-8 有序列表 2-9 无序列表,2.4.2 段落格式,实现代码：, 有序列表 以下是一个有序列表，有4个列表项。 网页多媒体的插入 文本的插入 图片的插入 视频及动画的插入 音频的插入 ,将该例中的“” 改为“”，则为无序列表,2.4.2 段落格式,例6 嵌套列表,图2-10 嵌套列表,2.4.2 段落格式,实现代码：,
13、有序列表与无序列表 以下是一个有序列表，有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属
14、性有left、right、top、middle和bottom共5种。其中“top”设置图像的顶部与文本顶部对齐；“middle”设置图像在垂直方向的中部与文本中部对齐；“bottom”设置图像的底部与文本的底部对齐。 hspace属性用来指定图像与浏览器窗口左边界的水平距离；vspace属性用来指定图像与窗口上端边界的垂直距离，单位是像素。 alt属性用来指定图像的替换文字，当图像正在下载或下载未成功时，图像所处的位置即可出现指定的替换文字。 标记没有对应的结束标记。,2.4.3 图像处理,例6 图片插入如图2-12所示在网页中插入一蒲公英花地的图片，当在硬盘上删除了该图片文件“picture
15、.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 表格标记，一个标记对定义设置一个表格。,标记有如下属性： b
16、order：定义表格边框的粗细，单位为像素，如果省略则不带边框； width：定义表格的宽度，属性值为像素数或百分数（相对窗口百分比）； height：定义表格的高度，属性值为像素数或百分数（相对窗口百分比）； cellspacing：定义表项间隙，单位为像素； cellpadding：定义表项内部空白，单位为像素。,2.4.4 表格处理,1 表格行标记，一个标记对定义表格的一个行。,2 表项标记，一个标记对定义一个单元格，单元格内容写在该标记对之间。,在、和标记可使用以下属性改变整个表格或个别行、个别单元格的背景和边框的色彩。 bgcolor：设置背景色彩； background：设置背景图
