How to view the source code of the page and the code of the item. How to quickly open the page code in the browser, even if copying is prohibited

Each Internet user has its favorite sites on which he spends a long time. And only the lazy did not think of seeing how it was created and what it consists of. Answer all these questions will not work, as there are many ways to create a site, but to see those teams and codes from which it consists - it is possible and accessible to everyone.

Another question is whether a person will understand who is not engaged in programming something of those characters that make up the code. But from examples that will be lower than any user Google Chrome. Can watch individual elements of sites.

How to view the source code of the HTML pages in the browser from Google

What you could see the page code in Chrome must go to the site you are interested in and perform the following actions:

Two of these items differ among themselves with their functionality and information on the user, programmer or hacker.

What is the difference between the page code and just the "View Code" command

Viewing each of these functions can be written separate item. For programmers, this difference is essential and they understand in what cases it is necessary to use "View Code", and in what "page view" in google browser Chrome.

But explaining for the regular user you can divide these functions for the following purposes:

1. "View the page code" is only necessary to see the main combination of the page. Basically, this is the structure of the site (without additional models in the form of CSS files and other addlections that remained in the site creator folder). This structure not suitable for creating own page By "copying - insert", but it will allow you to see what the programmer did and in what sequence so that the site in the Google Chrome browser had such an external design.
2. "View code" displays a detailed structure with allocating all areas that are affected on the page. If you bring to a specific list code - it will allocate an item on the site to which it belongs.
3. Viewing the page code opens in a separate browser without the ability to edit it. That is, it is suitable only for copying and reading the site code. But this is no less useful feature.
4. "View code" change and you can edit any item as it will be convenient for you. Of course - these all changes will "live" until the page is updated, but sometimes it is fun to climb the settings and simply understand why it is necessary, and what will happen if it is changed. You should not assume that such actions you hurt yourself or site - these changes are valid only in the code of your Google Chrome and does not go online.

Consider the question of how to see the code of the element

If you really answer such a question, then only an option as an example. Because for one article to become a person who will understand this topic (web developer) is very difficult, but to show the example to be exhausted - to make much easier.

The functionality of the element code is very wide, so we take one of the words on the Google Chrome browser site. We wished to consider what keywords (in the code it will be registered as "keywords") were used for our site. To do this, perform the following algorithm:

Other ways to use this function in Google Chrome browser

In general, continuing to respond to the question of how to see the code of the item and why it is needed, it should be transferred to its functions. Namely thanks to the ability to see the code of the element of any site in the Google Chrome browser, we can:

• See the structure of the site starting from HEAD ("Site Cap") and ending end (End command of any program);
• View all site functions, namely: links to other sites, additional modules from external sites and the presence of built-in meters to collect different information;
• Find out whether copying from the site is prohibited or not;
• In the code, all links to other site pages will be recorded, as well as their design and subsequent actions after clicking on them.

This is not a finite list. But it should be reminded that without special knowledge - "read" code google Pages Chrome is almost impossible and the resulting data is practically not needed by the usual user.

Item "View Item Code" does not work

Should immediately say - every site will be with open access To the codes of elements. That is, even the most popular and expensive sites will be open to view their code. Therefore, in case the item in the Google Chrome browser is not active or issued an error has the following possible reasons:

• User profile is damaged;
• The presence of malicious software on the computer;
• Blocking with a specific extension to increase productivity (even this may be).

Correct the damaged user profile

To create new profileYou must remove the old one from your computer. To do this, carry out the following:

1. Close Google Chrome and launch the built-in windows browser Explorer.
2. We enter the following command to the address bar:% LocalappData% \\ Google \\ Chrome \\ User Data \\.
3. When the directory opens, we are looking for the folder "Default" and add to its name "Backup" so that the following is: "Backup Default".
4. Now after the new launch of the browser chrome, a new profile will be created.

Remove the malicious software or its remnants

If a new profile has not opened access to the page of the page element and we still see the error, the following steps:

1. Open command windows string ("Run") and enter the "CMD" command there.
2. Enter the following command in the line: RD / S / Q "% WINDIR% \\ System32 \\ GroupPolicyusers".
3. After confirming the action, drive this: RD / S / Q "% WINDIR% \\ System32 \\ Grouppolicy".
4. Now "GPUPDATE / FORCE" (without pitchers).

If everything was done correctly, then after reboot google Computer Chrome will open the code of the elements and the working capacity of the browser will normally.

Looking through countless sites on the Internet, you can find such that we like very much. Immediately arises a number of questions. Is the site done using a self-written code or any CMS? What is his CSS styles? What is his meta tags? Etc.

There are many tools with which you can extract information about the site page code. But at hand, we always have a right mouse button. I will use it, on the example of my site.

How to view the page code?

To view source Site pages, you need to hover the mouse cursor on any area of \u200b\u200bthe web page (with the exception of images and links). After that click on the right mouse button. We will open a window with several options (in different browsers They may differ slightly). In the Google Chrome browser, for example, these are teams:

• back;
• forward;
• restart;
• save as;
• print;
• translate to Russian;
• view Page Code;
• view code.

We need to click on view Page CodeAnd the HTML site page code opens.

View Page Codes: What to pay attention to?

So, HTML page code is a numbered list of lines, each of which bears information on how this site is made. To quickly learn to understand this huge number of signs and special charactersYou need to distinguish between different sections of the code.

For example, the codes in inside the Head tag contain information for search engines and webmasters. They are not displayed. Here you can see what keywords This page is promoted, as its title and Description. You can also find a link here by going to which we learn about the Google fonts used on the site.

If the site is made on CMS Wordpress or Joomla, it will also be seen here. For example, information about wordPress theme or joomla template Site. You can see it by reading the contents of links highlighted in blue. In one link visible site template.

For example:

//fonts.GoogleApis.com/css?Family\u003dSource+Sans +Pro%3A400%2C400ITALIC%2C600&ver\u003d4.5.3.

We will see CSS page font styles. In this case, the font is used. It can be seen here - font-face: 'Source Sans Pro'.

This site is optimized using the Yoast SEO Plain. This is seen from this commented code of code:

This Site Is Optimized with the Yoast SEO Plugin v3.4.2 - https://yoast.com/wordpress/plugins/seo/

All information inside the Body tag is displayed browser on the monitor screen. Here we see HTML page code, and at the bottom there is a code of the Yandex metric script. It is clothed with a commented tag with text:

/Yandex.Metrika Counter.

Let's sum up

After spending a pretty surface analysis of the site of the main page of the site, it can be concluded that this page is made with the help of which tools. We saw on it:

• CMS WordPress;
• Google font SOURCE SANS PRO;
• the topic of WordPress - Sydney;
• yoast plugins;
• yandex metric meter.

Now the principle of analyzing the HTML site page of the site is quite understandable. It is not necessary to maintain the studied page open in the browser. You can save the page of the page to your computer using key combinations Ctrl + A, Ctrl + C, Ctrl + V. Insert it in any text editor (Better NotePad ++) and save with HTML expansion. Thus, you can study it deeper at any time and find more useful information for yourself.

1 vote

Good day, dear readers of my blog. It happens on the site some beautiful chip and begins to torment the question, how the creator achieved such an interesting effect.

It turns out that it is quite simple to find the answer. And if you have some skills, you can choose a lot of such chips and in a short time to create your own unique site.

Today we will talk about how to open the page code, a certain element and learn to use this skill for yourself.

Basic knowledge of code

My site is designed for newbies and first I would like to tell the sites and code in the two words.

To draw a picture, then cut it into small parts, write code, thanks to which the browser will bring all the elements to a single whole. It seems that everything is very difficult? Not at all, and it is not worth grieving about this.

Quality sites are created this way. Want - Close to this case and study, no desire - no one is able to force you.

I will only say one thing ... There is nothing more pleasant than seeing the incomprehensible words written by you are converted into a single whole and come to life: links work, buttons move, pictures are moving, text crawls. I think I know how Viktor Frankenstein felt.

When you begin to comprehend a secret language and see that everything is actually much simpler than it seemed initially you can't not believe in your own strength and brain opportunities. It is very cool.

How are sites made? Ideally, first. He just draws a picture. For example, as shown in the figure below. While it is just an image, a photo. No references do not work, when you press you do not go anywhere, the search is not carried out.

For this figure. Look at the screenshot below. You may seem like a ridiculous and very complex set of characters. In fact, everything is not so difficult, there is a certain algorithm.

There are only about 150 tags and each of them is responsible for a certain action: link, transfer, highlighting fat, color, heading, and so on. It's not so difficult to deal with them, if there is a desire and not pity the time.

Thanks to the knowledge of these attributes, you can solve almost any task. But the ways to achieve the goal each developer finds its own.

Experienced creators will immediately see how to achieve results, and others have to think, look for an answer in articles or in the initial code of competitors. They simply take the necessary part on a third-party site and edit for themselves. This significantly reduces the work process.

A little later, I will show you a specific example.

View code

So, let's first show you how to act if you need to learn someone else's HTML. Then we will consider in more detail all other questions.

The best way

The method that I will describe the first is a bit complicated for newbies, but as an acquaintance - will go, read. Open the page and click on the right mouse button. Choose the item "Save As ..."

Save the webpage completely. As you can see on the screenshot, I have already downloaded everything in advance. Here we have two folders.

There is everything you need. Each element. If you understand this, you can quickly get everything you need. But, such a task is increasingly becoming impracticable. Download is not performed. What to do if it is forbidden to copy the page?

This is Google Chrome

As you probably could notice, I most often use Google Chrome and find out someone else's code in this browser is easier than simple. As in principle, both in any other. The scheme will not be what is similar, but identical. We open the page whose code we want to know, and click anywhere right mouse button. In the click of the page that appears, click the page code.

The new window will open a sheet of code in which it is rather difficult to understand a newcomer. But, do not be afraid ahead of time.

If you need to know the code of only one element, it is enough to bring on it with the mouse and right-click. Select another chromium function: "View the code code".

For example, I can be interested in how the logo is made when using a picture or programming language? After all, you can draw a square when cSS help. Many specialists advise as much information as possible to register with the code. How do you work on popular sites?

So appeared the necessary information. From above HTML, at the bottom of CSS. These are two languages. The first is responsible for the text component, and the second for the design. If there were no CSS, then you would have to prescribe color each time, font size. For each page, it is very long. But if there were no HTML, we would not have texts. Rudely explained, but in general, everything is so.

By the way, if you are interested in how it is arranged here, you can look at the bottom of the link to the picture. So you answer.

Mozilla Firefox.

If you like to work in a mazile, everything will be just too. Open the page and click on the right mouse button. "Page source code" If you want to see all the entire code.

When you hover on any item, it is possible to open its code.

Here the data is displayed at the bottom of the screen, and otherwise everything is also.

Yandex browser

In Yandex browser, everything is just as in the previous two versions, open the page, the right mouse key, see the page code.

We bring the cursor to the item if we want to know its code.

It is displayed here exactly as in chrome.

Opera

Well, finally, Opera.

By the way, perhaps you noticed that it was not necessary to use the mouse. To open the code there is a quick key combination and for all browsers it is the same: Ctrl + U..

For items: Ctrl + Shift + C.

This is how the result looks like.

It will be interested in beginners

And now see how everything works. Find you a site and you really like some kind of item. For example, this one. How to open the code of the item you already know.

Now copy it.

I use, insert this code into a new HTML file, in the Body tag (body in English).

Now let's see how it will all look in the browser.

Ready. In order for the text to be aligned along the edges and acquired a greenish color, you need to connect to this document CSS and copy another code from the site from which we toried this.

Now I will not do this. It needs more time: and mine, and yours. I think that all the details I will describe in my future publications. Subscribe to the newsletter and learn about the appearance of the article first.

If you have no strength to endure, and you want to learn more about HTML and CSS now, I can recommend free training courses by tradition.

Here are 33 lessons who will allow you to master HTML - « Free course by html " .

And here complete information about CSS - "Free CSS Course (45 Video Tutorials!)" .

Now you know a little more. I wish you success in your endeavors. To new meetings!

You need to quickly see all changes on the site itself without affecting the files and code of the site laid out on the Internet. For example, change the color gamut of any block, to move the eating element, etc.

For this, many webmasters use local servers Denwer or OpenServer, running a complete copy of the site at your computer. This method is universal and suitable for professionals, with the help of it you can check the work. various scripts Both plugins, experiment with a change in design and edit all site files, and after the test transfer the appropriate changes directly to the site.

Users far from webmaster I recommend using a browser for these purposes. Since I use Shrome, I will give instructions with screenshots for this browser. By analogy, you can work with Opera, Yandex.Bauzer, Mozilla Firefox. and other browsers, the principle of their tools is similar.

Instruction 1: How to view the entire HTML site code in the browser

Open the necessary web page of your site. With the right mouse button on the required item, the contextual browser drop-down menu will appear with the available commands:

Figure 1. Viewing the entire HTML webpage code in browser Chrome.

Important: Commands in the drop-down menu may differ, for example, for active elements (links, pictures, video) and inactive (text, background, diva):

Figure 2. Chrome browser drop-down menu

Therefore, if you have not found the necessary command, simply click the right mouse button elsewhere or use the hot browser keys.

Let's go back to Figure 1, it shows the necessary command to view the entire HTML code of the source web page, it is called " View Page Code". Click on a team will open new inset With the full code of the original web page, the big plus to everything - viewing is available with highlighting the syntax:

Figure 3. Fragment of the code of this site

This tool is very useful for finding and editing the desired elements.

Alternative ways to view all HTML web page code

For more quick access, You can use other ways to call this tool.

1. In Figure 1, we also see that this command is available on the keyboard shortcut. + ;
2. Insert the view-source browser to the address bar: site instead of my domain insert your address;

Both methods are universal and must work in all browsers.

Someone at first it will seem that this is not the necessary tool, but the view of the entire HTML site code is great for searching in the code of necessary items, it can be links, tags, meta-tags, attributes and other elements.

A combination of hot keys + Open the search box, in the Chrome browser it appears on the right:

Figure 3. Code Search Site

After you are prompted to search form form, the screen will move to the first found element, using the arrows you can move between them and select the necessary:

Figure 4. Search by HTML Coda Site.

Instruction 2: How to view and edit HTML and CSS site code in Google Chrome browser

Now Sameya an important partin which I will show how you can edit HTML and CSS site code in the browser. After that transfer changes to the browser.

Here is a useful tool is always available in your browser, experiment with other commands that you will facilitate the editing of the site.

Skill change the source code - Useful skill for an advanced Internet user. Using the HTML codes, you can change the open web page as you please. In this article we will tell how to change page code In Google Chrome. However, in other browsers everything is done in the same way, therefore there should be no difficulties.

What is HTML page code?

Each page you open in the browser has its own code in the HTML markup language. This code is tags and text. Tags are peculiar labels that indicate the browser, how to display one or another part of the site. Text is the filling of the page, what the user sees. Also to the page can be connected to CSS styles that set appearance Page elements. To change the source code of the site You do not need to thoroughly know HTML and CSS and soon you will make sure about it.

Why change the web page?

You can replace the data on the site, change the message text, make a fake screenshot. Please note that all changes are visible only to you and when rebooting the page, they will disappear. Also modified data will not be real. For example, if I have $ 10, and I will change by 100, then I will no longer be money. It is only a browser page display. Example:

After:

For example, I will take the same site and change the previous announcement of the article "" I open main page In Google Chrome. I click on the PCM on the element that I want to change, for example, the announcement header and choose "View Code".

In the window that opens, go to the Elements tab and see the HTML page code. It needs to find the text of interest to us. (emphasized red)

Now I will delete the old text and do new.

That's all, the name of the announcement is changed. Now I change the announcement itself, tags and rubric.

You can insert another picture by changing sRC attribute In IMG tag.