HTML, XHTML  CSS  100%
 


       ?  ,    ,   ?  ,  :      .      ,   .      HTML  XHTML,      CSS.     ,     ,  ,   .        ,    .           !





 

HTML, XHTML  CSS  100%








        XX .           ,         .        HTML (HyperText Markup Language    ),    ,     .

       HTML   XHTML (eXtensible HyperText Markup Language     ),    XML (eXtensible Markup Language    ).    XML    (HTML  XHTML)   ,        HTML        .        XHTML,    HTML,   ,     -,       XHTML.

   HTML   -   () .           ,       .    ,   ,      ,     .    .      ,   HTML-  .     (script).          JavaScript.         ,       ,     .         .        HTML-  JavaScript,   -.  ,         .

      HTML.    ,     HTML-,     -.           HTML (  ), ,       HTML.

            HTML.         ,    ,      -    (  ).      -,          ,       .

       .      HTML-  HTML-.    ,   -     ,     .     ,       .     -  ,     Windows,        ,     ..

       -   CSS (Cascading Style Sheets    )  JavaScript.   JavaScript,    ,   -,       .    JavaScript   -   .    ,       HTML-.

 CSS        ,   ,    Word.           ,       ,  .  CSS        .

       -    -,              ,    -,      .      ,     -,        .




   


   ,          alexanderzhadaev@sigmaplus.mcdir.ru (mailto:alexanderzhadaev@sigmaplus.mcdir.ru)      www.sigmaplus.mcdir.ru (http://www.sigmaplus.mcdir.ru/).       ,            .



 




 


 ,         gromakovski@minsk.piter.com (mailto:gromakovski@minsk.piter.com) ( ,  ).

     !

   http://www.piter.com (http://www.piter.com/)       .




 1

  HTML-



1.1.   HTML

1.2.  HTML-



  -      HTML. ,   ,      HTML-.           HTML-      .




1.1.   HTML



    HTML-  ,    .       .







  HTML  .      ,         .      . ,       ,     .

     ,  <P>.    .      .      ,   : </P>.        ,       .      ,     ,          .

      :    ,   .       ,    /   ,     .

         P,   :



<> </>



        ,  .  IMG,     , ,     .      ,     .

   ,   ,         ,        .  ,   ,    .     .







        ,     ,           . ,         ,      .    ,   align  P:



<P align="left">   </P>

<P align="right">   </P>



           .      ,      .

       HTML,             .     .  ,   HTML-   ,       .




1.2.  HTML-



            ,       .

  1.1 ,  HTML-   :

    ;

  ;

  .


 1.1.     DOCTYPE

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>

<TITLE>    HTML</TITLE>

... ...

</HEAD>

<BODY>

... ...

</BODY>

</HTML>




  


   HTML-      :



<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/ TR/html4/loose.dtd>



       HTML-.           ,      ,         DOCTYPE.

 HTML  ,       HTML.

 PUBLIC    ,        HTML.

 "-//W3C//DTD HTML 4.01 Transitional//EN"     ,    .       ,      ,   ,         .      HTML  4.01,     .

 "http://www.w3.org/TR/html4/loose.dtd" URL- ,     ,      HTML 4.01.

       (Document Type Definition, DTD),     ,      XHTML.    ,   ,      ,       HTML,    .   HTML 4.01  W3C      DTD.

    DTD,  ,   HTML-      HTML 4.01.        :



<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>



   (transitional)  DTD,    ,     HTML 4.01   .        :



<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/ TR/html4/loose.dtd>



   DTD   HTML 4.01  .   ,   :  -            , ,     HTML-.       :



<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd>



          HTML 4.01.       HTML-, ,  ,   ,     ,   W3C     DOCTYPE    .

  :        DTD      ?           HTML  .         DTD    ,    HTML 4.01       ,         DTD.

        ,     .




 HTML


   HTML 4.01  <HTML>.  ,        <HTML>  </HTML>.      HTML 4.01     ,  W3C   .  XHTML-  HTML .

  HTML    .

 lang    .

 dir        (RTL   , LTR   ).

 version     HTML,    .   ,     .

 title      .

  1.2     HTML   ,          .


 1.2.  HTML  

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html lang="ru" dir="LTR" title=" ">

<! >

</html>



 .1.1      HTML.




.1.1.   title     



 ,   dir            . , IE 6  Opera 9      ,        .  ,          (,  ),      .




 HEAD


      ,      . ,    HEAD,     ,      .

     ,     <HEAD>  </HEAD>,     ,     . ,    HEAD,    : ,   ,     ,       .

  HEAD    ,    HTML,    profil.       ,    <META>  .              <META>.               HTML.

,      HEAD,   . 1.1.


 1.1. ,    HEAD




    ,       .        . 1.1,   ,    .

  ,   .




 TITLE


   ,        .   HTML 4.01    HEAD    TITLE,    .

     </TITLE>. ,      ,        .

     ,   ,     .     ,    ,          ,           .

      :         .   ,          .    ,                ,    .

     -  .           .      ,     (\ /: *? " < > |),         .

            ,    TITLE.             .   ,  ,     ,       .

  1.3     TITLE.


 1.3.   TITLE

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>   </title>

<!  >

</head>

<! >

</html>



   ,     .

 .1.2     1.3. ,        .




.1.2.   



     ,  ,        HEAD.




 META


 META       .       ,       . ,    HTML-,    META  :



<META name="Author" content=" ">



   name    Author,    content     .         META:        name   ,     content  .   name    http-equiv,         -. ,   :



<META http-equiv="Expires" content="Sun, 1 Nov 2009 16:20:47 GMT">



  ,         .        .

  HEAD     META,            .  . 1.2     http-equiv. ,  HTML 4.01     ,        -.   META       .


 1.2.    http-equiv









     .

  1.4   ,     http-equiv    .


 1.4.   http-equiv

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html title=" " lang="ru">

<head>

<title>  META</title>

<meta http-equiv="Content-Type" content="text/html" charset="windows-1251" />

<meta http-equiv="refresh" content="10" URL="http:\\test.ru" />

<meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="expires" content="Sun, Oct 2010 10:09:00 GMT+3" />

</head>

</html>



   ,   http-equiv   ,       content.

 content-type,   ,        .    ,         .

  refresh ,            .            ,         .     1.4  10       test.ru.





     .     ,    ,       .


    content      (. 1.3).


 1.3.   content     http-equiv




   content,    ,   .        content-type ( ),       .

 name,   http-equiv,     ,       . ,      .        ,      .

 . 1.4     name.


 1.4.    name




   . 1.4,        .    ,     ,     ,      META.

,    META,         .  ,      ,       ,      .





    ,        .       ,         .

    -         ,           .


  1.5      META    .


 1.5.   META    

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" title=" " lang="ru" xml:lang="ru">

<head>

<title>  META</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="expires" content="Sun, 10 Oct 2010 10:09:00 GMT+3" />

<meta name="author" content="" />

<meta name="description" content="  META      " />

<meta name="document-state" content="Dynamic" />

<meta name="keywords" content=", , , " lang="ru" />

<meta name="keywords" content="tags, meta, index, search" lang="en" />

<meta name="Resource-Type" content="Document" />

<meta name="Revisit" content="2" />

<meta name="Robots" content="noindex,follow" />

<meta name="URL" content="http:\\test.test" />

</head>

</html>



    1.5    .    .

 author   .     ,   author   copyright,      content    .   ,      content.     lang.

 description   . ,    ,       ,     . ,       ,         ,      .

 dynamic  document-state  ,        ,      .

       keywords:     ,    .   ,     ,     lang.

     ,       ,         .

     ,     ,   .  ,             ,       .

       .   ,       ,        ,    .      200250 ,    keyword.      ,        .

     ,            ,       .    ,     ,      ,  ,      , .

 ,                 ,    .   ,      ,           .

 resource-type          ,     .  ,      resource-type  document.

  revisit.  ,           .    ,      ,           .

 robots     .        ,      ,            .

 . 1.5  ,      .


 1.5.   content   robots




  URL,            test.ru.

 ,   ,     META,      .        ,      ,       .

  ,     META        ,    ,       .          .




 STYLE


    ,   .        .  STYLE     lang  title,     type  media.  type ,        ,   media ,       HTML-.

     HTML 4.01   CSS,       . 7.          ,     .   ,   W3C       HTML-  ,    ,   ,     .     ,      CSS.

   (CSS) ,    HTML-    .  ,      ,   HTML-    .          ,  , ,      HTML-,       .

 STYLE    CSS      .            CSS.     ,  type  STYLE   text/css,      CSS.    CSS-:



<style type="text/css">

p.style {

color:#CC0000;

background:#9999CC;

word-spacing:20px;

}



  p.style ,    P,  ,     style,         (color: #CC0000),  (background: #9999CC)     (word-spacing:2 0px).

    - ,    class        ,      :



<p class="style">

   style

</p>



 ,   CSS   STYLE,         ,      ,           .

 ,    STYLE             .  ,          .           ,         .      media.

  media :

 print      ;

 screen      ;

 all       .

     1.6    CCS.


 1.6.  

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css" media="screen" >

p.style {

color:#CC0000;

background:#9999CC;

word-spacing:20px;

}

.style2 {

color:#66FFFF;

background:#990000;

word-spacing:10px;

}

</style>

<style type="text/css" media="print" >

p.style {

color:#000000;

background:#FFFFFF;

word-spacing:20px;

}

.style2 {

color:#000000;

background:#FFFFFF;

word-spacing:10px;

}

</style>

<title> </title>

</head>

<body>

<p class="style">

   style

</p>

<p class="style2">

   style2

</p>

<table border="1" >

<tr>

<td class="style2">

    style2

</td>

</tr>

</table>

</body>

</html>

    : style      P (        ), style2    .   1.6  style2      .

   1.6   .1.3.




.1.3.  



          .     .







             .     ,      .


       :  CSS-         style.       HTML.     CSS         .       P:



<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">



 , CSS-     STYLE   .   1.7         CSS-    style.


 1.7.   style

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title> </title>

</head>

<body>

<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">

   style="color:#CC0000; background:#9999CC; word-spacing:20px;"

</p>

<p style="color:#66FFFF; background:#990000; word-spacing:10px;">

   style="color:#66FFFF; background:#990000; word-spacing:10px;"

</p>

<table border="1" >

<tr>

<td style="color:#66FFFF; background:#990000; word-spacing:10px;">

     style="color:#66FFFF; background: #990000; word-spacing:10px;"

</td>

</tr>

</table>

</body>

</html>



    ,     ,       style.

 .1.4       1.7.




.1.4.      style



   ,      .       ,          .

               CSS.       ,      STYLE,     .

        .     1.8    STYLE.       : @import URL("nyTb    ");.


 1.8.     

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

@import URL("test.css");

</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title> </title>

</head>

</html>



          ,    test.css.




 LINK


  LINK           .      .    ,     .  ,  LINK        .     ,    LINK     .

      href;       ,     .    ,           ,  ,   .

   type,    ,    .         text/css.

  LINK    : rel  rev.        ,        .       ,    .

  1.9     LINK.


 1.9.   LINK

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link href="test.css" rel="stylesheet" type="text/css" />

<link href="copyrihgt.html" rel="copyright" />

<link href="help.html" rev="help" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>  LINK</title>

</head>

</html>



    1.9  LINK        ,   ,        ,    ,     .

 . 1.6      rel.               W3C.


 1.6.    rel










  alternate  rel      hreflang  charset,     LINK    ,  ,      ,    .


    LINK               .   ,          .




 SCRIPT


 SCRIPT     .     ,          ,    .       ,        SCRIPT.

   .     type,    ,   .    ,       .          SCRIPT   src,          .  ,        .

  SCRIPT       defer,         .

  1.10       HTML-.


 1.10.   SCRIPT

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script defer="defer" type="text/javascript">

<! >

</script>

<script type="text/javascript" src="test.js">

</script>

<title>  SCRIPT</title>

</head>

</html>



    ,  ,      ,        .




 BASE


       ,    ,        .    HTML      .

 BASE   ,    ,      .            .  ,    ,   .





       ,    . , C:\Test\test.jpg       http:// www.test.test/mytests/test.html (http://www.test.test/mytests/test.html)  ,   .            ,     . ,   ,    C:\Test\MyTests\test.html,     C:\Test\test.jpg,    . \test.jpg,    .        .


   BASE  href.        ,       .

       target.      ,    HTML-,    ,       ,   .  target ,        ,   .      :

 _top           ;

 _blanc      ;

 _self      ;

 _parent     -.

     BASE      .

  1.11     BASE.


 1.11.   BASE

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<base href="http://www.test.test/" target="_blank" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>  BASE</title>

</head>

</html>



    1.11        http://www.test.test/ (http://www.test.test/),           ../IMG/test.jpg,       http://www.test.test/IMG/test.jpg (http://www.test.test/IMG/test.jpg).         ,         .

    ,      HEAD,         .




 BODY


  BODY   :  ,     <BODY>   </BODY>,   .  ,    ,    BODY.

  BODY   ,       ,         :    ,    ..

    BODY,   .          ,    ,    ,        ,      .

       BODY:

 alink     ;

 vlink     ;

 link     .

     HEX-   .     ,      .        ,   HEX-.

    1.12    .


 1.12.  

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<base href="http://www.test.test/" target="_blank" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>  BODY</title>

</head>

<body alink="#00FF00" vlink="red" link="#330000">

</body>

</html>



             :                 #.       .    .              .      blue, red, black   .

     ,       ,    .

 BODY       .  ,   .

      .      bgcolor,     .          background,          .      ,      .  ,       .       ,       .

       bgproperties.  ,       .       fixed,           .        .             ,       .

  1.13      BODY,    .


 1.13.  

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<base href="http://www.test.test/" target="_blank" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>  BODY</title>

</head>

<body background="test.jpg" bgcolor="#0033CC" bgproperties="fixed">

</body>

</html>



    1.13  test. jpg    ,        .      .

      ,         .

         BODY:

 bottommargin           ;

 leftmargin           ;

 topmargin           .

      .

  1.14            BODY.


 1.14.        

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<base href="http://www.test.test/" target="_blank" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>  BODY</title>

</head>

<body topmargin="10" leftmargin="20" bottommargin="10">

</body>

</html>



        10 ,    20 .

  BODY    ,    .  text      .    , ,       .

 scroll ,        .     : yes  no,      .       ,   ,         ,           .           .

   BODY,    .  ,    ,     .

    ,     ,         .    .







      ,     .          .  ,         .

   : <!    >. ,    ,   .







        HTML-   ,    HTML.     ,               .             .

      ,                .




 2

   



2.1.  

2.2.  

2.3.   

2.4.  

2.5. 

2.6.  



        BODY.         BODY ,   ,       .    HTML   :          .  HTML        .   ,    .  ,          .

      ,         .       ,      XHTML        CSS,      . 79.          ,          -,    ,              .




2.1.  


    ,    .  HTML     ,        . ,   ,      ,           ,   .

 HTML     .      ,     .

     H1, H2, H3, H4, H5, H6.          ,     ,   .

        .      align.

  align:

 left    ;

 right    ;

 center   ;

 justify    (    ).

     title,      ,       .

  2.1             .


 2.1. 

<html>

<head>

<title> </title>

</head>

<body>

<h1 align="center"> 1 </h1>

<h2 align="justify"> 2 </h2>

<h3 align="left"> 3 </h3>

<h4 align="right"> 4 </h4>

<h5> 5 </h5>

<h6 title=" 6 "> 6 </h6>

</body>

</html>



 .2.1     2.1 .




.2.1.  



 .2.1      .  ,          , ,       ,          .

       ,              .

     ,    ,  CSS.    H1-H6    style  class,   .

    ,       ,      .




2.2.  


,  ,             .  HTML         .

    HTML   P,     .  P, ,       ,   ,    P.

          ,         HTML.

  P   ,  .   align     .

 center    .         ,   .         ,      .

 left     .       ,     .     ,       .

 right     .      ,    .     .   ,   ,  .

 justify    .       ,         .         ,          .

 ,      ,        .      title,     .

  2.2          .


 2.2.  

<html>

<head>

<title></title>

</head>

<body>

<p align="center" title=",   ">   ,   </p>

<p align="right" title=",    "> </p>

<p align="left" title=",    ">       ,       </p>

<p align="justify" title=",   ">    ,   .        </p>

</body>

</html>



 .2.2     2.2,        .




.2.2.  



        ,    P    style  class.




2.3.   


    .   ,     ,   ,        ?

 HTML       ,   .         ,                   .

        BR,     ,        <BR />,      .

  2.3       .


 2.3.  

<html>

<head>

<title> </title>

</head>

<body>

   ,<br />

   .<br />

</body>

</html>



 .2.3        2.3.




.2.3.  



 .2.3 ,     BR      .

      BR.  ,      ,        (  ,     align).

    clear  BR.     :

 all       ;

 left        ,    BR;

 right        ,    BR;

 none   .

  ,  ,    BR,       .

   ,     ,   ,            .        NOBR,     . ,   ,     .       .

         ,    NOBR    WBR,       .

  2.4     NOBR  WBR.


 2.4.   

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title> </title>

</head>

<body>

<nobr>   ,          ,     <wbr>  .</nobr>

</body>

</html>



 .2.4        2.4.




.2.4.  



   .2.4,           ,   .

         ,      ,    .




2.4.  



       ,  HTML     .

   ,       .        (   ),       .

 HTML     :

 ;

 ;

  .

     .




 


    ,        .     ,  ,        .           .

    HTML   UL,    .      UL.      LI.

  UL   type,    .     :

 circle      ,  ;

 square      ;

 disc      ,   .

   ,       .

  2.5        .


 2.5.  

<html

<head>

<title></title>

<body>

<ul type="circle">

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<ul compact type="square" >

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<ul compact type="disc" >

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>



     2.5   .2.5.  ,     .




.2.5.  



       LI         .

  2.6          .


 2.6.    

<html>

<head>

<title></title>

<body>

<ul>

<li type="circle"></li>

<li type="circle"></li>

<li type="square"></li>

<li type="circle"></li>

<li type="disc"></li>

</ul>

</body>

</html>



      2.6   .2.6.




.2.6.    



       .

      ,                .

 HTML       .      LI     .  UL  ,    ,     BR   .

  2.7       .


 2.7.    

<html>

<head>

<title></title>

<body>

<ul>

<img src="marker.jpg" /><br />

<img src="marker.jpg" /><br />

<img src="marker.jpg" /><br />

</ul>

</body>

</html>



     2.7   .2.7.




.2.7.    



       ,    .




 


      .  ,     ,    ?       ,        .

  ,        ,        .      ,     .

      OL,     ,        .

  OL   type,    ,   .

   type ,      :

 A     ;

 a     ;

 I    ;

 i    ;

 1  .

   OL   start, ,       .

  2.8          .


 2.8.  

<html>

<head>

<title></title>

<body>

<ol type="1" start="6">

<li> </li>

<li>    </li>

<li>       </li>

<li>   </li>

<li> </li>

</ol>

<ol type="A">

<li> </li>

<li>    </li>

<li>       </li>

<li>   </li>

<li> </li>

</ol>

<ol type="a">

<li> </li>

<li>    </li>

<li>       </li>

<li>   </li>

<li> </li>

</ol>

<ol type="I">

<li> </li>

<li>    </li>

<li>       </li>

<li>   </li>

<li> </li>

</ol>

<ol type="i">

<li> </li>

<li>    </li>

<li>       </li>

<li>   </li>

<li> </li>

</ol>

</body>

</html>



       2.8   .2.8.




.2.8.  



       ,         6.

      LI    .       ,   LI          type.  ,    value   ,      .

    2.9              .


 2.9.     

<html>

<head>

<title></title>

<body>

<ol type="1" >

<li type="1" value="10"> </li>

<li>  </li>

<li value="1"> </li>

<li> </li>

<li type="I"> </li>

<li type="I">  </li>

<li> </li>

</ol>

</body>

</html>



   2.9   .2.9.




.2.9.     



   ,          ,         .




 


,         .       .       .

      ,           .

      :        .     ,       .      ,          , ,     .

      DL         .     ,   style  class,         .

     DL,    DT  DD.    ,   ;     .

       DT.       .    ,    ,    .

  2.10     .


 2.10.  

<html>

<head>

<title></title>

<body>

<dl>

<dt></dt>

<dd>   </dd>

<dt></dt>

<dd>   </dd>

</dl>

</body>

</html>



     2.10   .2.10.




.2.10.  



 .2.10     ;       .




  


     . ,        .     .

 HTML          ,        ,    ,     ,      .

  2.11      .


 2.11.  

<html>

<head>

<title></title>

<body>

<ol>

<li>

 

<ul>

<li></li>

<li></li>

</ul>

</li>

<li>

  

<ul>

<li> </li>

<li> </li>

</ul>

</li>

<li> </li>

</ol>

</body>

</html>



 .2.11  ,    .




.2.11.  



,           .

      , ,     ,    , .




2.5. 



        .   ,    ,   .       ,        ,     .

    :   .           .       .




 


    ,    .    ,   ,  .

    URL- ,     .

    HTML   A,     .    ,     .   ,   ,   -      ,         .  HTML       . ,       ,    ,   ,   ,     ,           .   <A>  </A>    .

       A     href.  ,     ,     .    ,   ,    ,     .

  2.12      HTML-  .


 2.12.  

<html>

<head>

<title></title>

<body>

<a href="aboutme.html"> </a><br />

<a href="myfoto.jpg"> </a>

</body>

</html>



       .2.12.




.2.12. 



   ,         .

       ,    ,     .

  ,         ?    .




 


      HTML-.  ,      .      ,             .

   ,    ,    .      name  A.       A.       ,        ,           .

    name    , ,     ,       .

      .       ,      ,   URL-         #met1.   metl    .

           ,  .

  2.13     .


 2.13.  

<html>

<head>

<title></title>

<body>

<a name="met2">    2</a><br />

<a href="#met1">       1</a><br />

<a href="#met2">       2</a><br />

<a name="met1">    1</a>

</body>

</html>



       .2.13.




.2.13.  



 ,         ,  ,   ,   .

      ,   ,    A    .




 


    A      ,    ,        .

  A    .   target    ,      ,    .

   target ,   :

 _blanc     ;

 _parent   -;

 _self    ;

 _top     .

   ,          . ,      ,    ,     .        ,       .

    title,        ,           ,     .      .

  2.14        .


 2.14.    

<html>

<head>

<title></title>

<body>

<a href="aboutme.html" target="_blank" title="  ,     "> </a>

</body>

</html>



 .2.14       .




.2.14.    



,       .

 ,        ,            . , ,    ,           .

  -      A.

  2.15    -.


 2.15. -

<html>

<head>

<title></title>

<body>

<a href="mypetfoto.html" target="_blank" title="  ,      "><img src="mypetfotomini.jpg" /></a>

</body>

</html>



 .2.15 ,    -.




.2.15. -



   ,    ,      ,  .

         .   ,     ,   ,   ,       .

 ,         .




2.6.  



   ?  ,     ,       ,     ,   ,     .     ,  HTML     .

     ,       :   .      .

     ,      ,     .   ,    . ,       ,       .                ,   , -  .

    ,        ,        .  ,       ,   ,  ,      .

           :     , ,    ,    .

        .




   


  ,         ,   ,             .  ,  ,       .

         ,         ,     ,    ,    .


 ABBR

 ABBR    .    title       .         ,    title.

:

<abbr title="- "></abbr>


 ACRONYM

 ACRONYM ,    .





     ,  ,   ..


 title    . :

<acronym></acronym>


 CITE

 CITE     ,    .     .

:

<cite>   </cite>


 CODE

     ,   , , , ,   .      .

:

  <code> func(int a, char b);</code>


 DEL

 DEL            .      : cite   URL ,      ,  datetime         --T: : ccTZD (  Time Zone region with Daylight Saving Time       ).      .

:

<del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00">  </del>


 DFN

     .   ,             .     .

:

<dfn></dfn>-


 EM

 EM    .     .

:

<em></em>


 INS

 INS         ,   .      : cite   URL ,      ,  datetime         --T: : TZD.      .

:

<ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00"> </ins>


 KBD

 KBD  ,    .      .

:

  <kbd></kbd>


 Q

             .    ,       ,   .

:

: <q>  </q>


 SAMP

 SAMP            .      .

:

<samp></samp>


 STRONG

 STRONG      .      .

:

<strong>  </strong>


 VAR

       .     .

:

  <var>X</var>

  2.16       .


 2.16.   

<html>

<head>

<title>   </title>

<body>

<abbr title="- "></abbr><br />

2.6.  

<acronym></acronym><br />

<cite>   </cite><br />

  <code>func(int a, char b);</code><br />

<del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00"> </del><br />

<dfn></dfn>-<br />

<em></em><br />

<ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00"> </ins><br />

  <kbd></kbd><br />

: <q>  </q><br />

<samp></samp></br>

<strong>  </strong><br />

  <var>X</var><br />

</body>

</html>



      2.16   .2.16.




.2.16.   



 .2.16 ,          ,      .    -   ,        ,      .




   


     ,    ,   .


 B

 B    .

:

<b> </b>


 I

 I    .

:

<i></i>


 TT

     .

:

<tt> </tt>


 U

 U    .

:

<u></u>


 S

 S    .

:

<s></s>


 STRIKE

      .

:

<strike> </strike>


 BIG

 BIG  ,  ,   ,   .   ,      .





  HTML          .      .


          .

:

 <big> <big> </big></big>


 SMALL

 SMALL           .           .

:

 <small></small>


 SUB

     ,            .    .

:

<sub></sub> 


 SUP

 SUP    ,           .      .

:

<sup></sup> 


 SPAN

 SPAN               .       .

:

<span style="background-color:#00FFFF">  </span>

  2.17       .


 2.17.  

<html>

<head>

<title>  </title>

<body>

<b> </b><br />

<i></i><br />

<tt> </tt><br />

<u></u><br />

<s></s><br />

<strike> </strike><br />

 <big> <big> </big></big><br />

 <small></small><br />

<sub></sub> <br />

<sup></sup> <br />

<span style="background-color:#00FFFF">  </span>

</body>

</html>



      2.17   .2.17.




.2.17.  



 .2.17 ,        ,       .

   ,       .  ,     ,       .

 . 2.1           ,    .


 2.1.   




   ,         ,        .

         .    ,          .




     


,      ,     .       ,    .

   ,     .


 FONT

 FONT     .       ,         .

       FONT.   ,    ,   .

    face,      .       ,      .            ,         face.

     size.     ,   2  6.     3.         .      +,  ,        ,   ,  ,    .      ,        .

     color,       ,   ,      #RRGGBB.





       .


  2.18           FONT.


 2.18.   FONT

<html>

<head>

<title> FONT</title>

<body>

<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif" size="+2">

     +2

</font><br />

<font color="#FF00FF" face="Verdana, Arial, Helvetica, sans-serif" size="-4">

     4

</font><br />

</body>

</html>



       2.18   .2.18.




.2.18.   FONT



     .           ,   .       ,    Sans Serif.         ,        .

   ,  .     .   ,       .


 DIV

 DIV            .  ,         DIV        style,          class.

,       HTML,        align          title.

  2.19          DIV.


 2.19.   DIV

<html>

<head>

<title> DIV</title>

<body>

<div style="cursor:crosshair" align="center">

      ,             .

</div>

</body>

</html>



     2.19   .2.19.




.2.19.   DIV



  ,               .


 PRE

       ,         .





  HTML       .


       .  PRE      .         .

  2.20     PRE.


 2.20.   PRE

<html>

<head>

<title> PRE</title>

<body>

<pre>











</pre>

</body>

</html>



 .2.20 ,  ,     PRE,   .




.2.20.   PRE



  ,          .


 BLOCKQUOTE

 BLOCKQUOTE           .      ,   .        .

  2.21        BLOCKQUOTE.


 2.21.   

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title> BLOCKQUOTE</title>

<body>

<blockquote>

      .

</blockquote>

</body>

</html>



 .2.21 ,        BLOCKQUOTE.




.2.21.   BLOCKQUOTE



 ,       ,  HTML   ,     .




 


 HTML       .     .     B  I,   ,   .        : ,   ,  .

  2.22       .


 2.22.  

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title> </title>

<body>

<del><b><i>   </b></i></del><br />

<ins><b><i>   </i></b></ins>

</body>

</html>



      .







            HTML.             ,        ,        .

         . ,            BODY.       ,       .




 3

 



3.1.   

3.2.   

3.3.  

3.4.  

3.5.      

3.6.    

3.7.     

3.8.   

3.9.      

3.10.   



        ,        .  ,      ,     .

  HTML     :    ,     ,     -,     .      HTML-,  , , , , ,    .         (.3.1).




.3.1.   HTML-   







    , ,       XHTML    CSS.          HTML 4. 01 .





3.1.   


   ,       (.3.2).




.3.2.   



  .

      .      .

      ,   .

     ,      .

    ,        .

           .         .  ,   .3.3,       ,     .




.3.3.   



,        ,    ,             .         .

    .

    .

    Paint, Adobe Photoshop   AutoCAD.

  HTML-  ,  Microsoft Word.       HTML-.             HTML-     .




3.2.   


  HTML-   .       BODY.      ,      .      <TABLE>   </TABLE>:

<body>

<table>

</table>

</body>

         TABLE.     <CAPTION>. </CAPTION>.       align,     top ( )  bottom ( ).      .




3.3.  


     .       ,      .    <TR>  </TR>       .  ,        <TR>     </TR>.    <TD>  </TD>,     ,    ()   .     TD   .

<body>

<table>

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

</table>

</body>

       (       ),     <TH>  </TH>.     TH   .  TH, TR  TD           Internet Explorer.

     HTML-.   ,        ,         ( 3.1).  .3.4 ,       .


 3.1.   HTML-,        

<html>

<head>

<title> HTML-</title>

</head>

<body>

<table>

<caption>  </caption>

<tr><th> 1</th><th> 2</th><th> 3</th></tr>

<tr><td> 2x1 </td><td> 2x2 </td><td> 2x3 </td></tr>

<tr><td> 3x1 </td><td> 3x2 </td><td> 3x3 </td></tr>

</table>

</body>

</html>






.3.4.   HTML-







             HTML-,     ,    .  ,              HTML-.





3.4.  


          .       border  TABLE.      .   border  ,      .   bordercolor     ,   .          .

   

<table>



<table border="4" bordercolor="#000000">

  (   )      -.  .3.5 ,         Internet Explorer,   .3.6       Opera.  -        ,     .     ,    ,       ,  .




.3.5.     Internet Explorer






.3.6.     Opera



 .3.5 ,           .      cellspacing  cellpadding  TABLE.  cellspacing       ,   cellpadding       .

  3.2   ,          10 ,       (.3.7).


 3.2.  HTML-       

<html>

<head>

<title> HTML-</title>

</head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10">

<caption>  </caption>

<tr><th> 1</th><th> 2</th><th> 3</th></tr>

<tr><td> 2x1 </td><td> 2x2 </td><td> 2x3 </td></tr>

<tr><td> 3x1 </td><td> 3x2 </td><td> 3x3 </td></tr>

</table>

</body>

</html>




.3.7.        



      ,       .    frame     ,     rules    .  frame    :

 above      ;

 below      ;

 box     ;

 border      ( box);

 hsides      ;

 lhs      ;

 rhs      ;

 void      ;

 vsides      .

Frame  rules      HTML,      .

 rules    :

 all      ;

 cols       ;

 groups              ;

 none      ;

 rows        .

  3.3     frame  rules.


 3.3.  HTML-        

<html>

<head>

<title> HTML-</title>

<head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding= "10" frame= Hsides rules= Cols>

<caption>     </caption>

<tr><th></th><th> </th></tr>

<tr><td>. </td><td> </td></tr>

<tr><td>. </td><td> </td></tr>

<tr><td>. </td><td> </td></tr>

<tr><td>. </td><td> </td></tr>

<tr><td>. </td><td> </td></tr>

<tr><td>. </td><td>  </td></tr>

</table>

</body>

</html>



 .3.8 ,        .           ,          rules  frame.




.3.8.HTML-        




3.5.      


    width  TABLE.        (width="2 5 0"),     (width="80%"). ,     600 ,   ,          .      ,             ,    .             height.

      .       .          .                  .

            ,     .

 .3.9  3.10     ,     .




.3.9.    80%    






.3.10.      300 



    80%    ,       50%    .     100 .

  ,    300 .   3.4  3.5   ,   .


 3.4.    80%    

<html>

<head>

<title> HTML-</title>

</head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10" width="80%">

<caption>  80%</caption>

<tr><th height="100" width="50%"> 1</th>

<th> 2</th><th> 3</th></tr>

<tr><td> 2x1 </td><td> 2x2 </td><td> 2x3 </td></tr>

<tr><td> 3x1 </td><td> 3x2 </td><td> 3x3 </td></tr>

</table>

</body>

</html>




 3.5.    300 

<html>

<head>

<title> HTML-</title>

</head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10" width="300" height="300">

<caption>  300 </caption>

<tr><th> 1</th><th> 2</th><th> 3</th></tr>

<tr><td> 2x1 </td><td> 2x2 </td><td> 2x3 </td></tr>

<tr><td> 3x1 </td><td> 3x2 </td><td> 3x3 </td></tr>

</table>

</body>

</html>




3.6.    


  HTML 4      ( ,   )         .

      COLGROUP  COL.  COLGROUP    ,      . ,        ,    ,  .  COL      ,     ,     .     ,        .

   COLGROUP  COL   span   n.   ,     n   .

<table>

<col span=2 style="color:red">

<tr><td>      </td>

<td>       </td>

<td>       </td></tr>

</table>



      THEAD, TBODY  TFOOT.        .

         THEAD.         .        ,   ,   TBODY.  TFOOT               .          .          .

<thead>

<tr><th> </th><th> </th><th> </th></tr>

</thead>

</tbody>

<tr><td> </td><td> </td><td> </td></tr>

<tr><td> </td><td> </td><td> </td></tr>

<tbody>



,   ,      ,    ,       ( ).    ,   .

1.   .

2.     .




3.7.     


          TABLE, TR, TH  TD   align  valign.

 align          :

 <table align=left/right/center>      / / ;

 <tr align=left/right/center>     / / ;

 <th align=left/right/center>     / /  (   );

 <td align=left/right/center/char>      /  / /   (    ).

 valign           :

 <table valign=bottom/middle/top>   / / (   );

 <tr valign=bottom/middle/top>   / / ;

 <th valign=bottom/middle/top>   / / ;

 <td valign=bottom/middle/top>    / / .

  3.6               (.3.11).


 3.6.       

<html>

<head>

<title> HTML-</title>

</head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="0"width= "400" height="150" align=center>

<caption> </caption>

<tr><th> </th><th></th><th></th><th> </th></tr>

<tr valign=bottom align=center>

<td></td><td>028</td><td>190  </td><td>12,2 </td></tr>

<tr valign=bottom align=center>

<td></td><td>058</td><td>120  </td><td>4,6  </td></tr>

<tr valign=bottom align=center>

<td></td><td>986</td><td>100  </td><td>2,3  </td></tr>

</table>

</body>

</html>




.3.11.       




3.8.   


     ,              (. .3.2).  HTML      colspan  rowspan.  colspan   ,       ,  rowspan   .

 .3.12     .     ,     .     ,        .       3.7.




.3.12.    




 3.7.     

<html>

<head>

<title>HTML-</title>

<head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="5" >

<tr align=center><th colspan=3>       </th></tr>

<tr align=center><td rowspan=2>    </td>

<td> 22</td><td> 23</td></tr>

<tr align=center><td> 32</td><td> 33</td></tr>

<tr align=center><td rowspan=2>   </td>

<td> 42</td><td> 43</td></tr>

<tr align=center><td> 52</td><td> 53</td></tr>

</table>

</body>

</html>




3.9.      


 HTML        .   bgcolor     , ,  ,  ,  .

  <td bgcolor= "#000000">,    <td></td> (    ),   ,   .3.13.




.3.13.    bgcolor



   background        ,    . , <td background="img\fon.gif">.

       ,    ,     ,       .




3.10.   


  ,    ,      (.3.14).   colspan .




.3.14.  HTML-



,     ,     TABLE  ,          .

  3.8   ,   .3.13.        .      .     ,       .  ,   ,   ,       .


 3.8.  ,     

<html>

<head>

<title>HTML-</title>

<head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10">

<caption>  </caption>

<tr><td> 1x1</td><td>1x2</td><td>1x3</td><td>1x4</td></tr>

<tr><td colspan=4>

<table border="3" bordercolor="#000000" cellspacing="0" cellpadding="10">

<tr><td> 1x1</td><td>1x2</td><td>1x3</td></tr>

<tr><td> 2x1</td><td>2x2</td><td>2x3</td></tr>

</table>

</td>

</tr>

</table>

</body>

</html>







   ,       -.     -  Microsoft (www.microsoft.com (http://www.microsoft.com/))  .

              .      ,        .      ,          ,     .

       HTML-   :  ,   ,    ..           ,         .




 4

   



4.1.  

4.2.  



          Flash-,   .      ,   ,     .             .    ,     ,      ,     .




4.1.  



   ,            ,   .    : ,    (   -),   .      .      .          .    ,     ,          .         ,   .  ,       ,    , , .                 . ,         ,     ,   .

    HTML-   IMG.     src,       .

     : <IMG src=" image.jpg">.            .





       (,       (http://www.mypage.ru/IMG/myfoto.jpg (http://www.mypage.ru/IMG/myfoto.jpg))),      (,       (IMG/myfoto.jpg)).      ,     ,  ../ (   DOC,       IMG,   :. /IMG/myfoto.jpg).


  4.1     .


 4.1.     

<html>

<head>

<title> </title>

</head>

<body>

<img src="image.jpg"/>

</body>

</html>



 .4.1        4.1    ,  .




.4.1.  



      .     ,   ,        , ,       .

     ,   ,  ,   ,      ,         .




 


     ,     ,          IMG.

   ,   width  height.            (       %).





    ,     ,   .


     ,          .

       IMG,    ,   ,   .        , ,    ,        -  (    ,   ).         ,    .4.2.




.4.2.  



  4.2       .


 4.2.   

<html>

<head>

<title> </title>

</head>

<body>

     <br/>

<img src="image.jpg" width="60"/>

   <br/>

<img src="image.jpg" width="50%"/>

     ( )<br/>

<img src="image.jpg" width="50" height="150"/>

</body>

</html>IMG_0628.jpg



  4.2      ,   .       ,      ,   .

   4.2   .4.2.

 .4.2 ,   -  ,   ,        .      ,    ,  .         .





      ,        .     ,       .


  ,       .




 


      ,     .   ,   ,      .

      ,      align  IMG.      ,        .

  align  ,      ,  ,   ,  .

 :

 left    ;

 right    .

 :

 top          ;

 texttop          ;

 middle        ;

 absmiddle       ;

 baseline         ;

 bottom   baseline;

 absbottom          .





     ,     .        ,   .            .  , ,    .


  4.3        .


 4.3.    

<html>

<head>

<title> </title>

</head>

<body>

<img src="image.jpg" width="70" align="top"/>      <br/>

<img src="image.jpg" width="70" align="absbottom"/>        <br/>

<img src="image.jpg" width="70" align="bottom"/>       <br/>




  .


   .

   ,     (https://www.litres.ru/igor-kvint/html-xhtml-i-css-na-100/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .


