Failure to Link Different Files Using HTML Links

Question

Failure to Link Different Files Using HTML Links

Organizing the different pages of my website, I initially stored HTML files in a folder called X, with index.html, main.html, and other pages. To streamline access, I decided to separate the articles into folders A, B, and C within folder X. However, this led to issues with linking between the article pages as well as from the main pages to the articles.

For a clearer visualization of my problem, refer to the image below:

        <a class="active" href="Index.html" target="_blank">Home</a>
        <a href="#" target="_blank">Anime Stuff</a>
        <a href="Youtube.html" target="_blank">YouTube</a>
        <a href="Contact Me.html" target="_blank">Know Me</a>

https://i.sstatic.net/Ogeu3.png

javascript html css

Answer 1

Answer №1

Assuming that 'X' is your primary directory, any files located within it can be accessed as shown below:

<a href="./index.html">Index</a>
<a href="./contact.html">Contact</a>
<a href="./MainContent.html">Main Content</a>

For directories A, B, and C which are subdirectories of X, files can be accessed in the following manner:

For Directory A:

<a href="./A/index.html">Index</a>

For Directory B:

<a href="./B/index.html">Index</a>

For Directory C:

<a href="./C/index.html">Index</a>

Answer 2

Assuming that 'X' is your primary directory, any files located within it can be accessed as shown below:

<a href="./index.html">Index</a>
<a href="./contact.html">Contact</a>
<a href="./MainContent.html">Main Content</a>

For directories A, B, and C which are subdirectories of X, files can be accessed in the following manner:

For Directory A:

<a href="./A/index.html">Index</a>

For Directory B:

<a href="./B/index.html">Index</a>

For Directory C:

<a href="./C/index.html">Index</a>

Answer 3

Answer №2

Linking to Pages Within the Same Project Directory

For instance:

main-folder/
|—— home.html
|—— about.html
|—— contact.html

<a href="./about.html">About Us</a>

Answer 4

Linking to Pages Within the Same Project Directory

For instance:

main-folder/
|—— home.html
|—— about.html
|—— contact.html

<a href="./about.html">About Us</a>

Answer 5

Answer №3

One efficient way to create links between these pages is by using URLs that are relative to your document root. For more information, you can refer to the discussion on Absolute vs relative URLs. By starting each URL with / (thus making them relative to the document root), navigation becomes much smoother.

For instance, imagine your Project Money directory as the document root, and let's assume it is accessed at . In this case, simply visiting or will lead you to the homepage. Similarly, accessing will direct you to the contact page, while will take you to the YouTube page. And for subdirectories, navigating to will bring up the article1.html page within the A directory.

To link to the article1.html page from anywhere else, you would use /A/article1.html as the href value. Similarly, linking back to the homepage from any location can be done using /index.html. Employing URLs relative to the document root ensures a cleaner method of linking pages compared to basing them on the current path (./A/article1.html, ./article1.html, article1.html, ../index.html, etc). Additional examples and resources can also be found in this post.

Answer 6

One efficient way to create links between these pages is by using URLs that are relative to your document root. For more information, you can refer to the discussion on Absolute vs relative URLs. By starting each URL with / (thus making them relative to the document root), navigation becomes much smoother.

For instance, imagine your Project Money directory as the document root, and let's assume it is accessed at . In this case, simply visiting or will lead you to the homepage. Similarly, accessing will direct you to the contact page, while will take you to the YouTube page. And for subdirectories, navigating to will bring up the article1.html page within the A directory.

To link to the article1.html page from anywhere else, you would use /A/article1.html as the href value. Similarly, linking back to the homepage from any location can be done using /index.html. Employing URLs relative to the document root ensures a cleaner method of linking pages compared to basing them on the current path (./A/article1.html, ./article1.html, article1.html, ../index.html, etc). Additional examples and resources can also be found in this post.

Failure to Link Different Files Using HTML Links

Answer №1

Answer №2

Answer №3

Similar questions

Tips for aligning the navigation bar, main content, and footer in the center

Issue with interactions between datepicker and jQuery dialog box

How can I speed up the loading time of my background image?

The HTML5 audio player is experiencing technical difficulties on Internet Explorer

"Discover the power of regular expressions in manipulating YouTube shorts URLs using

Resultant vector

What is the best way to position two divs side by side while maintaining their individual padding?

Failure to launch mail client from mailto attribute

Javascript functions triggering repeatedly

Locate the parent element using a unique child element, then interact with a different child element

Updating the logic for reconnection when the connection is closed in MySql's X DevAPI can be achieved by utilizing the @mysql/xdevapi module

displaying text next to an HTML image link on iOS devices

Babel failing to transpile source code of npm link/symlink package

Ways to verify if fields within an Embedded Document are either null or contain data in Node.js and Mongodb

Can you explain the concept of Cross-origin requests?

Webpack 5 is unable to load animated gif files

Reducing image size using CSS can result in blurry images on multiple web browsers

Toggle the tooltip to reveal a hidden div by clicking, and then click again to close it

Guide on displaying applicant name in the show route of your node.js/mongoDB application

Cannot work on repl.it; it seems to be incompatible with the freeCodeCamp - JavaScript Algorithms and Data Structures Projects: Roman Numeral Converter