完整的HTML文件

    上一节课我们了解了HTML的基本结构以及元素,这一谭我们就要开始HTML语言的深入学习了。我们从今天开始慢慢建立一个网站,在网站的建立过程中,讲解HTML语言。
    INTERNET的迅猛发展,让许多软件公司看到了无限的商机,纷纷开发出各种主页制作软件。为了让读者了解这些软件的特性,在学HTML代码的过程中也学会使用一些合适的工具,现在我们就来建立一个介绍主页制作软件的网站,讲解网站制作。


index.html

<HTML>
<HEAD>
<TITLE>主页制作软件介绍</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>


    输入上面的代码,存盘。因为这一页是我们网站的首页,我们想浏览者输入我们的网址后,就显示这一页的内容,所以我们把这个文件设为默认文档,文件名为index.html,也可为index.htm。

字体和段落

FONT, PRE, STRONG, EM, B, I, Hx, P

  1. 段落
  2. 现在加入一些实质性的内容。在<BODY></BODY>之间加入:


    如果愚公有推土机的话,也许到他孙子那辈,就可以把太行、王屋二山移走了,不必等到“子子孙孙,无穷尽矣”。同样,虽然用记事本就可以写出主页来,但是好的主页制作软件却可以让你工作起来轻松自如,事半功倍。

    yahoo查找一下主页制作软件(HTML EDITOR),其结果让人目瞪口呆。INTERNET所蕴藏的无尽商机让众多软件开发商蜂拥而上,极力争取分一勺羹。庆幸的是,这些软件一般都是可以免费得到或试用的,你可以试用几个,从中发现符合你的要求的软件。这当然要花一些时间,包括那段揪人肺腑的需要付费的上网下载时间。

    本站主要介绍几个当前流行的主页制作软件,对比它们的优缺点,帮助读者选择自己的软件。


    源代码应该是:

    1-2

    察看结果:

    1-3

        还记得小学语文老师的话吗?“当文章的内容出现变化时,要另起一段;段落的开头空两格。”显然这篇用HTML作的文章要不及格的。怎么会这样?原来,HTML忽略源代码里面的回车和连续空格,而必须用专门的标记安排段落格式。

    <P>

        段落的标记是<P></P>,中间是一段的内容。</P>可以省略,因为HTML碰到下一个<P>就知道另起一段了。
        在每一段的开头加上<P>。

    1-4

    P的属性
       
    P的一个基本属性是ALIGN(对齐),可以有LEFT(左)、CENTER(中间)、RIGHT(右)几个值,默认值是LEFT。


    <p align="left">左对齐段落。

    <p align="center">居中段落。

    <p align="right">右对齐段落。


    1-5

    空格
       空格是一个特殊字符。HTML用&加字符串表示一些特殊字符。空格是“&nbsp; ”。
        一个汉字要占2个英文字符的大小,空2个汉字的位置就需要加4个“&nbsp; ”。
        现在的效果就比较满意了。

    1-5

  3. 特殊段落
  4. PRE
    ADDRESS
    HR

  5. 标题
  6.     虽然读者可以根据浏览器标题栏显示的TITLE里的内容,知道你的主页的标题。但是由于内容大多在浏览器窗口的客户区内,所以在BODY部分加上一个标题,可以让人一目了然。
        紧跟着<BODY>加上一句:
        主页制作软件介绍
        标题的字自然要大一些,就像MICROSOFT WORD里为标题专门定义了几个格式一样,HTML有几个标记是定义标题字体大小的,即<Hx></Hx>,其中x的取值可以从1到6,总共有6级。


    <H1>标题1</H1>

    <H2>标题2</H2>

    <H3>标题3</H3>

    <H4>标题4</H4>

    <H5>标题5</H5>

    <H6>标题6</H6>


    1-6

        不必添加<P><Hx></Hx>里的文字都是自成一段。而且,Hx标记也有ALIGN属性,其设置和<P>一样。
        现在把标题设置成H1的格式,即:
        <H1 ALIGN="center">主页制作软件介绍</H1>

    1-7

  7. 换行
  8. <BR>
       
    你可以看到,在有<P>的地方,HTML空了一行的位置,然后再开始下一段。如果我想写一首诗或一段歌词,就要在一个段落里换行,这样的间隔就太大了。可以用<BR>来实现,如:


    <HTML>
    <HEAD>
    <TITLE>静夜思</TITLE>
    </HEAD>
    <BODY>
    床前明月光,<br>
    疑是地上霜。<br>
    举头望明月,<br>
    低头思故乡。<br>
    </BODY>
    </HTML>


    1-8

    <NOBR>
       
    我们来考虑一下另外一个极端。这首诗的一行比较短,而有些歌词的一行可能要很长。当浏览器的宽度达不到时,就会自动换行。而我不想这样,我想保证这一行在同一行内显示,即使浏览器需要水平滚动条。只要把这一行用<NOBR></NOBR>包含起来就行了。


    <HTML>
    <HEAD>
    <TITLE>静夜思</TITLE>
    </HEAD>
    <BODY>
    <NOBR>床前明月光,</NOBR><br>
    <NOBR>疑是地上霜。</NOBR><br>
    <NOBR>举头望明月,</NOBR><br>
    <NOBR>低头思故乡。</NOBR><br>
    </BODY>
    </HTML>


    <WBR>
       
    如果希望在<NOBR></NOBR>对里几个固定的地方可以换行,可以用<WBR>


    <HTML>
    <HEAD>
    <TITLE>静夜思</TITLE>
    </HEAD>
    <BODY>
    <NOBR>
    床前明月光,<wbr>
    疑是地上霜。<wbr>
    举头望明月,<wbr>
    低头思故乡。<wbr>
    </NOBR>
    </BODY>
    </HTML>


        当窗口宽度足够宽时,这四句诗在一行里显示。如果不行,就会在有<wbr>的地方换行,这样就可以保证每句诗在一行里。

    1-9