W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

Firefox Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

5. Page Source in Firefox, Tutorial

Share it

Display and read the Source of a Web Page

When clicking on the Page Source option from Web Developer (Tools menu), the Source of the current web page displays.

The source code that is displayed when accessing the Page Source cannot be modified.

  1. Open ⁄ Close:
    • Tools »Web Developer »Page Source
    • shortcut: CTRL + U
    • right click on the page: View Page Source
  2. Usage: learn to correlate the tags from the Page Source with the elements that display in browser's window

Video demonstration Firefox: Display Web Page Source

5. Page Source in Firefox, Tutorial

min video details
00:22 OPEN ⁄CLOSE Page Source:
00:22 view Page Source -Tools menu
00:32 close Page Source -click on 'x'
00:35 view Page Source -shortcut
00:40 view Page Source -right click on the page-View Page Source
00:47 MAKE USE of the Page Source:
00:47 correlate elements from web page with the HTML tags from Source Code, helps understanding how a website has been built
01:35 Example: 'Image Gallery' is a linked text which will take us to a new html page called 'image_gallery.html' once we click on it
01:46 clicking on the URL of a web page inside Page Source results in displaying the Page Source of that page
02:09 see green rectangle (div element) below 'Image Gallery': we will dynamically add ⁄change the border using 2 javascript functions, each function being attached to an event attribute:
function 'addborder()' attached to 'onMouseOver' event attribute,
function 'changeborder()' attached to 'onMouseOut' event attribute
03:28 the 3rd list item of the unordered list holds a class called 'colorblue'
03:34 attaching the next css rule to this class: 'color:#3399cc;'; the color of the text 'Earth' is blue because of this rule
04:10 Page info-Tools - Media tab holds information about media elements from that web page