Whether you are new to the web industry or a seasoned veteran, HTML source view different web pages is something you will probably do many times during your career.
For those who are not familiar with web design, viewing the source code of a site is one of the easiest ways to see how certain actions are performed so that you can learn from that work and start using certain code or techniques in your work.
Like any web designer working today, especially those who have been doing it since their early days in the industry, it’s safe to say they’ll say they’ve learned HTML just by looking at the source of the web pages they’ve seen and been intrigued. on. Besides reading web design books or attending professional conferences, browsing the source code of a site is a great way for beginners to learn HTML.
More than just HTML
It should be remembered that source files can be very complex (and the more complex the website you’re viewing, the more complex that site’s code can be). In addition to HTML structure which makes up the page being viewed, will also be CSS (Cascading Style Sheets), that define the look and feel of this site. Also, many websites today will include script files included with the HTML.
You will most likely include several script files, each containing different aspects of the site. To be honest, the site’s source code can be overwhelming, especially if you’re new to it. Don’t be discouraged if you can’t immediately figure out what’s going on with this site. View HTML source code is only the first step in this process. With a bit of experience, you’ll begin to better understand how all of these pieces fit together to create the website you see in your browser. As you become more familiar with the code, you will be able to learn more from it without feeling so intimidating.
So how do you view the source code of a site? Below are the step by step instructions for doing this using the Google Chrome browser.
Step by step instructions
-
open Google Chrome web browser (if you don’t have Google Chrome it’s a free download).
-
Go to web page you would like to explore .
-
Right click page and look at the menu that appears. From this menu select View page source .
-
The source code for this page will now appear as a new tab in the browser.
-
In addition, you can also use keyboard shortcuts CTRL+U on a PC to open a window with the source code of the site. On a Mac, this is the keyboard shortcut Command+Option+U .
Developer Tools
In addition to the simple possibility viewing page sources, offered by Google Chrome, you can also take advantage of their excellent developer tools, to get deeper into the site. These tools will allow you to see not only the HTML, but also the CSS that is being applied to view elements in this HTML document.
To use the Chrome Developer Tools:
-
open Google Chrome .
-
Navigate to the web page you would like to explore .
-
Click three-dot menu in the upper right corner of the browser window.
-
In the menu, hover your mouse over Additional Tools and then select » Developer Tools» in the menu that appears.
-
A window will open with the HTML source code to the left of the panel and the corresponding CSS to the right.
-
Or if you right click by element on a web page and choose Inspect in the menu that appears, the Chrome Developer Tools will appear and the element you selected will be highlighted in HTML with the appropriate CSS shown on the right. This is very useful if you want to know more about how one particular piece of the site was created.
You can also use keyboard shortcuts: F12 or Ctrl + Shift + I on Windows and Option + Command + I on Mac.