Revealing the layers with View page source and Inspect

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which browser feature shows the raw HTML of a whole page?

A View page source

B Print preview

2. How do you open Inspect for one element on a webpage?

A Double-click the element and press Delete

B Right-click the element, then choose Inspect

3. What does Inspect show you about a chosen element?

A Its HTML and the CSS rules applied to it

B Only the photos stored on the web server

4. You edit a heading's text in Inspect. What happens?

A Only your local copy in the browser changes

B The real website changes for every visitor

5. You turn off a page's CSS in the browser. What do you see?

A A blank page with nothing on it

B The structure and content, with no styling

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1view-source:https://example.com		AEdits made in Inspect only change your own local copy in your browser. The real site stays the same, and your changes vanish when you refresh.
2Right-click > Inspect		BShows the raw HTML source code of the whole page, instead of the rendered page
3Edit a local copy of a page in the browser by changing its text in the Elements panel, without changing the real website		CView page source shows the whole page's HTML. Inspect is the tool that shows the HTML and CSS of one chosen element.
4Turn off CSS to see structure alone: untick a rule in the Styles panel, and the HTML content stays		D/* h1 { color: red; } */
5Inspect changes the real website for everyone		EOpens the developer tools on the element you clicked, showing its HTML and CSS
6View page source shows the CSS of one clicked element only		F<h1>My own heading</h1>

Definitions

Inspect

Fill in the Blanks

Complete each line of code by filling in the missing parts.

___________:https://example.com.au

<h1 _____="title">Surf Club</h1>

.title { _____: blue; }

https://_______________/web/2010/example.com

<link rel="__________" href="style.css">

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A <!DOCTYPE html>

B <html>

C <head><title>Shop</title></head>

D <body><h1>Sale</h1><body>

E </html>

Question 2

A h1 {

B color: navy;

C font-size = 32px;

D }

Question 3

A <head>

B <link src="style.css"

C rel="stylesheet">

D </head>

Question 4

A <style>

B #intro { color: red; }

C </style>

D <p class="intro">Hi</p>

Question 5

A <ul>

B <li>Home</li>

C <li>About</li>

D <li>Contact</ul>

E </ul>

Answer Key

Revealing the layers with View page source and Inspect

Section A: Quick Questions

A — View page source

B — Right-click the element, then choose Inspect

A — Its HTML and the CSS rules applied to it

A — Only your local copy in the browser changes

B — The structure and content, with no styling

Section B: Match the Pairs

view-source:https://example.com → Shows the raw HTML source code of the whole page, instead of the rendered page

Right-click > Inspect → Opens the developer tools on the element you clicked, showing its HTML and CSS

Edit a local copy of a page in the browser by changing its text in the Elements panel, without changing the real website → <h1>My own heading</h1>

Turn off CSS to see structure alone: untick a rule in the Styles panel, and the HTML content stays → /* h1 { color: red; } */

Inspect changes the real website for everyone → Edits made in Inspect only change your own local copy in your browser. The real site stays the same, and your changes vanish when you refresh.

View page source shows the CSS of one clicked element only → View page source shows the whole page's HTML. Inspect is the tool that shows the HTML and CSS of one chosen element.

Section C: Definitions

Inspect — Browser tool opened by right-clicking an element. It shows that element's HTML and CSS so you can explore a real site's layers. View page source shows the whole HTML.

Section D: Fill in the Blanks

view-source:https://example.com.au

<!-- Inspect shows the HTML below -->
<h1 class="title">Surf Club</h1>

.title {
  color: blue;
}

https://web.archive.org/web/2010/example.com

<!-- Delete this line to turn off CSS -->
<link rel="stylesheet" href="style.css">

Section E: Spot the Error

D — View page source shows the body must be closed with a closing tag. The second body needs a slash: </body>.

C — In the Styles panel of Inspect, each CSS declaration is property: value. It should use a colon, not an equals sign: font-size: 32px;

B — A link element points to its stylesheet with the href attribute, not src. Turning CSS off in the browser removes this file's styling. It should be href="style.css".

B — The paragraph uses class="intro", so the selector needs a dot, not a hash. A # targets an id. It should be .intro { color: red; }

D — Inspect shows each list item as its own element. The li opened here must be closed with </li>, not </ul>.