Browsing countless sites on the Internet, you can find some that we really like. A number of questions immediately arise. Is the site made using self-written code or some CMS? What are its CSS styles? What are its meta tags? Etc.
There are many tools that can be used to extract information about the code of a site page. But we always have the right mouse button at hand. We will use it on the example of my site.
How do I view the page code?
To view the source code of a site page, you need to hover your mouse cursor over any area of the web page (excluding images and links). After that, click on the right mouse button. A window with several options will open in front of us (they may differ slightly in different browsers). In the Google Chrome browser, for example, these are the commands:
- back;
- forward;
- reboot;
- save as;
- seal;
- translate to Russian;
- page code view;
- view the code.
We need to click on page code view, and the html code of the site page will open in front of us.
View the page code: what to look for?
So, the Html code of a page 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 characters and special characters, you need to distinguish between different parts of the code.
For example, the 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 by what keywords this page is being promoted, how its title and description are written. Also here you can find a link, by clicking on which we learn about the google font family used on the site.
If the site is made on CMS WordPress or Joomla, then it will also be seen here. For example, this area displays information about a WordPress theme or Joomla site template. You can see it by reading the contents of the links highlighted in blue. One link shows the site template.
For example:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
We will see the CSS styles for the page fonts. In this case, the font is used. You can see it here - font-family: 'Source Sans Pro'.
This site is optimized using the Yoast SEO seo plugin. This can be seen from this commented-out piece 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 by the browser on the monitor screen. Here we see the html code of the page, and at the very bottom is the code of the Yandex Metrics script. It is wrapped in a commented-out tag with the text:
/Yandex.Metrika counter
Summing up
Having carried out a rather superficial analysis of the code of the main page of the site, we can conclude with the help of which tools 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 explored page open in the browser. You can save the page code to your computer using the ctrl + a, ctrl + c, ctrl + v key combinations. Paste it into any text editor (preferably Notepad ++) and save it with the html extension. Thus, at any time you can study it deeper and find more useful information for yourself.
So, today we are going to look at several useful tools for a Web master that make life easier for website layout. Let's start with the webmaster console in Google Chrome. And let's go over the questions that most often arise from the web-master during the layout of the site.
In order to get to the console, open your site in Google Chrome, right-click anywhere on the web page, and select "View page code" in the context drop-down menu, or on a specific item for research by selecting "View code element ".
At the top, you will have several tabs listed. Today we'll talk about the "Elements" tab , which presents the elements of a web page with highlighting tags, properties, highlighting the nesting of elements, representing the hierarchy of an element in the DOM tree (hint at the bottom, from the root parent to the current explored one), the ability to edit elements, a list of their properties, consider the search by elements, as well as let's get acquainted with viewing the css styles associated with elements, etc.
How can I see all the styles that are associated with a specific element? Which one is being applied now? In which files are they located?
So, nothing could be easier! Open the Google Chrome browser, open our site - the source of questions, right-click on the desired element, if it is visible in the context of the page, and select "View element code" from the context menu.
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: Computed Styles- these are general "summary" styles that were assigned to an element from the css rules and the user's browser settings (his environment), and the tab is collapsed.
But we are interested in the "Styles" tab, expanded under it, in which all the styles assigned to an element are listed in turn, as well as files where these rules are indicated 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 / later (which makes it easy to track which of the css rules has priority and is applied in this case to the element).
Below the console is a line that shows an element in the document hierarchy, easily allows you to view the entire list of parent elements from the root to the selected element. Something like bread crumbs.
Html tag not visible in page context? Or do you need to find all tags, for example, by a certain class, name, property, type?
Open the site in Google Chrome, right-click, open the context menu, select « View page code » ... Press the key combination "CTRL + F" at the same time, enter the phrase we need ( for example: class = "padding ") and navigate through the list of results found, along the way looking through all the styles associated with the desired elements on the right side of the page.
How to view the html code of the element (s) loaded dynamically (for example: by Ajax)
We are waiting for the page to load in Google Chrome. We perform the necessary actions for the Ajax to work. Right-click on the loaded data, select "View element code" from the context menu, examine the result in the console on the "Elements" tab on the left.
View changes in css styles in real time
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 the gallery and other events by timer. All javascript-assigned styles in real time will be displayed in the property style the selected element in the window on the "Elements" tab.
Live preview of the effect of css rules on the presentation of html tags
Google Chrome provides an interactive console for css styles. This means that you can not only view which styles are applied to the element, but also move the mouse cursor over the css specified from the properties, enable it using the pop-up checkbox on the right, or disable it by unchecking the flag and viewing the resulting result on the page.
Changing the presentation structure of html elements on the fly (right in the browser)
So, we have already learned how to explore the structure of a web document in Google Chrome, now we will briefly look at editing elements on the fly. We go to the console in any way convenient for us. We find the required element in the “Elements” tab, right-click on it, thereby calling the pop-up context menu:
- Add attribute- adds an attribute for the specified element. As soon as the cursor becomes active, we begin to set the desired property. For example: let's write name = "itemImage", which will be immediately added to our item.
- Edit attribute- if you right-click on an element attribute, the item becomes available editattribute... Click, edit.
Usage example: we forgot the password saved under the asterisks in Google Chrome (if the password was saved in this browser). Right-click on the item with a password, click on "View Item Code" , in the console on the left in the tab Elements click on the attribute type = "password" with the right mouse button, left click on Editattribute, changing the attribute type = "password " on type = "text ", and now, instead of asterisks, the same password is displayed in the form of text.
- Edithtml- right-click on an item in the console Elements, choose Edithtml, change the code to your liking.
- CopyasHtml- copy the HTML portion we need for further research, say, in a notepad, or for other purposes where we need to apply exactly the same layout. We save time.
- CopyXPATH- copies the XPATH representation of the structure from the root of the parent element to the selected element.
- Deletenode- if you need to remove the current selected element and all its children from the context of the web page, and see the result.
- Wordwrap- will render the web page view in the context of the console Elements more readable.
In the next articles, we will continue our consideration of the tools for the webmaster, and in particular, we will get acquainted with the rest of the tabs of the tools for the webmaster in Google chrome, and also consider debugging javascript errors using different browsers
The size and color of some of the important elements of a blog, such as the title of the blog or post, the more tag, and the like. I searched for the necessary code manually, experimenting with the test domain, on the basis of which the article was later written.
And recently I needed to change the color of the links. Having shoveled a bunch of literature on this issue, I realized a 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 even a little bit similar: I’m not whining, I’ll still find it by rolling - by the method poke.
The number did not pass with the reference code. All pointed completely different paths. I wondered if there was a simple and precise instrument, how to find the required html code on any site. Many bloggers, even with experience, find it difficult to slightly tweak the template. There is nothing wrong with that, because everyone has their own interests and goals for creating a website.
If you want to make small changes to the template, for example change any title, title of articles and headings, color and size of fonts and links, it is usually sufficient 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 a friend asked me to find out where to change the color of the heading bar in his template. Uploaded the topic to the test subdomain. The settings for this element were not stored in style.css, but in another file, so the person could not find it.
How to find and change the html and css code of the site
If you do not like long articles, for you at the end of the article a video tutorial that tells how you can see the html code of a site using Notepad ++ and make changes to the design of any template using an example of how to change the font color. There are other subtleties of handling a blog in the video. And for those who are closer and clearer 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 call the article “ How to find css code“, But I decided to stick with the“ wrong ”name, because basically the answer to this question is searched for in html. CSS and HTML are very different things, although they are two parts of the same system. There are many technical articles on the Internet, it will be enough for us here to understand that:
- Html- is responsible for the structure of the site (what follows what, in what order, etc.). This is the foundation on which the site is built. 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, and the like). This is the general style of the house and the style of its individual rooms: what kind of wallpaper will be, lamps, curtains, furniture. Therefore, the document in which the css codes, called a "style sheet"
And if you wondered how to change, for example, the color of the site's title, the size of the font in the texts or the color of the titles in the sidebar, then you need to look for all this in the CSS stylesheet. This is the only thing that is worth understanding to begin with in order to make changes to the code yourself.
I like to turn the complex into the simple. I remember a long time ago, when I had my first car, it was very old, the wiring was rotten, fuses often burned out, and I pulled it in tow every time to the service station. Imagine how much money was thrown away, despite the fact that an independent replacement, as it turned out, costs a penny.
Once I looked at what the master was doing. I still don't know how the fuse works. But I know where to change it). I wouldn't fix the motor myself, and it's not difficult to replace the fuse. It's the same with websites.
If you do not want to become a programmer, then there is no need for deep understanding of programming. It is enough to clearly understand what is intended for what, where to look for it and how to change it. It is better to change what is possible, and leave the rest to specialists. The article on has a helpful link to this topic.
Do I need to be an expert in everything
In seo blogs, there are often discussions about whether a newbie needs to understand deeply in html, or even better - learn how to write websites yourself, so that everything is unique .. Well, I don’t know - to each his own, and then who is closer to someone. I am interested a little more, so now I am additionally learning from Vladimir. In November of this year, Vladimir opened his own blog. His blog is made on the simplest, free template, he only slightly modified it for himself.
After 10 days of existence, the blog took 104th place in the ranking of all sites on the Runet 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, can order and buy a unique template. So you should understand that the secret lies not in the templates, but in the usefulness of the information.
Where is the html code hiding
Sorry for the digression, back to our codes). Let's say you want to change the font color of a blog title. Let's consider it on the example of my test site.
- Opening the site in the Google Chrome browser (if you don't already use it, install it - it is well-sharpened for working with websites, it has a lot of built-in tools).
- Hover the mouse cursor over the element that we are going to change ... In this case, the name of the blog. Click on it with the "right" mouse and in the window that appears, select VIEW ELEMENT CODE.
IMPORTANT: do not confuse with VIEWING PAGE CODE! We don't need the entire page now, just a single element.
Click on it - a code view 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 (and not an approximate) line of code responsible for fonts, color, size, emphasis, and more. This way you can find out ANY code of any element of any template.
Find the required line in the block highlighted in blue. There is a slider on the right, you can scroll and find the desired line.
General principle, where is what is looked for:
Font name - in line FONT FAMILY
Font size - in line FONT SIZE
Font color - in line COLOR
There are three main lines that change the name, size and font color of any element. On the right, in the style css line, 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 located, in which you can change the color of the menu bar or the color of links), everything is done in exactly the same way.
ATTENTION:
the line that we will copy is highlighted in red in the figure,
to later find it in the stylesheet.
4. Copy the line... Since in this example we want to change the color of the site name, I copy the line in the second picture highlighted with a red rectangle. In my template, she is responsible for changing the color of the site name:
#header h1 a, #header h1 a: visited (
Find the required line in the "style sheet (style.css)" file. This is done already in the admin panel. I strongly ask, while there is no confidence and complete understanding, to conduct all experiments on a test subdomain in order to exclude.
So, go to the admin panel: CONSOLE - APPEARANCE - EDITOR. In the right sidebar we find the STYLE TABLE file (STYLE.CSS), open it.
Now open the search bar with the CTRL + F keys: an empty window line will appear in the upper window. We paste into it the line that we copied in step 4.
And you will see how this line is highlighted in the style sheet (in the picture - in orange):
We make a change to the element. In our case, we change the font color, so we substitute another value in the COLOR line - the color we want. In the example, the color is black, its value:
You can choose a color in any service of palettes of web colors: type in the search engine "Palette of web colors" and pick the one you want. Choose a color, copy its digital value and carefully substitute it for the old one. then click UPDATE FILE and go to see what happened.
If the changes were not displayed, in the past hour and then go to the page again - this time everything should be displayed.
It is described for a long time, 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 will no longer torment you with codes. I hope that now you yourself can easily find and change any element of the html code, or rather, the css code - experts will forgive me for the simplification. And if you don't understand, visit the page all the same. Don't waste time on nonsense.
I suggest watching Artem Abramovich's video on how to search and find in any theme / template, for any engine (wordpress, joomla, etc.) any word or element and replace it with what you need:
Please share if you liked:
You may be interested in learning more:
We have released a new book, “Content Marketing on Social Media: How to Get Into the Heads of Subscribers and Fall in Love with Your Brand”.
A site's source code is a collection of HTML markup, CSS styles, and JavaScript that a browser receives from a 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 the commander. Imagine that the audience cannot see or hear the boss. From their point of view, the military independently performs actions. In our case, the commander is the browser, the commands are the source code, and the marching soldiers are the end result.
The site is stored on a web server that sends the page at the request of the user. A request is typing a URL in an 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 code. The end result of any server-side algorithm is a set of html tags and text.
The source code of a page is a dataset that includes:
- html markup;
- style sheet or file link;
- programs written in JavaScript or links to files with code.
These three sections are handled by the browser. For the server, this is simply text that needs to be sent in response to a request.
Why we might need to study the source code
Everything that we see, we can analyze and apply to solve certain problems that arise in the course of working with the site, especially when optimizing it. By looking at the source code, we can:
- See the meta tags of your own 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 more.
- Find out the parameters of the elements: sizes, colors, fonts.
- Find the path to photos and other items on the page.
- Explore links from the page.
- Find problems with the code that interfere with the process of website optimization: styles, scripts, invalid code not included in separate files.
These are basic features, but in fact, by knowing how to read the code, you can learn a lot more about the page.
How to view the source code of the site
Completely in the form in which it is posted on the server, this cannot be done from the browser. But you can see all the markup by right-clicking on the page. Hereinafter, using the example of Google Chrome.
We select the option "View page code" and get the full listing in a separate tab.
It's just text that will have to be parsed to understand. But you can get interactive code using the developer tools.
How to find the source code of a site 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 be displayed next to it, and the selected blocks will be highlighted on the page.
In the "Source" tab, you can view the content of some files: scripts, fonts, images.
Checking the site certificate is available in the "Security" tab.
The "Audits" tab will help to check the resource posted on the hosting.
If the location of the panel to the right is inconvenient, you can click three dots and change it by selecting the desired item.
How to view meta tags
Every html document includes structure tags. Here is some of them:
- Html - whole document.
- Head - section of service headers.
- Title - page title (displayed on the tab).
- Body - the body of the document.
- H1-H6 - headers of the page text.
- Article - article.
- Section - section.
- Menu - menu.
- Div - block.
- Span is a string.
- P - paragraph.
- Table - a table.
Elements are intended for logical delimitation of sections on the page; if necessary, they are styled. 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.
It is impossible to find out their contents in any other way.
Let's pay attention to the Link tag. With its help, links to external include files are specified. If desired, you can see the contents and save to disk. To do this, hover the pointer over the address and press RMB. Select "Open in new Tab".
The specified file will open in a new tab and can be viewed or saved.
How to view the source code of a page for debugging a script
In this case, it is most convenient to open the page on the local machine. If you only need to fix the markup, styles and scripts, then you can do it right from the folder. The html code is viewed in the same way. However, JavaScript code errors can be seen in the "Console" tab. It shows a description of the error and the line number on which it occurred.
The syntax can be seen directly in the code. The "Source" tab is intended for this.
How to view the code of a specific item
For large pages with a lot of elements, it is difficult to find the code you want in all the markup. In this case, you should use a special command of the context menu. Hover the mouse over the fragment and press RMB. Let's select the "View Code" command.
The same window will open, but with 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 can debug your own html-documents.
Browsing the resource code on the Internet will allow you to learn not only from your own experience, but also use real working examples. And for seo-specialists, meta tags will be useful, the information in which can say a lot about the site.
Ctrl + U
How can I view the source code of an item?
Right-click on the element of interest on the page.
Google Chrome: "View item code"
Opera: "Inspect Element"
FireFox: "Analyze Element"
Look for a similar menu item in other browsers.
Hello everyone!
Especially at the beginning of the article I laid out the whole point, 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 help article must be present.
In the future, you will definitely study the source code of pages and individual elements.
Let's look at a concrete example of how you can use page source view.
For example, we want to see what keywords are used for a particular 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 find a piece of code. In this case, we type in the search box the word “ keywords ”. You will be automatically redirected to a code snippet with this meta tag and will highlight the desired word.
By analogy, you can search and study other pieces of code.
Viewing the entire source code of a page is not very convenient in most cases, so in all browsers it is possible to view the code of an individual element or fragment.
Let's use a specific example to view the code of an element. For example, let's see if a link has a nofollow attribute. Right-click on the link of interest to us and in the drop-down context menu, left-click on the item "View item code" or similar (depending on your browser). Below, in a special window for code analysis, we get something similar.
We can see that rel = "nofollow" is present in the link code. This means that this link will not "leak" and PR. We will talk about this in more detail in the following articles. What is important now is that you now know how to view the source code of the page and the source code of an individual element.
