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 the browser Google 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 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 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
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(preferably Notepad++) and save with the html extension. Thus, at any time you can study it deeper and find more useful information for yourself.
1 voteGood 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 codeMy 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 strength 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 codeSo, 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.
Most The best wayThe 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 ChromeAs 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.
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.
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.
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.
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 it, paste this code into a new one html file, into the body tag (body in English).
Now let's see how it all will 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 full 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!
Ctrl + U How to 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 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 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 fragment. 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. We right-click on the link we are interested in 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.
Beneath all the beautiful images, perfect typography, and wonderfully placed calls to action, is your site's source code.
Every day, your browser turns this code into impressive pages for your visitors and clients.
Google and other search engines "read" this code to determine where your web pages should appear in their indexes for a given search query.
Therefore, it is very important for search engine optimization(SEO) has what is in the source code.
This quick guide will show you how to read your site's source code so you can be sure your SEO is correct and teach you how to check your SEO terms.
We'll also look at a few other situations where knowing how to view and examine major parts of the source code will help in other marketing efforts.
How to view the source code.The first step in checking your site's source code is to look at the actual source code. Any web browser allows you to do this easily.
Below are the keyboard commands for viewing the source code of your web page for PC and Mac.
- Firefox - CTRL + U (Hold down the CTRL key and press the "U" key) Alternatively, you can go to the "Firefox" menu, then click "Web Developer" and then "Page Source".
- Internet Explorer- CTRL + U. Or right-click and select "View Source".
- Chrome - CTRL + U. You can click on the image of the key with three horizontal lines in the upper right corner. Then click on "Tools" and select "View Source".
- Opera - CTRL + U. You can also right-click on a web page and select "View Page Source."
Mac
- Safari - The keyboard shortcut is Option + Command + U. You can also right-click on the web page and select Show Page Source.
- Firefox - You can right-click and select "source" or you can navigate to the "Tools" menu, select "Web Developer," and click "Page Source." Combination Ctrl keys+U.
- Chrome - Go to "View", then click "developer" and then "View Source". You can also right-click and select "View Page Source." The keyboard shortcut is Option + Command + U.
Once you know how to view source code, you should know how to search it.
Typically, the same search features you use when browsing the web normally apply to source searches as well.
The commands CTRL + F (find) will help you quickly view the source code of important SEO elements.
Title tags.The title tag is the most important element of SEO. This is the most important thing in the source code.
If you're going to take just one thing of value from this article, consider this:
You know, these are the results Google provides when you search for something.
All these results are taken from the title tags of the web pages. So if you don't have title tags in your source code, you may not show up in Google (or any other search engine).
Believe it or not, I have actually seen websites without title tags. Let's try to do quick search on Google for the term "Marketing Guides". What we see: 
You can see the first search result for the KISSmetrics blog is the Marketing Guides section.
If we follow the link of the first search result and view the source code of the page, we can see the tag in the title: 
The title tag is indicated by the opening tag: . and ends with the closing tag: . The title tag is usually located at the top of the source code in the .
And we can see that the content inside the title tag matches what is used in the result title Google search.
But it's not just title tags that are needed to be included in Google search results.
Google also identifies words in title tags as important keywords that it believes are relevant to users' searches.
So if you want to get a certain web page ranking for a specific topic, then you better make sure that the words that describe the subject are included in the title tag.
There are a number of online resources where you can learn more about how keywords and title tags play an important role in the overall architecture of your site.
Here are some important points that will allow you to remember the importance of your Title Tags:
- Make sure you only have one title tag per web page.
- Make sure that every web page on your site has its own title tag.
- Make sure every title tag on your site is unique. Never duplicate the content of a specific title tag.
The next important element at the head of your web page is the meta description tag.
This is a 160 character snippet of your content that appears under your title in search engines.
I've seen hundreds of sites that completely ignore this tag. It's very easy to find in the source code:
So, check and make sure that this tag is present on all the web pages of your site. More importantly, make sure you don't duplicate it across multiple pages.
Duplicating the meta description tag is not a penalty for the search engine, but it is a very big marketing mistake.
Many people ignore the meta description tag, but you really should work on it because it gets read search engine.
Think about how a meta description tag will help attract more visitors and increase targeted conversions to your site.
The article will discuss the basic principles of encryption and packaging, weak points of protection, methods of manual removal, as well as universal tools For automatic removal packers and padding protection from JavaScript scripts.
Recently, increasingly, the source code of scripts is encrypted or packaged. Yandex, DLE and other popular projects began to get carried away with this, and beautiful stories about “taking care of users”, “saving traffic” and other nonsense look very funny. Well, if someone has something to hide, then our task is to bring them to light.
Let's start with the theory. Due to the peculiarities of JavaScript execution, all encryptors and packers, despite their diversity, have only two variants of the algorithm:
Var encrypted="encrypted data";
function decrypt(str) (
}
// Execute the decrypted script
eval(decrypt(encrypted));
or alternatively:
var encrypted="encrypted data";
function decrypt(str) (
// decryption or unpacking function
}
// Display decrypted data
document.write(decrypt(encrypted));
The second method is most often used to protect the source html code of the page, and also by various Trojans to introduce malicious code, such as a hidden frame, into the page. Both algorithms can be combined, the “sophistication” and complexity of the decryptor can be anything, only the principle itself remains unchanged.
In both cases, it turns out that the eval() and document.write() functions are passed fully decrypted data. How to intercept them? Try replacing eval() with alert() , and in the opened MessageBox you will immediately see the decrypted text. Some browsers allow you to copy text from MessageBoxes, but it is better to use this semi-automatic decoder:
JavaScript Decoder
// Function for writing decryption results to the log
function decoder(str) (
document.getElementById("decoded").value+=str+"\n";
}
For example, let's take some script from Yandex; after looking at the source code, we see something unhealthy:
eval(function(p,a,c,k,e,r)(e=function(c)(return(c35?String.fromCharCode(c+29):c.toString(36)));if(!
"".replace(/^/,String))(while(c--)r=k[c]||e(c);k=)];e=function())(return"\w+"); c=1);while(c--)if(k[c])
p=p.replace(new RegExp("\b"+e(c)+"\b","g"),k[c]);return p)("$.1e
.18=8(j)(3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j ["6-L-17"]
||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6 -9").Z("7",8(
)(3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g -4");$(5).16(
$(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2 (".b-12");
[the rest of the same nonsense is cut off]
I’ll say right away that this script is processed by JavaScript Compressor, it is easy to recognize by its signature - the characteristic name of the function at the beginning of the script. We copy the entire source text of the script, replace the first eval with decoder , paste it into the decoder and save it as an html page.
// Paste the encrypted script here, first
// replace all calls to eval() and document.write() with decoder().
decoder(function(p,a,c,k,e,r)(e=function(c)(return(cQAPKRV%22NCLEWCEG? HctcQa ...
hp_d01(unescape(">`mf(%22`eamnmp? !DDDDDD %22v ...
For convenience, the scripts are not given in full in this article; you must copy them in their entirety. We open the decoder in the browser and see the security scripts added by the program and the decrypted source text of the page. For convenience, you can decrypt only the third script, which contains the html code of the page. That's all the protection is. As you can see, nothing complicated. Other protections for HTML pages are removed in the same way.
Let's move on from manual decryption to automatic decryption. To remove the first type of protection, I slightly modified the Beautify Javascript script already known to you and compiled it into an exe file. It handles most JavaScript protections and wrappers I've seen without any problems.
Eval JavaScript Unpacker 1.1
Eval.JavaScript.Unpacker.1.1-PCL.zip (12,073 bytes)
For more difficult cases, you will have to use heavy artillery. This is a free Malzilla project designed to research Trojans and other malicious code. Since all programs designed to protect copyright are clearly malicious, Malzilla will help us in the fight against them. Download latest version(today it is 1.2.0), unpack it, run it. Open the second Decoder tab, paste the encrypted script code into the top window, and press the Run script button.
It has fewer functions, but it has a place to be. From the offsite you can download a demo video showing an example of working with the program.
As you can see, there is nothing difficult in removing protection from JavaScript scripts and html pages. Are you still continuing to defend your vile "author's rights"? Then we go to you!
