Open the page code in the Yandex browser. How to open the source code of a page

1 vote

Good day, dear readers of my blog. Sometimes you find some beautiful feature on a website and begin to wonder how the creator achieved such an interesting effect.

It turns out that the answer is quite simple. And if you have some skills, you can collect a lot of these features and create your own unique website in a short time.

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

Basic knowledge of code

My site is intended for beginners and first I would like to briefly talk about sites and code in general.

To draw a picture, then cut it into small parts, write code so that the browser will reassemble all the elements into a single whole. Does everything seem very complicated? Not at all, and there’s no point in grieving about it.

This is how high-quality websites are created. If you want, get involved in this matter and study it; if you don’t want to, no one can force you.

I will only say one thing... there is nothing more pleasant than seeing how incomprehensible words you wrote are transformed into a single whole and come to life: links work, buttons move, pictures move, text crawls. I think I know how Victor Frankenstein felt.

When you begin to comprehend the secret language and see that everything is actually much simpler than it initially seemed, you cannot help but believe in your own strengths and capabilities of the brain. This is very cool.

How are websites made? Ideally, first. He's just painting a picture. For example, as shown in the picture below. For now it is just an image, a photograph. No links work, when you click you don’t go anywhere, no search is carried out.

According to this drawing. Look at the screenshot below. You may think that this is a ridiculous and very complex set of symbols. In fact, everything is not so complicated, there is a certain algorithm.

There are only about 150 tags and each of them is responsible for a specific action: link, hyphenation, bold, color, title, and so on. Understanding them is not so difficult if you have the desire and don’t mind the time.

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

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

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

View code

So, let me first show you how to act if you need to find out someone else's html. Then we will look at all the other questions in more detail.

The best way

The method that I will describe first is a little complicated for beginners, but as an introduction, read it. Open the page and click on the right mouse button. Select “Save as...”

Save the entire web page. As you can see in the screenshot, I have already downloaded everything in advance. Here we have two folders.

Everything you need is here. Every element. If you understand this, you can quickly get everything you need. But such a task is increasingly becoming impossible. There is no downloading. What to do if it is prohibited to copy a page?

This is Google Chrome

As you may have already noticed, I most often use Google Chrome and learning someone else's code in this browser is as easy as shelling pears. As in principle with any other. The scheme will not only be similar, but identical. Open the page whose code we want to know and right-click anywhere. In the window that appears, click “View page code”.

A sheet of code will open in a new window, which is quite difficult for a beginner to understand. But don't be alarmed ahead of time.

If you need to know the code of only one element, just hover over it with the mouse and right-click. Select another Chrome function: “View element code”.

For example, I might be interested in how the logo was made, using a picture or a programming language? After all, you can draw a square using CSS. Many experts advise writing down as much information as possible in code. How do they work on popular sites?

Now the necessary information has appeared. html on top, css on bottom. 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 specify the color and font size each time. For each page, this is very long. But if there were no html, then we would not have texts. I explained it roughly, but in general, that’s how it is.

By the way, if you are interested in how it works here, you can look at the link to the picture below. Here's your answer.

Mozilla Firefox

If you like to work in mastic, then everything will be exactly the same. Open the page and click on the right mouse button. “Page source code” if you want to see the entire code.

When you hover over an element, you can open its code.

Here the data is displayed at the bottom of the screen, but otherwise everything is exactly the same.

Yandex browser

In the Yandex browser, everything is exactly the same as in the previous two options, open the page, right-click, see the page code.

We hover the cursor over an element if we want to find out exactly its code.

Everything is displayed here exactly the same as in Chrome.

Opera

And finally, Opera.

By the way, you may have noticed that you don't have to use a mouse. There is a quick keyboard shortcut to open the code, and it is the same for all browsers: CTRL+U.

For elements: Ctrl+Shift+C.

This is what the result looks like.

This will be interesting for beginners

Now look how everything works. You find a site and really like some element. For example, this one. You already know how to open the element code.

Now copy it.

I use , paste this code into a new html file, into the body tag (body in English).

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

Ready. In order for the text to be aligned to the edges and acquire a greenish color, you need to connect css to this document and copy another code from the site from which we copied this one.

I won't do this now. This requires more time: both mine and yours. I think that I will describe all the details in my future publications. Subscribe to the newsletter and be the first to know when an article appears.

If you can’t stand it, but want to learn more about html and css now, then I can traditionally recommend you free training courses.

Here are 33 lessons that will allow you to master html - "Free course on HTML" .

And here is complete information about css - “Free course on CSS (45 video lessons!)” .

Now you know a little more. I wish you success in your endeavors. See you again!

Each Internet user has his own favorite sites on which he spends a long time. And only the lazy did not think to look at how it was created and what it consisted of. It is impossible to answer all these questions, since there are many ways to create a website, but to look at the commands and codes that make up it is possible and publicly available to everyone.

Another question is whether a person who is not involved in programming will understand any of the symbols that make up the code. But from the examples that will be given below, any Google Chrome user will be able to view individual elements of sites.

How to view the source code of an html page in a Google browser

So that you can view the page code in Chrome, you need to go to the site you are interested in and perform the following steps:

These two items differ in their functionality and information for the user, programmer or hacker.

What is the difference between the page code and just the “View Code” command?

Analyzing each of these functions, you can write a separate article. For programmers, this difference is significant and they understand in which cases it is necessary to use “View Code” and in which “View Page Code” in the Google Chrome browser.

But explaining for the average user, these functions can be divided into the following purposes:

“View 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 additions that remain in the site creator’s folder). This structure is not suitable for creating your own page by “copy-pasting”, but it will allow you to see what exactly the programmer did and in what sequence to ensure that the site in the Google Chrome browser had such an external design.
“View Code” displays a detailed structure, highlighting all the areas that are affected on the page. If you hover over a specific list code, it will highlight the element on the site to which it belongs.
Viewing the page code opens in a separate browser without the ability to edit it. That is, it is only suitable for copying and reading site code. But this is no less useful function.
“View code” is changeable and you can edit any element in a way that is convenient for you. Of course, all these changes will “live” until the page is refreshed, but sometimes it’s fun to go through those settings and just understand why this or that value is needed, and what will happen if you change it. You should not assume that by such actions you will harm yourself or the site - these changes only affect the code of your Google Chrome and do not go online.

We are considering the question of how to view the element code

If we were to answer such a question, then the only option that suggests itself is an example. Because in one article it is very difficult to become a person who understands this topic (web developer), but to show with an example so that the question is settled is much easier.

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

Other ways to use this feature in the Google Chrome browser

In general, continuing to answer the question of how to look at the code of an element and why it is needed, you should list its functions. Namely, thanks to the ability to view the code of an element of any site in the Google Chrome browser, we can:

See the structure of the site starting from head (“site header”) and ending with end (the final command of any program);
View all the functions of the site, namely: links to other sites, additional modules from external sites and the presence of built-in counters for collecting various information;
Find out whether copying from the site is prohibited or not;
The code will record all links to other pages of the site, as well as their design and subsequent actions after clicking on them.

This is by no means a finite list. But it should be recalled that without special knowledge, it is almost impossible to “read” the code of a Google Chrome page and the received data is practically not needed by an ordinary user.

The item “View element code” does not work

It should be said right away that each site will have open access to element codes. That is, even the most popular and expensive sites will be open to viewing their code. Therefore, if the item in the Google Chrome browser is not active or generates an error, it has the following possible reasons:

User profile is corrupted;
The presence of malware on the computer;
Blocking by a certain extension to increase performance (even this can happen).

Fixing a damaged user profile

To create a new profile, you must delete the old one from your computer. To do this we do the following:

Close Google Chrome and launch the built-in Windows Explorer browser.
Enter the following command into the address bar: %LOCALAPPDATA%\Google\Chrome\User Data\.
When the directory opens, look for the “Default” folder and add “Backup” to its name so that it looks like this: “Backup Default”.
Now, after restarting the Chrome browser, a new profile will be created.

We remove malware or its remains

If the new profile does not give us access to the page element code and we still see the error, we should do the following:

Open the Windows command line (“Run”) and enter the “cmd” command there.
Enter the following command into the line: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
After confirming the action, enter this: RD /S /Q “%WinDir%\System32\GroupPolicy”.
Now “gpupdate /force” (without quotes).

If everything was done correctly, then after restarting the computer Google Chrome will open the code of the elements and the browser will work normally.

We've released a new book, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall in Love with Your Brand.

The source code of a site is a collection of HTML markup, CSS styles and JavaScript scripts that the browser receives from the web server.

More videos on our channel - learn internet marketing with SEMANTICA

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.

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. The end result of any server-side algorithm is a set of html tags and text.
The page source code is a set of data that includes:

html markup;
style sheet or file link;
programs written in JavaScript or links to files with code.

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.

Why we might need to study the source code

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:

See the meta tags of your or someone else’s site to analyze them.
See the presence or absence of certain elements on the site: counters, identification codes in various systems, certain scripts and other things.
Find out the parameters of the elements: sizes, colors, fonts.
Find the path to photos and other elements located on the page.
Explore links from the page.
Find problems with the code that interfere with the process of website optimization: styles not placed in separate files, scripts, invalid code.

These are the basic features, but in fact, by being able to read the code, you can learn a lot more about the page.

How to view the source code of a site

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 right-clicking on the page. Here and below using Google Chrome as an example.

Select the “View page code” option and get the full listing in a separate tab.

It's just text that you have to analyze to understand. But you can get interactive code using the developer tools.

How to find the source code of a website page

Click on the menu icon in the browser. Most often it is on the right and looks like three dots or stripes.

In the additional tools section, select “Developer Tools”.

A window will open showing the active state of the 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.

In the “Source” tab you can view the contents of some files: scripts, fonts, images.

In the “Security” tab, you can check the site’s certificate.

The “Audits” tab will help you check the resource posted on the hosting.

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.

How to view meta tags

Every HTML document includes structure tags. Here are some of them:

Html – the entire document.
Head – section of service headers.
Title – page title (displayed on the tab).
Body – the body of the document.
H1-H6 – page text headings.
Article – article.
Section - section.
Menu – menu.
Div – block.
Span – string.
P – paragraph.
Table – table.

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.

Their contents cannot be found out in any other way.

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".

The specified file will open in a new tab, which you can view or save.

How to view the source code of a page to debug a script

In this case, it is most convenient to open the page on the local machine. 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. But JavaScript code errors can be seen in the “Console” tab. This shows the description of the error and the line number where it occurred.

The syntax can be seen directly in the code. This is what the “Source” tab is for.

How to view the code of a specific element

For large pages with many elements, it is difficult to find the necessary code in all the markup. In this case, you should use a special context menu command. Move the mouse over the fragment and press RMB. Select the “View Code” command.

The same window will open, but with the focus on the selected object.

Summary

We told you what the page source code is. It is enough to master basic knowledge of HTML and CSS, and using convenient developer tools, you will be able to debug your own HTML documents.

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.

Skill change the page source code– a useful skill for an advanced Internet user. By substituting HTML code, you can change the open web page as you wish. In this article we will tell you how to change page code in Google Chrome. However, in other browsers everything is done similarly, so there should not be any difficulties.

What is the HTML code of the page?

Every page you open in your browser has its own code in the HTML markup language. 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 define the appearance of page elements. To change the site source code you don’t need to know HTML and CSS thoroughly, and you’ll soon see for yourself.

Why change a web page?

You can replace 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:

After:

For example, I will take the same site and change the previous announcement of the article “Opening the main page 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”.

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)

Now I’ll delete the old text and write in a new one.

That's all, the title of the announcement has been changed. Now I will change the announcement itself, tags and category.

You can insert another image by changing the src attribute in the img tag.

" The same item is also in the context menu, which, if you right-click the text pages. You can also use the keyboard shortcut CTRL + U. Mozilla FireFox does not use external programs - original code pages with syntax highlighting will be opened in a separate browser window.

In Internet Explorer, click the File menu and select Edit in Notepad. Instead of the name Notepad, another name may be written, you have assigned it in the browser settings to view the original code A. On click pages with the right mouse button, a context menu appears, which also has an item that allows you to open the source code pages in an external program - “View HTML- code A".

In the Opera browser, open the menu, go to the “Page” section and you will have the opportunity to select “Source” in the “Development Tools” subsection code"or the item "Original code frame." These selections are assigned the hotkeys CTRL + U and CTRL + SHIFT + U, respectively. In a context menu bound to a click pages right-click, there is also an item “Initial code" Opera source pages in an external program that is assigned in the OS or in the browser settings for editing HTML files.

Google Chrome browser without any doubt has the best organization for viewing the original code A. By right-clicking your mouse, you can select View code A pages"and then the source code with syntax highlighting will be opened in a separate tab. Or you can select the line “View” in the same menu code element” and in the same tab will open two additional frames in which you can inspect HTML and CSS code element pages. The browser will respond to the cursor moving across lines code and, highlighting elements on the page that correspond to this section of HTML code A.