第9章 返璞归真的HTML.ppt

1、第9章 返璞归真的HTML,9.1 任务一：编写第一个网页 9.2 任务二：添加各种元素 9.3 小结,9.1任务一：编写第一个网页,，都是HTML语言的结构标识，通常都是“双向标识”，书写格式一般为内容。以上的4个标识就可以构成一个最简单的网页了。 表示这个文件是HTML格式的文件，也就是网页的文件。整个HTML文件的所有内容都应该包含在一对标识之间。也就是说，HTML文件必须以开始，以结束。,下一页,9.1任务一：编写第一个网页,和标识表示一个网页的头部。在一对与代码之间，一般要有一对与标识，写在与中间的内容就是显示在浏览器标题栏中的文字。 和表示的是网页的主要内容。一个网页的头部内容放在

2、中，而具体内容就要写在中了。,返 回,上一页,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）

3、下面学习一下设置文字样式的各种HTML标识。 （2）我们还可以为文字添加其他效果，如在文字前面加上标识，可以使文字加粗显示，如图9-17和图9-18所示。 （3）如果想让文字居中显示，还可以在标识外分别加上与标识。,下一页,上一页,9.2任务二：添加各种元素,9.2.3设置页面的标题 与用Dreamweaver制作网页一样，应该为每个页面设置标题，也就是在浏览器栏标题中显示的文字，用手写HTML代码编写网页时，这项功能很容易就可以实现。 只要在标识中，输入这个网页的标题就可以了。我们输入“友情链接”，如图9-21所示。将这个文件保存一下，到浏览器中看一下标题栏的文字变了没有，如图9-22所示。

4、,下一页,上一页,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

5、）先到浏览器中查看一下，再来看看代码的含义。 （3）现在这个图像和第一行文字单独占据一行。,下一页,上一页,9.2任务二：添加各种元素,9.2.6插入表格 （1）打开一个新的记事本，在其中插入下面的代码。 （2）在和之间输入“友情链接”，为网页设置标题。 （3）将下面的这段代码加到之间，如图9-33所示。 （4）在单元格中添加一些内容，加入的内容如图9-35所示。,下一页,上一页,9.2任务二：添加各种元素,（5）在标识的尖括号中加入这句代码，如图9-37所示。 （6）再为表格添加两行。中间添加一个就为这一行添加一列，如图9-41所示。 （7）在第一行中，表格没有跨多列，这使得表格不协调，需要

6、将其改正过来。,下一页,上一页,9.2任务二：添加各种元素,9.2.7设置文字和图像链接 为文字和图像设置超级链接是网页制作的核心内容。 （1）在HTML语言中，超级链接的标识是 链接文字或图像 （2）这样还不够，还记得在Dreamweaver中，链接文件在新窗口中打开则需要设置一个Target=blank属性，意思是打开一个空白页面装载打开的页面。,下一页,上一页,9.2任务二：添加各种元素,（3）上面就是为文字添加超级链接的代码编写方法。下面再来看一下为图像添加超级链接的方法。 （4）用这对标识将图像信息包含在其中，如图9-51所示。 添加了超级链接的图像周围出现一个蓝色的边框，这是因为没

7、设置图像的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 背景图案显示,返 回