) and child selector (tag
is a subsidiary of ). In this case, the rules are equivalent, since all the conditions for them are met and do not contradict each other. In such cases, the style shown in the code below is applied, so the italic text appears in red. If you reverse the rules and put DIV I below, the text color will change from red to green.
Note that in most cases you can avoid adding child selectors by replacing them with context selectors. However, the use of child selectors expands the ability to control element styles, which ultimately allows you to get desired result, as well as simple and clear code.
It is most convenient to use these selectors for elements that have a hierarchical structure - this includes, for example, tables and various lists. Example 12.3 shows changing the appearance of a list using styles. By nesting one list into another we get a type of menu. In this case, the headings are located horizontally, and the set of links is located vertically under the headings (Fig. 12.3).
Rice. 12.3. List as a menu
To position text horizontally, add a style to the LI selector float property. In order to separate the style of a horizontal and vertical list, child selectors are used (example 12.3).
Example 12.3. Using Child Selectors
HTML5 CSS 2.1 IE Cr Op Sa Fx
Child selectors
In this example, child selectors are required to separate the style of the list items top level and nested lists that do different tasks, so the style for them should not overlap.
Questions to check
1. What color will the bold italic text be in the code?
Illumination standards are based on based on the classification of visual work according to certain quantitative characteristics.
When using the following style?
P ( color: green; )
B (color: blue; )
I (color: orange; )
B > I ( color: olive; )
P > I ( color: yellow; )
- Green.
- Blue.
- Orange.
- Olive.
- Yellow.
2. Which element is the parent element for the tag ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. For which tag is the element<!DOCTYPE>acts as a parent?</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Not for any tag.</li>
</ol><h2>Answers</h2>
<p>1. Olive.</p>
<p>3. Not for any tag.</p>
<p>Tag<!DOCTYPE>is responsible for the document type in HTML (DTD "document type definition", description of the document type). To be more precise, these are instructions for the browser what type of document is presented below.</p>
<p>Arises <a href="https://gtavrl.ru/en/apt-get-upravlenie-paketami-v-ubuntu-voznikaet-logichnyi-vopros-zachem-nuzhen/">logical question</a>: is html really different? The point is that in different <a href="https://gtavrl.ru/en/avtor-pervonachalnoi-versii-html-http-web-html-istoriya-razvitiya-yazyka/">html versions</a> new tags appeared. New properties also appeared in CSS. In order for the browser to correctly understand which standard the page complies with, it is recommended to clearly indicate the document type in<!DOCTYPE>
.</p>
<p>Located<!DOCTYPE>at the very beginning of the html code (before the tag <html>
).</p>
<p>Syntax<!DOCTYPE>
</p>
<blockquote><!DOCTYPE
[<span>Top level element</span>] [Publicity ] "[Registration ]//[Organization ]//[Type ] [Name ]//[Language ]" ""> <html
>
...
</blockquote>
<ul><li><span>Top level element</span>- top-level element in the document (for HTML this is a tag <html>
)</li>
<li>Publicity - the value is PUBLIC (the object is public) or SYSTEM ( <a href="https://gtavrl.ru/en/kak-pravilno-ochistit-pamyat-na-androide-kak-ochistit-vnutrennyuyu/">system resource</a>). For example, such as <a href="https://gtavrl.ru/en/kak-otkryt-dostup-na-kompyutere-podklyuchenie-obshchego-dostupa-k-failam-sozdanie/">local file</a>. For HTML/XHTML the value is PUBLIC.</li>
<li>Registration - takes one of two values: plus (+) - the developer is registered with ISO and minus (-) - the developer is not registered. For W3C the value is set to minus.</li>
<li>Organization - The unique name of the organization that developed the DTD. Officially HTML/XHTML is published by the W3C, and this is the name written in<!DOCTYPE>
.</li>
<li>Type - the type of the document being described (for HTML/XHTML, the DTD value).</li>
<li>Name - a unique document name to describe the DTD.</li>
<li>Language is the language in which the text is written to describe the object. Contains two letters, written in uppercase. For example, EN.</li>
<li>URL - the address of the document with the DTD.</li>
</ul><p>Let's look at which standard values are most common.</p>
<h2>Table with values<!DOCTYPE>and descriptions for them</h2>
<table width="100%" cellpadding="2" cellspacing="0" border="1" bordercolor="#888" style="border-collapse: collapse"><tr style="font-size:15px;font-weight:bold"><td>DOCTYPE</td>
<td>Description</td>
</tr><tr><td><span><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
</span>
</td>
<td>Strict HTML syntax</td>
</tr><tr><td><span><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
</span>
</td>
<td>Transitional HTML syntax</td>
</tr><tr><td><span><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
</span>
</td>
<td>HTML document uses frames</td>
</tr><tr><td><!DOCTYPE html>
</td>
<td>HTML5 standard. For all documents. It is recommended to use it on your websites.</td>
</tr><tr><td><span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</span>
</td>
<td>Strict XHTML syntax. Includes all HTML elements and attributes, except legacy presentation ones. Framesets are also not allowed.</td>
</tr><tr><td><span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</span>
</td>
<td>Transitional XHTML syntax. Includes all HTML elements and attributes, along with legacy presentation ones. Framesets are not allowed.</td>
</tr><tr><td><span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
</span>
</td>
<td>Same as XHTML 1.0 Transitional, but allows frames.</td>
</tr><tr><td><span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
</span>
</td>
<td>Same as XHTML 1.0 Strict, but allows adding modules.</td>
</tr></table><h2>Which<!DOCTYPE>choose</h2>
<p>To sum up, we can say that<!DOCTYPE>is not <a href="https://gtavrl.ru/en/obyazatelnye-neobyazatelnye-i-nedopustimye-elementy-vozmozhny/">mandatory element</a>, but its use reduces the risk of problems with displaying the html page in different browsers.</p>
<p>In fact, the following option will suit everyone:</p>
<blockquote><!DOCTYPE
html
>
<html
>
...
</blockquote>
<p>Today let's get started <a href="https://gtavrl.ru/en/informatika-elementy-html-tegi-iii-izuchenie-novogo-materiala/">learning html</a> and css. I will try to explain this topic as clearly as possible for any reader. And it doesn’t matter whether you are familiar with this topic or just have a desire to study the code, which is quite widely used in website building. And to touch as much as possible <a href="https://gtavrl.ru/en/primery-oformleniya-bolshih-proektov-fpga-o-dokumentirovanii-proektov-dlya-plis-chto/">more examples</a> application and use of code, I plan to write a very impressive list of articles dedicated to, without using any cms, or combining html pages with the dle and wordpress engines. We will analyze questions as they arise, and not in the traditional style, first theory, and then practice. I will immediately show everything in practice, supporting everything with theory.</p>
<p>But let's start, of course, from the beginning. That is, what is html? And another important question: “Why do you need a doctype and which one to choose?” Actually, this is the topic of today’s post.</p>
<h3>What is html?</h3>
<p>Html is an abbreviation for HyperText Markup Language, which defines the arrangement of elements on a web page and their design. <a href="https://gtavrl.ru/en/perl-yazyk-programmirovaniya-samouchitel-tipy-dannyh-v-perl-upakovka/">This language</a> does not limit the webmaster in any way in his imagination and allows him to create almost any structure and design of the page. In general, if you decide to devote yourself to creating websites, you must know html code. There is nothing complicated about it, and I hope that based on the results of the series of articles, you will be convinced of this.</p>
<p>Any website code begins with a document type definition (DTD - document type definition (document type description)) by browsers in order to correctly display the site on our monitors. And to help the browser decide, you need to indicate the type of document that is used on the site. There is a tag for this <DOCTYPE>. Why do you need to specify the document type? This is necessary because html exists in several versions of the language. And in addition, there is an extended markup language (XHTML - Extensible Hypertext Markup Language), which differs from html in syntax. And if you don’t do this, the web browser may get confused and not display our page correctly. Therefore, we will look at what types of documents there are. Below, I will offer a table with the varieties of main types of documents - <DOCTYPE>:</p>
<table class="stat"><tbody><tr><td><b>DOCTYPE</b>
</td>
<td><b>Description</b>
</td>
</tr><tr><td class="zag" colspan="2"><b>HTML 4.01</b>
</td>
</tr><tr><td><!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
</td>
<td>Strict HTML syntax.</td>
</tr><tr><td><!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
</td>
<td>Transitional HTML syntax.</td>
</tr><tr><td><!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
</td>
<td>HTML document using frames.</td>
</tr><tr><td class="zag" colspan="2"><b>HTML 5</b>
</td>
</tr><tr><td><!DOCTYPE html>
</td>
<td>For all documents.</td>
</tr><tr><td class="zag" colspan="2"><b>XHTML 1.0</b>
</td>
</tr><tr><td><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
</td>
<td>Strict XHTML syntax.</td>
</tr><tr><td><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
</td>
<td>Transitional XHTML syntax.</td>
</tr><tr><td><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>
</td>
<td>XHTML document using frames.</td>
</tr><tr><td class="zag" colspan="2"><b>XHTML 1.1</b>
</td>
</tr><tr><td><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>
</td>
<td>Same as strict XHTML syntax, but adding modules is allowed.</td>
</tr></tbody></table><p>Now, let's try to figure out piece by piece what DOCTYPE contains. <br>html - indicates the top-level element, that is, the very basis of the code. For HTML, this is a tag <html>.</p>
<p>PUBLIC - determines the public nature of the document. <a href="https://gtavrl.ru/en/referat-baza-dannyh-ponyatie-bazy-dannyh-vidy-baz-dannyh/">This type</a> document is public.</p>
<p>“-” indicates whether the document type developer is registered or not with the International Organization for Standardization (ISO). It has two meanings: minus or plus. Minus: not registered. Plus - registered. But for W3C, “-” is indicated</p>
<p>W3C is the organization that developed DTD.</p>
<p>DTD - document type. For HTML and XHTML, a DTD is specified.</p>
<p>HTML 4.01 Transitional (as an example) - the name of the document, its version and the syntax it uses.</p>
<p>EN is the language in which the document is written. And of course, HTML and XHTML use English.</p>
<p>http://www.w3.org/TR/html4/loose.dtd - address of the document description document (DTD).</p>
<p>That's how much information the very first one carries. <a href="https://gtavrl.ru/en/s-novoi-stroki-html-razryv-stroki-v-html-ispolzuem-teg-br/">HTML string</a> or XHTML code. But problems may still arise in determining whether our document matches the chosen syntax or not. For this, there is a markup validator that will help us determine how valid (correct) our code is. The validator is provided by the same organization. which is the official developer of DTD. It is located on the website http://validator.w3.org/.</p>
<p>So, we just have to make a choice. And choose <DOCTYPE>for our document. Here everyone must choose for themselves based on the information that we have studied today. This is how the introductory, theoretical post turned out. And then we will create our own html document, and possibly an entire website in html, without using any CMS for administration.</p>
<p>That's all for me. I hope this post will be useful and help you understand the issue about DOCTYPE.</p>
<p>Complex and heavy web applications have become common these days. Cross-browser and easy-to-use libraries like jQuery with their rich functionality can greatly help in manipulating the DOM on the fly. Therefore, it is not surprising that many developers use such libraries more often than working with the native DOM API, with which there were many problems. While browser differences are still an issue, the DOM is now in <a href="https://gtavrl.ru/en/uluchshenie-yuzabiliti-celevyh-stranic-s-pomoshchyu-animacii-beloe/">in better shape</a> than 5-6 years ago when jQuery was gaining popularity.</p> <p>In this article, I'll demonstrate the HTML manipulation capabilities of the DOM, focusing on parent, child, and neighbor relationships. In conclusion, I will give information about browser support for these features, but keep in mind that a library like jQuery is still a good option due to the presence of bugs and inconsistencies in the implementation of native functionality.</p> <h2>Counting child nodes</h2> <p>For demonstration I will use the following <a href="https://gtavrl.ru/en/referat-yazyk-gipertekstovoi-razmetki-html-sredstva-gipertekstovoi/">HTML markup</a>, we will change it several times throughout the article:</p><p> <body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
</p><p>Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6</p><p>As you can see, the results are the same, although the techniques used are different. In the first case I use the children property. This is a read-only property, it returns a collection <a href="https://gtavrl.ru/en/css-border-granicy-elementa-oformlenie-ramok-i-granic-html-elementov-s-pomoshchyu/">HTML elements</a>, located inside the requested element; to count their number I use <a href="https://gtavrl.ru/en/chtenie-elementov-massiva-javascript-zapis-elementov-massiva-javascript-kak-dobavit/">length property</a> this collection.</p> <p>In the second example, I'm using the childElementCount method, which I think is a neater and potentially more maintainable way (discuss this more later, I don't think you'll have trouble understanding what it does).</p> <p>I could try using childNodes.length (instead of children.length), but look at the result:</p><p>Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13</p><p>It returns 13 because childNodes is a collection of all nodes, including spaces - keep this in mind if you care about the difference between child nodes and child element nodes.</p> <h2>Checking the existence of child nodes</h2> <p>To check if an element has child nodes, I can use the hasChildNodes() method. The method returns a Boolean value indicating their presence or absence:</p><p>Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // true</p><p>I know that my list has child nodes, but I can change the HTML so that there aren't any; The markup now looks like this:</p><p> <body>
</body>
</p><p>And here is the result of running hasChildNodes() again:</p><p>Console.log(myList.hasChildNodes()); // true</p><p>The method still returns true. Although the list does not contain any elements, it does contain a space, which is a valid node type. <a href="https://gtavrl.ru/en/peredat-dannye-metodom-post-v-formate-json-nodejs-kak-otpravit-dannye/">This method</a> takes into account all nodes, not just element nodes. In order for hasChildNodes() to return false, we need to change the markup again:</p><p> <body>
</body>
</p><p>And now the expected result is displayed in the console:</p><p>Console.log(myList.hasChildNodes()); // false</p><p>Of course, if I know I might encounter whitespace, I'll first check for the existence of child nodes, then use the nodeType property to determine if there are any element nodes among them.</p> <h2>Adding and Removing Children Elements</h2> <p>There are techniques you can use to add and remove elements from the DOM. The most famous of them is based on a combination of the createElement() and appendChild() methods.</p><p>Var myEl = document.createElement("div"); document.body.appendChild(myEl);</p><p>IN <a href="https://gtavrl.ru/en/chto-takoe-vneshnie-mehanicheskie-vozdeistviya-trenie-vneshnee/">in this case</a> I'm creating <div>using the createElement() method and then adding it to body . It's very simple and you've probably used this technique before.</p> <p>But instead of inserting specifically <a href="https://gtavrl.ru/en/krasivoe-modalnoe-okno-s-elementami-da-net-sozdaem-modalnoe-okno/">element being created</a>, I can also use appendChild() and just move the existing element. Let's say we have the following markup:</p><p> <div id="c">
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
<p>Example text</p>
</div>
</p><p>I can change the location of the list with the following code:</p><p>Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);</p><p>The final DOM will look like this:</p><p> <div id="c">
<p>Example text</p>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</div>
</p><p>Notice that the entire list has been removed from its place (above the paragraph) and then inserted after it before the closing body . While the appendChild() method is typically used to add elements created with createElement() , it can also be used to move existing elements.</p> <p>I can also completely remove a child element from the DOM using removeChild() . Here's how to delete our list from the previous example:</p><p>Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);</p><p>The element has now been removed. The removeChild() method returns the removed element so I can save it in case I need it later.</p><p>Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);</p><p>There is also a ChildNode.remove() method that was relatively recently added to the specification:</p><p>Var myList = document.getElementById("myList"); myList.remove();</p><p>This method does not return the remote object and does not work in IE (Edge only). And both methods remove text nodes in the same way as element nodes.</p> <h2>Replacing child elements</h2> <p>I can replace an existing child element with a new one, regardless of whether this one exists <a href="https://gtavrl.ru/en/html5-novyi-element-dialog/">new element</a> or I created it from scratch. Here's the markup:</p><p> <p id="par">Example Text</p>
</p><p>Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "example"; myDiv.appendChild(document.createTextNode("New element text")); document.body.replaceChild(myDiv, myPar);</p><p> <div class="example">New element text</div>
</p><p>As you can see, the replaceChild() method takes two arguments: the new element and the element it replaces. <a href="https://gtavrl.ru/en/html-centrirovanie-po-gorizontali-gorizontalnoe-i-vertikalnoe/">old element</a>.</p> <p>I can also use this method to move an existing element. Take a look at <a href="https://gtavrl.ru/en/perehod-na-sleduyushchuyu-stroku-v-html-perenos-stroki-i-razdelitelnaya/">next HTML</a>:</p><p> <p id="par1">Example text 1</p>
<p id="par2">Example text 2</p>
<p id="par3">Example text 3</p>
</p><p>I can replace the third paragraph with the first paragraph using the following code:</p><p>Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);</p><p>Now the generated DOM looks like this:</p><p> <p id="par2">Example text 2</p>
<p id="par1">Example text 1</p>
</p><h2>Selecting specific children</h2> <p>There are several <a href="https://gtavrl.ru/en/kak-prodvinut-svoyu-produkciyu-na-rynok-takie-raznye-i-deistvennye/">different ways</a> selecting a specific element. As shown earlier, I can start by using the children collection or the childNodes property. But let's look at other options:</p> <p>The firstElementChild and lastElementChild properties do exactly what their names suggest they do: select the first and last <a href="https://gtavrl.ru/en/vertikalnoe-vyravnivanie-v-div-css-pogovorim-o-svoistve-css-vertical-align-absolyutnoe/">child elements</a>. Let's return to our markup:</p><p> <body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
</p><p>I can select the first and last elements using these properties:</p><p>Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Example one" console.log(myList.lastElementChild.innerHTML); // "Example six"</p><p>I can also use the previousElementSibling and nextElementSibling properties if I want to select child elements other than the first or last one. This is done by combining the firstElementChild and lastElementChild properties:</p><p>Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Example two" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Example five"</p><p>There are also similar properties firstChild , lastChild , previousSibling , and nextSibling , but they take into account all types of nodes, not just elements. In general, properties that consider only element nodes are more useful than those that select all nodes.</p> <h2>Inserting content into the DOM</h2> <p>I've already looked at ways to insert elements into the DOM. Let's move on to a similar topic and take a look at the new features for inserting content.</p> <p>First, there is a simple insertBefore() method, much like replaceChild(), it takes two arguments and works with both new elements and existing ones. Here's the markup:</p><p> <div id="c">
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
<p id="par">Example Paragraph</p>
</div>
</p><p>Notice the paragraph I'm going to remove first and then insert it before the list, all in one fell swoop:</p><p>Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);</p><p>In the resulting HTML, the paragraph will appear before the list and this is another way to wrap the element.</p><p> <div id="c">
<p id="par">Example Paragraph</p>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</div>
</p><p>Like replaceChild(), insertBefore() takes two arguments: the element to be added and the element before which we want to insert it.</p> <p>This method is simple. Let's try more now <a href="https://gtavrl.ru/en/kak-sdelat-pylesos-bolee-moshchnym-legkii-i-samodelnyi-sposob-uvelichit-tyagu/">powerful way</a> inserts: insertAdjacentHTML() method.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div><div class="clear"></div>
<script type="text/javascript">
document.getElementById('hc_full_comments').innerHTML = '';
</script><br /><br /><noindex><p align="center"><center>
<div id="meta_news_block1111" style="text-align: center;"></div></center>
</p>
<br /><br />
<p align="center">
</p>
</noindex>
</div>
</div>
<div id="sidebar">
<div class="clear"></div><br />
<h2 class="front" style="margin:15px 0 5px 0">Popular articles</h2>
<div class="tabcont">
<ol>
<li><a href="https://gtavrl.ru/en/kak-ochistit-kesh-brauzera-i-zachem-eto-nuzhno-chto-znachit-ochistit-kesh-i-kak-eto/">What does clear cache mean and how to do it?</a></li>
<li><a href="https://gtavrl.ru/en/dba-edinica-izmereniya-shum-vozdushnyi-i-strukturnyi-generatory-i-elektrostancii/">Airborne and structural noise</a></li>
<li><a href="https://gtavrl.ru/en/obzor-luchshih-programm-dlya-vedeniya-semeinogo-byudzheta-programmy-dlya/">Programs for home accounting The best application for home accounting</a></li>
<li><a href="https://gtavrl.ru/en/kak-sozdat-stranicu-dlya-poiskovyh-sistem-kak-vosstanovit/">How to restore the default search engine</a></li>
<li><a href="https://gtavrl.ru/en/kak-podklyuchit-uslugu-chernyi-spisok-ot-tele2-kak-dobavit-nomer-v-chernyi/">How to add a number to the “Black List” on Tele2 Tele2 Black List how to add a number</a></li>
</ol>
</div>
<h2 class="front" style="margin:15px 0 5px 0">Latest articles</h2>
<div class="tabcont">
<ol>
<li><a href="https://gtavrl.ru/en/lichnyi-nomer-voennosluzhashchego-vhod-bez-registracii-chto-takoe-lichnyi/">What is a military personnel’s personal account and how to enter it without registration</a></li>
<li><a href="https://gtavrl.ru/en/kak-perekinut-kontakty-s-iphone-na-kak-s-aifona-perekinut-kontakty/">How to transfer contacts from iPhone to Android</a></li>
<li><a href="https://gtavrl.ru/en/kakoi-teg-opredelyaet-tip-dokumenta-ispravlenie-oshibok-ne-zakryt/">Which tag defines the document type</a></li>
<li><a href="https://gtavrl.ru/en/vot-bolee-podrobnoe-opisanie-samyh-rasprostranennyh/">Here's a more detailed description of the most common subtitle formats</a></li>
<li><a href="https://gtavrl.ru/en/kak-skopirovat-soobshchenie-v-vk-kak-pereslat-soobshchenie-drugomu/">How to forward a message to another person on VKontakte</a></li>
<li><a href="https://gtavrl.ru/en/pochemu-ne-rabotaet-kontakt-pochemu-ne-rabotaet-prilozhenie/">Why doesn't the VKontakte application work?</a></li>
<li><a href="https://gtavrl.ru/en/chto-nado-nazhat-chtoby-istoriya-ne-sohranyalas-kak-sdelat-chtoby-ne-sohranyalas-istoriya-kak-udalit/">How can I prevent history from being saved?</a></li>
</ol>
</div>
<div class="widget" id="ajdg_grpwidgets-3">
<div class="g g-9">
<div class="g-single a-27">
<script>
jQuery(function() {
window.onscroll = function() {
height_scroll = jQuery(document).scrollTop();
height = jQuery(document).height();
height50 = height / 2;
if (height_scroll >= height50) {
jQuery("#site-code-block-22").fadeIn(1200);
document.getElementById('site-code-block-22').style.display = 'block';
jQuery("#site-code-block-23").fadeOut(1200);
document.getElementById('site-code-block-23').style.display = 'none';
} else {
jQuery("#site-code-block-22").fadeOut(1200);
document.getElementById('site-code-block-22').style.display = 'none';
document.getElementById('site-code-block-23').style.display = 'block';
jQuery("#site-code-block-23").fadeIn(1200);
}
};
});
</script>
<div class="site-code-block prma-count" data-rel="cb_23" id="site-code-block-23" style="">
</div>
<div class="site-code-block prma-count" data-rel="cb_22" id="site-code-block-22" style="">
</div>
</div>
</div>
</div>
<div class="clear"></div>
<br />
<center>
<div style="color: #333333; font-size: 11px;">
</div>
</center>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<br /><br />
<div id="footeri">
<div id="footer">
<div class="footer-sec">
<h6>Sections</h6>
<ul>
<li><a href="https://gtavrl.ru/en/category/youtube/">Youtube</a></li>
<li><a href="https://gtavrl.ru/en/category/facebook/">Facebook</a></li>
<li><a href="https://gtavrl.ru/en/category/twitter/">Twitter</a></li>
<li><a href="https://gtavrl.ru/en/category/tips/">Adviсe</a></li>
<li><a href="https://gtavrl.ru/en/category/useful-tips/">Useful tips</a></li>
<br />
</ul>
</div>
<div class="footer-sec">
<h6>Pages</h6>
<ul>
<li><a href="">about the project</a></li>
<noindex>
<li><a href="" >RSS news</a></li>
</noindex>
</ul><br /><br /><br />
<h6>Special projects</h6>
<ul>
<li><a href="https://gtavrl.ru/en/feedback/">Connect with us</a></li>
</ul>
</div>
<div id="footer-top">
<h6>Contacts</h6>
<ul>
<li><a href="">Advertising on the website</a></li>
<li><a href="https://gtavrl.ru/en/feedback/">Contacts</a></li>
</div>
<div class="clear"></div>
</div></div>
<div id="bottom"><div class="foot_col1">2024 <a href="https://gtavrl.ru/en/">gtavrl.ru</a>.
</div>
<script type="text/javascript">var addthis_config = { "data_track_addressbar":true,"pubid": "ra-58b68bb0f1371607"} ;addthis_config.data_track_addressbar = false;addthis_config.data_track_clickback = false;</script>
<script type='text/javascript'>
var flag_hide = 0;
function hide_direct() {
flag_hide = 1;
jQuery('#rek_mob_fixed').slideToggle( 'slow' );
var date = new Date();
var expires_hour = 21600000;
date.setTime(date.getTime()+expires_hour);
showSocial();
Cookies.set('advp_show_me', '1', { expires: date, path: '/'} );
} ;
jQuery(function(f){
var element = f('#rek_mob_fixed');
element.delay(8000);
f(window).scroll(function(){ if (flag_hide == 0){
var offset_element_for_hide = jQuery('#before_footer').val();
if (offset_element_for_hide != null) {
offset_element_for_hide = jQuery('#before_footer');
offset_element_for_hide = jQuery(offset_element_for_hide).offset().top - jQuery(window).height();
} else {
offset_element_for_hide = jQuery(document).height();
}
//Если рекламный блок более 1000px по ширине, устанавливай фикс. ширину 1000px
if (jQuery('#rek_mob_fixed_block').actual('width') >1000) {
jQuery('#rek_mob_fixed_block').css({ 'max-width':'1000px'} );
}
if(f(this).scrollTop() > 500){
element.fadeIn(0);
}
if(f(this).scrollTop() < 500 || f(this).scrollTop() > offset_element_for_hide ){
element.fadeOut(0)
}
if(f(this).scrollTop() + f(this).height() >= f(document).height() && flag_hide == 0 && jQuery('#rek_mob_fixed').is(':visible'))
{
jQuery('#rek_mob_fixed').slideToggle(100);
}
}
} );
} );
function showSocial(){
if(flag_hide == 1 )
jQuery('#footer-share').slideToggle('slow');
}
</script><div id="wondergridgallerylightbox_options" data-skinsfoldername="skins/default/" data-jsfolder="/wp-content/plugins/modesco-wonderplugin-gridgallery/engine/" style="display:none;"></div>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-monica/script.min.js?ver=4.9.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"100%"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/modesco-table-of-contents-plus/front.js?ver=1404'></script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/page-links-to/js/new-tab.min.js?ver=2.9.8'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "ads-sidebar", "margin_top" : 10, "margin_bottom" : 50, "stop_id" : "before_footer", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['ajdg_grpwidgets-3'] } ;
</script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='https://gtavrl.ru/wp-content/plugins/youtube-embed-plus/scripts/fitvids.min.js?ver=4.9.1'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script>
<script type="text/javascript">
var _hcwp = _hcwp || [];
var _hcobj = { widget_id : 29264, widget : "Bloggerstream",selector: '.hc_counter_comments',platform:"wordpress", } ;
_hcwp.push(_hcobj);
(function() {
if("HC_LOAD_INIT" in window)return;
HC_LOAD_INIT = true;
var lang = "ru";
var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/29264/"+lang+"/widget.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hcc, s.nextSibling);
} )();
</script>
</body>
</div>
</body>
</html>
