Absolute vs relative URLs in HTML - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to link to an absolute URL for Google.

HTML

<a href="[1]">Visit Google</a>

Drag options to blanks, or click blank then click option'

A/about.html

Bhttps://www.google.com

Ccontact.html

Dimages/logo.png

Attempts:

3 left

💡 Hint

Common Mistakes

Using a relative URL when an absolute URL is needed.

Forgetting to include https:// in the absolute URL.

An absolute URL includes the full web address starting with https://. Here, https://www.google.com is an absolute URL.

2fill in blank

medium

Complete the code to link to a relative URL for the about page in the same folder.

HTML

<a href="[1]">About Us</a>

Drag options to blanks, or click blank then click option'

Aabout.html

B/about.html

Chttps://example.com/about.html

Dhttp://about.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using a leading slash which points to the root folder.

Using an absolute URL when a relative URL is needed.

A relative URL like about.html points to a file in the same folder as the current page.

3fill in blank

hard

Fix the error in the relative URL to correctly link to the contact page in a subfolder named 'pages'.

HTML

<a href="[1]">Contact</a>

Drag options to blanks, or click blank then click option'

Apages/contact.html

B/pages/contact.html

Ccontact.html

Dhttp://pages/contact.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using a leading slash which points to the root instead of the subfolder.

Using an absolute URL when a relative URL is intended.

To link to a file inside a subfolder relative to the current page, use pages/contact.html without a leading slash.

4fill in blank

hard

Fill both blanks to create a link to the image 'logo.png' located in the 'assets' folder relative to the current page.

HTML

<img src="[1]/[2]" alt="Company Logo">

Drag options to blanks, or click blank then click option'

Aassets

Bimages

Clogo.png

Dlogo.jpg

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong folder name.

Using the wrong file extension.

The image is inside the 'assets' folder, so the path is assets/logo.png.

5fill in blank

hard

Fill all three blanks to create a link to the 'services.html' page located one folder up and inside the 'pages' folder.

HTML

<a href="[1]/[2]/[3]">Our Services</a>

Drag options to blanks, or click blank then click option'

A..

Bpages

Cservices.html

Dhome.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using too many or too few .. to go up folders.

Mixing up folder and file names.

To go one folder up into the 'pages' folder, use ../pages/services.html.