How to View The Source Code(HTML)
This is a quick guide to show you how to read website source code. All Internet browsers allow users to view the HTML source code of any of web page they visit. The following paragraphs contain information on the multiple ways to view the source code in browsers.
Web Page Source Code
The code under the hood of a web page is stuffed full of instructions telling the web browser how to display the web page. It consists of:
HTML:
HTML is the Hyper Text Markup Language created by Tim Berners-Lee and his team at CERN to be the underlying architecture of a web page. When you set something to be bold, instructions must be set in the web page to tell the browser to set the following text as bold. HTML tags wrap around the text to be bolded, and the styles add the visual emphasis such as this is bold. Look for bold on the web page’s code by searching for “strong.”
CSS:
CSS is Cascading Style Sheets, the instructions for HTML on how to paint and style the web page. Imagine CSS as the instructions that accompany a building project’s blueprints that tell the workers what size, shape, color, and materials they are to use for each part of the building.
JavaScript:
JavaScript is programming code. It is called dynamic computer programming language as it controls the actions of the web browser and creates actionable effects on a web page. JavaScript is everywhere within a WordPress site.
Microsoft Internet Explorer:
To view the source code of a web page in Microsoft Internet Explorer
follow the steps below.
Press CTRL + U on you computer's keyboard.
or
Open Internet Explorer and navigate to the web page of your choice.
Press the Alt key to bring up the browser's menu bar.
Select View, and the Source from the drop-down menu that appears.
Tip: With the latest versions of Internet Explorer, pressing the F12 key brings up the DOM tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.
Mozilla Firefox and Netscape:
To view the source code of a web page in Mozilla Firefox, follow the steps below.
Press CTRL + U on you computer's keyboard.
or
Open Mozilla Firefox and navigate to the web page of your choice.
Press the Alt key to bring up the browser's menu bar.
Select Tools, Web Developer, and then Page Source.
Tip: With the latest versions of Firefox, pressing the F12 key brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.
Google Chrome
To view the source code of a web page in Google Chrome, follow the steps below.
Press CTRL + U on you computer's keyboard.
or
Open Chrome and navigate the web page of your choice.
Click on Customize and control Google Chrome Chrome settings icon icon in the upper right-hand side of the browser window.
From the drop-down menu that appears, select More tools and then View source.
Tip: With the latest versions of Chrome, pressing the F12 key brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.
Opera Web Browser
To view the source code of a web page in Opera, follow the steps below.
Press CTRL + U on you computer's keyboard.
or
Open Opera and navigate to the web page of your choice.
Click the Customize and control Opera Opera Menu button button in the upper right-hand corner of the browser window.
From the drop-down menu that appears, move your mouse cursor over Developer and then click View page source.
Safari Web Browser
Press Command + Option + U on your keyboard.
or
Right-click a blank part of the web page and select Show page source from the drop-down menu that appears.
or
Open the Safari browser and navigate to the web page of your choice.
Select the Develop menu.
Choose the Show page source option.
