html网页制作教程课件,第2章 HTML入门(网页制作案例教程课件).ppt

第2章 HTML入门 认识HTML语言的作用，了解HTML代码的编写特点 掌握查看网页代码、修改网页代码的方法 掌握HTML常用标记及其属性的用法 掌握运用HTML编写网页表格、列表、框架和实现超级链接的方法 掌握HTML实现图片、音频、视频/动画等媒体文件在网页中的插入方法 2.1 HTML基本概念 HTML语言是网页制作的基础语言，因为无论使用什么工具制作网页，生成的网页代码都是以HTML语言为基础的。 HTML是Hyper Text Markup Language的缩写，意为超文本标记语言。 HTML与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。 HTML使用了一些约定的标记，对网页上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。 使用HTML编写代码制作网页文件，是学习制作网页的基础。 2.2 创建第一个HTML文件 HTML可以使用任何文本编辑器，如Windows“记事本”或“写字板等”进行编辑，代码输入后，一定要把文件的扩展名保存为“.htm”或“.html”。 2.3 HTML编码基础 2.3.1 HTML文档的基本架构 HTML文档的基本结构如下： ——文件开始标记

文件头信息 文件体信息 ——文件结束标记 2.3.2 HTML基本结构标记 另外，基本结构标记还有网页标题标记。 ……： 该标记位于……标记中，标记内的文字显示在浏览器的标题栏上。 有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。 2.3.2 HTML基本结构标记 以下介绍标记的常用属性： bgcolor：设置网页的背景色； text：设置非链接的文本色彩； link：设置未被访问过的超链接文本的色彩，默认为蓝色； alink：设置超链接文本在被访问瞬间的色彩，默认为蓝色； vlink：设置已访问过的超链接文本的色彩，默认为蓝色； background：设置网页的背景图像； leftmargin：设置页面左边的空白边距，单位是像素； topmargin：设置页面上方的空白边距，单位是像素。 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: 用于设定字号，即文字的大小，“size”属性的有效值范围为1~7，默认值为3。在size属性值之前可以加上“+”和“-”符号，用于指定相对于默认字号值的增量或减量。 face: 用于设定字体名称，例如英文字体的“Times New Roman”、“Arial”；中文字体的“宋体”、“黑体”、“华文彩云”； color: 设定文字颜色，如前所述，各种颜色值可以使用英文颜色名称表示，也可以使用十六进制值表示。 2.4.1 文本格式 [例1]“字体”设置——编写代码制作如下网页文本效果。 2.4.1 文本格式 2.4.1 文本格式 2．文字修饰标记 HTML文档允许在要显示的文字两端添加各种文字修饰标记，这些标记及其功能描述如下表 ： 2.4.1 文本格式 [例2]文字修饰标记——制作如图2-5所示的多格式网页文本效果 。 2.4.1 文本格式 2.4.1 文本格式 2．特殊字符标记 空格、字符“”、“”