How to enter the html code of a page. How to open the console in Yandex Browser

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.

For a long time, the “show page source” option was useless and uninteresting for me. So far, learning HTML on Codecademy and designing my own websites has not grown into my new hobby. This is where the question arose: where to find real cases and borrow interesting solutions for your “piggy bank”? The answer was unexpectedly simple, like all ingenious things: look at the source code of the page in Google Chrome! I share with you my modest finds.

What is the page source code

If you, like me, are just taking your first steps in HTML programming, it would be a good idea to find out what the source code of a page is.

Source code, also known as HTML page code, is text in Hyper Text Markup Language (HTML). It includes the actual page content (text, tables) and tags. The latter act as instructions for the browser: how to display content, what type of formatting to use, where to insert a hyperlink or media file. Well, for us, novice programmers, the source code is the best training ground: we find an interesting site and spy on it, save it, and use successful fragments. How?

How to view the source code in the Google Chrome browser page

Find the page you like. For example, I was interested in the design of the site menu. There are three ways to open the source code in the Google Chrome browser:

Click on the icon menu in the upper right corner of the browser and select “More tools”. Among others, there is an option “View source code”. Frankly, I rarely use this method: there are a lot of unnecessary movements. It can be made even simpler.
Press the key combination Ctrl+U– a new window with the source code opens;
For fans of the context menu: right-click on the page and select the “View page code” option.

We coped with the task of viewing the HTML code of the page in the browser. Let's move on to the most interesting stage.

How to edit and save source code

To learn how to create websites, it is not enough to read someone else's HTML code. You need to play with it, experiment, make changes and check the result. You can even start by compiling a few successful samples. How to edit and save source code?

Option 1. “Manually”

After we have opened the source code of the page, call the context menu and select the “Save As” option and save the file to your hard drive. We edit the file in Notepad or Notepad, save the changes and open it through the browser. The results of our changes (successful and not so successful) will be reflected in the browser window.

Option 2. For the pros

When you "play" with source code every day, the process of "save - open - change - save - check" becomes tiring. For myself, I found a solution in the form of installing a plugin for Google Chrome - Firebug Lite. It allows you to edit and save source code without leaving the browser window.

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 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 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!

The SendPulse service is a marketing tool for creating a subscription base and converting casual visitors to your website into regular ones. SendPulse combines on one platform the most important functions for attracting and retaining customers:
● e-mail newsletters,
● web push,
● SMS mailings,
● SMTP,
● newsletters in Viber,
● sending messages to facebook messenger.

Email newsletters

You can use various tariffs for conducting e-mail mailings, including free ones. The free plan has restrictions: the subscription base is no more than 2500.
The first thing you need to start with when working with the e-mail newsletter service is to create your own address book. Set a title and upload a list of email addresses.

It’s convenient to create on SendPulse subscription forms in the form of a pop-up window, built-in forms, floating and fixed in a certain part of the screen. Using subscription forms, you will collect a subscriber base from scratch or add new addresses to your base.
In the form designer, you can create exactly the subscription form that best meets your needs, and the service tips will help you cope with this task. It is also possible to use one of the available ready-made forms.

When creating subscription forms, be sure to use an email with a corporate domain. Read how.
Message templates will help you beautifully design your letters to subscribers. You can create your own letter template in a special designer.

Automatic mailings. Content managers actively use automatic mailing. This helps automate the process of working with clients. You can create an automail newsletter in several ways:
● Sequential series of letters. This is the simplest option when, regardless of the conditions, several letters are written that will be sent to recipients in a certain order. There may be options here - series of messages(simple message chain), special date(letters are timed to specific dates), trigger letter– the letter is sent depending on the subscriber’s actions (opening a message, etc.).
● Automation360– mailing with certain filters and conditions, as well as taking into account conversions.
● Ready-made chains according to the template. You can create a series of letters using a given template or modify the template and adjust it to your needs.
A/B testing will help you experiment with different options for sending a series of letters and determine the best option based on opens or clicks.

Sending Push Notifications

Push mailings are a subscription in a browser window, this is a kind of replacement for RSS subscriptions. Web-push technologies have rapidly entered our lives, and it is already difficult to find a website that does not use push mailings to attract and retain customers. Request script for , you can send letters either manually or create auto-mailings by creating a series of letters or collecting data from RSS. The second option implies that after a new article appears on your website, a notification about this will be automatically sent to your subscribers with a brief announcement.

New from SendPulse– now you can monetize your site using Push notifications by embedding advertisements in them. Upon reaching $10, payments are made every Monday to one of the payment systems - Visa/mastercard, PayPal or Webmoney.
Push messages on the service are absolutely free. Payment is taken only for White Label - mailings without mentioning the SendPulse service, but if the service logo does not bother you, then you can use push notifications for free without restrictions.

SMTP

The SMTP function protects your mailings from being blacklisted by using whitelisted IP addresses. Cryptographic signature technologies DKIM and SPF, which are used in SendPulse mailings, increase the trust in the letters sent, making your letters less likely to end up in spam or blacklist.

Facebook Messenger Bots

Facebook chatbot is in beta testing. You can connect it to your page and send messages to subscribers.

Sending SMS

Through the SendPulse service it is easy to send mailings using a database of phone numbers. First, you need to create an address book with a list of phone numbers. To do this, select the “Address Book” section, create a new address book, and upload phone numbers. Now you can create an SMS newsletter using this database. The price of SMS messaging varies depending on the recipient's telecom operators and averages from 1.26 rubles to 2.55 rubles per 1 SMS sent.

affiliate program

SendPulse implements an affiliate program, within which a registered user using your link who has paid for the tariff will bring you 4,000 rubles. The invited user receives a discount of 4,000 rubles for the first 5 months of using the service.

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 this, 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;
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 symbols, 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 what keywords this page is promoted for, 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 a WordPress theme or Joomla site template. 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 of the main page of the site, we can draw a conclusion about what tools this page was made with. 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 it with the html extension. This way, you can study it deeper at any time and find more useful information for yourself.