5. Page Source in Firefox, Tutorial
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.
- Open ⁄ Close:
- Tools »Web Developer »Page Source
- shortcut: CTRL + U
- right click on the page: View Page Source
- 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 |