How to set up smartphones and PCs. Informational portal
  • home
  • In contact with
  • How to quickly open the page code in the browser, even if copying is prohibited. How to view page source code and element code

How to quickly open the page code in the browser, even if copying is prohibited. How to view page source code and element code

Mozilla FireFox, expand the View menu and click Source the code pages". The same item is in context menu that appears when you click right click mouse text pages. You can also use the keyboard shortcut CTRL + U. Mozilla FireFox does not use external programs - original the code pages with syntax highlighting will open in separate window browser.

In browser Internet Explorer click on the menu section "File" and select "Edit in Notepad". Instead of the name Notepad, another program can be written that you have assigned in your browser settings to view the original the code but. On Click pages Right-clicking a context menu will pop up, which also has an item that allows you to open the source the code pages in external program- "View HTML- the code but".

IN Opera browser open the menu, go to the "Page" section and you will have the opportunity to select the "Source" item in the "Development Tools" subsection. the code” or item “Initial the code frame". This selection is assigned hot CTRL keys+ U and CTRL + SHIFT + U respectively. In context menu attached to click pages right-click, there is also the item "Source the code". Opera open source pages in an external program that is assigned in the OS or in the browser settings for editing HTML files.



Browser Google Chrome no doubt has the best organization viewing the original the code but. By right-clicking a page, you can select View the code but pages" and then the source with syntax highlighting will be opened on separate tab. Or you can select in the same menu the line "View the code a element" and the browser in the same tab will open two additional frames in which you can inspect HTML and CSS the code any element pages. The browser will respond to moving the cursor across lines the code and, highlighting the elements on the page that correspond to this section of HTML- the code but.

Greetings, friends! Before studying the question of how to open the page code, a small introduction.

The topic of this post, I am sure, will be more interesting than others for people who earn money on texts. There are times when information (a list, a generally accepted complex name or term) is too lazy to type manually. And what's the point if you can just copy? But it is not always possible to simplify the process, since many web resource owners have put serious protection against plagiarists on their sites, which excludes the possibility of copying material.

And although the majority of users are only for such measures (there are a lot of content thieves now!), It can be somewhat insulting that you, an honest person and talented, but a little tired of manual dialing the author is considered to be some kind of plagiarism.

But there is a way out of any situation: in this case, you can quietly copy (for yourself, and not for the purpose of further publication) a text element or all text if you know a specific html code.

Today we'll talk about how to open source pages, and with it access to certain information.

Get a collection of sites with promotional codes for goods here: gift page

When I share some information with a wide audience of readers, I cannot know for what purposes they will use it, but I am aware that there are different people among blog visitors. Therefore, I must warn that plagiarism is a violation of copyright law, and the rights to the content are confirmed when indexing pages (although this scares and stops few people, but I warned).

And now about those who need access to codes for honest professional activities.

  1. Programmers open source codes to improve the new resources they create - these professionals are mainly interested in pages with original design and design methods.
  2. It will be useful for a blogger to check invisible counters and scripts in the code.

An ordinary user opens the code only for the sake of curiosity.

An easy way to open source code for all browsers

It doesn’t take much time or effort to open the code of any page: just click on the right mouse button and in the pop-up window find the “View Code” option, like the options in browsers: “Check Code”, “View Element Code.

After clicking on the right on the monitor, a new window will pop up with comprehensive information about the page.

When you press the mouse button, the system itself will offer you options: either use the mouse, or press hot buttons, which are different in each browser. I most often use where the keys are CTRL + SHIFT + I. Other browsers suggest using C or U instead of I - there are many options and each of them is quite working.

How to open the code "in browser"

I propose to consider how to open the code of the required page in each browser.

Google Chrome

In my personal opinion, Chrome the best and most convenient for viewing HTML and CSS codes. Right-clicking will open any tab, and selecting "View Element Code" will give you two additional frames that allow you to inspect any of the page's elements.

Mozilla Firefox

The algorithm for opening code in the Mozilla browser is very simple:

  1. IN top menu select View.
  2. In the drop-down box - "Page source code".

The keys for this browser, the so-called hot keys, are Ctrl + U.

Opera

  1. In the Opera browser, open the required page - Ctrl + U.
  2. Or right-click anywhere on the page and select "Page Source Code".

Keys for speed dial identical to Mozilla.

Apple Safari

  1. Open the "View" section, select the "View HTML code" command.
  2. Right-clicking will make a menu appear, in it you need to find the item "View source"

The code will open in a separate window. The action can also be performed using CTRL + ALT + U.

Seeing doesn't mean reading

When opening the codes, browsers will give out thousands of characters of information, which is quite difficult to understand without having special knowledge. The code is written in the HTVL programming language, so not everyone can understand it.

Reading the code without deep or at least superficial knowledge of html markup is almost impossible. What would I advise in this case? Always keep a textbook on the basics of HTVL at hand - so you can understand with a “cheat sheet” what information is contained in the page code, and at the same time train yourself in technological knowledge.

Source code can be of great value when learning to program. You can do IT self-education by copying the code of any page and dividing it into parts (place each part through an empty line). This will allow you to quickly analyze it in parts and understand and assimilate the HTVL markup much faster.

I advise it so confidently, because I myself studied this way. And I must say - not without success, which is what I wish you.

Sincerely, Maxim.

To open the source code of a page in popular browsers, you will need to take 2 steps. Right-click on the page and click on the text.

It is necessary to quickly see all the changes on the site itself, without affecting the files and code of the site posted on the Internet. For example, change the color scheme of a block, move a moved element, etc.

To do this, many webmasters use local servers Denwer or OpenServer by running full copy site on your computer. This method is universal and suitable for professionals, with it you can check the operation of various scripts and plugins, experiment with changing the design and edit all site files, and after the test, transfer the appropriate changes directly to the site.

For users who are far from webmaster art, I recommend using a browser for these purposes. Since I use Chrome, I will give instructions with screenshots for this particular browser. By analogy, you can work with Opera, Yandex.Browser, Mozilla Firefox and other browsers, the principle of their tools is similar.

Instruction 1: how to view the entire HTML code of the site in the browser

Open the required web page of your site. We right-click on the required element, a browser context drop-down menu with available commands will appear:

Figure 1. Viewing the entire HTML code of a web page in the Chrome browser

Important: The commands in the drop-down menu may differ, for example, for active elements(links, pictures, videos) and inactive (text, background, divs):


Figure 2. Chrome browser dropdown menu

Therefore, if you do not find the required command, just right-click somewhere else or use the browser hotkeys.

Returning to Figure 1, it shows the necessary command to view the entire HTML code of the original web page, it is called " View page code". Click on command to open new tab from complete code the original web page, a big plus to everything - viewing is available with syntax highlighting:


Figure 3. Code snippet for this site

This tool is very useful for finding and editing the elements you are looking for.

Alternative Ways to View All HTML of a Web Page

For more quick access, you can use other ways to call this tool

  1. In Figure 1, we also see that given command accessible by keyboard shortcut + ;
  2. Paste in address bar browser view-source: site instead of my domain, insert your address;

Both methods are universal and should work in all browsers.

At first it may seem to some that this is not at all right tool, but viewing the entire HTML code of a site is great for searching in the code necessary elements, it can be links, tags, meta tags, attributes, and other elements.

Hot key combination +open the search box, in the Chrome browser it appears at the top right:


Figure 3. Search by site code

After you make a request to search form the screen will move to the first found element, using the arrows you can move between them and select the one you need:


Figure 4. Search by HTML code site

Instruction 2: How to View and Edit Website HTML and CSS Code in Google Chrome Browser

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



like this useful tool always available in your browser, experiment with other commands that will make it easier for you to edit the site.

Ctrl+U

How to view the source code of an element?

Click the right mouse button on the page element of interest.

Google Chrome : “View element code”

Opera : "Inspect element"

Firefox: “Analyze element”

In other browsers, look for a similar menu item.

Hello!

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 specific example how you can use page source view.

For example, we want to see what keywords(keywords) are used for 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 piece of code. IN this case type in the search box the word " keywords". You will be automatically redirected to a code snippet with this meta tag and the search word will be highlighted.

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

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 individual element or fragment.

Let's use a concrete example to view the element's code. For example, let's see if the link has nofollow attribute. We right-click on the link of interest to 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 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 future articles. For 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.

Greetings. In this article I will talk about blog design and what is color psychology when we talk about the visual design of the site and advertising.
To begin with, we will analyze the meaning of colors in psychology, as well as see how companies and webmasters use different colors for the design of their websites and logos.

Almost any color for a person is associated with something ancient and physical, even in our modern age. Therefore, red is primarily the color of blood, fire and danger. It is not just that the red light when crossing the road in any country in the world means danger. IN computer games Enemies are marked in red.

The psychology of colors about red is such that it is not only the color of danger, it is also the color of life. People love to look at fire and the presence of blood means life, although it speaks of the proximity of death. Also, red means war, revolution and sex.

In ancient times and throughout history, warriors wore red armor and vestments (for example, the wars of Sparta), the soldiers of the British army had red uniforms.

Red color is also power and greatness.

In terms of website design, red is almost the most striking and noticeable color (only poisonous green and yellow stand out better), while red is not always vulgar. They can really allocate important elements interface or emphasize something (the presence of spoilers in the text, for example).

Red is often highlighted big discounts and sales:



Red is also the color of the holiday and gifts


However, the conversion button (buy, go) is not always marked in red on sites. Interesting, right? This color is preferred not to be used for important action, more precisely, not everyone uses it for this.

If we take new design YouTube then we see that a huge emphasis was placed on red (but many did not like this design):



Almost all important elements on YouTube are now in red.


You can immediately see what catches the eye and what the designers wanted to highlight. The "subscribe" button, the categories on the left, the registration button in YouTube and the login, as well as the logo.

In this case, conversions are red, but keep in mind that YouTube does not sell you a product, the task of the company (Google, Alphabet) is to keep you on the site as long as possible and watch a lot of videos in order to show you more ads. As a result, they want you to subscribe to channels that interest you and watch the best sections more often.

Also note such a moment, YouTube has one color scheme and will highlight everything in one color, then we will see that almost all large companies do this.

A vivid example of how YouTube tries to stand out and it turns out


At the same time, even on sites where red is the main color of the elements, too much of it is not added because the abundance of red strains the eyes and if the site has text, it is not very convenient to read for a long time, red elements are very distracting.

Therefore, blogs and info sites rarely use red elements.



Red also uses Coca-Cola, and the main competitor, Pepsi, uses blue.


Maybe you have not thought about it, but Cola stands out on the shelf of any store precisely due to the red color of the brand.



Blue color means first of all the sky and water. It is something huge, deep, calm and peaceful. At the same time, there is some kind of mystery and there is a slight fear of the majestic depth.

Blue color in psychology is a noble color, however, like red. Blue blood is called blue for a reason, it means aristocratic origin.

Blue rarely means any kind of call, so it does not cause a strong emotional reaction, unlike red, yellow and bright green. Blue is more the color of calmness, balance, but at the same time honesty and nobility.

The psychology of colors sometimes manifests itself in clothing. Remember who likes to wear blue and most likely they are calm and confident people, although there are exceptions.

Regarding the design, it was blue that was chosen by the largest social media- Vkontakte and Facebook (the former were stolen from the latter).



Facebook even makes paid conversions blue


At the same time, it is curious that Facebook also uses red for notifications, the priority here, of course, is with red.

I think that's why YouTube (or, for example, Alfa-Bank) chose red, when listing logos and brands, these companies stand out.

Please note that large companies generally use a maximum of 3 colors, rarely 4 (white, gray, black and one of the colors of the rainbow). It's pretty rare to have more than 3 colors of the rainbow on one site, but on the blogs of people with poor sense of taste, you will constantly see a bunch of colors and a continuous circus.



The blogger's alphabet retains one main color scheme


All colors close to blue have a similar meaning, while it is curious that the meaning changes depending on the proximity to another, thus mixing occurs.



classic color palette


For example, pink and purple are a compromise between red and blue, carrying the meanings of these two colors, but also others, already their own.

When answering the question of what colors mean in psychology, I concentrate on very basic things, without trying to invent any new meanings.

The whole interpretation of the meaning of color is only based on what people have been facing for many millennia - natural phenomena.



The other main classic color is green, but first a little digression.

In fact, there are only three primary colors, you can see even in the picture above, where you can see the color scheme, it says red, green and blue. In a computer, you can express any color in terms of these three colors, the rest are derivatives of them.

For example, absolutely red is 225 Red 0, Green, 0 Blue. But let's say yellow is if you unscrew red and green (225) to the maximum, while not connecting blue.

Also, in a computer, any color can be denoted using a code:



http://htmlcolorcodes.com/

The code in yellow will be #FCDE00, although this is more helpful for programmers, but sometimes it can be used in the design of a blog in HTML code.

So what does it mean green color in terms of color psychology and website design?

Green is the color of life and grass in the first place, it is the color of growth and nature. This is the color of nature. As for the color of growth, it’s rather ridiculous, in many ways it is because of this that money is painted everywhere in green.

It is believed that the green color also symbolizes youth and youth, but they heard when they say "he is still green" - it means young and inexperienced.

The old plant will no longer be green.


And if dark green (closer to black) is generally a rather difficult color with a heavy message, which in psychological terms means something like a dark forest at night (nothing good), then bright green is acidic, this is the color of madness.

And also it is the color of poison, bacteria, disease, microbes, radiation and acid.


There are quite a few sites that use dark or light green (whereas other shades of blue and red are perfectly acceptable), because green is generally a rather dull color, it is relaxing.



Exceptions - sites about ecology, wildlife and nature


Green color in terms of aggressiveness is the opposite of red, it is not aggressive at all, but on the contrary, it calms. Although bright green kills the brain.

In general, green design of sites can only be recommended for sites of certain topics: nature, ecology, animals, plants, etc.

Color as part of the brand

The color of a brand (often a logo) is an important thing for a brand. If we are talking about green, then banks have adopted it.




When choosing the main color for a website, logo or design, remember that your brand will be associated with color as well.



Tinkoff Bank chose yellow - as younger and more active


Alfa-Bank chose red.

Similar to mobile operators Bilan, Megafon, etc. If big company"captures" a color, it is more difficult for others to use the same color for their brand, as it will be associated with a larger company.

But even for small companies or websites - brands, it is useful to choose some color and make it the main one for yourself, in this way you create an additional bundle in the brain of customers and readers that you have not only a name (brand), but also a color.

Regarding the design of a site or a blog, you can add your color and logo in a lot of places, for example, it’s quite an interesting decision to add it to all pictures (if they are yours and unique), if you remember the ancient “demotivator” site, then it was the black frame of the pictures that was the hallmark brand.

Do not forget to make a recognizable and stylish favicon for the site, in Yandex it is visible in the search results, and on your site people will look at it.

However, the main thing is the color of the elements, headers and buttons. I think and apparently it is best to do all this in one color, as you can see from the article, this is exactly what many top companies and popular sites do. Although in principle you can try combinations of several primary colors, read on about this below.

The psychology of color is also used in advertising. This is easy to see if you look at the banners of different sites, they often try to make them bright and use blue, yellow, red and sometimes green. However, if done too brightly, then this indicates excessive obsession, which does not inspire confidence.



White and black are classic colors that don't always mean something. For sites, first of all, this is the color of the background and text, since they are as far from each other as possible in gamma, therefore black text on a white background is read best.

If we are talking about website design, then it is undesirable to make some buttons and interface elements black, they do it quite rarely. It will stand out too much since the text is also black. There are also sites where in general the entire background is black and the text is white. It might work, but it's extremely difficult to implement in style.

I remember the disgusting decision of sites about the Matrix to do something like this:




Some site designers pay too much attention to design and visuals, first of all, for many sites it is important that the text is easy to read and that the design does not irritate, and only then you can think about how to make the design stylish.

Let's get back to flowers.

White is, as it were, the absence of color at all on the one hand, and on the other, it is all colors at once. White is a very neutral color choice that says nothing, in many films about the future, people wear white clothes, which emphasizes development and purity, while it also emphasizes standardization and order.

A very similar situation with black, but black is also an elite color, but it is elite on the one hand, and on the other it is the same color of evil and bandits (like red). It is elite in terms of the fact that black is almost always stylish in any situation, as well as black packaging of goods can indicate that there is something expensive.

Wrap something expensive and serious in yellow will be rare.


A person’s favorite color can say something about his psychology, but if you are a webmaster or designer, first of all, you need to start not from your personal preferences, but from your needs. target audience or the customer. There are different cases and different sites, somewhere you need one design and color, somewhere else.


Yellow and orange are almost the brightest and most memorable colors, while they too bright. See? Don't you see? Here I am talking about the same. It’s also so hard to see here, since I didn’t mention another rule for choosing colors.

Choose colors next to each other as far as possible on color scheme. For example, black and white are great together. The same yellow is not so bad if the background is different.

For example this is how the yellow color is much more readable.

But it still strains his eyes too much.

Yellow color in psychology is activity and an obvious image - the sun and light, but although it warms, looking at it directly is dangerous for the eyes.

Very few sites use yellow, which is a risky decision. Using yellow, you immediately turn everything into a clowning and a circus. Plus, another problem - yellow on a white background is extremely ugly and very hard to read, as I said.

Although there are exceptions and good examples integration.



But here yellow is not text, but only some elements


And notice how this is combined with black (a superb color), quite good in this case. As if talking about activity and youth, but also style + something serious.

A similar situation with beeline. So yellow can also be used, but be careful. By the way, Beeline also combines yellow with black.



At the same time, at the bottom of the site, the bank has almost no yellow


With these colors it is important not to overdo it. As for gray, it's a great color on a white background to highlight secondary elements. Something to say or write, but it's more of a technical importance and it's not for everyone.

That's all with the main colors, such obvious things as pink are conditional female color and I did not consider the color of love, this is understandable. Purple in psychology, it means that a person is emotionally dependent on others and is looking for recognition, although they write so on some dubious sites and I don’t think so. I hope you enjoyed reading about the psychology of color in relation to website or blog design.

Top Related Articles