For a long time, the “show page source code” option was useless and uninteresting for me. So far, learning HTML at Codecademy and building my own sites has not grown into my new hobby. Here the question arose: where to find real cases and borrow interesting solutions for your “piggy bank”? The answer was surprisingly simple, like all genius: view the source code of the page in Google Chrome! I share with you my modest findings.
What is page source code
If you, like me, are just taking your first steps in HTML programming, it will not be superfluous to know what the source code of a page is.
The source code, also known as the HTML code of the page, is text in Hyper Text Markup Language (HTML). It includes the actual page content (text, tables) and tags. The latter play the role of instructions for the browser: how to display content, what kind of formatting to use, where to insert a hyperlink or media file. Well, for us, novice programmers, the source code is the best training ground: we find an interesting site and peep, save, use successful fragments. How?
How to View Source Code in Google Chrome Browser Page
Find the page you like. For example, I was interested in the design of the site menu. There are three ways to open the source code in the Google Chrome browser:
- Click on the icon menu in the upper right corner of the browser and select "More Tools". Among others, there is an option to "View Source Code". Frankly, I rarely use this method: a lot of unnecessary movements. It can be made even easier.
- Press the key combination Ctrl+U- opens a new window with the source code;
- For context menu fans: right-click on the page and select the option "View Page Code".
We coped with the task of viewing the HTML code of the page in the browser. We pass to the most interesting stage.
How to edit and save source code
To learn how to create websites, it is not enough to read someone else's HTML code. You need to play with it, experiment, make changes and check the result. You can even start by compiling a few successful samples. How to edit and save source code?
Option 1. "Manually"
After we have opened the source code of the page, we call the context menu and select the "Save As" option and save the file to the hard drive. We edit the file in Notepad or Notepad, save the changes and open through the browser. The results of our changes (successful and not so good) will be reflected in the browser window.
Option 2. For the pros
When you "play" with source code every day, the process of "save - open - change - save - check" is tiring. For myself, I found a solution in the form of installing a plugin for Google Chrome - Firebug Lite. It allows you to edit and save the source code without leaving your browser window.
It is necessary to quickly see all the changes on the site itself, without affecting the files and code of the site posted on the Internet. For example, change the color scheme of a block, move a moved element, etc.
To do this, many webmasters use local Denwer or OpenServer servers, running a full copy of the site on their computer. This method is universal and suitable for professionals, with it you can check the operation of various scripts and plugins, experiment with changing the design and edit all site files, and after the test, transfer the appropriate changes directly to the site.
For users who are far from webmaster art, I recommend using a browser for these purposes. Since I use Chrome, I will give instructions with screenshots for this particular browser. By analogy, you can work with Opera, Yandex.Browser, Mozilla Firefox and other browsers, the principle of their tools is similar.
Instruction 1: how to view the entire HTML code of the site in the browser
Open the required web page of your site. We right-click on the required element, a browser context drop-down menu with available commands will appear:
Figure 1. Viewing the entire HTML code of a web page in the Chrome browser
Important: Commands in the drop-down menu may differ, for example, for active elements (links, images, videos) and inactive elements (text, background, divs):
Figure 2. Chrome browser dropdown menu
Therefore, if you do not find the required command, just right-click somewhere else or use the browser hotkeys.
Returning to Figure 1, it shows the necessary command to view the entire HTML code of the original web page, it is called " View page code". We click on the command, a new tab will open with the full code of the original web page, a big plus to everything - the view is available with syntax highlighting:
Figure 3. Code snippet for this site
This tool is very useful for finding and editing the elements you are looking for.
Alternative Ways to View All HTML of a Web Page
For faster access, you can use other ways to call this tool
- In Figure 1, we also see that this command is available via a keyboard shortcut. + ;
- Paste into the address bar of the browser view-source: site instead of my domain, paste your address;
Both methods are universal and should work in all browsers.
At first it may seem to some that this is not a necessary tool at all, but viewing the entire HTML code of a site is great for finding the necessary elements in the code, these can be links, tags, meta tags, attributes, and other elements.
Hot key combination +open the search box, in the Chrome browser it appears at the top right:
Figure 3. Search by site code
After you make a request to the search form, the screen will move to the first element found, using the arrows you can move between them and select the one you need:
Figure 4. Search by website HTML code
Instruction 2: How to View and Edit Website HTML and CSS Code in Google Chrome Browser
Now the most important part, in which I will show how you can edit the HTML and CSS code of the site in the browser. then transfer the changes to the browser.
Here is such a useful tool always available in your browser, experiment with other commands that will make it easier for you to edit the site.
If you open any web page, it will contain typical elements that do not change depending on the type and direction of the site. Example 4-1 shows the code for a simple document containing basic tags.
Example 4.1. Web page source code
Web page example
header
First paragraph.
Second paragraph.
Copy the contents of 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, specify the example41.html file. The web page shown in Fig. 4.1.
Rice. 4.1. Result of running the example
Elementis intended to indicate the type of the current document - DTD (document type definition, document type description). 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, extended hypertext markup language), similar to HTML, but different in syntax. So that the browser "does not get confused" and understands according to which standard to display a web page, it is necessary to set in the first line of code
.
There are several types, they differ depending on the version of HTML they are targeting. In table. 4.1. the main types of documents with their description are given.
Tab. 4.1. Valid DTDs | DOCTYPE |
Description |
|---|
| HTML 4.01
|
|
|
Strict HTML syntax. |
|
|
Transitional HTML syntax. |
|
|
Frames are used in an HTML document. |
| 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 strict and transitional document descriptions is the different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving of mistakes. Transitional HTML is more "quiet" about some code flaws, so this type is preferable in certain cases.
For example, strict HTML and XHTML require the tag
, but in transitional HTML it can be omitted and not specified. At the same time, remember that the browser will display the document in any case, regardless of whether it matches the syntax or not. Such validation is carried out using a validator and is intended primarily for developers to track errors in a document.</p>
<p>In what follows, we will mainly use the strict<!DOCTYPE>, except where specifically stated. This will allow us to avoid common mistakes and teach us to write syntactically correct code.</p>
<p>It is often possible to come across HTML code without using any<!DOCTYPE>, the web page will still be displayed in such a case. However, it may happen that the same document is displayed differently in the browser when using<!DOCTYPE>and without it. In addition, browsers can display such documents in their own way, as a result, the page will “crumble”, i.e. will be displayed in a completely different way, as required by the developer. 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>The title of the document, as the block is also called <head>, may contain text and tags, but the content of this section is not shown directly on the page, except for 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 features, in particular, with the help of meta tags, as this tag is generally called, you can change the page encoding, add keywords, document description, and much more. So that the browser understands that it is dealing with UTF-8 encoding (Unicode transformation format, Unicode transformation format) and this line is added.</p><p>
<title>Web page example
Tag
defines the title of a web page, this is one of the important elements designed to solve many problems. In the Windows operating system, the title text is displayed in the upper left corner of the browser window (Fig. 4.2).</p>
<p><img src='https://i2.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 the browser</p>
<p>Tag <title>is mandatory and must be present in the document code.</p><p>Be sure to add a closing tag</head> to indicate that the document's title block is complete.</p><p>Document Body <body>is intended for placing tags and the content of the web page.</p><p>
<h1>header</h1>
</p><p>HTML offers six different levels of text headings 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 designate a sixth-level heading and is the least significant. By default, the first level heading is displayed in the largest bold font, the next level headings are smaller. tags <h1>...<h6>are block-level elements, they always start on a new line, and after them, other elements appear on the next line. In addition, a blank space is added before and after the heading.</p><p>
<!-- Комментарий -->
</p><p>Some text can be hidden from showing in the browser by making it a comment. Although the user will not see such text, it will still be transmitted in the document, so looking at the source code can reveal hidden notes.</p>
<p>So, today we will look at several useful tools for the Web wizard that make life easier when laying out a site. Let's start with the webmaster console in Google Chrome. And let's go over the questions that most often arise from the webmaster during the layout of the site.</p>
<p>To get to the console, open your site in Google Chrome, right-click anywhere on the web page, and choose "View Page Code" from the context drop-down menu, or on a specific element to explore 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, nesting of elements, representation of the element hierarchy in the DOM tree (hint at the bottom, from the root parent to the current one being examined), the ability to edit elements, a list of their properties, consider searching by elements, and also Let's get acquainted with viewing the css styles associated with the elements, etc..</p>
<h3>How to view all styles that are associated with a particular element? Which one is in use now? What files are they in?</h3>
<p>So, there is nothing easier! We 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 the "View element code" item 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 general "summary" styles that have been assigned to the element from the css rules and the settings of the user's browser (his environment), and at the same time the tab is collapsed.</p>
<p>But we are interested in the “Styles” tab deployed below 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. . At the same time, if the css rule is crossed out, then it was redefined earlier/next (which makes it easy to track which of the css rules is a priority and is applied to the element in this case).</p>
<p>Below the console 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 breadcrumbs.</p>
<h3>Html tag not visible in page context? Or do you need to find all tags, for example, by a certain class, name, property, type?</h3>
<p>Open the site in Google Chrome, right-click, call 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 looking through all the styles associated with the desired elements on the right side of the page.</p>
<h3>How to view the html code of the element (elements) loaded dynamically (for example: by Ajax)</h3>
<p>Waiting for the page to load in Google Chrome. We perform the necessary actions for Ajax to work. We right-click on the downloaded data, select "View element code" in the context menu, 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 the 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>Interactive view of the impact of css rules on the presentation of html tags</h3>
<p>Google Chrome provides an interactive console for css styles. And this means that you can not only see which styles are applied to the element, but also move the mouse cursor over a certain css property, enable it with a pop-up checkmark 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 the presentation of html elements on the fly (right in the browser)</h3>
<p>So, we have already learned how to explore the structure of a web document in Google Chrome, now let's take a quick 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 the pop-up context menu:</p>
<ul><li><b>Add attribute</b>- Adds an attribute to the specified element. As soon as the cursor becomes active, we begin to set the desired property. <b>For example</b>: Let's write name="itemImage", which will be immediately added to our element.</li>
<li><b>Edit attribute</b>– if you right-click on an attribute of an element, the item becomes available <b>edit</b><b>attributes</b>. Click, edit.</li>
</ul><p><b>Usage example:</b> we have forgotten the password saved under the asterisks in Google Chrome (if the password was saved in this browser). Right-click on the element with the password, click on "View Element Code" <b>,
</b> in the console on the left side of the tab <b>Elements</b> right-click on the type="password" attribute, left-click on <b>Edit</b><b>attributes,</b> change attribute <i>type="</i><i>password"</i> on the <i>type="</i><i>text"</i>, and here we already have the same password in the form of text instead of asterisks.</p>
<ul><li><b>Edit</b><b>html</b>- right-click on an element in the console <b>Elements</b>, choose <b>Edit</b><b>html,</b> change the code to your liking.</li>
<li><b>Copy</b><b>as</b><b>HTML</b>- copy the portion of HTML we need for further research, say, in a notebook, 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 current selected element and all its children from the context of the web page, and see the result.</li>
<li><b>Word</b><b>wrap</b>- will render the web page view in the context of the console <b>Elements</b> more readable.</li>
</ul><p>In the following articles, we will continue to look at the webmaster tools, and in particular, we will get acquainted with the rest of the webmaster tools tabs in <b>Google Chrome</b>, and also consider debugging javascript errors using 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 developer tools to the standard features, with which you can easily 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, conduct its technical analysis. In general, to see a lot of useful things.</p>
<p>Of course, these tools are used not only by the creators of sites for work, but also by ordinary users, to whom the source code allows you to see various useful data.</p>
<p>From this article you will learn how to view the source code of the site page in the browser (how to open the HTML, CSS, JavaScript code of the site).</p>
<i>
</i>
<h2>How to open page source code in 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 context menu.</li>
</ol><p><b>Ctrl+U</b>- a combination of hot keys to view the source code of the entire page of the site in a separate new window. Standard for all browsers: Google Chrome, Opera, Mozilla Firefox, Yandex browser, IE.</p>
<p>You can also enter the developer tools as follows:</p>
<p>In order to quickly find the desired code, 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 section on the page, then the previous tool will not work. To do this, there is another function in the developer tools, 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://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Proinspektirovat-otdelnyy-element.png' width="100%" loading=lazy loading=lazy><p>In addition, you can use keyboard shortcuts to quickly access element inspection.</p>
<p>Hot keys (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 the done actions, the source code of the web page will open in the same browser window:</p>
<br><img src='https://i0.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 left large column. And CSS styles are on the right.</p>
<br><img src='https://i2.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-css-stili-v-brauzere.png' width="100%" loading=lazy loading=lazy><p>The advantage of this method, of course, is that the user has the opportunity to change the source code, 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 that are on the hosting servers. To change or add a program code, you need to double-click on the desired fragment or section. Of course, the correction of the code 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 to files.</p>
<p>This video tutorial details and shows how to work with developer tools:</p>
<p><span class="DQMK8CuXkOg"></span></p>
<p>So just online, right in the browser, you can view the source code of the site page, get basic information 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 be lost. This is not enough to hack the site 🙂</p>
<h2>How to View Source Code on an Android Phone</h2>
<p>I would also like to note that 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 inspected page:</p>
<p>For example:</p>
<p>view-source:https://website/turbo-mode-opera/</p>
<p><span class="N9JyJMmIZr8"></span></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="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">Top Related Articles</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/en/o-premii-muz-tv-o-premii-muz-tv-golosovanie-za-nominantov-muz.html">
<div class="img_container"><img src="/uploads/0ef01b6c28f8f566857fb20f21ef5345.jpg" border="0" alt="About the mus-tv award Voting for mus tv nominees" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">About the mus-tv award Voting for mus tv nominees</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/en/kto-vruchal-premiyu-muz-tv-priz-za-vklad-v-razvitie-muzykalnoi.html">
<div class="img_container"><img src="/uploads/9763b42bdc7b010bc2e64041cc499d86.jpg" border="0" alt="Prize"За вклад в развитие музыкальной индустрии"" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Prize "For contribution to the development of the music industry"</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/en/etapy-i-mehanizm-processa-inficirovaniya-i-razmnozhenie-virusov-kak.html">
<div class="img_container"><img src="/uploads/cbe7bd1ce4264b83d3e19553689c6b8b.jpg" border="0" alt="How does the influenza virus work: why do we get sick?" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">How does the influenza virus work: why do we get sick?</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">Categories:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/en/category/programs/">Programs</a></li>
<li class=""><a href="https://bumotors.ru/en/category/safety/">Security</a></li>
<li class=""><a href="https://bumotors.ru/en/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/en/category/iron/">Iron</a></li>
<li class=""><a href="https://bumotors.ru/en/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/en/category/vkontakte/">In contact with</a></li>
<li class=""><a href="https://bumotors.ru/en/category/errors/">Mistakes</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="" class="vk social-ico"></a>
<a href="https://facebook.com/" class="fb social-ico"></a>
<a href="https://twitter.com/" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">© 2022 bumotors.ru. How to set up smartphones and PCs. Informational portal.</span>
</div>
</div>
</div>
</div>
</body>
</html> 