How to find the page code. How to view the page source code and element code

At first, some may think 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.

Hotkey combination +open the search window, in the Chrome browser it appears at the top right:

Figure 3. Search by site code

After you enter a request into 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 HTML site code

Instruction 2: how to view and edit the HTML and CSS code of a site in the Google Chrome browser

Now the most important part, in which I will show how you can edit the HTML and CSS code of a website in a browser. then transfer the changes to the browser.

This useful tool is always available in your browser; experiment with other commands that will make it easier for you to edit your site.

Whether you like it or not, sooner or later you will have to get into your WordPress files and edit them to suit your needs. There is also the option of attracting programmers, but each such request will cost you money, in most cases decent money for simple work that takes little time. In order to save your money, which can be spent on promoting your site, and not on a programmer, I will teach you how to quickly find the necessary sections of code in the plugin or theme files.

Why do you need a quick search in php, CSS, html files?

Most of you, having turned to this article, already know why they need such a function, searching through all files at once, but if you entered the court by accident, then I will give you typical examples that fit this topic.

You may need to find:

• Classes. When you decide to fix a class, or configure it differently, you will need to find the place where it is used. Will it be CSS files or any other .
• Editing functions. If you decide to fix a function, it's great that you can find it in the function files, but then you will also need to determine where it is called in other files.
• Cleaning the theme from . Of no small importance is reducing the number of queries to the database, of which WordPress generates a very large number, by calling built-in functions, for example .

Any other problem you have related to searching for elements in an unknown file will be solved by the guide presented below.

How to search for code sections in files?

To get started, we need to download and install the fast and useful Notepad++ editor, which can be downloaded from this link.

After installation, go to the editor and open the files we need, I’ll take the Twenty Fourteen theme files, you can use yours.

In order to open all theme files, you need to select them all and drag them into the editor window.

The files were transferred, in general we could not do this, but in the future it will be faster to edit them.

Files in the editor? Great, now we call up the search window by pressing keys Shift + Ctrl + F, we will see the following:

In the example, I indicated the name of the class to indicate the mark of the author of the article in publications; this may be necessary for those that create duplicate pages.

In the “Folder” field, indicate the folder with the theme in which our files are located. After that, click on the “Find all” button.

If you enter the parameter correctly, at the bottom of the screen you will see a list of files in which this class and lines of code are used, for quick searching.

In my case, these are two files located at the address indicated in green. The class itself is highlighted in red, which can be found by scrolling horizontally.

After determining the file directory and the line in which the parameter is used, you can proceed to editing.

For clarity, we will also define a “malignant” tag bloginfo, when called, queries are created to the database.

You'll probably be surprised at the number of calls to this function, which can easily be made static without slowing down the engine.

And that at least 8 calls to the database from each page load for each user can be avoided if you correctly adjust the template code.

If you encounter any difficulties, write in the comments, we will try to help, or if you know a faster way to search for the necessary information in files, I will also be happy to take a look.

Ctrl+U

How can I view the source code of an element?

Right-click on the page element of interest.

Google Chrome: “View element code”

Opera: “Inspect element”

FireFox: “Analyze element”

In other browsers, look for a menu item with a similar meaning.

Hi all!

I especially laid out the whole point at the beginning of the article, for those who are looking for a quick answer.

The information may be known to many, but since I am writing for novice bloggers, web programmers and other prospectors, this reference article is a must-have.

In the future, you will definitely study the source code of pages and individual elements.

Let's look at a specific example of how you can use viewing the source code of a page.

For example, we want to see what keywords are used for a specific page. We go to the web page we are interested in and press Ctrl+U. The source code of this page will open in a separate window or in a separate tab. Press Ctrl+F to search for a code snippet. In this case, we type the word “ keywords". You will be automatically redirected to a piece of code with this meta tag and the searched word will be highlighted.

By analogy, you can search and study other code fragments.

Viewing the entire source code of a page is in most cases not very convenient, so in all browsers it is possible to view the code of an individual element or fragment.

Let's use a specific example of viewing an element's code. For example, let's see if the link has a nofollow attribute. Right-click on the link that interests us and in the drop-down context menu, left-click on the item “View element code” or similar (depending on your browser). Below, in a special window for code analysis, we get something similar.

We see that the link code contains rel=”nofollow” . This means that PR will not “leak” through this link. We will talk about this in more detail in the following articles. Now the important thing is that you now know how to view the source code of the page and the source code of an individual element.

Over time, novice web masters have a logical question: how to change the color and style of writing headings, add volume and make the font of the same headings larger. This confuses many beginners, as it is not clear what and where to look.

Of course, you can engage in a deep study of all these intricacies of website building, but while there are no prospects on the horizon as such, another logical question arises: do you need it?

It will take you a decent amount of time to master the basics of webmastering. And time is money. Therefore, if you need minor adjustments to some template elements and do not know how to find the necessary HTML code, regardless of the site platform, this article is just for you.

HTML and CSS - relationship

In fact, the topic should be called something like: “How to edit CSS code.” Well, okay, we'll start with HTML and finish with CSS. The thing is that if you need to change the color or font of the site, breadcrumbs lead to CSS files.

Let's first define these two concepts:

- HTML code is the basis on which the site is created. It is thanks to it that the browser understands which elements and in what order to display on a particular page.

- CSS Code is a programming language responsible for the appearance of web pages. It is this code that should be editable if you need to change the appearance of the site.

It becomes obvious that if you need to change, for example, the color of the title in an article or in menu items, then one of the CSS files needs to be edited. This is exactly what you need to understand at the initial stage of making changes yourself.

Where is the html code of the page?

I won’t hide the fact that at the beginning of my acquaintance with the principles of website building, I was not just a teapot, I was a real rusty samovar. Therefore, you, like me, will definitely succeed.

And so, returning to the topic of changing the page code, you must first look at the html code. I will tell you using the Opera browser as an example, since I work mainly in it. I hasten to inform you that if you prefer to use another browser, you should not immediately close this page, since the principle of verification regardless of the browser is almost identical.

How to change the header style

In one of the previous articles I talked about “How to remove a link from the Joomla header”, and today you will learn how to correct the whole thing and make it more attractive.
Let's say we need to change the color and size of the article title. To do this, left-click on it and select “View element code” in the window that opens. After which, on the left side of the screen, fantastic hieroglyphs will appear to our attention, with the help of which we will determine where the dog is buried. In this way you can look and correct practically each element of the template.

At the top of it, I have highlighted the HTML code responsible for displaying the h1 header. By default, when checking, it is highlighted with a gray background. Well, okay, this is for general information. We need to pay attention to the bottom of the screenshot, where the scripts responsible for outputting CSS styles are located. I want to immediately warn you that depending on the template, the name of the CSS file may differ, but, as a rule, it is style.css or template.css.

And so we have decided on the file, but how do we find out where it is? It’s simple, you need to hover your mouse over the word style.css on the right side, after which the path to the file will be displayed next to it. At the same time, the line that we need to correct will also be indicated here. As you can see in the picture, this is the first line.

Important point! Before making changes, make a backup copy of the site, so to speak, just in case

Some CSS Properties

Below I'll list some properties that you can use to make some changes and experiment with styles.

Font-size – change the text size.

Text-decoration – depending on the command, this includes striking out and underlining text, as well as highlighting with lines.

Font-family – font family.

Font-weight – selection.

Color – text color.

If nothing has changed after the adjustment, clear your browser cache. As you can see, to change the appearance of the headers and refresh the design of the site, you just need to tweak the CSS code, and not change the html code.

Thank you for your attention and see you soon on the pages of Stimylrosta.

Found a grammatical error in the text? Please report this to the administrator: select the text and press the hotkey combination Ctrl+Enter

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:

1. Html – the entire document.
2. Head – section of service headers.
3. Title – page title (displayed on the tab).
4. Body – the body of the document.
5. H1-H6 – page text headings.
6. Article – article.
7. Section - section.
8. Menu – menu.
9. Div – block.
10. Span – string.
11. P – paragraph.
12. 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.

Resume

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.