How to create a website with html

If the site consists of one or several pages and in the short term will not be filled with a large amount of content or overgrown with complex functionality (online store, catalog, forum, etc.) Then it is better to create such a site in html in notepad.

  1. To do this, you need a ready-made design of your own production or a psd sorce code downloaded from the network. It needs to be cut out for html layout.
  2. Notepad, namely NotePad ++. It can be downloaded from the official site.
  3. File index.html. It can be created in any convenient folder on your computer. But it is better to select a separate folder for your site and place it there. I have a folder c: \ site \ index.html
  4. File c: \ site \ style.css. This is a style file, why you need it will become clear later.
  5. Folder c: \ site \ images. In this folder you need to put all the images necessary for the future site.
  6. Buy hosting and domain if you need to put the site on the Internet.

For convenience, I made an archive with images and already prepared empty index.html and style.css files. Download and unzip the archive in the desired folder.

A web server is required for the website to work. When accessing a domain or folder of a site without specifying a specific file, the server will search in it for index.html or index.php if it does not find it will display a list of files in the folder.

Since we have a simple html page, we don’t need to install a server on our computer, since any browser understands the markup language. However, if you need to use php, then just the browser can not do it.

Now you need to open the file index.html and style.css in NotePad ++

Html document structure

Copy the code in the file index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This is page title</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<h1>Headline</h1>
<!-- comment -->
<p>Paragraph.</p>
</body>
</html>

Now open it in the browser, it should turn out like this:

In short, I will describe what these tags mean. If you want to find out more -search the google, and as they say, information on this topic is the sea.

Instruct the browser according to which standard you want to display the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The html tag tells where the html document begins and ends

<html>...</html>

The head tag is necessary for placing service information, styles, scripts are connected here and meta information is placed on the page. Visitors of the site do not see the contents of this tag.

<head>...</head>

The body tag contains the page markup, the site visitors see the contents of this tag.

<body>...</body>

Layout or website creation in html

In the course of website layout, there will be tags and attributes that cannot be described in this article. Therefore, I recommend to use the site htmlbook.ru. In addition, I advise you to carefully study each tag and css style that you meet.

So what we will impose:

 

Background and main frame of the site

Replace the contents of your index.html file with the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My first html website</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <!-- website main block -->
    <div id="basic">
    
    </div>
</body>
</html>

And add the following code to style.css:

/*site layout*/
body {
padding:0px
margin:0
background:#4c281e
font-size:14px
font-family:ArialSans-serif;
}
#basic {
width:960px
min-height:950px
margin:0 auto
padding:20px 20px 20px 20px
background:#fff;
}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}
Refresh your browser page (F5), it should look like this:
Site header
Add the following code to the div tag with the basic ID:
<!-- Header -->
<div id="head-site">
<a href="/"><img src="/images/logo.png" alt="Coffee house" title="Coffee house" /></a>
<img src="/images/telefon.png" alt="+1 (3537) 25-60-60" title="+1 (3537) 25-60-60" class="telephone" />
</div>
We would get the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My first html website</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <!-- website main block -->
    <div id="basic">
     <!-- Header -->
    <div id="head-site">
    <a href="/"><img src="/images/logo.png" alt="Coffee house" title="Coffee house" /></a>
    <img src="/images/telefon.png" alt="+1 (3537) 25-60-60" title="+1 (3537) 25-60-60" class="telephone" />
</div>
    </div>
</body>
</html>
And add to the css file line:
/*Header*/
li.none-bg {background:none!important;}
.telephone {float:right;}
Top menu of the site
In order to navigation menu to appear on our html site, as displayed in the layout, add to index.html after:
<!-- Header -->
<div id="head-site">
<a href="/"><img src="/images/logo.png" alt="Coffee house" title="Coffee house" /></a>
<img src="/images/telefon.png" alt="+1 (3537) 25-60-60" title="+1 (3537) 25-60-60" class="telephone" />
</div>
This code:
<!-- Top navigation menu -->
<div id="top-menu">
<div class="bg-1">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Assortment</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Book a table</a></li>
<li><a href="#">Our clients</a></li>
<li class="none-bg"><a href="#">Contacts</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
So that we get:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My first html website</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <!-- website main block -->
    <div id="basic">
     <!-- Header -->
    <div id="head-site">
    <a href="/"><img src="/images/logo.png" alt="Coffee house" title="Coffee house" /></a>
    <img src="/images/telefon.png" alt="+1 (3537) 25-60-60" title="+1 (3537) 25-60-60" class="telephone" />
</div>
<!-- Top navigation menu -->
<div id="top-menu">
<div class="bg-1">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Assortment</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Book a table</a></li>
<li><a href="#">Our clients</a></li>
<li class="none-bg"><a href="#">Contacts</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
    </div>
</body>
</html>
And in the style.css file:
/*Top navigation menu*/
#top-menu {width:960pxheight:74px; }
.bg-1 {width:950pxheight:64pxbackground:#4c281e url(images/m1.png) repeat-xpadding:0 0 0 10px;}
.bg-2 {width:940pxheight:8pxbackground:#ff9c00margin:0 auto;}
.bg-1 ul {margin:0padding:0list-style:none;}
.bg-1 ul li {float:leftbackground:url(images/m2.png) no-repeat right centerpadding:0 2px 0 0;}
.bg-1 ul li a {display:blockheight:40pxpadding:24px 27px 0 27pxcolor:#ff9c00text-decoration:nonetext-transform:uppercase;}
.bg-1 ul li a:hover {color:#fffbackground:#ff9c00;}
Now the site has a phone, logo and a menu when hovering on which the background changes:
Left menu and content
It’s time to make the left menu and the block with content. To do this, copy the code and carefully study what’s what.
After the block:
<div id="top-menu">
.............
</div>
Add the following:

<!-- Left menu and content -->
<div id="content">
 
<!-- Content - right block -->
<div class="right">
<h1>Coffee Americano</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
 
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />

<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>

The index.html file will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My first html website</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <!-- website main block -->
    <div id="basic">
     <!-- Header -->
    <div id="head-site">
    <a href="/"><img src="images/logo.png" alt="Coffee house" title="Coffee house" /></a>
    <img src="images/telefon.png" alt="+1 (3537) 25-60-60" title="+1 (3537) 25-60-60" class="telephone" />
</div>
<!-- Top navigation menu -->
<div id="top-menu">
<div class="bg-1">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Assortment</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Book a table</a></li>
<li><a href="#">Our clients</a></li>
<li class="none-bg"><a href="#">Contacts</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
<!-- Left menu and content -->
<div id="content">
 
<!-- Content - right block -->
<div class="right">
<h1>Coffee Americano</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
 
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />

<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>

</div>

    </div>

</body>
</html>

Add the following to style.css:

/*Left menu and content*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}

If everything is done correctly, the site will turn out as in the picture below:

Site footer

After the block:

<!-- Left menu - left block -->
<div class="left">

..........

</div>

Paste:

<div class="myclr"></div>

<!-- Footer -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">Coffee House 2019.<br/>
45 Pine street, Texas 13564</div>
<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
<div class="p2">All rights reserved.</div>

</div>
<div class="myclr"></div>

Now the whole index.html file looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My first html website</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <!-- website main block -->
    <div id="basic">
     <!-- Header -->
    <div id="head-site">
    <a href="/"><img src="images/logo.png" alt="Coffee house" title="Coffee house" /></a>
    <img src="images/telefon.png" alt="+1 (3537) 25-60-60" title="+1 (3537) 25-60-60" class="telephone" />
</div>
<!-- Top navigation menu -->
<div id="top-menu">
<div class="bg-1">
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Assortment</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Book a table</a></li>
<li><a href="#">Our clients</a></li>
<li class="none-bg"><a href="#">Contacts</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
<!-- Left menu and content -->
<div id="content">
 
<!-- Content - right block -->
<div class="right">
<h1>Coffee Americano</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
 
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />

<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
 
<!-- Left menu - left block -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="#">Coffee Iris</a></li>
<li><a href="#">Coffee Americano</a></li>
<li><a href="#">Coffee Glyase</a></li>
<li><a href="#">Coffee Dippio</a></li>
<li><a href="#">Coffee Capuchino</a></li>
<li><a href="#">Coffee Con Panna</a></li>
<li><a href="#">Coffee Coretto</a></li>
<li><a href="#">Coffee Latte</a></li>
<li class="none-bg"><a href="#">Coffee Lungo</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
 
</div>
 <div class="myclr"></div>

<!-- Footer -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">Coffee House 2019.<br/>
45 Pine street, Texas 13564</div>
<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
<div class="p2">All rights reserved.</div>

</div>
<div class="myclr"></div>
</div>

    </div>

</body>
</html>

In the css file, add the code to the bottom:

/*Footer*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

Now the whole style.css file looks like this:

/*site layout*/

body {padding:0px;margin:0;background:#4c281e;font-size:14px;font-family:Arial, Sans-serif;}

#basic {width:960px;min-height:950px;margin:0 auto;padding:20px 20px 20px 20px;background:#fff;}

img {border:0;}

a {color:#ff9c00;}

a:hover {text-decoration:none;}
/*Header*/
li.none-bg {background:none!important;}
.telephone {float:right;}
/*Top navigation menu*/

#top-menu {width:960px;height:74px;}

.bg-1 {width:950px;height:64px;background-color:#4c281e;background-image:url(images/m1.png) repeat-x;padding:0 0 0 10px;}

.bg-2 {width:940px;height:8px;background:#ff9c00;margin:0 auto;}

.bg-1 ul {margin:0;padding:0;list-style:none;}

.bg-1 ul li {float:left;background-image:url(images/m2.png) no-repeat right center;padding:0 2px 0 0;}

.bg-1 ul li a {display:block;height:40px;padding:24px 27px 0 27px;color:#ff9c00;text-decoration:none;text-transform:uppercase;}

.bg-1 ul li a:hover {color:#fff;background:#ff9c00;}
/*Left menu and content*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}
/*Footer*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}

And the site itself is like this:

Other site pages and menu links

The site turned out, but when you click on the menu links, nothing happens. Therefore, we need to come up with the name of the pages, register them in the menu URL and create pages with these names.

Page titles must be unique and consist of Latin characters.

  • about-us.html – About Us
  • assortment.html – Assortment
  • reviews.html – Reviews
  • book-a-table.html – Book a table
  • our-clients.html – Our clients
  • contacts.html – Contacts

The same should be done with the left menu.

  • coffee-iris.html – Coffee Iris
  • coffee-americano.html – Coffee Americano
  • coffee-glyase.html – Coffee Glyase
  • coffee-dippio.html – Coffee Dippio
  • coffee-capuchino.html – Coffee Capuchino
  • coffee-con-panna.html – Coffee Con Panna
  • coffee-coretto.html – Coffee Coretto
  • coffee-latte.html – Coffee Latte
  • coffee-lungo.html – Coffee Lungo

Now open index.html in NotePad ++ and add the necessary links to the appropriate menu, which would turn out like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My first html website</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <!-- website main block -->
    <div id="basic">
     <!-- Header -->
    <div id="head-site">
    <a href="/"><img src="images/logo.png" alt="Coffee house" title="Coffee house" /></a>
    <img src="images/telefon.png" alt="+1 (3537) 25-60-60" title="+1 (3537) 25-60-60" class="telephone" />
</div>
<!-- Top navigation menu -->
<div id="top-menu">
<div class="bg-1">
<ul>
<li><a href="/about-us.html">About us</a></li>
<li><a href="/assortment.html">Assortment</a></li>
<li><a href="/reviews.html">Reviews</a></li>
<li><a href="/book-a-table.html">Book a table</a></li>
<li><a href="/our-clients.html">Our clients</a></li>
<li class="none-bg"><a href="/contacts.html">Contacts</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
<!-- Left menu and content -->
<div id="content">
 
<!-- Content - right block -->
<div class="right">
<h1>Coffee Americano</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>

<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
 
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />

<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p>

<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
 
<!-- Left menu - left block -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="/coffee-iris.html">Coffee Iris</a></li>
<li><a href="/coffee-americano.html">Coffee Americano</a></li>
<li><a href="/coffee-glyase.html">Coffee Glyase</a></li>
<li><a href="/coffee-dippio.html">Coffee Dippio</a></li>
<li><a href="/coffee-capuchino.html">Coffee Capuchino</a></li>
<li><a href="/coffee-con-panna.html">Coffee Con Panna</a></li>
<li><a href="/coffee-coretto.html">Coffee Coretto</a></li>
<li><a href="/coffee-latte.html">Coffee Latte</a></li>
<li class="none-bg"><a href="/coffee-lungo.html">Coffee Lungo</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
 
</div>
 <div class="myclr"></div>

<!-- Footer -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">Coffee House 2019.<br/>
45 Pine street, Texas 13564</div>
<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
<div class="p2">All rights reserved.</div>

</div>
<div class="myclr"></div>
</div>

    </div>

</body>
</html>

Now click “Save” then “File> Save As” and save for each link a file with the corresponding name in the folder with the site files. This is what I got:

The whole site is ready. It remains only to change the content in each page.

In spite of its simplicity, this site has a very big disadvantage. To change one menu item or design element, we will have to do it in each page. When there are more than 10 pages, terrible confusion begins with its maintenance. So the creation of a html site in a notebook, I advise you to do only for very small sites or single-page LandingPage. And CMS to develop full sites (they are not as difficult as it seems).