"Exploring the Power of Internal Hyperlinks in HTML

As I embark on my first website building journey, I am faced with a dilemma regarding internal links. While everything runs smoothly locally, none of the internal links seem to work once the site is live. Take for instance this internal link:

<a href ="file:///C:/Users/17249/OneDrive/Dive%20Platform/National%20Popular%20Vote.html">Read More</a>

I am aware of why this particular link doesn't function, but what can I do in place of it if the intended link does not exist yet? How exactly can I go about creating sub pages for my website?

Thank you in advance for your insights!

htmlcss

Answer №1

Here is a straightforward example: On the server, you can't use absolute paths, but you can use relative paths by using .. to go back to the parent directory or . to stay in the current directory when linking to the necessary file.

If you haven't created a page yet, you can leave it as #, like this: 

<a href="#">Click here</a>

https://i.sstatic.net/E3UBD.jpg

Answer №2

If you want to add relative links to your website, you can do so on each individual page. For example, let's say your site structure looks like this:

index.html  

category-a.html  
category-a/page1.html  
category-a/page2.html

category-b.html  
category-b/page1.html
category-b/page2.html

To create a link from index.html to category-a.html, use the following code: 
<a href="./category-a.html">category a</a>

For a link from category-a.html to category-a/page1.html, use this code: 
<a href="./category-a/page1.html">page 1 of category a</a>

And if you want a link from category-a/page1.html back to index.html, you would use:
<a href="../index.html">Home</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get both div tags within a single find_all function call in Beautiful Soup

Is there a way to extract multiple HTML div tags using a single "soup.find_all" function in beautifulSoup? The divs are labeled as "event odd" and "event even" on the webpage, and I want to iterate through all of them. Here is an example of the webpage co ...

pythonhtmlbeautifulsoup

Utilizing Ajax and Jquery to dynamically adjust CSS properties, dependent on data from a specific MySQL row

I've been working on a system to automatically update a Scene Selection page whenever a new number is added to the permission table in Mysql. The PHP for the login and retrieving the number from the members table is working fine. My issue now lies wi ...

phpjavascriptjqueryhtmlajax

I'm having trouble extracting text from the HTML code for an unknown reason

My code seems to be working well until I attempt to use the .text function, resulting in an error message stating "list' object has no attribute 'text". Interestingly, when I apply .text to a single element within the same list, it works without ...

pythonhtmlseleniumweb-scrapingbots

Use JavaScript to generate an HTML element that has an attribute mirroring its text content

Trying to figure out how to create an HTML element similar to this: <option value="Replaced">by this</option> For example: <option value="ThisIsTest">ThisIsTest</option> UPDATE Using jQuery, I need to achieve something like thi ...

javascriptjqueryhtml

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack

What is the purpose of the assertEquals() method in JSUnit?

Currently, I am exploring unit test exercises with a HTML5/JS game that I created and JSUnit test runner. The simplicity of the setup impresses me, but I have noticed that even the documentation lacks a clear explanation of what assertEquals() truly does. ...

javascripthtmlunit-testingassertionsjsunit

What steps should I take to resolve the problem while in Quirks mode?

My current design includes an element with a width of 200px, along with left and right padding of 100px each. However, I have observed that in IE7, IE8, and Firefox 4, the padding is being added to the total width of the element. On the other hand, in IE ...

htmlcss

What is the best way to implement a sub-menu using jQuery?

After successfully implementing a hover effect on my menu item using CSS, I am now struggling to make the sub-menu appear below the menu item upon hovering. Despite my efforts to search for jQuery solutions online, I have not been successful. Are there a ...

javascriptjqueryhtmlcss

Menu bar placed atop a carousel

I am currently in the process of developing a website and I have encountered an issue with the navigation bar. I have a slider that I would like to appear below the navbar but the navbar is pushing it down instead. Ideally, I want the navbar to be transpar ...

htmlcssnavbarbootstrap-4

What is the trick to getting an accordion to expand when hovering, rather than when clicking?

Can the accordion be set to expand when hovering instead of clicking? Also, how can a different action be triggered on click? LATEST I was specifically referring to using the jQuery UI accordion widget for this functionality. ...

javascriptjqueryhtmljquery-uiaccordion

Adding multiple styles using ngStyle is currently not possible

When using ngStyle to add height and width styles to an img element, I encountered a strange issue: <img class="image-full-view" [ngStyle]="{'height': selectedImage.heightSize, 'width': selectedImage.widthSize}" [src]="selectedImage ...

cssangular

Does this extensive combination of pseudo classes hold true?

Here's the code snippet I am working with: .fontmenu .fontlist{ position: absolute; bottom:30px; display:none; } .fontbutton button:hover .fontmenu .fontlist{ display:block; } <div class="fontmenu"> ...

htmlcsscss-selectorshoverpseudo-class

Optimal method for retrieving data in JSON format

Hey everyone, I've been using Ajax to modify a div on my website. I have a function that works perfectly, but I'm having trouble retrieving the value it returns. updatecart = function(qty, id_product) { var currentVal, data, id, item_hash, ...

jqueryhtmljsonwoocommerce

Animate CSS every quarter of a minute

Is it possible to create an animation that runs infinitely every 15 seconds in the sequence 1, 2, 3, 4, 3, 2, 1 with different delays for each item using CSS? The animation delay seems to only work on the first iteration. Achieving this effect is easy wi ...

htmlcssanimation

Issue with IE6: Div inside Anchor element causing inline images to not be clickable links

I am currently facing an issue where I need everything within the anchor tag to be a clickable link, but in IE6 (the only browser I am concerned about at the moment), the inline images are not clickable. I understand that it is not valid HTML to place a di ...

htmlcssinternet-explorerinternet-explorer-6

An example of using quotes within quotes is an HTML tag embedded within JavaScript code

Currently, I'm working on a JavaScript code where clicking assigns the function getImage the source of an image to be displayed later on the page. The issue I'm facing revolves around dealing with quotation marks. <img src="bill.jpg" class=" ...

javascripthtml

Tips for showcasing the individual product page in full width on woocommerce

Here is a link to the single product page: I am wondering if it's possible to extend the product summary drop-down menus all the way to the right without impacting the mobile site? Thank you. ...

phphtmlcsswordpresswoocommerce

Ways to showcase your style using Bootstrap

Can you help me figure out how to align this sidebar properly? I tried using the d-flex property but it doesn't seem to be working for me. The sidebar should be on the left side and the two containers should be centered. For a clearer explanation, pl ...

htmlcssbootstrap-5

Setting various font sizes for a single element

I'm looking to enhance my text by incorporating an embedded font in addition to Arial as a backup option. However, the embedded font requires a larger font size compared to Arial. Is there a way to ensure that when displaying the same text element, A ...

htmlcss

Seamless movements to the exact midpoint

I am trying to find a method to create a smooth transition when removing the center class from p.title.class, allowing it to smoothly move to its new position. JSfiddle Here is an excerpt of my HTML: <body> <div class="wrapper-top"> ...

jqueryhtmlcss