第9章返璞归真的HTML

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,9,章 返璞归真的,HTML,9.1,任务一：编写第一个网页,9.2,任务二：添加各种元素,9.3,小结,9.1,任务一：编写第一个网页,，,，,，,都是,HTML,语言的结构标识，通常都是“双向标识”，书写格式一般为,内容,。以上的,4,个标识就可以构成一个最简单的网页了。,表示这个文件是,HTML,格式的文件，也就是网页的文件。整个,HTML,文件的所有内容都应该包含在一对,标识之间。也就是说，,HTML,文件必须以,开始，以,结束。,下一页,9.1,任务一：编写第一个网页,和,标识表示一个网页的头部。在一对,与,代码之间，一般要有一对,与,标识，写在,与,中间的内容就是显示在浏览器标题栏中的文字。,和,表示的是网页的主要内容。一个网页的头部内容放在,中，而具体内容就要写在,中了。,返 回,上一页,9.2,任务二：添加各种元素,9.2.1,添加文字,（,1,）打开上面的网页，单击鼠标右键，从打开文件的子菜单中选择记事本。,（,2,）在页面中添加文字很简单，只要将想要添加的文字输入到,与,标识之间就可以了，将一段话输入到,与,之间，并且分好段，如,图,9-5,所示。,下一页,9.2,任务二：添加各种元素,（,3,）在文本的开头和结尾处加上,这对标识，如,图,9-7,所示。保存后，再到浏览器中看一下，如,图,9-8,所示。,（,4,）在记事本文件中将这一对标识删除，在每个需要换行的段尾处加入,标识，如,图,9-9,所示。,下一页,上一页,9.2,任务二：添加各种元素,9.2.2,文字大小、颜色和样式,（,1,）下面学习一下设置文字样式的各种,HTML,标识。,（,2,）我们还可以为文字添加其他效果，如在文字前面加上,标识，可以使文字加粗显示，如,图,9-17,和,图,9-18,所示。,（,3,）如果想让文字居中显示，还可以在标识外分别加上,与,标识。,下一页,上一页,9.2,任务二：添加各种元素,9.2.3,设置页面的标题,与用,Dreamweaver,制作网页一样，应该为每个页面设置标题，也就是在浏览器栏标题中显示的文字，用手写,HTML,代码编写网页时，这项功能很容易就可以实现。,只要在,标识中，输入这个网页的标题就可以了。我们输入“友情链接”，如,图,9-21,所示。将这个文件保存一下，到浏览器中看一下标题栏的文字变了没有，如,图,9-22,所示。,下一页,上一页,9.2,任务二：添加各种元素,9.2.4,设置页面的背景颜色和背景图像,（,1,）在,的尖括号中加入一句代码“,bgcolor,=yellow”,，如,图,9-23,所示。,（,2,）再来看一下用图像作为背景的代码编写方法。将刚才添加的“,bgcolor,=yellow”,背景颜色的代码改为“,background=,back.gif,”,，如,图,9-25,和,图,9-26,所示。,下一页,上一页,9.2,任务二：添加各种元素,9.2.5,插入图像,现在这个页面有文字，有背景图像了。不过这样还不能吸引人，要是再插入几张图像就更好了。,（,1,）将文字的对齐方式标识,和,去掉，在,标识之后、文字之前的位置输入代码,，如,图,9-27,所示。,（,2,）先到浏览器中查看一下，再来看看代码的含义。,（,3,）现在这个图像和第一行文字单独占据一行。,下一页,上一页,9.2,任务二：添加各种元素,9.2.6,插入表格,（,1,）打开一个新的记事本，在其中插入下面的代码。,（,2,）在,和,之间输入“友情链接”，为网页设置标题。,（,3,）将下面的这段代码加到,之间，如,图,9-33,所示。,（,4,）在单元格中添加一些内容，加入的内容如,图,9-35,所示。,下一页,上一页,9.2,任务二：添加各种元素,（,5,）在,标识的尖括号中加入,这句代码，如,图,9-37,所示。,（,6,）再为表格添加两行。,中间添加一个,就为这一行添加一列，如,图,9-41,所示。,（,7,）在第一行中，表格没有跨多列，这使得表格不协调，需要将其改正过来。,下一页,上一页,9.2,任务二：添加各种元素,9.2.7,设置文字和图像链接,为文字和图像设置超级链接是网页制作的核心内容。,（,1,）在,HTML,语言中，超级链接的标识是,链接文字或图像,（,2,）这样还不够，还记得在,Dreamweaver,中，链接文件在新窗口中打开则需要设置一个,Target=blank,属性，意思是打开一个空白页面装载打开的页面。,下一页,上一页,9.2,任务二：添加各种元素,（,3,）上面就是为文字添加超级链接的代码编写方法。下面再来看一下为图像添加超级链接的方法。,（,4,）用,这对标识将图像信息包含在其中，如,图,9-51,所示。,添加了超级链接的图像周围出现一个蓝色的边框，这是因为没设置图像的,border,属性的缘故。,返 回,上一页,9.3,小结,在这一章，我们学会了,HTML,的一些简单用法。从,HTML,的整个基本结构开始，陆续介绍了在网页中插入文字并为文字添加各种效果，还有插入图像并改变了图像的一些基本属性，当我们学习怎样插入表格后，将前面制作的内容插入到了表格中，并设置了表格的属性。,尤其要注意的是表格行列的划分，在表格的拆分和合并中十分常用。当我们将文字和图像链接插入后，一个友情链接的网页就这样制作完成了。,返 回,图,9-5,记事本中的内容,返 回,图,9-7,加入,的内容,返 回,图,9-8,保持格式换行,返 回,假如这行文字很长，那它不会因为浏览器的大小而自动换行,图,9-9,加入,的内容,返 回,图,9-17,加入,和,的内容,返 回,图,9-18,斜体和下划线显示,返 回,除了下划线还有删除线标识,，用来制作“大降价”效果,图,9-21,加入,的内容,返 回,图,9-22,标题显示,返 回,图,9-23,加入,bgcolor,的内容,返 回,图,9-25,加入,background,的内容,返 回,图,9-26,背景图案显示,返 回,图,9-27,加入,img,内容,返 回,图,9-33,插入,table,的内容,返 回,图,9-35,在表格中插入内容,返 回,图,9-37,表格中的,bgcolor,和,align,返 回,图,9-41,插入新行,返 回,图,9-51,添加图像链接,返 回,