Call the source code of the page. How to view the page source code and element code


The probability of looking into the initial code web pages, received by the browser as a result of a request to the server, is available in virtually every Internet browser. Access to the corresponding command is organized approximately identically, but there are significant differences in the method and form in which the initial code .

Instructions

1. IN Mozilla browser FireFox, expand the “View” section in the menu and click “Initial” code pages" The same point is in context menu which occurs when you right-click text pages. You can also use the keyboard shortcut CTRL + U. Mozilla FireFox does not use external programs – initial code pages with syntax highlighting will be opened in separate window browser.

2. In the browser Internet Explorer Click the “File” section in the menu and select “Edit in Notepad.” Instead of the name Notepad, another program can be written that you have assigned in the browser settings to view the initial 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 initial code pages in external program– “View HTML code A".

3. IN Opera browser open the menu, go to the “Page” section and you will have a chance to select the “Start” item in the “Development Tools” subsection code"or the item "Initial code frame." This choice is destined for burning CTRL keys+ 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 opens source pages in an external program that is assigned in the OS or in the browser settings for editing HTML files.

4. Browser Google Chrome without any doubt has the best organization viewing initial code A. By right-clicking the page, you may choose to view code A pages"and then the source code with syntax highlighting will be opened in a separate tab. Or you might prefer the “View” line in the same menu code element” and the browser in the same tab will open two additional frames in which you can inspect HTML and CSS code every 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.

5. In the Apple Safari browser, expand the View section and select View HTML code A". In the menu that appears when you right-click open pages, the corresponding item is called “View source”. This action is assigned the hotkeys CTRL + ALT + U. Initial code opens in a separate browser window.

So, today we will look at several useful tools for Web masters that make life easier when designing a website. Let's start with the console for web masters in Google Chrome. And let’s go through the questions that most often arise for a webmaster during website layout.

To get to the console, open your website in Google Chrome, right-click anywhere on the web page, and select “View page code” in the contextual drop-down menu, or on a specific element to study by selecting “View code” element".

At the top you will have several tabs listed. Today we will talk about the “Elements” tab , which presents the elements of a web page with highlighting of tags, properties, highlighting the nesting of elements, a representation of the element’s hierarchy in the DOM tree (a hint at the bottom, from the root parent to the current one), the ability to edit elements, a list of their properties, consider searching by elements, as well as Let's get acquainted with viewing css styles, etc., associated with elements.

How can I view all the styles that are associated with a specific element? Which one is used now? In what files are they located?

So, nothing could be easier! Open the Google Chrome browser, open our website - the source of the questions, right-click on the desired element if it is visible in the context of the page, and select “View element code” in 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 the general "summary" styles that have been assigned to an element from css rules and the user's browser settings (his environment), and the tab is minimized.

But we are interested in the “Styles” tab, expanded under it, which lists in turn all the styles assigned to the element, as well as files where these rules are specified for this element by its type, id, class, name, property, attribute, etc. . Moreover, if a css rule is crossed out, it means it was redefined earlier/further (which makes it easy to track which of the css rules has priority and is applied in in this case to the element).

Below the console there is a line that shows the element in the document hierarchy, easily allowing 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 the context of the page? Or do you need to find all tags, for example, by a specific class, name, property, type?

Open the site in Google Chrome, right-click, call up 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 move through the list of found results, simultaneously viewing all the styles associated with the desired elements on the right side of the page.

How to view the html code of an element(s) loaded dynamically (for example: via Ajax)

We are waiting for the page to load in Google Chrome. We perform the necessary actions for Ajax to work. Right-click on the loaded data, select “View element code” in the context menu, and examine the result in the console on the “Elements” tab on the left.

View css style changes 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 through a gallery and other timer events. All styles assigned via javascript in real time will be displayed in the property style selected element in the window on the “Elements” tab.

Interactively view the impact 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 an element, but also move the mouse cursor to a specific one. css 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.

We change the structure of presentation of html elements on the fly (directly 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 desired element in the “Elements” tab, right-click on it, thereby calling up 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: write name="itemImage", which will be immediately added to our element.
  • Edit attribute– if you right-click on an element attribute, the item becomes available editattribute. Click and edit.

Usage example: We forgot the password saved under asterisks in Google Chrome (if the password was saved in this browser). Right-click on the element with the password entered, click on “View Element Code» , in the console on the left tab Elements right-click on the type="password" attribute, left-click on Editattribute change the attribute type=”password" on type=”text", and now, instead of asterisks, the same password is displayed in text form.

  • Edithtml– right-click on the element in the console Elements, select Edithtml, change the code to your liking.
  • CopyasHTML– we copy the portion of HTML 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 currently selected element and all its children from the context web pages, and see the result.
  • Wordwrap– will render a web page view in the console context Elements more readable.

In the following articles we will continue to consider tools for webmasters, and in particular we will get acquainted with the remaining tabs of tools for webmasters in Google Chrome, and also consider debugging errors javascript means different browsers

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

Skill change source pages – useful skill for the advanced Internet user. By substituting HTML code, you can change open web page as you please. 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 language code HTML markup. 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 the page can be connected CSS styles, which set appearance 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 change 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 picture by changing src attribute in the img tag.

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 view the source code of a site page, you need to hover your mouse over any area of ​​the web page (except for images and links). After that click on right button mice. 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 a huge number 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 it 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 analysis html code The site 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(Notepad++ is better) and save with html extension. Thus, at any time you can study it deeper and find more useful information for yourself.


2024 gtavrl.ru.