 . -
  


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





 

 . -











 


       ,     ,         ,  ,    .       ,      ,      .

,    ,          .

            -   .




  


   .        ,   ,     ,  ,   ,        (HTML ).

          .      ,        .

 ,     , ,   .    ,   ,    - ,   [    ],   -   .   ,          .      .




     


    ,  ,   ,   ,       .

   ,       ,  ,   .          .

            ,         .




  


    ,          .  ,   ,   ,   ,         .  ,       .

        -.         frontend-.

 ,    ,  ,         ,    .  front-end    back-end        ,    .

  /  ,  ,      ,        .              .













    HTML.    XHTML,     HTML4.      .  :

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

    HTML 4.01



       -  HTML5.  ,    .          :

<!DOCTYPE html>

  HTML 5.x



     .       div-.   ,          .  ,       .        .

,    - -,     ,     .




   


    ,          . ,     W3C,     .

    ?           .      html.       .       .

 

 ,   ,  ,   , ,      ,        .




 


    ,   ,   .       ,    .

,       --  .  :

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Example</title>

</head>

<body>

<table width="300" border>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</table>

</body>

</html>

   








    Edge



     ,        .     5  5,      ,    .      .           .

   tr    td,    5 .

      2     4   

  ?,

    5  5,        .

        ,     .       -         ,     6  ,     .

        :

colspan     

rowspan     

:

<table width="300" border="1">

<tr>

<td rowspan="2">1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

</tr>

</table>








   



     2,          2,             td,    .     :








    



   ,        .  span,        , , .     row   ,  col (column)   .

       ,   .          ,    .

 ,      ,       ,   .

           .      -          .

 

       ,   ,  .

     ,       , ,       . , ,              jpg.       gif-.   gif ,   ,            ,      . (       )

  ,           .      ,      .        html-.   ,     ,               100%             .  .

       HTML5,     HTML4.  , ,        center,    ,            .




 





 


   ,              .          .          css,       div-.    ( )   ,      .          .

      ,  ,        .      span   color:red,      id     !?




Float:left


  ,           .   - div     ,   , ,            .           .       float.

Float:left     ,        .

 

     ,  .     display   block  inline-block.      div,    .

       .      ,     .




 





   (IDE)


     ,    .   IDE. IDE     .        (    ,       )         ,     .              IDE.

  .       .   , , ,    .     ,    ,           Windows.     Linux    .   Vim  ,        .

   Vim   html   ,    ,     :








 Vim   Windows PowerShell    Ubuntu



  ,    

        :








    ,      q   .  .



    Vim IDE,          .  ,      ,  Vim   .     Linux , ,   Windows,    Ubuntu      ,       .



 

        ,     ,   .          ( )   \.                 .



    .   (      IDE    )     ,    .

 ,       .          ,     .            Notepad++.      , -    .          ,       ,       .

 IDE,           Brackets.        .   ,         , ..  .    notepad    -   2018- .

        Brackets.      WEBStorm. WEBStorm   JetBrains          .      .

     :

Notepad    Windows.  ,   ,   .

Notepad++ (NPP)   ,   Notepad,    ,    -    .

Sublime    Linux,  ,      .  ,   Notepad++.  !?  .

Dreamweaver     .        ,    ,   .      -  ,   .  7       ,       .

Brackets       .      notepad++  phpstorm.         .

Visual Studio Code   -   C      Visual Studio.    ,    ,        .   ,        brackets.      Git.

PHPStorm      php-,     .    ,         .       ,   ,  .     ,     .     ,       php-        .

WebStorm      javascript .         /  Vue, Angular, React.

PyCharm        JetBrains,      ,     ,      , ,  Django.      ,      .

           ,       .   sublime  brackets     .

        !

WYSIWYG    ,     ,   .       ,      Point,      Google Docs,     .  ,      ,       .

        WordPress.  :    , ,  ,  ,      ,    , , .  -         . ,  .




 IDE


           Brackets.

   ,          .    Notepad++,   ,   - .

  Emmet         .

   Emmet: div.classname#ddd>label+input

  HTML: <div class="classname" id="ddd"><label for=""></label><input type="text"></div>

      Show Whitespace   Dennis Kehrig (      ,   ,    ).              .

             4.















        .      ,     ,  c  SASS (   SCSS).       2 .

   ,        ,     ,        ,              .

   .             .         ,      .

 ,        .  YAML    2 .




  Notepad++


  20+      ,       ,        .

 - .    IDE    ,    FTP-.   ,    , notepad   .   ,    Brackets  .     PHPStorm.

  .    -   ,       ,    .     Ctrl+Shift+V .      Notepad ++.

-

        notepad    ,        .




HTML








 HTML      HTML.    ,         .      ,   .

       :








   .



     head    .     .     ,      , -  .        ,            ,       .

!:  head     ,     .

   ,    .         p.








    .



   ,  2        .    ,       [ ]    .   ,         .

      (H1),  (p)    (ol).

 :

    -   .       + ,   ,   ,      ..          - .     ,        - . , ,       .     ,    ,    ,   ,       .      ,           , ,      .

 ,       ,     ,   -   (    - ) bb-,      .

,      zen-editor,                 -.   ,        .



HTML 

    ,  ,          ,     .    ,      ,     .

     XML .         ,      sitemap.xml.                .

        .        .




  


 2  . ,     ,   .   , ,    ,    , ..     . .    :

<h1>  </h1>

  /     

      .    , .        ,     .

<br>

  

 ,   

       ,    .              2 .

   HTML5      .             <br/>,   .     ,        ,   W3C   .

  ,   -  ,  --.        :

<p>,    <a href="#"></a></p>

  

      .     ,     ,   ,    ,  ,          .




 


          .       : div, span, p, a, img.

   ,      ,           ,     .       w3schools.com/tags/.




 


   ,      ,     :

html      .      .

head        .      (    ),        .

body    [body]    ,    .

    ,   :

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>



</body>

</html>

   

    ,   html ,    head     title.      body,      .       .

   Emmet

    IDE       Emmet.    -  html   :

    !

 

  ,   

      Brackets.

    .

<div>    ,     .   -. ..           . ,   a  ,         ,         display,  inline-block. Div    .

<h1><h6>    [. heading    h],    . H1    , ,  .  h6     .

       ,    .         . ,                ( ).

   .

        h1!

<p>           [. paragraph].   ,  ,  :   ,  ,      .         ,   .        .




  .


   .

   ,     (https://www.litres.ru/arseniy-olegovich-matycin/ya-verstalschik-veb-verstalschik/)  .

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


