HTML is the language of the site markup. Many people consider it programming, but it's not. In HTML, there are no variables, calculations, arrays, or other elements present in any programming language.
Using HTML, the developer can create only the appearance of the site. It is important to understand that no site exists without markup. HTML is the base for creating web pages. The rest of the functionality is added by different programming languages.
Creating an html document
You can create a simple website page in any editor. Even "Notepad" will do. It is recommended for a novice developer to use other editors that have auto-substitution functions and other prompts. Thanks to this, you can create ready-made tables, links, images and other elements. And in "Notepad" each letter has to be written manually.
As a rule, "Notepad" is used only in cases where there are no other tools at hand. First, a text document is created, and then saved in html format. All pages on the site must have the html extension.
The html language is hierarchical. That is, there is a special structure for the html document. What it is? Let's consider below for clarity.
Structure of the html-document. Example
The structure is always the same. If you want to change something, the browser will not be able to process it. As a result, you will not get what you intended.
The figure above shows the structure of any html-file. The first item indicates the file type. This tag is specified once. If you use special editors, the whole structure will be created automatically. You will need to adjust the default values.
The structure of the html document is the main tags:
Of these three tags is the skeleton of the entire site. Pay attention to the picture. All these tags have a closing tag with a "/" character. If you are writing by hand, get used to putting both tags at once - opening and closing.
It was said above that the pages of the sites have the extension .html. That is, if you create a text document, but at the same time write the correct code, the browser will still display text just for you. There will be no code conversion.
Head section
In the figure below paragraph 3, the head section is indicated. This section indicates the service information. For example, you can specify the encoding (step 4) and the page title (step 5).
The title should always be. Without it, no search engine can determine the name of the content (text) on the web page. And this is bad for website promotion. Moreover, the browser at the top does not specify the title of the page. This is an inconvenience to the user.
The structure of the html-document is such that the title
is specified only in the head section. If the <title> tag is specified in the body section or after it, the handler does not pay attention to it. </p>
<p> In addition, head section specifies information for connecting scripts, style files, instructions for search engines or any other data that a user should not see, but they are important for the browser or programmers. </p>
<h2> Connecting Styles </h2><p> The structure of the html-document allows you to connect styles in various ways. Moreover, they can be written individually in each element. But this method is not recommended, because the code becomes too large and inconvenient. </p>
<p> Search engines recommend that all styles be rendered in a separate file, and in elements simply use different classes. </p>
<p> The file is connected as follows. </p>
<p> <Link rel = "stylesheet" href = http: // site /article/256158/%E2%80%9Cstyle.css%E2%80%9D type = "text / css"> </p>
<p> The href attribute specifies the path to the file. If there is an error in the path, the styles will not load. Also, the type attribute is required, which indicates that this is a css file. </p>
<p> Another option is to define styles directly in the head section. </p>
<p><amp-img src="https://images.birmiss.com/image/adb6b1067deb0ec9.jpg" alt="Styles in html" width="259" height="203" layout="intrinsic"></amp-img></p>
<p> But this option is also not very recommended. These methods are very different in that the css file can be one for the entire site, and all the changes in it will be instantly applied to all pages. And if you use the method shown in the figure above, then you will have to make changes to all existing pages of the site. </p>
<p> If the class you are creating will be used only on one page, then this option is right for you. </p>
<h2> Connecting scripts </h2><p> Scripts are connected as follows. </p>
<p> <Script type = "text / javascript" src = http: // site /article/256158/%E2%80%9Cmain.js%E2%80%9D%3E%3C/script%3E%3C/p> </p>
<p> Two attributes are required here: type and src. In the first, we specify that this is a Javascript file, and the second is where the file is located. If you make a typo, nothing will work. </p>
<h2> Section body </h2><p> The structure of the html-document is such that it is necessary to place the content that will be visible to the user only in the body section. The tag name speaks for itself. </p>
<p> Here you specify all the main page code, which can include an unlimited number of elements. But the longer the code, the longer it will be processed. </p>
<p> Consider the most basic tags that you can use in the body area. There are not so many basic ones. All the rest you will find out as your knowledge and practice grow. </p>
<h2> Basic tags </h2><p> The structure of the html-document requires a mandatory order of writing elements. Tags should always be surrounded by brackets <>. Without this, the browser does not understand that this is a tag. After the opening parenthesis, the name of the element (tag) always follows. If you allow a space between the <and name, the browser will consider this as text. </p>
<p> Consider the example of an image tag. Note that this tag is not closing, unlike links, paragraphs, and many others. </p>
<p><amp-img src="https://images.birmiss.com/image/90d698b67df00eca.jpg" alt="Html document structure what it is" width="670" height="267" layout="intrinsic"></amp-img></p>
<p> The order of the attributes does not matter. But their writing is very important. Always the name of the attribute first comes, then the equal sign, then the value of the attribute is written in quotes. The value can be different - digital or text. </p>
<p> The src attribute in all tags indicates the path of the file to load. The alt attribute in all elements indicates a short description. In this case, a picture of bird.jpg with a description of the bird photo is loaded. </p>
<p> In addition, in the img tag, you could specify dimensions, only width or height, title, alignment, style class or frame. </p>
<p> Consider the other main tags that are listed in the body section. </p>
<table align=center cellpadding=5 cellspacing=0><tbody><tr><td valign=top width=153><p> Tag </p>
</td><td valign=top width=554><p> Appointment </p>
</td></tr><tr><td valign=top width=153><p> <a> ... </a> </p>
</td><td valign=top width=554><p> References </p>
</td></tr><tr><td valign=top width=153><p> <Img> </p>
</td><td valign=top width=554><p> Images </p>
</td></tr><tr><td valign=top width=153><p> <P> ... </ p> </p>
</td><td valign=top width=554><p> Paragraph </p>
</td></tr><tr><td valign=top width=153><p> Pictures </p>
</td><td valign=top width=554><p> Transferring text to a new line </p>
</td></tr><tr><td valign=top width=153><p> <Strong> ... </ strong> </p>
</td><td valign=top width=554><p> Thumbnail </p>
</td></tr><tr><td valign=top width=153><p> <I> ... </ i> </p>
</td><td valign=top width=554><p> italics </p>
</td></tr><tr><td valign=top width=153><p> <S> ... </ s> </p>
</td><td valign=top width=554><p> Strikethrough text </p>
</td></tr><tr><td valign=top width=153><p> <U> ... </ u> </p>
</td><td valign=top width=554><p> Underlined text </p>
</td></tr><tr><td valign=top width=153><p> <Ol> </ ol>, <ul> </ ul> </p>
</td><td valign=top width=554><p> Lists </p>
</td></tr><tr><td valign=top width=153><p> <Table> </ table> </p>
</td><td valign=top width=554><p> Tables </p>
</td></tr></tbody></table><h2> How can I imagine all this in my head </h2><p> Beginning developers can not always immediately imagine all this speculatively. Look at a few examples of the structure of the web pages, and then you will definitely understand. </p>
<p><amp-img src="https://images.birmiss.com/image/d776e2667df50ecb.jpg" alt="Creating an html document" width="391" height="445" layout="intrinsic"></amp-img></p>
<p> There is such an option: </p>
<p><amp-img src="https://images.birmiss.com/image/ea16cbd67dfa0ecc.jpg" alt="Structure html document main tags" width="472" height="275" layout="intrinsic"></amp-img></p>
<p> And this: </p>
<p><amp-img src="https://images.birmiss.com/image/68465c077dff0ecd.jpg" alt="Html document structure example" width="457" height="282" layout="intrinsic"></amp-img></p>
<h2> Using Styles </h2><p> As mentioned in the beginning, you can connect styles to both the file and specify in the head section. In any case, the description of classes is exactly the same. </p>
<p> For example, you can specify a style for the header. Then you need to write h1 (since the style will be for the second level header), open parentheses and write what properties will be in this element. If you know basic English, then there should not be any problems. All properties are called human language. </p>
<p><amp-img src="https://images.birmiss.com/image/552675b77e040ece.jpg" alt="Using CSS styles" width="428" height="269" layout="intrinsic"></amp-img></p>
<p> If you want to specify this style for several elements at once, then write them separated by commas. </p>
<p><amp-img src="https://images.birmiss.com/image/dea265687ddd0ec6.jpg" alt="Using several styles of css" width="357" height="226" layout="intrinsic"></amp-img></p>
<p> The result is a red header. </p>
<p><amp-img src="https://images.birmiss.com/image/e3c24cd87de20ec7.jpg" alt="Text Document" width="351" height="203" layout="intrinsic"></amp-img></p>
<p> The above methods are suitable for the design of standard elements. But you can also create your own classes. Their name should start with a dot, then any arbitrary name is written. </p>
<p><amp-img src="https://images.birmiss.com/image/a46236087de70ec8.jpg" alt="Css classes" width="365" height="278" layout="intrinsic"></amp-img></p>
<p> You need to use them like this. </p>
<p><amp-img src="https://images.birmiss.com/image/99021fb87dec0ec9.jpg" alt="Using css classes" width="398" height="203" layout="intrinsic"></amp-img></p>
<p> Note: if you specified style settings for a standard element, you do not need to write the word class. The style will be applied by default. In the class attribute, you can specify only those styles that you start with a period. </p>
</div>
<!--mvp-content-main-->
</div>
<!--mvp-content-body-top-->
</div>
<!--mvp-content-body-->
</div>
<!--mvp-content-wrap-->
</div>
<!--mvp-post-content-->
</div>
<!--mvp-post-main-->
<div id="mvp-post-more-wrap" class="left relative">
<h4 class="mvp-post-header">
<span class="mvp-post-header">Similar articles</span>
</h4>
<ul class="mvp-post-more-list left relative">
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/popular-problem-utorrent-the-disk-is-overloaded-and-the-download-is-paused/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/38f68fb66fc10e98-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/38f68fb66fc10e98-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/popular-problem-utorrent-the-disk-is-overloaded-and-the-download-is-paused/">
<p>Popular problem uTorrent - "the disk is overloaded and the download is paused"</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Computers</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/how-to-reduce-the-screen-on-your-computer-and-restore-it-back/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/79b844317e2b0ecf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/79b844317e2b0ecf-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/how-to-reduce-the-screen-on-your-computer-and-restore-it-back/">
<p>How to reduce the screen on your computer and restore it back</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Computers</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/how-to-disable-advertising-in-mozilla-making-surfing-the-network-more-comfortable/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/3136dae36f890e92-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/3136dae36f890e92-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/how-to-disable-advertising-in-mozilla-making-surfing-the-network-more-comfortable/">
<p>How to disable advertising in Mozilla, making surfing the network more comfortable?</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Computers</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/how-to-change-the-background-in-photoshop-top-3-best-ways/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/98ffa2cd62210e6e-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/98ffa2cd62210e6e-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/how-to-change-the-background-in-photoshop-top-3-best-ways/">
<p>How to change the background in Photoshop? TOP 3 best ways</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Computers</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/dropbox-what-is-this-dropbox-what-is-this-program-how-to-use-dropbox/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/228c338070600ea2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/228c338070600ea2-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/dropbox-what-is-this-dropbox-what-is-this-program-how-to-use-dropbox/">
<p>Dropbox - what is this? Dropbox - what is this program? How to use Dropbox</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Computers</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/how-to-change-the-browser-to-an-alternative-software-product/">
<p>How to change the browser to an alternative software product</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Computers</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
</ul>
</div>
<!--mvp-post-more-wrap-->
<p> </p><p> </p><p> </p><p> </p>
<div id="mvp-post-more-wrap" class="left relative">
<h4 class="mvp-post-header">
<span class="mvp-post-header">Trending Now</span>
</h4>
<ul class="mvp-post-more-list left relative">
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/oval-face-and-its-other-forms/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/dea436bc61a50e5b-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/dea436bc61a50e5b-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/oval-face-and-its-other-forms/">
<p>Oval face and its other forms</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Beauty</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/digital-signal-quality-reliability-security/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/f494ade761d60e64-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/f494ade761d60e64-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/digital-signal-quality-reliability-security/">
<p>Digital signal - quality, reliability, security</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Technologies</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/what-say-the-girl-that-i-love-her-or-something-else/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/eb5abadd6fde0e98-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/eb5abadd6fde0e98-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/what-say-the-girl-that-i-love-her-or-something-else/">
<p>What say the girl: that I love her or something else?</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Relations</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/aviators-park-in-st-petersburg-camping/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/6be11ca57e660ed5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/6be11ca57e660ed5-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/aviators-park-in-st-petersburg-camping/">
<p>Aviator's Park in St. Petersburg. Camping</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Travels</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/espol-ointment-instructions-for-use-price-and-reviews/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/37804fac7e0c0ece-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/37804fac7e0c0ece-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/espol-ointment-instructions-for-use-price-and-reviews/">
<p>"Espol" (ointment): instructions for use, price and reviews</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Health</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/dracula-reviews-of-the-movie/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/a15eff8170960eaa-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/a15eff8170960eaa-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/dracula-reviews-of-the-movie/">
<p>"Dracula": reviews of the movie</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Arts & Entertainment</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
</ul>
</div>
<!--mvp-post-more-wrap-->
<p> </p><p> </p><p> </p><p> </p>
<div id="mvp-post-more-wrap" class="left relative">
<h4 class="mvp-post-header" style="margin-top:40px;">
<span class="mvp-post-header">Newest</span>
</h4>
<ul class="mvp-post-more-list left relative">
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/treatment-of-inguinal-hernia-in-men-without-surgery-treatment-with-folk-remedies/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/7e7cced870380ea5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/7e7cced870380ea5-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/treatment-of-inguinal-hernia-in-men-without-surgery-treatment-with-folk-remedies/">
<p>Treatment of inguinal hernia in men without surgery. Treatment with folk remedies</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Health</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/female-images-in-the-novel-crime-and-punishment-f-m-dostoevsky/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/7d8d97577df80ec7-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/7d8d97577df80ec7-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/female-images-in-the-novel-crime-and-punishment-f-m-dostoevsky/">
<p>Female images in the novel "Crime and Punishment" F.M. Dostoevsky</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Education</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/pneumatic-rifle-for-hunting-how-to-make-the-right-choice/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/fbbe027062250e6f-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/fbbe027062250e6f-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/pneumatic-rifle-for-hunting-how-to-make-the-right-choice/">
<p>Pneumatic rifle for hunting - how to make the right choice</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Sports and Fitness</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/secrets-of-filming-and-actors-the-lord-of-the-rings-reveals-secrets/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/bc3c42e070360ea0-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/bc3c42e070360ea0-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/secrets-of-filming-and-actors-the-lord-of-the-rings-reveals-secrets/">
<p>Secrets of filming and actors. "The Lord of the Rings" reveals secrets</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Arts & Entertainment</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/evgeny-kiselev-biography-of-tv-host/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/c0640d8562d30e7d-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/c0640d8562d30e7d-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/evgeny-kiselev-biography-of-tv-host/">
<p>Evgeny Kiselev: biography of TV host</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">News and Society</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
<li>
<div class="mvp-post-more-img left relative">
<a href="https://en.birmiss.com/than-to-have-a-cup-of-wine-classic-traditional-snacks/">
<amp-img class="mvp-reg-img" src="https://images.birmiss.com/image/6ae7ba577db70ebd-560x315.jpg" width="560" height="315" layout="responsive"></amp-img>
<amp-img class="mvp-mob-img" src="https://images.birmiss.com/image/6ae7ba577db70ebd-80x80.jpg" width="80" height="80" layout="responsive"></amp-img>
</a>
</div>
<!--mvp-post-more-img-->
<div class="mvp-post-more-text left relative">
<a href="https://en.birmiss.com/than-to-have-a-cup-of-wine-classic-traditional-snacks/">
<p>Than to have a cup of wine? Classic traditional snacks</p>
<h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Food and drink</span></h3>
</a>
</div>
<!--mvp-post-more-text-->
</li>
</ul>
</div>
<!--mvp-post-more-wrap-->
</div>
<!--mvp-main-box-->
</div>
<!--mvp-article-cont-->
</article>
<!--mvp-article-wrap-->
</div>
<!--mvp-main-body-wrap-->
<footer id="mvp-foot-wrap" class="left relative">
<div id="mvp-foot-bot" class="left relative">
<div class="mvp-main-box">
<div id="mvp-foot-copy" class="left relative">
<p>Copyright © 2018 en.birmiss.com. Theme powered by WordPress.</p>
</div>
<!--mvp-foot-copy-->
</div>
<!--mvp-main-box-->
</div>
<!--mvp-foot-bot-->
</footer>
</div>
<!--mvp-site-main-->
</div>
<!--mvp-site-wall-->
</div>
<!--mvp-site-->
<div id="statcounter">
<amp-pixel src="https://c.statcounter.com/11999666/0/ec2c5c75/1/">
</amp-pixel>
</div>
</body>
</html>
<!-- Dynamic page generated in 1.316 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-09-30 02:22:00 -->
<!-- 0.001 -->