At first it will seem to some that this is not at all the right tool, 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.

Looking through countless sites on the Internet, you can come across ones that we really like. A number of questions immediately arise. Was the site made using homemade code or some kind of CMS? What CSS styles does it have? What are its meta tags? And so on.

There are many tools that can be used to extract information about the code of a website page. But we always have the right mouse button at hand. This is what we will use, using my site as an example.

How to view the page code?

To see source site pages, you need to hover your mouse over any area of ​​the web page (except for images and links). After this, click on the right mouse button. A window with several options will open in front of us (in different browsers they may differ slightly). IN Google browser Chrome, for example, these are the commands:

• back;
• forward;
• reboot;
• save as;
• seal;
• translate to Russian;
• view page code;
• view code.

We need to click on view page code, and the html code of the site page will open in front of us.

Viewing the page code: what to pay attention to?

So, the Html page code is a numbered list of lines, each of which carries information about how this site is made. To quickly learn to understand this huge number of signs and special characters, you need to distinguish between different sections of the code.

For example, lines of code inside the head tag contain information for search engines and webmasters. They are not displayed on the site. Here you can see how keywords This page is promoted based on how its title and description are written. Also here you can find a link, following which we will learn about the family of Google fonts used on the site.

If the site is made on CMS WordPress or Joomla, then this will also be visible here. For example, this area displays information about WordPress theme or Joomla template site. You can see it by reading the contents of the links highlighted in blue. One link shows a website template.

For example:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

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

This site is optimized using the Yoast SEO plugin. This can be seen from this commented section of code:

This site is optimized with the Yoast SEO plugin v3.4.2 - https://yoast.com/wordpress/plugins/seo/

All information contained inside the body tag is displayed by the browser on the monitor screen. Here we see the html code of the page, and at the very bottom there is the Yandex Metrics script code. It is surrounded by a commented tag with the text:

/Yandex.Metrika counter

Let's sum it up

Having carried out a rather superficial analysis of the code home page site, we can draw a conclusion about the tools with which this page was made. We saw on it:

• CMS WordPress;
• Google font Source Sans Pro;
• WordPress theme – Sydney;
• Yoast plugins;
• Yandex metrics counter.

Now the principle of analyzing the html code of a website page is quite clear. It is not at all necessary to keep the page you are researching open in the browser. You can save the page code to your computer using the key combinations ctrl+a, ctrl+c, ctrl+v. Paste it into any text editor(preferably Notepad++) and save with the html extension. This way, you can study it deeper at any time and find more useful information for yourself.

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 with css help. Many experts advise writing down as much information as possible in code. How do they work on popular sites?

So it appeared necessary information. 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 will all 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 by 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!

The size and color of some important elements of the blog - such as the title of the blog or post, the more tag, and the like. I searched for the required code manually, experimenting with test domain, on the basis of which the article was later written.

And recently I needed to change the color of links. Having sifted through a bunch of literature on this issue, I realized simple thing: everyone gives examples from their own templates, but we all have different templates and it’s good if the code from the example is at least a little similar: without whining, I’ll still find it by searching - at random.

The number did not work with the link code. Everyone pointed completely different paths. I wondered if there was a simple and accurate tool, how to find required code html on any site. Many bloggers, even with experience, have difficulty in minor modifications to the template. There is nothing wrong with this, because everyone has their own interests and goals for creating a website.

If you want to make small changes to the template, e.g. change any heading, title of articles and sections, color and size of fonts and links, Usually it is enough to learn the simple principle discussed in this article. But there are also complex cases that require either a deeper study of html and css, or the help of a specialist.

One day, an acquaintance asked me to find where to change the color of the category panel in his template. Uploaded a topic to a test subdomain. The settings for this element were not stored in style.css, but in another file, so a person could not find it.

How to find and change the html and css code of a site

If you don't like long articles, this is for you at the end of the article a video tutorial that tells how you can see the website's html code using Notepad++ and make changes to the design of any template using an example of how to change the font color. In the video there are other subtleties of handling a blog. And for those who are closer and more understandable to the text, below is a detailed analysis of the topic with screenshots.
httpv://youtu.be/uIlVvwCt2ho

Terms and concepts

It would be more accurate to title the article “ How to find css code“, but I decided to go with the “wrong” name, because basically the answer to this question is found in html. CSS and HTML are very different things, even though they are two parts of the same system. There are many technical articles on the Internet, here it will be enough for us to understand that:

• HTML— is responsible for the structure of the site (what follows what, in what order, etc.). This is the basis on which the site is created. If we compare it with a house, then this is its layout, the arrangement of rooms.
• CSS— is responsible for the design (what fonts, sizes, colors, etc.). This is the general style of the house and the style of its individual rooms: what kind of wallpaper there will be, lamps, curtains, furniture. Therefore, the document that states css codes, called "style sheet"

And if you are wondering how to change, for example, the color of the site title, the font size in the texts, or the color of the headers in the sidebar, then you need to look for all this in the CSS style sheet. This is the only thing worth understanding first in order to make changes to the code yourself.

I like to make the complex simple. I remember a long time ago, when I had my first car, it was very old, the wiring was rotten, fuses often blew, and every time I towed it to the service station. Imagine how much money was wasted, given that self-replacement, as it turned out, costs a penny.

One day I looked at what exactly the master does. I still don't know how the fuse works. But I know where to change it). I wouldn’t repair the motor myself, and it’s not difficult to replace the fuse. It's the same with websites.

If you don't want to become a programmer, then there is no need to have a deep understanding of programming. It is sufficiently clear to understand what is intended for what, where to look for it and how to change it. It’s better to change what you can yourself, and leave everything else to specialists. The article about has a useful link on this topic.

Do you need to be an expert in everything?

There are often discussions on SEO blogs about whether a beginner needs to have a deep understanding of HTML, or even better, learn how to write websites themselves so that everything is unique.. Well, I don’t know - to each his own, and here what’s closer to whom is closer. I’m interested a little more, so I’m now learning more from Vladimir. In November of this year, Vladimir opened his own blog. His blog was made on the simplest, free template, he only slightly modified it to suit himself.

After 10 days of existence, the blog took 104th place in the ranking of all Runet sites with a traffic of about 1.5 thousand people per day. In 10 days. So what's the deal? Vladimir is well versed in HTML and can order and buy himself a unique template. So you must understand that The secret lies not in the templates, but in the usefulness of the information.

Where is the html code hidden?

Sorry for the digression, let's return to our codes). Let's say you want to change the font color of your blog title. Let's look at the example of my test site.

1. Open the site in the Google Chrome browser (if you don’t use it yet, install it - it’s well designed for working with websites, it has a lot of built-in tools).
2. We move the mouse cursor over the element that we are going to change . In this case - the name of the blog. We right-click on it and in the window that appears, select VIEW ELEMENT CODE.

IMPORTANT: do not confuse this with VIEWING THE PAGE CODE! We don't need the whole page right now, just separate element.

Click on it - a code viewing window appears at the bottom of the browser:

The line of code that we are changing is highlighted in red.

But the area highlighted in blue contains what we are looking for. This is where you can find the exact (not approximate) line of code responsible for fonts, color, size, highlighting, etc. This way you can find out ANY code of any element of any template.

Find the desired line in the block highlighted in blue. There is a slider on the right, you can scroll through and find the line you need.

General principle of where to look for things:

Font name - in the FONT FAMILY line

Font size - in the FONT SIZE line

Font color - in the COLOR line

Here are three main lines in which the name, size and font color of any element change. Right in line style css The position of the line in the document is given. If you need to change some other element (for example, you need to find out where the line is where you can change the color of the menu bar or the color of the links), everything is done exactly the same.

ATTENTION:

The line that we will copy is highlighted in red in the figure,

so that you can later find it in the style sheet.

4. Copy the line. Since in this example we want to change the color of the site name, I copy the line highlighted in the red rectangle in the second picture. In my template, it is responsible for changing the color of the site title:

#header h1 a, #header h1 a:visited (

Find the required line in the file “style sheet (style.css)”. This is already done in the admin panel. I strongly ask that, while there is no confidence and complete understanding, all experiments should be carried out on a test subdomain in order to exclude .

So, go to the admin panel: CONSOLE - APPEARANCE - EDITOR. In the right sidebar we find the file STYLE TABLE (STYLE.CSS), open it.

Now open the search bar CTRL keys+ F: an empty line-window will appear in the top window. We paste into it the line that we copied in step 4.

And you will see how this line will be highlighted in the style sheet (in orange in the picture):

We make a change to the element. In our case, we are changing the font color, so in the COLOR line we substitute another value - the color we want. In the example, the color is black, its meaning is:

You can choose a color in any web color palette service: type “Web color palette” in a search engine and select the one you want. We select a color, copy its digital value and carefully replace it with the old one. after which we click UPDATE FILE and go to see what happened.

If the changes are not displayed, for the past hour and go to the page again - this time everything should be displayed.

It takes a long time to describe, but in practice everything is done quickly, especially when the initial skill appears.

In more detail, how to change certain elements:

That's all for today, I won't bother you with codes anymore. I hope that now you can easily find and change any element yourself html code, or rather, the CSS code - may the experts forgive me for simplifying it. And if you don’t figure it out, still visit the page. Don't waste your time on nonsense.

I suggest watching Artem Abramovich’s video on how to search and find any word or element in any theme/template, for any engine (wordpress, joomla, etc.) and replace it with what you need:

Please share if you liked it:

You might also be interested in knowing:

We have released a new book “Content Marketing in in social networks: How to get into your subscribers’ heads and make them fall in love with your brand.”

The source code of the site is a combination of HTML markup, CSS styles and JavaScript scripts, which 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, whether they include software part. 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 further on Google example Chrome.

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 chapter additional tools 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".

Will open in a new tab specified file, 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 big amount elements, it is difficult to find the required code in all the markup. In this case, you should use special team context menu. 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 tools developer, you can 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.