Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to link back out of a folder using the a-href tag?
Sometimes, the task is to fetch a page from a subfolder and then to come back to the page in the parent folder. Using HTML code this process of providing a link to back out of a folder using a tags and href tags is demonstrated in this article. This is shown by using two different examples. In the first example, a text link with a relative path is used for coming back to the page of parent folder. In the second example, <a> tag with the SVG link is used to back out of a folder. In this second example an absolute path is used.
Example 1: Using a text link with a relative path for coming back to the page in the parent folder
Folder and Pages Design Steps −
Step 1 − Make a folder called FolderRef. This will be called the parent folder.
Step 2 − Make a folder called FolderOne inside the FolderRef. This will be called the subfolder
Step 3 − Make an html file inside the FoderRef. Name the file as parentFolderFile.
Step 4 − Make an html file inside the FoderOne. Name the file as subFolderFile. Use the relative path in the href inside the anchor tag.
Step 5 − Write the HTML code in parentFolderFile and subFolderFile as shown below.
Step 6 − Open the parentFolderFile.html in a browser and click the link to go to the subFolderFile. Now click the link in the subFolderFile to come back to the parent folder and the page stored there. Check the result.
The folders and files used here −
Parent folder: FolderRef
Sub folder: FolderOne
File inside FolderRef parentFolderFile.html
File inside FolderOne subFolderFile.html
Code For parentFolderFile.html:
<!DOCTYPE html>
<html>
<head>
<title>Demo for Coming Back to This folder</title>
</head>
<body>
<h2>Go to the page in sub folder now</h2>
<a href="https://www.tutorialspoint.com/index.htm">GoToChildFolderPage</a>
</body>
</html>
Code For subFolderFile.html
<!DOCTYPE html>
<html>
<head>
<title>Demo for Going To Back folder</title>
</head>
<body>
<h1>Going to the parent folder from here...</h1>
<a href="https://www.tutorialspoint.com/index.htm">GoBackToParentFolder <a/>
</body>
</html>
Viewing The Result
For seeing the result open the parentFolderFile.html in a browser. Now click the link to go to HTML file in the subfolder. Come to the back page in the parent folder by clicking the link in the subfolder file.
Example 2: Using an SVG Image link with an absolute for coming back to the page in the parent folder
Folder and Pages Design Steps −
Step 1 − Make a folder called FolderRef. This will be called the parent folder.
Step 2 − Make a folder called FolderTwo inside the FolderRef. This will be called the subfolder
Step 3 − Make an html file inside the FoderRef. Name the file as parentFolderImgPage.
Step 4 − Make an html file inside the FoderTwo. Name the file as subFolderImgFile. Use the absolute path in the href inside the anchor tag with SVG Image.
Step 5 − Write the HTML code in parentFolderImgPage and subFolderImgFile as shown
Step 6 − Open the parentFolderImgPage.html in a browser and click the Image link to go to the subFolderImgFile. Now click the Image link in the subFolderImgFile to come back to the parent folder and the page stored there. Check the result.
The folders and files used here −
Parent folder: FolderRef
Sub folder: FolderTwo
File inside FolderRef : parentFolderImgPage.html
File inside FolderTwo : subFolderImgFile.html
Code For parentFolderImgPage.html
<!DOCTYPE html>
<html>
<head>
<title>Demo for Coming Back to This folder</title>
</head>
<body>
<h2>Click the blue circle and go to the page in sub folder now</h2>
<svg width="4cm" height="4cm" viewBox="0 0 6 6">
<a href="https://www.tutorialspoint.com/index.htm">
<ellipse cx="2" cy="2" rx="1.5" ry="1.5" fill="blue" />
</a>
</svg>
</body>
</html>
Code For subFolderImgFile.html
<!DOCTYPE html> <html> <head> <title>Demo for Going To Back folder</title> </head> <body> <h1>Going to the parent folder from here...</h1> <h2>Click the red circle and go to the page in parent folder now</h2> <svg width="4cm" height="4cm" viewBox="0 0 6 6"> <a href="https://www.tutorialspoint.com/index.htm"> <ellipse cx="2" cy="2" rx="1.5" ry="1.5"fill="red" /> </a> </svg> <a/> </body> </html>
Viewing The Result
For seeing the result open the parentFolderImgPage.html in a browser. Now click the circle image to go to the HTML file in the subfolder. Come to the back page in the parent folder by clicking the circle on the subfolder page.
In this HTML a-href article, using two different examples, the ways to show how to back out of a folder containing an HTML file and go to the page in the parent folder are shown. First, the method is given where the text links are used with relative path references and then the way of using image links and absolute paths is given.
907 Views
To Continue Learning Please Login