上一讲我们了解了网页制作的最基本的方法和过程,从这一讲起我们将正式开始学习网页制作。在学习之前首先要了解一部分最基本的知识,现介绍如下:
一、 基础知识
1、 标志符分为单标签和双标签两种
单标签:某些标志符称为“单标签”,因为它只需单独使用就能完整地表达意思,这类标志符的语法是:<标签名称>
最典型的单标签是<br>,该标签表示换行的意思,比如把“好好学习,天天向上”这句话用单标签“<br>”将其分成两行在网页中显示的方法是:“好好学习,<br>天天向上”。
双标签:它由“始标签”和“尾标签”两部分构成,必须成对使用,其中始标签告诉Web 浏览器从此处开始执行该标签所表示的功能,而尾标签告诉Web 浏览器在这里结束该功能。上一讲我们介绍的粗体显示文字的标签“<b> </b>”就是双标签,使用双标签的过程中一定不要忘记使用结束标志符。所有的双标签中的英文字母或单词是一样的,只是尾标签比始标签多了一个“/”。下面我们看一个基本网页的代码,一方面了解双标签在网页中的应用,另一方面也可了解一个最基本网页中所必需的几个元素,您可以把这段代码复制到记事本中并将其扩展名改为 .htm 或 .html运行一下看看效果。
<html>
<head>
<title>网页名称</title>
<!-- 网页头信息 -->
</head>
<body>
网页内容
</body>
</html>
实例讲解:
(1) 上例中使用的全部都是双标签,其中<html>标签是一个网页的第一个标签,那么在网页的最后使用</html>标签结束。
(2) “网页头信息”涉及内容较多,且没有完全固定的内容,而且可以省略,我们将在今后的学习过程中进行介绍。
(3) <title> …… </title>标签中的“网页名称”可以根据要求进行修改,在打开网页的时候读屏软件首先读出该名称。
(4) <body> …… </body> 标签中就是网页的主要内容了,比如上面我们提到的例子“好好学习,<br>天天向上”就一定要放在该标签内。该标签的属性可以对页面的整体效果进行调整,比如页面背景颜色的代码是 “<body bgcolor="颜色代码">” 、 字体颜色 “<body text="颜色代码"”,本标签还具有把“已点击”、“未被点击”或“正在点击”的链接名称制作成不同的颜色,可以为网页设置背景图片等功能,在以后的课程中我们将逐一对该标签的各属性进行详细的介绍。看到这里朋友们可能会有疑问了,“颜色代码”是什么呢?不要急,在本节的后面有对其详细的讲解。
2、标签属性
许多单标签和双标签的始标签内可以包含一些属性,其语法是:
<标签名字 属性1 属性2 属性3 … >
各属性之间需要有一个空格隔开,没有先后次序,属性也可省略(即取默认值),例如:
<HR SIZE=3 ALIGN=LEFT WIDTH="75%">
实例讲解:
(1)上例中的 “hr” 表示在网页中画一条横线如果不加任何属性的话写法是 <hr>,那么所有属性将取默认值,在默认情况下是从左至右在页面中画一条横线。
(2)“size=3” 属性是线条的粗细,其数值可根据要求做调整,数值越大线条越粗。
(3)“align=left”属性是把这条线居左排列,若要使其居中排列其参数是“center”,居右排列则使用“right”。
(4)“width”属性是设置该线条的长度,其参数可以为像素,也可以使用百分数,比如本例中就是使用的75%。
以上介绍的各属性适用于许多标签中,比如图片的位置及大小、字体的大小等,在今后的学习过程中会经常遇到这些属性。
3、一般在HTML 文件里,不管输入多少个空格(按空格键)都将被视为一个空格,任何回车操作(按“Enter” 键)都是无效的。
4、空格符号: “ ”, 作用是在网页中输入一个空格,因为我们在制作网页的时候不同于记事本或word文档,无论输入多少空格都被系统默认为一个空格,那么如果要在网页中使一段文字前面空出4个空格的话只能把“ ”输入4次。
5、换行标记:“<br>” ,单标记,作用是将文字换行显示,效果就如同按回车键;那么,如果使用<nobr>就是强制不换行,不管网页有多大,只要用了这个标志符将永不换行。
6、段落标记:<p></p> ,它与<br> 标记的区别在于,<p> 除了换行外,还会用一行空白加以间隔,效果就如同连续按了两个“回车” 键。
7、居中显示网页元素,使用<center> ……</center>。
8、原始版面标记: <pre>…</pre>,在html 文件中所采用的文字版面有原样显示在浏览器中,在这个标记里,回车、空格都是有效的。
9、属性的就近原则:当出现两个属性同时控制网页中相同的组件时,组件里哪个越近,就由哪个标记的属性来控制。
10、特殊字符的应用:“<”(小于号)、“>”(大于号)、“&”(“&”符号)、“ ”(空格)、“↔”(问号)。
11、上、下标标记的使用:<sup></sup> 上标标记; <sub></sub> 下标标记。
二、 如何处理网页中的文字
处理网页中文字的标签是: <font> …… </font> 其中有设置字体、字体大小、字体颜色等属性。请看下例:
<font size=“5”color=“red”face=“宋体_gb2312”>我开始制作网页了!</font>
实例讲解:
(1)上例中是在网页中显示“我可以制作网页了!”几个汉字,其中 size=5 属性是设置字体为5号字,其数值可随意更改,数值越大字体就越大;
(2)color=“red”标签是设置字体的颜色为红色,其颜色包括下列预定义色彩:Black(黑色),Olive(橄榄绿),Teal(水蓝色),Red(红色),Blue(蓝色),Maroon(栗色),Navy(海军蓝),Gray(灰色),Lime(酸橙色),Fuchsia(紫红色),White(白色),Green(绿色),Purple(紫色), Silver(银色),Yellow()黄色, Aqua(浅绿色),该值也可以使用16进制数码比如白色可表示为 size=“#FFFFFF”、黑色可表示为 size=“#000000”,因表示颜色的16进制数码数目较多,为了不占用更多的篇幅就不一一在此列举,我专门制作了一个颜色代码选择器以供盲人朋友制作网页使用,朋友们可以到我的网站下载使用,网址是:http://www.qy99.com;
(3)face=“宋体_gb2312”是设定不同字体的,可以根据需要将其改成黑体或楷体等。
标志符也可以嵌套使用,比如我们把上例中“我开始制作网页了!”中的制作网页4个字以粗体显示可以做如此修改:
<font size=“5”color=“red” face=“宋体_gb2312”>我开始<b>制作网页</b>了!</font>
也就是说在没有改变 <font> 标签中的各属性的前提下把“制作网页”4个字的字体加粗了,这样的效果主要目的是突出显示重要的词汇,使明眼人一看便知道该词的重要性。
盲人朋友在写代码的时候一定要切记,标签与其后的各属性之间务必要有一个空格。由于视力所限,在选择不同的字体、确定字体的颜色和大小的时候往往无法判断其在网页中的效果,起初会是一个难点。在这里告诉大家一个小窍门,一般情况下,网页的背景颜色可采用白色,字体可选择黑色或深蓝色,这样颜色对比鲜明,明眼人阅读起来较为方便。然而为了使网页更加个性化,我们经常需要把颜色或大小做一些调整,在我们不断调整的过程中,可随时求助明眼人协助看一下网页的效果,根据他们的建议和提示,我们通过修改网页代码实现网页各元素的调整,最终达到完美视觉效果的目的。经过几次帮助之后,盲人朋友就会慢慢积累经验,很快脱离明眼人的帮助,独立制作出独具匠心的网页。
小结:本讲我们介绍了制作网页的一些基本知识和如何处理网页中的文字的问题,本讲中所涉及到的各个标签都非常重要,大家需要在计算机上反复操作练习,必须做到牢记且能够灵活应用以上各标签。