How To View the HTML Source in Google Chrome

Whether you are new to the web industry or a seasoned veteran, viewing the HTML source of different web pages is something you are likely to do many times over the course of your career.

For those new to web design and looking to learn, viewing a site's source code is one of the easiest ways to get started down that path. If you see something on a website and want to know how it was done, viewing the source is one way to do so.

 

Over the years, many web professionals have learned HTML simply by viewing the source of the web pages that they saw and were intrigued by. In addition to reading web design books or attending professional conferences, viewing a site's source code is a great way for beginners to learn HTML.

MORE THAN JUST HTML

One thing to remember is that source files can be very complicated (and the more complex the website you are viewing is, the more complex that site's code is likely to be). In addition to the HTML structure that makes up the page you are viewing, there will also be CSS (cascading style sheets) that dictate the visual appearance of that site as well as script files included along with the HTML. Don’t get frustrated if you can’t figure out what’s going on with that site immediately. Viewing the HTML source is just the first step in this process. With a little experience, you will begin to better understand how all these pieces fit together to create the website that you see in your browser.

 

 

STEP BY STEP INSTRUCTIONS

  1. Open the Google Chrome web browser (if you do not have Google Chrome installed, this is a free download)
  2. Navigate to the web page you would like to examine
  3. Right click the page and look at the menu that appears. From that menu, click "View page source".
  4. The source code for that page will now appear
 
  1. Alternatively, you can also use the keyboard shortcuts of CTRL + U on a PC to open a window with a site's source code displayed. On a Mac, this shortcut is Command + Alt + U.

 

DEVELOPER TOOLS

In addition to the simple "View page source" ability that Google Chrome offers, you can also take advantage of their excellent Developer Tools to dig even deeper into a site. These tools will allow you to not only see the HTML, but also the CSS that applies to view elements in that HTML document.

To use Chrome's developer tools:

  1. Open Google Chrome
  2. Navigate to the web page you would like to examine
  3. Click the icon with three lines in the upper right corner of the browser window
  4. From the menu, hover over "More tools" and then click "Developer tools"
  5. This will open a window that show the HTML source code on the left of the pane and the related CSS on the right.
  6. Alternatively, if you right click an element in a web page and select "Inspect" from the menu that appears, Chrome's developer tools will pop up and the exact element you have selected will be highlighted in the HTML with the corresponding CSS shown to the right.

IS VIEWING SOURCE CODE LEGAL?

Over the years, I have had many new web designers question whether it is acceptable to view a site's source code and use it in their education and work.

While copying a site's code wholesale and passing it off as your own on a site is certainly not acceptable, using that code as a springboard to learn from is actually how many advancements are made in this industry. In fact, you would be hard pressed to find a working web professional today who has not learned something by viewing a site's source!

In the end, web professionals learn from each other and often improve upon the work that they see and are inspired by, so do not hesitate to view a site's source code and use it as a learning tool.

 

(From thoughtgo)

转载于:https://www.cnblogs.com/empist/p/7099136.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值