Overview

Introduction

Welcome to the Implementing Navigational Links - Part 3 Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

3.3 Construct and analyze markup that implements navigation

Lab Duration

It will take approximately 20 minutes to complete this lab.

Exercise 1 - Referencing HTML Files in Folder Hierarchies

In a real-time HTML website development process, it is a best practice to arrange the HTML files, external style sheets, and images in separate folders or directories. You need to provide the complete path in the HTML code if you want to access files from different folders.

Consider the sls workspace as an example. The sls folder is considered as the root folder. All the HTML files exist at the root folder.

The images and styles folder are sub folders within the sls folder. To facilitate navigation between the HTML pages, you have the horizontal navigational bar on all the pages with links to each page. The pages are referenced from the same directory using the tags. Therefore, in the path attribute of the tag, the root folder name is not explicitly mentioned.

However, the code scenario will change if the HTML files are saved in separate folders within the root folder. The folder existing at the next level within the root folder is known as the parent directory. The folder existing within the parent directory is known as the child directory. In the HTML code, you need to use “../” characters in the path to access files from the parent directory.

In this exercise, the first task will be to download the Visual Studio Code workspace from the Intranet and extract it.

In the second task, you will create a new folder named blogs in the sls workspace and transfer blog.html into it. The folder will become the parent directory for blog.html and child directory for index.html, aboutus.html, and courses.html. You will add code in blog.html to update the parent directory path in an external stylesheet, images, Home, About Us, and Courses links.

Lastly, in the third task, you will add code in index.html to update the child directory path in the Blog link.

Learning Outcomes

After completing this exercise, you will be able to:

Reference HTML files in the same directory, parent directory, and child directory

Comprehensive Learning

See the full benefits of our immersive learning experience with interactive courses and guided career paths.