How to enter the html code of a page. How to open a page's source code in a browser
If you open any web page, it will contain typical elements that do not change depending on the type and focus of the site. Example 4.1 shows the code simple document, containing the main tags.
Example 4.1. Web page source code
Example web page
Heading
First paragraph.
Second paragraph.
Copy the contents this example and save it in the c:\www\ folder as example41.html. After that, launch the browser and open the file through the menu item File > Open File (Ctrl+O). In the document selection dialog, select the file example41.html. The web page shown in Fig. 1 will open in the browser. 4.1.
Rice. 4.1. Result of running the example
Elementis intended to indicate the type of the current document - DTD (document type definition, description of the document type). This is necessary so that the browser understands how to interpret the current web page, because HTML exists in several versions, in addition, there is XHTML (EXtensible HyperText Markup Language), which is similar to HTML, but differs from it in syntax. So that the browser “does not get confused” and understands according to which standard to display the web page, it is necessary to set in the first line of code
.
There are several types, they vary depending on HTML versions, to which they are oriented. In table 4.1. The main types of documents with their descriptions are given.
Table 4.1. Valid DTDs | DOCTYPE |
Description |
|---|
| HTML 4.01
|
|
|
Strict HTML syntax. |
|
|
Transitional HTML syntax. |
|
|
An HTML document uses frames. |
| HTML 5
|
|
|
This version of HTML has only one doctype. |
| XHTML 1.0
|
|
|
Strict XHTML syntax. |
|
|
Transitional XHTML syntax. |
|
|
The document is written in XHTML and contains frames. |
| XHTML 1.1
|
|
|
The developers of XHTML 1.1 expect it to gradually replace HTML. As you can see, this definition has no division into types, since the syntax is the same and obeys clear rules. |
The difference between a strict and transitional document description is a different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving of errors. Transitional HTML is more relaxed about some code flaws, so this type is preferable to use in certain cases.
For example, in strict HTML and XHTML the presence of the tag is required
, and in transitional HTML it can be omitted and not specified. At the same time, we remember that the browser will show the document in any case, regardless of whether it matches the syntax or not. This check is carried out using a validator and is intended primarily for developers to track errors in the document.</p>
<p>In the future we will mainly use strict<!DOCTYPE>, unless otherwise specified. This will allow us to avoid common mistakes and teach us to write syntactically correct code.</p>
<p>You can often find HTML code without using any<!DOCTYPE>, the web page will still be shown in this case. However, it may happen that the same document appears differently in the browser when you use<!DOCTYPE>and without it. In addition, browsers can display such documents in their own way, as a result the page “crumbles”, i.e. will be displayed completely differently from what the developer requires. To avoid such situations, always add<!DOCTYPE>to the beginning of the document.</p><p>Tag <html>defines the beginning of the HTML file, the header is stored inside it ( <head>) and document body ( <body>
).</p><p>Document title, also called a block <head>, can contain text and tags, but the content of this section is not directly shown on the page, except in the container <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Tag <meta>is universal and adds a whole class of capabilities, in particular, with the help of meta tags, as this tag is generally called, you can change the page encoding, add <a href="https://gtavrl.ru/en/opredelenie-intervala-chastot-klyuchevyh-slov-vysokochastotnye/">keywords</a>, document description and much more. So that the browser understands that it is dealing with UTF-8 encoding (Unicode transformation format), and this line is added.</p><p>
<title>Example web page
Tag
determines the title of a web page; this is one of the important elements designed to solve many problems. In the operating room <a href="https://gtavrl.ru/en/osobennosti-operacionnyh-sistem-semeistva-windows-operacionnaya-sistema-os/">Windows system</a> title text is displayed on the left <a href="https://gtavrl.ru/en/lupa-v-levom-verhnem-uglu-kak-ubrat/">top corner</a> browser window (Fig. 4.2).</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p>
<p>Rice. 4.2. Header view in browser</p>
<p>Tag <title>is mandatory and must certainly be present in the document code.</p><p>You must add a closing tag</head> to indicate that the document title block is complete.</p><p>Document body <body>intended for placing tags and content of a web page.</p><p>
<h1>Heading</h1>
</p><p>HTML offers six text headings of varying levels that indicate the relative importance of the section following the heading. Yes, tag <h1>represents the most important first level heading, and the tag <h6>serves to indicate the sixth level heading and is the least significant. By default, the first level heading is displayed most <a href="https://gtavrl.ru/en/kak-nastroit-planshet-na-krupnyi-shrift-kak-izmenit-shrift-na-androide/">large print</a> bold, subsequent level headings are smaller in size. Tags <h1>...<h6>refer to block elements, they always start with <a href="https://gtavrl.ru/en/otkryt-kom-stroku-kak-otkryt-komandnuyu-stroku-v-windows-xp-novyi-i-samyi-udobnyi/">new line</a>, and after them other elements are displayed on <a href="https://gtavrl.ru/en/perehod-na-sleduyushchuyu-stroku-v-html-perenos-stroki-i-razdelitelnaya/">next line</a>. Additionally, white space is added before and after the title.</p><p>
<!-- Комментарий -->
</p><p>Some text can be hidden from being shown in the browser by making it a comment. Although this text will not be seen by the user, it will still be transmitted in the document, so if you look at the source code, you can discover hidden notes.</p>
<p>So, today we will look at several useful tools for Web masters that make life easier when designing a website. Let's start with the console for <a href="https://gtavrl.ru/en/kod-stranicy-v-brauzere-google-chrome-instrumenty-dlya-web-mastera/">web masters</a> V <a href="https://gtavrl.ru/en/windows-7-ne-ustanavlivaetsya-google-chrome-ne-ustanavlivaetsya-google-chrome-reshenie/">Google Chrome</a>. And let’s go through the questions that most often arise for a webmaster during website layout.</p>
<p>To get to the console, open your website in Google Chrome, right-click anywhere on the web page, and select “View page code” in the contextual drop-down menu, or on a specific element to study by selecting “View code” element".</p>
<p>At the top you will have several tabs listed. Today we will talk about the “Elements” tab <b>,
</b> which presents the elements of a web page with highlighting of tags, properties, highlighting the nesting of elements, a representation of the element’s hierarchy in the DOM tree (a hint at the bottom, from the root parent to the current one), the ability to edit elements, a list of their properties, consider searching by elements, as well as Let's get acquainted with viewing css styles, etc., associated with elements.</p>
<h3>How can I view all the styles that are associated with a specific element? Which one is used now? In what files are they located?</h3>
<p>So, nothing could be easier! Open the Google Chrome browser, open our site - the source of the questions, right-click on the desired element if it is visible in the context of the page, and select “View element code” in the context menu.</p>
<p>At the bottom we have a console with a highlighted tab on the left “ Elements" and all the styles associated with the element on the right, where: <b>Computed Styles</b>- These are the general "summary" styles that have been assigned to an element from <a href="https://gtavrl.ru/en/edinicy-razmerov-pikseli-em-i-ex-i-nasledovanie-pravil-v-css/">css rules</a> and the user's browser settings (his environment), and the tab is minimized.</p>
<p>But we are interested in the “Styles” tab, expanded under it, which lists in turn all the styles assigned to the element, as well as files where these rules are specified for this element by its type, id, class, name, property, attribute, etc. . Moreover, if a css rule is crossed out, it means it was redefined earlier/further (which makes it easy to track which of the css rules has priority and is applied in <a href="https://gtavrl.ru/en/chto-takoe-vneshnie-mehanicheskie-vozdeistviya-trenie-vneshnee/">in this case</a> to the element).</p>
<p>Below the console there is a line that shows the element in the document hierarchy, easily allowing you to view the entire list of parent elements from the root to the selected element. Something like “bread crumbs”.</p>
<h3>Html tag not visible in the context of the page? Or do you need to find all tags, for example, by a specific class, name, property, type?</h3>
<p>Open the site in Google Chrome, right-click, call up the context menu, select <b>«
</b> View page code <b>»
</b>. Press the key combination “CTRL + F” at the same time, enter the phrase we need ( <b>For example</b><i>:
</i><i>class=”</i><i>padding"</i>) and move through the list of found results, simultaneously viewing all the styles associated with the desired elements on the right side of the page.</p>
<h3>How to view the html code of an element(s) loaded dynamically (for example: via Ajax)</h3>
<p>We are waiting for the page to load in Google Chrome. We perform the necessary actions for Ajax to work. Right-click on the loaded data, select “View element code” in the context menu, and examine the result in the console on the “Elements" tab on the left.</p>
<h3>View css style changes in real time</h3>
<p>By the way, it is also convenient to observe, if necessary, what styles are assigned to an element on the fly, for example, when scrolling through a gallery and other timer events. All styles assigned via javascript in real time will be displayed in the property <b>style</b> selected element in the window on the “Elements” tab.</p>
<h3>Interactively view the impact of css rules on the presentation of html tags</h3>
<p>Google Chrome provides an interactive console for css styles. This means that you can not only view which styles are applied to an element, but also move the mouse cursor to a specific one. <a href="https://gtavrl.ru/en/vse-selektory-i-svoistva-css-vidy-css-selektorov-dlya-vseh-elementov/">css properties</a>, enable it using the pop-up checkbox on the right, or disable it by unchecking the flag and viewing the resulting result on the page.</p>
<h3>We change the structure of presentation of html elements on the fly (directly in the browser)</h3>
<p>So, we have already learned how to explore the structure of a web document in Google Chrome, now we will briefly look at editing elements on the fly. We go to the console in any way convenient for us. We find the desired element in the “Elements” tab, right-click on it, thereby calling up the pop-up context menu:</p>
<ul><li><b>Add attribute</b>– adds an attribute for the specified element. As soon as the cursor becomes active, we begin to set the desired property. <b>For example</b>: write name="itemImage", which will be immediately added to our element.</li>
<li><b>Edit attribute</b>– if you right-click on an element attribute, the item becomes available <b>edit</b><b>attribute</b>. Click and edit.</li>
</ul><p><b>Usage example:</b> We forgot the password saved under asterisks in Google Chrome (if the password was saved in this browser). Right-click on the element with the password entered, click on “View <a href="https://gtavrl.ru/en/vyzvat-ishodnyi-kod-stranicy-kak-posmotret-ishodnyi-kod/">Element Code</a>» <b>,
</b> in the console on the left tab <b>Elements</b> right-click on the type="password" attribute, left-click on <b>Edit</b><b>attribute</b> change the attribute <i>type=”</i><i>password"</i> on <i>type=”</i><i>text"</i>, and now, instead of asterisks, the same password is displayed in text form.</p>
<ul><li><b>Edit</b><b>html</b>– right-click on the element in the console <b>Elements</b>, select <b>Edit</b><b>html,</b> change the code to your liking.</li>
<li><b>Copy</b><b>as</b><b>HTML</b>– we copy the portion of HTML we need for further research, say, in a notepad, or for other purposes where we need to apply exactly the same layout. We save time.</li>
<li><b>Copy</b><b>XPATH</b>– copies the XPATH representation of the structure from the root of the parent element to the selected element.</li>
<li><b>Delete</b><b>node</b>– if you need to remove the currently selected element and all its children from the context <a href="https://gtavrl.ru/en/prosmotra-web-stranic-ispolzuyutsya-programmy-ispolzovanie-internet-explorer-dlya/">web pages</a>, and see the result.</li>
<li><b>Word</b><b>wrap</b>– will render a web page view in the console context <b>Elements</b> more readable.</li>
</ul><p>In the following articles we will continue to consider tools for webmasters, and in particular we will get acquainted with the remaining tabs of tools for webmasters in <b>Google Chrome</b>, and also consider debugging errors <a href="https://gtavrl.ru/en/issledovatelskaya-rabota-animaciya-v-javascript-sravnenie-animacii/">javascript means</a> different browsers</p>
<p>Browser developers have taken care of the convenience of those who create sites that open in these same browsers, namely webmasters. They added in <a href="https://gtavrl.ru/en/kogda-prihodyat-uvedomleniya-ekran-svetitsya-kak-poluchit-funkcii/">standard features</a> developer tools that make it easy to open and <b>view the source code of the site page in the browser</b>: HTML, CSS, JavaScript (JS), get various useful data about the structure of the site, navigate it <a href="https://gtavrl.ru/en/amd-radeon-hd-8200-r3-series-opisanie-analiz-tehnicheskih-harakteristik/">technical analysis</a>. In general, see a lot of useful things.</p>
<p>Of course, these tools are used not only by website creators for work, but also <a href="https://gtavrl.ru/en/esli-vyiti-iz-vaibera-sposob---vyhod-iz-akkaunta-ili-uchetnoi-zapisi/">ordinary users</a>, which the source code allows you to view various useful data.</p>
<p>From this article you will learn how to view the source code of a website page in a browser (how to open the HTML, CSS, JavaScript code of a website).</p>
<i>
</i>
<h2>How to open a page's source code in a browser</h2>
<p>There are two ways to open the source code of a web page in a browser:</p>
<ol><li>Using hot keys;</li>
<li>Open from <a href="https://gtavrl.ru/en/kak-dobavit-v-kontekstnom-menyu-yandeksa-parametry-yandeks/">context menu</a>.</li>
</ol><p><b>Ctrl+U</b>– a hotkey combination to view the source code of the entire site page in a separate new window. Standard for all browsers: Google Chrome, Opera, <a href="https://gtavrl.ru/en/kak-perevodit-stranicy-v-firefox-mozilla-firefox-perevodchik-stranic-ustanavlivaem/">Mozilla Firefox</a>, Yandex browser, IE.</p>
<p>You can also enter the developer tools as follows:</p>
<p>To quickly find <a href="https://gtavrl.ru/en/zaregistrirovat-svoi-komp-na-divx-zachem-nuzhen-kod-registracii-divx/">required code</a>, word or text on the page, you can use the standard search hotkey combination for all browsers: Ctrl + G.</p>
<p>Video instruction:</p>
<p><span class="dmruvuTBwxg"></span></p>
<h2>View element code | explore element | inspect element</h2>
<p>If you suddenly need to view not the entire source code, but display only a separate part of it, some area on the page, then the previous tool will not work. For this purpose, the developer tools have another function, which will be discussed below.</p>
<p><b>How to view the code of an element on a page:</b></p>
<br><img src='https://i1.wp.com/urfix.ru/wp-content/uploads/2018/11/Proinspektirovat-otdelnyy-element.png' width="100%" loading=lazy loading=lazy><p>You can also use keyboard shortcuts to <a href="https://gtavrl.ru/en/pochta-mail-bystryi-dostup-so-startovoi-stranicy-kak/">quick access</a> to inspect the element.</p>
<p>Hotkeys (buttons):</p>
<p>Google Chrome: Ctrl+Shift+I and Ctrl+Shift+C</p>
<p>Opera: Ctrl+Shift+I and Ctrl+Shift+C</p>
<p>Mozilla Firefox: Ctrl+Shift+I and Ctrl+Shift+C</p>
<p>Yandex browser: Ctrl+Shift+I and Ctrl+Shift+C</p>
<p>After these steps, the source code of the web page will open in the same browser window:</p>
<br><img src='https://i2.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-HTML-CSS-kod-sayta.png' width="100%" loading=lazy loading=lazy><p>All HTML code will be in the large left column. A <a href="https://gtavrl.ru/en/kak-ubrat-neispolzuemye-stili-css-udalenie-neispolzuemyh-css/">CSS styles</a>- on the right.</p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-css-stili-v-brauzere.png' width="100%" loading=lazy loading=lazy><p>Advantage <a href="https://gtavrl.ru/en/programma-udalyayushchaya-faily-bez-vozmozhnosti-vosstanovleniya/">this method</a>, of course, is that the user has the opportunity to change the source code and edit styles. That is, you can edit the styles on the site and see how it will look with certain styles, without having to immediately make changes to the files located on the hosting servers. To change or add <a href="https://gtavrl.ru/en/programmy-dlya-pisaniya-koda-redaktory-programmnyh-kodov-dlya/">program code</a>, you need to double click on <a href="https://gtavrl.ru/en/ne-rabotaet-skrinshot-na-aifone-kak-obrezat-nuzhnyi-fragment-kak/">the required fragment</a> or plot. Of course, the code correction in the browser will not be made on the hosting servers. Therefore, in the future, in any case, you will have to copy this code and write it into files.</p>
<p>This video instruction describes in detail and shows how to work with the developer tools:</p>
<p><span class="DQMK8CuXkOg"></span></p>
<p>Just like that, just online, right in your browser, you can view the source code of the site page, get basic data about the HTML and CSS code, change and copy them, without having to download the files of this site to your computer.</p>
<p>By the way, inexperienced Internet users who have changed the page code and expect it to be saved will be disappointed. After all, after refreshing the page, all changes on it will disappear. This is not enough to hack the site :)</p>
<h2>How to View Source Code on Android Phone</h2>
<p>I would also like to note that the developer tools are available not only in the desktop version of browsers, that is, on computers and laptops. On phones and tablets (Android, iOS) you can also view the source code.</p>
<p>To do this, add the view-source prefix to the URL of the page being inspected:</p>
<p>For example:</p>
<p>view-source:https://site/turbo-rezhim-opera/</p>
<p><span class="N9JyJMmIZr8"></span></p>
<p>We have released a new book “Content Marketing in <a href="https://gtavrl.ru/en/osnovnye-harakteristiki-socialnoi-seti-harakteristiki-socialnyh/">in social networks</a>: How to get into your subscribers’ heads and make them fall in love with your brand.”</p>
<form onsubmit="return false;" class="innerContentSubscribe_form swpmc-js-form" data-container=".innerContentSubscribe" data-on-success="swptEvents.blogSubscribeSuccess()">
<p> <input class="inputText js-placeholder" type="text" name="email" id="innerContentSubscribeEmail" value=""></p>
<p>Subscribe</p>
</form>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2017/11/code-3.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>The source code of the site is a combination of HTML markup, CSS styles and <a href="https://gtavrl.ru/en/chto-takoe-dzhava-skript-chem-nam-javascript-razrabotchikam-mozhet-byt-interesen/">JavaScript scripts</a>, which the browser receives from the web server.</p>
<p><span class="YLlDA5uz9EU"></span></p>
<p><b>More videos on our channel - learn internet marketing with SEMANTICA</b></p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2017/12/yutub.png' height="37" width="178" loading=lazy loading=lazy></p>
<p>It can be compared to a set of commands given to soldiers by a commander. Imagine that the audience does not see or hear the boss. From their point of view, the military carries out actions independently. In our case, the commander is the browser, the commands are the source code, and the marching soldiers are the final result.</p>
<p>The site is stored on a web server, which sends the page upon user request. A request is typing a URL in the address bar, clicking a link, or clicking a submit button on a form. It doesn’t matter what language the web pages are written in or whether they include a software component. <a href="https://gtavrl.ru/en/kak-sozdat-ikonku-ico-v-fotoshope-kak-sdelat-ikonku-znachok-papki-iz/">The end result</a> The work of any server algorithm is a set of html tags and text. <br>The page source code is a set of data that includes:</p>
<ul><li>html markup;</li>
<li>style sheet or file link;</li>
<li>programs written in JavaScript or links to files with code.</li>
</ul><p>These three sections are processed by the browser. For the server, this is simply the text that needs to be sent in response to the request.</p>
<h2>Why we might need to study the source code</h2>
<p>Everything we see, we can analyze and apply to solve certain problems that arise while working with the site, especially when optimizing it. By looking at the source code, we can:</p>
<ul><li>See the meta tags of your or someone else’s site to analyze them.</li>
<li>See the presence or absence of certain elements on the site: counters, identification codes in <a href="https://gtavrl.ru/en/kak-bystro-perevesti-iz-dvoichnoi-v-desyatichnuyu-poryadkovyi-schet-v-razlichnyh/">various systems</a>, certain scripts and other things.</li>
<li>Find out the parameters of the elements: sizes, colors, fonts.</li>
<li>Find the path to photos and other elements located on the page.</li>
<li>Explore links from the page.</li>
<li>Find problems with the code that interfere with the process of website optimization: those not addressed in <a href="https://gtavrl.ru/en/kak-oblegchit-fail-pdf-szhatie-i-umenshenie-pdf-failov-kak-sohranit/">separate files</a> styles, scripts, invalid code.</li>
</ul><p>These are the basic features, but in fact, by being able to read the code, you can learn a lot more about the page.</p>
<h2>How to view the source code of a site</h2>
<p>It will not be possible to do this completely in the form in which it is posted on the server from the browser. But you can see all the markup by clicking on the page <a href="https://gtavrl.ru/en/peremeshchenie-paneli-zadach-v-niz-ekrana-s-pomoshchyu-myshki-shchelchok-pravoi/">right button</a> mice. Here and further on <a href="https://gtavrl.ru/en/kak-nastroit-golosovuyu-kak-vklyuchit-golosovoi-vvod-na/">Google example</a> Chrome.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/09ffa0c60f.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>Select the “View page code” option and get the full listing in a separate tab.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/11e92d1f09.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>It's just text that you have to analyze to understand. But you can get interactive code using the developer tools.</p>
<h2>How to find the source code of a website page</h2>
<p>Click on the menu icon in the browser. Most often it is on the right and looks like three dots or stripes.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/712414eef9.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>In the additional tools section, select “Developer Tools”.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/48cb60e66c.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>A window will open showing <a href="https://gtavrl.ru/en/kak-perezagruzit-iphone-iz-lyubogo-sostoyaniya-mnogo-aktivnyh-prilozhenii/">active state</a> code. This means that when you click on the markup, the element style will appear next to it, and the selected blocks will be highlighted on the page.</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/b5c5367f08.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>In the “Source” tab you can view the contents of some files: scripts, fonts, images.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/8fb9f8a3b8.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/3bab1ab266.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>In the “Security” tab, you can check the site’s certificate.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/6d29a11c3b.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>The “Audits” tab will help you check the resource posted on the hosting.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/1330f57b87.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>If the location of the panel on the right is inconvenient, you can click the three dots and change it by selecting the desired item.</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/7a0e8305f4.png' align="center" width="100%" loading=lazy loading=lazy></p>
<h2>How to view meta tags</h2>
<p>Every HTML document includes structure tags. Here are some of them:</p>
<ol><li>Html – the entire document.</li>
<li><span>Head – section of service headers.</span></li>
<li><span>Title – page title (displayed on the tab).</span></li>
<li><span>Body – the body of the document.</span></li>
<li><span>H1-H6 – page text headings.</span></li>
<li>Article – article.</li>
<li>Section - section.</li>
<li>Menu – menu.</li>
<li>Div – block.</li>
<li>Span – string.</li>
<li>P – paragraph.</li>
<li>Table – table.</li>
</ol><p>Elements are designed to logically delimit sections on a page; if necessary, they are designed using styles. They contain text that is somehow visible on the page. But the Head tag contains service information. Meta tags are used to indicate it. Everything that is written in them is intended for the server and search engines.</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/b34bb79f96.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>Their contents cannot be found out in any other way.</p>
<p>Let's pay attention to the Link tag. With its help, links to external included files are specified. If desired, you can see the contents and save to disk. To do this, move the pointer to the address and press RMB. Select "Open in new Tab".</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/1685995ee1.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>Will open in a new tab <a href="https://gtavrl.ru/en/gde-nahoditsya-fail-klyuchei-dlya-ukazannogo-wmid-pervichnaya-nastroika/">specified file</a>, which you can view or save.</p>
<h2>How to view the source code of a page to debug a script</h2>
<p>In this case, it is most convenient to open the page on <a href="https://gtavrl.ru/en/kak-sdelat-set-virtualnoi-mashiny-i-osnovnoi-nastroika-lokalnoi-seti/">local machine</a>. If you only need to correct markup, styles and scripts, then this can be done directly from the folder. The HTML code is viewed in the same way. Here are the mistakes <a href="https://gtavrl.ru/en/poslednii-raz-cikl-vypolnitsya-pri-i-ravnom-cikly-for-v-javascript-polozhenie-javascript-v/">JavaScript code</a> can be seen in the “Console” tab. This shows the description of the error and the line number where it occurred.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/990abb1c76.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>The syntax can be seen directly in the code. This is what the “Source” tab is for.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/0961303a76.png' align="center" width="100%" loading=lazy loading=lazy></p>
<h2>How to view the code of a specific element</h2>
<p>For <a href="https://gtavrl.ru/en/fotostrana-vhod-moya-stranica-otkryt-prilozhenie-s-bolshim-funkcionalom/">large pages</a> with a large number of elements, it is difficult to find the necessary code in all the markup. In this case, you should use <a href="https://gtavrl.ru/en/kak-otklyuchit-vse-funkcii-na-bilain-samye-poleznye-komandy/">special team</a> context menu. Move the mouse over the fragment and press RMB. Select the “View Code” command.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/296c218cf5.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>The same window will open, but with the focus on the selected object.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/2eb093fc23.png' align="center" width="100%" loading=lazy loading=lazy></p>
<h2>Summary</h2>
<p>We told you what the page source code is. It is enough to master basic knowledge of HTML and CSS, and using <a href="https://gtavrl.ru/en/proga-dlya-rezervirovaniya-i-perenosa-draiverov-double-driver-udobnyi-i-moshchnyi/">convenient tools</a> developer, you can debug your own HTML documents.</p>
<p>Reviewing the code of resources on the Internet will allow you to learn not only from your own experience, but also to use real working examples. And for SEO specialists, meta tags will be useful, the information in which can tell a lot about the site.</p>
<p>Skill <b>change the page source code</b> – <a href="https://gtavrl.ru/en/blogi-ugarnye-slova-trollei-trolling-glupoe-razvlechenie-ili/">useful skill</a> for the advanced Internet user. By substituting HTML code, you can change <a href="https://gtavrl.ru/en/kak-otkryt-veb-stranicu-otkrytie-veb-stranicy/">open web page</a> as you please. In this article we will tell you <b>how to change page code</b> in Google Chrome. However, in other browsers everything is done similarly, so there should not be any difficulties.</p>
<h2>What is the HTML code of the page?</h2>
<p>Every page you open in your browser has its own language code <a href="https://gtavrl.ru/en/referat-yazyk-gipertekstovoi-razmetki-html-sredstva-gipertekstovoi/">HTML markup</a>. This code represents tags and text. Tags are unique labels that tell the browser how to display this or that part of the site. Text is the content of the page, what the user sees. Also, CSS styles can be connected to the page, which set <a href="https://gtavrl.ru/en/yarlyki-yandeksa-kak-skachat-russkii-yandeks-brauzer-besplatno/">appearance</a> page elements. To <b>change the site source code</b> you don’t need to know HTML and CSS thoroughly, and you’ll soon see for yourself.</p>
<h2>Why change a web page?</h2>
<p>You can change the data on the site, change the text of the message, or take a fake screenshot. Please note that all changes are visible only to you and will disappear when you reload the page. Also the changed data will not be real. For example, if I don’t have 10 dollars, and I change it to 100, then I won’t have any more money. This is just the display of the page by the browser. Example:</p>
<p><b>After:</b></p>
<p><img src='https://i1.wp.com/mypclife.ru/wp-content/uploads/2017/07/changeHTMLcode2.jpg' align="center" height="274" width="274" loading=lazy loading=lazy></p>
<p>For example, I’ll take the same site and change the previous announcement of the article “” Opening <a href="https://gtavrl.ru/en/stranica-sdelat-startovoi-avtomaticheski-kak-sdelat-yandeks/">home page</a> in Google Chrome. I right-click on the element that I want to change, for example, the title of the announcement and select “View code”.</p>
<p><img src='https://i1.wp.com/mypclife.ru/wp-content/uploads/2017/07/changeHTMLcode4.jpg' align="center" width="100%" loading=lazy loading=lazy></p>
<p>In the window that opens, go to the Elements tab and see the HTML code of the page. In it we need to find the text we are interested in. (underlined in red)</p>
<p><img src='https://i1.wp.com/mypclife.ru/wp-content/uploads/2017/07/changeHTMLcode5.jpg' align="center" width="100%" loading=lazy loading=lazy></p>
<p>Now I’ll delete the old text and write in a new one.</p>
<p><img src='https://i2.wp.com/mypclife.ru/wp-content/uploads/2017/07/changeHTMLcode6.jpg' align="center" width="100%" loading=lazy loading=lazy></p>
<p>That's all, the title of the announcement has been changed. Now I will change the announcement itself, tags and category.</p>
<p><img src='https://i2.wp.com/mypclife.ru/wp-content/uploads/2017/07/changeHTMLcode7.jpg' align="center" width="100%" loading=lazy loading=lazy></p>
<p>You can insert another picture by changing <a href="https://gtavrl.ru/en/vstavka-izobrazheniya-v-dokument-html-vstavka-graficheskih-izobrazhenii-ispolzovanie-tega-img-i-ego-a/">src attribute</a> in the img tag.</p>
<p><img src='https://i2.wp.com/mypclife.ru/wp-content/uploads/2017/07/changeHTMLcode8.jpg' align="center" width="100%" loading=lazy loading=lazy></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/shleif-ide-sata-dlya-zhestkogo-diska-ide-sata-perehodnik-na-zhestkii-disk/">IDE-SATA, hard drive adapter: description, connection</a></li>
<li><a href="https://gtavrl.ru/en/kak-postavit-zagruzku-s-fleshki-na-noutbuke-kak-v-biose/">How to set the BIOS to boot from a flash drive</a></li>
<li><a href="https://gtavrl.ru/en/kak-steret-vse-dannye-s-iphone-ili-ipad-kak-pochistit-ipad-ot-nenuzhnyh-failov-5/">How to clean your iPad of unnecessary files (5 methods) Do you need to clean your iPad?</a></li>
<li><a href="https://gtavrl.ru/en/programma-dlya-zakachivaniya-pesen-na-disk-programma-dlya-zapisi-dvd-diskov-kak/">DVD burning program: how to record in a couple of minutes</a></li>
<li><a href="https://gtavrl.ru/en/neispravnosti-v-rabote-mikrofona-veb-kamery-nezamedlitelnoe-reshenie-problemy-pochemu-ne-rabotaet-z/">Why the sound, microphone or camera does not work in Skype on a computer</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/chto-oznachaet-pereadresaciya-nomera-pereadresaciya-megafon/">Megafon forwarding: detailed service setup</a></li>
<li><a href="https://gtavrl.ru/en/skolko-vesit-ustanovochnyi-fail-windows-10-kakoi-obem-ssd-nuzhen/">What size ssd is needed for Windows</a></li>
<li><a href="https://gtavrl.ru/en/noutbuk---kak-polzovatsya-klaviaturoi-naznachenie-klavish-klaviatury/">Assignment of computer keyboard keys</a></li>
<li><a href="https://gtavrl.ru/en/poryadok-provedeniya-klassifikacii-informacionnyh-sistem-personalnyh/">BukvaPrava - free legal consultations On approval of the procedure for classifying personal data information systems</a></li>
<li><a href="https://gtavrl.ru/en/shablon-bloga-kategorii-joomla-3-tip-menyu-shablon-bloga-kategorii-alternativnyi/">Menu Type: Category Blog Template</a></li>
<li><a href="https://gtavrl.ru/en/sbros-uchetnoi-zapisi-windows-10-kak-legko-sbrosit-zabytyi-parol-v/">How to easily reset a forgotten password on any version of Windows</a></li>
<li><a href="https://gtavrl.ru/en/socialnaya-set-dlya-rasprostraneniya-opyta-pedagogov-nsportal/">NSPortal - Social network of educators Network of educators registration</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>
